docs: document Phase 40.1 implementation and Issue 1 fix
This commit is contained in:
+63
-1
@@ -420,6 +420,68 @@ const gameManager = {
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Iteration 6: [Pending]
|
## Iteration 6: Phase 40.1 - Basic Cursor with hjkl Movement
|
||||||
|
|
||||||
|
**Date**: 2025-01-22
|
||||||
|
|
||||||
|
### Goals
|
||||||
|
- Implement basic cursor navigation
|
||||||
|
- Add hjkl vim keys
|
||||||
|
- Visual cursor highlight
|
||||||
|
- Only active during gameplay
|
||||||
|
|
||||||
|
### Tasks Completed
|
||||||
|
|
||||||
|
#### 1. Created useCursor Module
|
||||||
|
- `useCursor.ts` - Position tracking and movement logic
|
||||||
|
- `useCursorRender.ts` - Visual cursor highlight on DOM
|
||||||
|
- `types.ts` - Coord and CursorManager types
|
||||||
|
|
||||||
|
#### 2. Cursor Implementation
|
||||||
|
- Position tracking with useState (row/col 0-8)
|
||||||
|
- Movement functions: moveLeft, moveRight, moveUp, moveDown
|
||||||
|
- Bounds checking prevents moving outside 9x9 grid
|
||||||
|
- Keyboard listener for h/j/k/l keys
|
||||||
|
- Only active when gameStatus === 'started'
|
||||||
|
|
||||||
|
#### 3. Visual Feedback
|
||||||
|
- Blue highlight with border on current cell
|
||||||
|
- CSS class 'cursor' applied to active cell
|
||||||
|
- Removed from previous cell on movement
|
||||||
|
|
||||||
|
#### 4. Fixed Initial Cursor Display (Issue 1)
|
||||||
|
**Problem**: Cursor not showing on game start before first move
|
||||||
|
**Root Cause**: renderBoard() rebuilds DOM, wiping cursor class
|
||||||
|
**Solution**: Added boardRendered counter
|
||||||
|
- Increments after each renderBoard()
|
||||||
|
- useCursorRender depends on boardRendered
|
||||||
|
- Forces cursor re-application after DOM rebuild
|
||||||
|
|
||||||
|
**Flow**:
|
||||||
|
1. Press Space → startGame()
|
||||||
|
2. renderBoard() rebuilds DOM
|
||||||
|
3. boardRendered increments
|
||||||
|
4. useCursorRender triggers
|
||||||
|
5. Cursor class applied to (0,0)
|
||||||
|
|
||||||
|
### Technical Details
|
||||||
|
|
||||||
|
**useState vs useRef**:
|
||||||
|
- Initially used useRef (no re-renders)
|
||||||
|
- Changed to useState to trigger useCursorRender
|
||||||
|
- Position changes now properly update DOM
|
||||||
|
|
||||||
|
**Timing Issue Resolution**:
|
||||||
|
- renderBoard() is synchronous
|
||||||
|
- useEffect runs after render
|
||||||
|
- boardRendered ensures proper ordering
|
||||||
|
|
||||||
|
### Next Steps
|
||||||
|
- Issue 2: Fix cursor border conflicts with grid edges
|
||||||
|
- Issue 3: Add red flash on invalid movement attempts
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Iteration 7: [Pending]
|
||||||
|
|
||||||
*To be filled as implementation progresses...*
|
*To be filled as implementation progresses...*
|
||||||
|
|||||||
Reference in New Issue
Block a user