fix: cursor not updating - use useState instead of useRef

The cursor position wasn't updating visually because:
- useRef doesn't trigger re-renders
- useCursorRender wasn't being called on position changes

Solution:
- Changed position from useRef to useState
- Now position changes trigger re-renders
- useCursorRender receives updated position
- Cursor highlight updates properly

Added temporary console.logs for debugging:
- Cursor position changes
- Key press events
- Movement attempts and bounds checking
- Cell selection and class application

This will help verify cursor is working in browser.
Console logs to be removed once verified working.

src/useCursor/useCursor.ts

@@ -1,21 +1,26 @@
-import { useRef, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import type { Coord, CursorManager } from './types';
 import type { GameStatusManager } from '../useGameStatus/types';
 
 export function useCursor(gameStatusManager: GameStatusManager) {
-  const position = useRef<Coord>({ row: 0, col: 0 });
+  const [position, setPosition] = useState<Coord>({ row: 0, col: 0 });
   const { gameStatus } = gameStatusManager;
 
   function move(dRows: number, dCols: number, count: number = 1): void {
-    const currentPos = position.current;
+    setPosition(currentPos => {
-    const newRow = currentPos.row + (dRows * count);
+      const newRow = currentPos.row + (dRows * count);
-    const newCol = currentPos.col + (dCols * count);
+      const newCol = currentPos.col + (dCols * count);
 
-    if (newRow < 0 || newRow > 8 || newCol < 0 || newCol > 8) {
+      console.log('🚀 Move attempt:', { currentPos, dRows, dCols, count, newRow, newCol });
-      return;
-    }
 
-    position.current = { row: newRow, col: newCol };
+      if (newRow < 0 || newRow > 8 || newCol < 0 || newCol > 8) {
+        console.log('⛔ Out of bounds, movement blocked');
+        return currentPos;
+      }
+
+      console.log('✅ Position updated to:', { row: newRow, col: newCol });
+      return { row: newRow, col: newCol };
+    });
   }
 
   function moveLeft(count = 1): void {
@@ -35,28 +40,42 @@ export function useCursor(gameStatusManager: GameStatusManager) {
   }
 
   useEffect(() => {
-    if (gameStatus !== 'started') return;
+    console.log('🎮 useCursor effect - gameStatus:', gameStatus);
+    
+    if (gameStatus !== 'started') {
+      console.log('⏸️ Not started, skipping key listener');
+      return;
+    }
 
     function handleKeyDown(e: KeyboardEvent) {
       const key = e.key;
+      console.log('⌨️ Key pressed:', key);
 
       if (key === 'h') {
+        console.log('← Move left');
         moveLeft();
       } else if (key === 'j') {
+        console.log('↓ Move down');
         moveDown();
       } else if (key === 'k') {
+        console.log('↑ Move up');
         moveUp();
       } else if (key === 'l') {
+        console.log('→ Move right');
         moveRight();
       }
     }
 
+    console.log('✅ Adding keydown listener');
     window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
+    return () => {
+      console.log('🗑️ Removing keydown listener');
+      window.removeEventListener('keydown', handleKeyDown);
+    };
   }, [gameStatus]);
 
   const cursor: CursorManager = {
-    position: () => position.current,
+    position: () => position,
     moveLeft,
     moveRight,
     moveUp,

src/useCursor/useCursorRender.ts

@@ -4,10 +4,16 @@ import type { BoardManager } from '../useBoard/types';
 
 export function useCursorRender(containerRef: BoardManager['containerRef'], position: Coord) {
   useEffect(() => {
+    console.log('🎯 Cursor position:', position);
+    
     const container = containerRef.current;
-    if (!container) return;
+    if (!container) {
+      console.log('❌ No container ref');
+      return;
+    }
 
     const cells = container.querySelectorAll('.sudoku-cell');
+    console.log('📊 Found cells:', cells.length);
     
     cells.forEach(cell => {
       cell.classList.remove('cursor');
@@ -15,8 +21,13 @@ export function useCursorRender(containerRef: BoardManager['containerRef'], posi
 
     const index = position.row * 9 + position.col;
     const targetCell = cells[index];
+    console.log('🎯 Target cell index:', index, 'cell:', targetCell);
+    
     if (targetCell) {
       targetCell.classList.add('cursor');
+      console.log('✅ Added cursor class to cell');
+    } else {
+      console.log('❌ Target cell not found');
     }
   }, [position, containerRef]);
 }