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:
2025-10-22 19:03:05 +01:00
parent 154a2e5cc3
commit 345b273669
4 changed files with 41 additions and 33 deletions
+1 -1
View File
@@ -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);