From 5b9b44aef639c576f1cd60139eca6db6ba981d86 Mon Sep 17 00:00:00 2001
From: Andre Padez <andre.padez@gmail.com>
Date: Wed, 15 Oct 2025 17:56:41 +0100
Subject: [PATCH] working on useGame

---
 src/sudoku.css           | 40 ++++++++++++++++++++++++++++++++--------
 src/useGame/useCursor.ts | 19 ++++++++++++-------
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/sudoku.css b/src/sudoku.css
index 9269640..c7eb2c1 100644
--- a/src/sudoku.css
+++ b/src/sudoku.css
@@ -31,8 +31,16 @@
    ========================================================= */
 #sudoku .sudoku-grid {
   display: grid;
-  grid-template-columns: repeat(9, var(--cell-size));
-  gap: var(--grid-gap);
+  grid-template-columns: 
+    var(--cell-size) var(--cell-size) var(--cell-size)
+    var(--cell-size) var(--cell-size) var(--cell-size)
+    var(--cell-size) var(--cell-size) var(--cell-size);
+  grid-template-rows: 
+    var(--cell-size) var(--cell-size) var(--cell-size)
+    var(--cell-size) var(--cell-size) var(--cell-size)
+    var(--cell-size) var(--cell-size) var(--cell-size);
+  column-gap: var(--grid-gap);
+  row-gap: var(--grid-gap);
   user-select: none;
 }
 
@@ -57,16 +65,32 @@
 /* =========================================================
    3x3 Box Separators
    ========================================================= */
-/* Add extra margin to right of columns 2 and 5 (0-indexed) */
+/* Right borders (end of each 3x3 box horizontally) */
 #sudoku .sudoku-cell[data-c="2"],
-#sudoku .sudoku-cell[data-c="5"] {
-  margin-right: var(--box-separator);
+#sudoku .sudoku-cell[data-c="5"],
+#sudoku .sudoku-cell[data-c="8"] {
+  border-right: 2px solid rgba(130, 170, 255, 0.3);
 }
 
-/* Add extra margin to bottom of rows 2 and 5 (0-indexed) */
+/* Left borders (start of each 3x3 box horizontally) */
+#sudoku .sudoku-cell[data-c="0"],
+#sudoku .sudoku-cell[data-c="3"],
+#sudoku .sudoku-cell[data-c="6"] {
+  border-left: 2px solid rgba(130, 170, 255, 0.3);
+}
+
+/* Bottom borders (end of each 3x3 box vertically) */
 #sudoku .sudoku-cell[data-r="2"],
-#sudoku .sudoku-cell[data-r="5"] {
-  margin-bottom: var(--box-separator);
+#sudoku .sudoku-cell[data-r="5"],
+#sudoku .sudoku-cell[data-r="8"] {
+  border-bottom: 2px solid rgba(130, 170, 255, 0.3);
+}
+
+/* Top borders (start of each 3x3 box vertically) */
+#sudoku .sudoku-cell[data-r="0"],
+#sudoku .sudoku-cell[data-r="3"],
+#sudoku .sudoku-cell[data-r="6"] {
+  border-top: 2px solid rgba(130, 170, 255, 0.3);
 }
 
 /* =========================================================
diff --git a/src/useGame/useCursor.ts b/src/useGame/useCursor.ts
index 7a53cb1..fa24be5 100644
--- a/src/useGame/useCursor.ts
+++ b/src/useGame/useCursor.ts
@@ -35,16 +35,21 @@ export function useCursor(rendererManager: UseRenderer) {
       if (animatingRef.current) return;
 
       setCursor((prev) => {
-        let r = prev.r;
-        let c = prev.c;
-        for (let i = 0; i < steps; i++) {
-          r = Math.max(0, Math.min(8, r + dr));
-          c = Math.max(0, Math.min(8, c + dc));
+        const targetR = prev.r + (dr * steps);
+        const targetC = prev.c + (dc * steps);
+
+        // Check if the full counted move would go out of bounds
+        if (targetR < 0 || targetR > 8 || targetC < 0 || targetC > 8) {
+          // Flash invalid and don't move
+          setTimeout(() => flashInvalid(), 0);
+          return prev;
         }
-        return { r, c };
+
+        // Valid move - apply it
+        return { r: targetR, c: targetC };
       });
     },
-    []
+    [flashInvalid]
   );
 
   useEffect(() => {