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;
-    const newRow = currentPos.row + (dRows * count);
-    const newCol = currentPos.col + (dCols * count);
+    setPosition(currentPos => {
+      const newRow = currentPos.row + (dRows * count);
+      const newCol = currentPos.col + (dCols * count);
 
-    if (newRow < 0 || newRow > 8 || newCol < 0 || newCol > 8) {
-      return;
-    }
+      console.log('🚀 Move attempt:', { currentPos, dRows, dCols, count, newRow, newCol });
 
-    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,