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:
+124
-1
@@ -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...*
|
||||
|
||||
Reference in New Issue
Block a user