fix: cursor not showing on game start
Issue: When game starts, renderBoard() rebuilds DOM which removes cursor class Solution: Add gameStatus as dependency to useCursorRender - Now re-applies cursor after board renders - Only applies cursor when gameStatus === 'started' This ensures cursor is visible immediately when game starts at position (0,0).
This commit is contained in:
@@ -1,9 +1,16 @@
|
|||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import type { Coord } from './types';
|
import type { Coord } from './types';
|
||||||
import type { BoardManager } from '../useBoard/types';
|
import type { BoardManager } from '../useBoard/types';
|
||||||
|
import type { GameStatus } from '../useGameStatus/types';
|
||||||
|
|
||||||
export function useCursorRender(containerRef: BoardManager['containerRef'], position: Coord) {
|
export function useCursorRender(
|
||||||
|
containerRef: BoardManager['containerRef'],
|
||||||
|
position: Coord,
|
||||||
|
gameStatus: GameStatus
|
||||||
|
) {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (gameStatus !== 'started') return;
|
||||||
|
|
||||||
console.log('🎯 Cursor position:', position);
|
console.log('🎯 Cursor position:', position);
|
||||||
|
|
||||||
const container = containerRef.current;
|
const container = containerRef.current;
|
||||||
@@ -29,5 +36,5 @@ export function useCursorRender(containerRef: BoardManager['containerRef'], posi
|
|||||||
} else {
|
} else {
|
||||||
console.log('❌ Target cell not found');
|
console.log('❌ Target cell not found');
|
||||||
}
|
}
|
||||||
}, [position, containerRef]);
|
}, [position, containerRef, gameStatus]);
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-1
@@ -16,7 +16,7 @@ export function useGame(options: GameOptions = {}, platformHook?: unknown): Game
|
|||||||
const cursor = useCursor(gameStatusManager);
|
const cursor = useCursor(gameStatusManager);
|
||||||
const cursorPosition = cursor.position();
|
const cursorPosition = cursor.position();
|
||||||
|
|
||||||
useCursorRender(containerRef, cursorPosition);
|
useCursorRender(containerRef, cursorPosition, gameStatus);
|
||||||
|
|
||||||
const [keyLog, setKeyLog] = useState<{ key: string; timestamp: number }[]>([]);
|
const [keyLog, setKeyLog] = useState<{ key: string; timestamp: number }[]>([]);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user