From b8ff946114c6965ded4969c4ebd7b1707d9d0f89 Mon Sep 17 00:00:00 2001
From: Andre Padez <andre.padez@gmail.com>
Date: Wed, 22 Oct 2025 18:57:57 +0100
Subject: [PATCH] fix: cursor now shows immediately on game start

Added boardRendered counter to track when board DOM is rebuilt:
- Increments after each renderBoard() call
- useCursorRender depends on boardRendered
- Forces cursor re-application after board rebuilds DOM

Flow:
1. Game starts
2. renderBoard() rebuilds DOM
3. boardRendered increments
4. useCursorRender triggers
5. Cursor class applied to (0,0)

This ensures cursor is visible immediately when pressing Space.
---
 src/useCursor/useCursorRender.ts |  7 ++++---
 src/useGame.ts                   | 10 +++++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/useCursor/useCursorRender.ts b/src/useCursor/useCursorRender.ts
index 64aff22..ad56676 100644
--- a/src/useCursor/useCursorRender.ts
+++ b/src/useCursor/useCursorRender.ts
@@ -6,12 +6,13 @@ import type { GameStatus } from '../useGameStatus/types';
 export function useCursorRender(
   containerRef: BoardManager['containerRef'], 
   position: Coord,
-  gameStatus: GameStatus
+  gameStatus: GameStatus,
+  boardRendered: number
 ) {
   useEffect(() => {
     if (gameStatus !== 'started') return;
     
-    console.log('🎯 Cursor position:', position);
+    console.log('🎯 Cursor render triggered - position:', position, 'boardRendered:', boardRendered);
     
     const container = containerRef.current;
     if (!container) {
@@ -36,5 +37,5 @@ export function useCursorRender(
     } else {
       console.log('❌ Target cell not found');
     }
-  }, [position, containerRef, gameStatus]);
+  }, [position, containerRef, gameStatus, boardRendered]);
 }
diff --git a/src/useGame.ts b/src/useGame.ts
index 9829be3..fdad5b5 100644
--- a/src/useGame.ts
+++ b/src/useGame.ts
@@ -13,23 +13,27 @@ export function useGame(options: GameOptions = {}, platformHook?: unknown): Game
   const gameStatusManager = useGameStatus();
   const { gameStatus } = gameStatusManager;
   
+  const [keyLog, setKeyLog] = useState<{ key: string; timestamp: number }[]>([]);
+  const [boardRendered, setBoardRendered] = useState(0);
+  
   const cursor = useCursor(gameStatusManager);
   const cursorPosition = cursor.position();
   
-  useCursorRender(containerRef, cursorPosition, gameStatus);
-  
-  const [keyLog, setKeyLog] = useState<{ key: string; timestamp: number }[]>([]);
+  useCursorRender(containerRef, cursorPosition, gameStatus, boardRendered);
 
   useEffect(() => {
     renderBoard();
+    setBoardRendered(prev => prev + 1);
   }, []);
 
   useEffect(() => {
     if (gameStatus === 'started') {
       generateBoard(difficulty);
       renderBoard();
+      setBoardRendered(prev => prev + 1);
     } else if (gameStatus === 'waiting') {
       renderBoard();
+      setBoardRendered(prev => prev + 1);
     }
   }, [gameStatus, difficulty]);