Merge branch 're-structure-project' into DEPLOY-front-end

elarsaks · Jul 28, 2023 · eea186e · eea186e
2 parents 302c95b + a870793
commit eea186e
Showing 1 changed file with 25 additions and 20 deletions.
diff --git a/react_dashboard/src/components/layout/Background.tsx b/react_dashboard/src/components/layout/Background.tsx
@@ -22,34 +22,39 @@ const BackgroundComponent: React.FC = () => {
     const context = canvas.getContext("2d");
     if (!context) return;
 
-    // Set the canvas size to match the window
+    const squareSize = 25;
+    let numSquaresX: number, numSquaresY: number;
+
+    const drawSquares = () => {
+      context.clearRect(0, 0, canvas.width, canvas.height); // Clear previous squares
+
+      numSquaresX = Math.ceil(canvas.width / squareSize);
+      numSquaresY = Math.ceil(canvas.height / squareSize);
+
+      for (let x = 0; x < numSquaresX; x++) {
+        for (let y = 0; y < numSquaresY; y++) {
+          const posX = x * squareSize;
+          const posY = y * squareSize;
+
+          context.fillStyle = "#FFFFFF"; // Square color
+          context.fillRect(posX, posY, squareSize, squareSize);
+
+          context.strokeStyle = "rgba(173, 216, 230, 0.2)"; // Border color with transparency
+          context.lineWidth = 1;
+          context.strokeRect(posX, posY, squareSize, squareSize);
+        }
+      }
+    };
+
     const resizeCanvas = () => {
       canvas.width = window.innerWidth;
       canvas.height = window.innerHeight;
+      drawSquares();
     };
 
     window.addEventListener("resize", resizeCanvas);
     resizeCanvas();
 
-    // Draw squares in the background
-    const squareSize = 25;
-    const numSquaresX = Math.ceil(canvas.width / squareSize);
-    const numSquaresY = Math.ceil(canvas.height / squareSize);
-
-    for (let x = 0; x < numSquaresX; x++) {
-      for (let y = 0; y < numSquaresY; y++) {
-        const posX = x * squareSize;
-        const posY = y * squareSize;
-
-        context.fillStyle = "#FFFFFF"; // Square color
-        context.fillRect(posX, posY, squareSize, squareSize);
-
-        context.strokeStyle = "rgba(173, 216, 230, 0.2)"; // Border color with transparency
-        context.lineWidth = 1;
-        context.strokeRect(posX, posY, squareSize, squareSize);
-      }
-    }
-
     return () => {
       window.removeEventListener("resize", resizeCanvas);
     };