From 1f5639680d1cbbcea5c14be6f88293d49d84b18f Mon Sep 17 00:00:00 2001
From: ale <ale@manalejandro.com>
Date: Wed, 12 Nov 2025 18:03:52 +0100
Subject: [PATCH] responsive mobile

Signed-off-by: ale <ale@manalejandro.com>
---
 components/GameBoard.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/GameBoard.tsx b/components/GameBoard.tsx
index ac514e9..816dd99 100644
--- a/components/GameBoard.tsx
+++ b/components/GameBoard.tsx
@@ -38,9 +38,9 @@ export function GameBoard({ placedTiles, width = 1200, height = 700, className =
   // Auto-center the board on first tile
   useEffect(() => {
     if (placedTiles.length === 1 && offset.x === 0 && offset.y === 0) {
-      setOffset({ x: width / 2 - 400, y: height / 2 - 300 });
+      setOffset({ x: canvasSize.width / 2 - 400, y: canvasSize.height / 2 - 300 });
     }
-  }, [placedTiles.length, width, height, offset]);
+  }, [placedTiles.length, canvasSize.width, canvasSize.height, offset]);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -50,25 +50,25 @@ export function GameBoard({ placedTiles, width = 1200, height = 700, className =
     if (!ctx) return;
 
     // Clear canvas
-    ctx.clearRect(0, 0, width, height);
+    ctx.clearRect(0, 0, canvasSize.width, canvasSize.height);
 
     // Draw background pattern
     ctx.fillStyle = '#f3f4f6';
-    ctx.fillRect(0, 0, width, height);
+    ctx.fillRect(0, 0, canvasSize.width, canvasSize.height);
     
     // Draw grid pattern
     ctx.strokeStyle = '#e5e7eb';
     ctx.lineWidth = 1;
-    for (let x = 0; x < width; x += 40) {
+    for (let x = 0; x < canvasSize.width; x += 40) {
       ctx.beginPath();
       ctx.moveTo(x, 0);
-      ctx.lineTo(x, height);
+      ctx.lineTo(x, canvasSize.height);
       ctx.stroke();
     }
-    for (let y = 0; y < height; y += 40) {
+    for (let y = 0; y < canvasSize.height; y += 40) {
       ctx.beginPath();
       ctx.moveTo(0, y);
-      ctx.lineTo(width, y);
+      ctx.lineTo(canvasSize.width, y);
       ctx.stroke();
     }
 
@@ -162,7 +162,7 @@ export function GameBoard({ placedTiles, width = 1200, height = 700, className =
       }
     });
 
-  }, [placedTiles, offset, width, height]);
+  }, [placedTiles, offset, canvasSize.width, canvasSize.height]);
 
   const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
     setIsDragging(true);