feat: add difficulty selector to example app

Add interactive difficulty selection when game is idle:

Example App Changes:
- example/src/App.tsx: Add difficulty state and radio group
  - Import useState and Difficulty type
  - Radio buttons for Easy/Medium/Hard
  - Only visible when gameStatus === 'waiting'
  - Updates difficulty state on selection
  - Passes selected difficulty to useGame

Core Changes:
- src/useGame.ts: Respect difficulty changes
  - Add difficulty to useEffect dependencies
  - Regenerates board when difficulty changes

UX Flow:
1. User sees difficulty selector on idle screen
2. Selects difficulty (easy/medium/hard)
3. Presses Space to start
4. Puzzle generated with selected difficulty
5. On quit, returns to selector with last selection

Cell Counts:
- Easy: 40 empty cells (~41 givens)
- Medium: 50 empty cells (~31 givens)
- Hard: 60 empty cells (~21 givens)
This commit is contained in:
2025-10-22 18:42:35 +01:00
parent 07f07376be
commit 6f4a1accc4
2 changed files with 49 additions and 2 deletions
+1 -1
View File
@@ -21,7 +21,7 @@ export function useGame(options: GameOptions = {}, platformHook?: unknown): Game
} else if (gameStatus === 'waiting') {
renderBoard();
}
}, [gameStatus]);
}, [gameStatus, difficulty]);
const gameManager: GameManager = {
containerRef,