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.
This commit is contained in:
@@ -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]);
|
||||
}
|
||||
|
||||
+7
-3
@@ -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]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user