feat: implement digit entry in edit mode (Phase 40.3.3)

- Add setCell method to useBoard to update board state
- Handle digit keys 1-9 in edit mode in useCursor
- Move boardRendered counter to useBoard for proper cursor re-rendering
- Fix golden glow disappearing after digit entry
- Digits display with .user-entered class via renderer
This commit is contained in:
2025-10-22 19:49:12 +01:00
parent 6a4b72075c
commit bc8eeaf400
5 changed files with 151 additions and 9 deletions
+124 -1
View File
@@ -762,6 +762,129 @@ Red flash → Stay in Normal
---
## Iteration 9: [Pending]
## Iteration 9: Phase 40.3.3 - Digit Entry
**Date**: 2025-01-22
### Goals
- Allow user to type digits 1-9 when in edit mode
- Update board state with entered digits
- Cells show digits with `.user-entered` class
- Stay in edit mode after entering digit
### Tasks Completed
#### 1. Added setCell Method to BoardManager
**Updated useBoard.ts:**
- Added `setCell(row, col, value)` function
- Updates board string at calculated index
- Triggers re-render to display change
**Implementation:**
```typescript
function setCell(row: number, col: number, value: string): void {
const board = boardRef.current.split('');
const index = row * 9 + col;
board[index] = value;
boardRef.current = board.join('');
renderBoard();
}
```
#### 2. Updated BoardManager Type
- Added `setCell: (row: number, col: number, value: string) => void;` to type definition
#### 3. Enhanced useCursor for Digit Entry
**Updated useCursor.ts:**
- Added `boardManager` parameter (BoardManager)
- In edit mode, detect digit keys (1-9)
- Call `boardManager.setCell()` to update board
- Stay in edit mode (no auto-exit)
**Key Handling:**
```typescript
if (mode === 'edit') {
if (key === 'Escape') {
setMode('normal');
return;
}
if (key >= '1' && key <= '9') {
boardManager.setCell(position.row, position.col, key);
return;
}
return;
}
```
#### 4. Updated useGame Integration
- Pass `board` (BoardManager) to `useCursor()`
- Three-parameter call: `useCursor(gameStatusManager, containerRef, board)`
### Technical Details
**Board State Flow:**
```
User presses '5' in edit mode
↓
useCursor detects digit key
↓
Calls boardManager.setCell(row, col, '5')
↓
Updates boardRef.current string
↓
Calls renderBoard()
↓
SudokuRenderer.render() displays digit with .user-entered class
↓
User sees '5' in the cell
```
**Cell Classification:**
- Given cells: Have `.given` class (from initial puzzle)
- User-entered cells: Have `.user-entered` class (from renderer logic)
- Empty cells: No value displayed
**Mode Behavior:**
- Edit mode entered with `i` on empty/user-entered cells
- Typing 1-9 places digit, stays in edit mode
- `Escape` exits to normal mode
- Can navigate to other cells and repeat
### Build Status
- ✅ TypeScript compiles cleanly
- ✅ No type errors
- ✅ Integration complete
### Issue 1: Golden Glow Disappearing After Digit Entry
**Problem**: When typing a digit in edit mode, the `.editing` class (golden glow) disappeared even though we remained in edit mode.
**Root Cause**: `setCell()` calls `renderBoard()` which rebuilds the entire DOM, wiping out the cursor highlight classes.
**Solution**: Moved `boardRendered` counter from `useGame` to `useBoard`
- Added `boardRendered` state to `useBoard` hook
- Increment counter at end of `renderBoard()` function
- Export `boardRendered` from `useBoard`
- `useCursorRender` depends on `boardRendered` and re-applies cursor classes after DOM rebuild
**Changes**:
- `useBoard.ts`: Added `useState` for `boardRendered`, increment in `renderBoard()`
- `useBoard/types.ts`: Added `boardRendered: number` to `BoardManager`
- `useGame.ts`: Removed local `boardRendered` state, use board's `boardRendered` instead
- Removed manual `setBoardRendered` calls from `useGame` (automatic now)
**Result**: ✅ Golden glow persists when typing digits in edit mode
### Next Steps
- Phase 40.3.4: Add erase functionality (x, Backspace, Delete)
- Phase 40.3.5: Add replace mode (r)
- Validation and conflict detection
- Win condition checking
---
## Iteration 10: [Pending]
*To be filled as implementation progresses...*