feat: add red flash on invalid movement (Issue 3)
When user attempts to move out of bounds, show visual feedback: CSS: - Added .invalid-move class with red outline and background - Animation: invalid-flash (500ms ease-out) - Starts with bright red glow, fades out - Red outline (3px solid) matches cursor style Logic: - flashInvalidMove() function in useCursor - Triggers when move would go out of bounds (< 0 or > 8) - Adds invalid-move class to current cell - Removes class after 500ms - Passes containerRef to useCursor for DOM access Cleanup: - Removed all console.log debugging statements - Clean code ready for production UX Flow: - Press h at left edge → Red flash at current position - Press j at bottom edge → Red flash at current position - Press k at top edge → Red flash at current position - Press l at right edge → Red flash at current position Issue 3 complete!
This commit is contained in:
+1
-1
@@ -16,7 +16,7 @@ export function useGame(options: GameOptions = {}, platformHook?: unknown): Game
|
||||
const [keyLog, setKeyLog] = useState<{ key: string; timestamp: number }[]>([]);
|
||||
const [boardRendered, setBoardRendered] = useState(0);
|
||||
|
||||
const cursor = useCursor(gameStatusManager);
|
||||
const cursor = useCursor(gameStatusManager, containerRef);
|
||||
const cursorPosition = cursor.position();
|
||||
|
||||
useCursorRender(containerRef, cursorPosition, gameStatus, boardRendered);
|
||||
|
||||
Reference in New Issue
Block a user