working on useGame

src/useGame/useCursor.ts

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback } from "react";
+import { useRef, useState, useCallback, useEffect } from "react";
 import type { UseRenderer } from "./useSudokuRenderer";
 
 export function useCursor(rendererManager: UseRenderer) {
@@ -23,6 +23,13 @@ export function useCursor(rendererManager: UseRenderer) {
     setTimeout(() => el.classList.remove("invalid-move"), 180);
   }, [cursor, getCellEl]);
 
+  const flashLocked = useCallback(() => {
+    const el = getCellEl(cursor.r, cursor.c);
+    if (!el) return;
+    el.classList.add("locked-cell");
+    setTimeout(() => el.classList.remove("locked-cell"), 300);
+  }, [cursor, getCellEl]);
+
   const moveCursor = useCallback(
     (dr: number, dc: number, steps = 1) => {
       if (animatingRef.current) return;
@@ -40,6 +47,12 @@ export function useCursor(rendererManager: UseRenderer) {
     []
   );
 
+  useEffect(() => {
+    const onLockedCell = () => flashLocked();
+    window.addEventListener("sudoku-locked-cell", onLockedCell);
+    return () => window.removeEventListener("sudoku-locked-cell", onLockedCell);
+  }, [flashLocked]);
+
   return {
     cursor,
     setCursor,

src/useGame/useGame.ts

@@ -15,6 +15,21 @@ export function useGame(platformHook?: unknown) {
   const boardManager = useBoardState(cursorManager);
   const { board, initialBoard, solution, setDigit, erase, reset, solveBoard } = boardManager;
 
+  // ---------------------------
+  // Keybindings
+  // ---------------------------
+  const keyBindings = useKeyBindings({
+    moveCursor,
+    setDigit,
+    erase,
+    stopGame,
+    cursor,
+    board,
+    initialBoard,
+  });
+  
+  const { editMode } = keyBindings;
+
   // ---------------------------
   // Rendering
   // ---------------------------
@@ -27,18 +42,9 @@ export function useGame(platformHook?: unknown) {
       renderEmptyBoard();
     } else {
       renderBoard(board, initialBoard);
-      highlightCursor(cursor.r, cursor.c);
+      highlightCursor(cursor.r, cursor.c, editMode === "edit");
     }
-  }, [gameStatus, board, initialBoard, cursor, renderEmptyBoard, renderBoard, highlightCursor]);
-
-  // ---------------------------
-  // Keybindings
-  // ---------------------------
-  const keyBindings = useKeyBindings({
-    moveCursor,
-    setDigit,
-    erase,
-  });
+  }, [gameStatus, board, initialBoard, cursor, editMode, renderEmptyBoard, renderBoard, highlightCursor]);
 
   // ---------------------------
   // Game Control

src/useGame/useKeyBindings.ts

@@ -1,15 +1,21 @@
 import { useEffect, useRef, useState } from "react";
 
 export type KeyLogEntry = { key: string; timestamp: number };
+export type EditMode = "navigation" | "edit";
 
 type Ctx = {
   moveCursor: (dr: number, dc: number, steps?: number) => void;
   setDigit: (d: string) => void;
   erase: () => void;
+  stopGame: () => void;
+  cursor: { r: number; c: number };
+  board: string;
+  initialBoard: string;
 };
 
 export function useKeyBindings(ctx: Ctx) {
   const [keyLog, setKeyLog] = useState<KeyLogEntry[]>([]);
+  const [editMode, setEditMode] = useState<EditMode>("navigation");
   const logRef = useRef<KeyLogEntry[]>([]);
   const countRef = useRef<string>(""); // Vim-style numeric prefix
   const lastMotionRef = useRef<{ dr: number; dc: number; steps: number } | null>(null);
@@ -36,30 +42,75 @@ export function useKeyBindings(ctx: Ctx) {
     const onKeyDown = (e: KeyboardEvent) => {
       const k = e.key;
 
-      // --- Digits 1–9 fill a cell ---
-      if (/^[1-9]$/.test(k)) {
+      // ========== EDIT MODE ==========
+      if (editMode === "edit") {
+        // Exit edit mode with Escape or Enter
+        if (k === "Escape" || k === "Enter") {
+          recordKey(k);
+          setEditMode("navigation");
+          return;
+        }
+
+        // Digits 1-9 set the cell value
+        if (/^[1-9]$/.test(k)) {
+          recordKey(k);
+          ctx.setDigit(k);
+          return;
+        }
+
+        // Erase with x or Backspace
+        if (k === "x" || k === "Backspace") {
+          recordKey(k);
+          ctx.erase();
+          return;
+        }
+
+        // Ignore all other keys in edit mode
+        return;
+      }
+
+      // ========== NAVIGATION MODE ==========
+      
+      // Q to quit game
+      if (k === "q" || k === "Q") {
+        recordKey(k);
+        ctx.stopGame();
+        return;
+      }
+
+      // R or C to enter edit mode
+      if (k === "r" || k === "R" || k === "c" || k === "C") {
+        recordKey(k);
+        
+        // Check if current cell is a pre-filled clue (not editable)
+        const cellIndex = ctx.cursor.r * 9 + ctx.cursor.c;
+        const isClue = ctx.initialBoard[cellIndex] !== ".";
+        
+        if (isClue) {
+          // Flash red - cell is locked
+          window.dispatchEvent(new CustomEvent("sudoku-locked-cell"));
+          return;
+        }
+        
+        setEditMode("edit");
+        return;
+      }
+
+      // Escape cancels count prefix
+      if (k === "Escape") {
         recordKey(k);
-        ctx.setDigit(k);
         resetCount();
         return;
       }
 
-      // --- Erase ---
-      if (k === "x" || k === "Backspace") {
-        recordKey(k);
-        ctx.erase();
-        resetCount();
-        return;
-      }
-
-      // --- Numeric prefixes ---
-      if (/^[0-9]$/.test(k)) {
+      // Numeric prefixes (for counted motions)
+      if (/^[0-9]$/.test(k) && k !== "0") {
         recordKey(k);
         countRef.current += k;
         return;
       }
 
-      // --- Vim-style navigation ---
+      // Vim-style navigation
       let dr = 0;
       let dc = 0;
       if (k === "h") dc = -1;
@@ -98,7 +149,7 @@ export function useKeyBindings(ctx: Ctx) {
 
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, [ctx]);
+  }, [ctx, editMode]);
 
   // ✅ same interface as vim-maze useKeyBindings
   return {
@@ -108,6 +159,7 @@ export function useKeyBindings(ctx: Ctx) {
     resetCount,
     countRef,
     lastMotionRef,
+    editMode,
   };
 }
 

src/useGame/useSudokuRenderer.ts

@@ -60,7 +60,7 @@ export function useRenderer() {
     container.appendChild(sudokuDiv);
   }, []);
 
-  const highlightCursor = useCallback((r: number, c: number) => {
+  const highlightCursor = useCallback((r: number, c: number, isEditing = false) => {
     const container = containerRef.current;
     if (!container) return;
     
@@ -68,11 +68,15 @@ export function useRenderer() {
     if (!sudokuDiv) return;
 
     sudokuDiv.querySelectorAll(".active").forEach((el) => el.classList.remove("active"));
+    sudokuDiv.querySelectorAll(".editing").forEach((el) => el.classList.remove("editing"));
     
     const selector = `.sudoku-cell[data-r="${r}"][data-c="${c}"]`;
     const cell = sudokuDiv.querySelector(selector);
     if (cell) {
       cell.classList.add("active");
+      if (isEditing) {
+        cell.classList.add("editing");
+      }
     }
   }, []);