feat: implement Phase 40.1 - basic cursor with hjkl movement

Add cursor navigation with hjkl keys (vim-style):

New Module Structure:
- src/useCursor/types.ts: Coord and CursorManager types
- src/useCursor/useCursor.ts: Cursor movement logic
- src/useCursor/useCursorRender.ts: Visual cursor highlight
- src/useCursor/index.ts: Public exports

Cursor Implementation:
- Position tracking with useRef (row/col from 0-8)
- Basic movement: moveLeft, moveRight, moveUp, moveDown
- Bounds checking (prevents moving outside 9x9 grid)
- Keyboard listener for h/j/k/l keys
- Only active when gameStatus === 'started'

Cursor Rendering:
- useCursorRender hook tracks cursor position
- Adds 'cursor' CSS class to current cell
- Removes from previous cell on movement
- Blue highlight with border (rgba(59, 130, 246, 0.3))

Integration:
- src/useGame.ts: Integrate useCursor and useCursorRender
- src/types.ts: Export CursorManager and Coord types
- src/useBoard/types.ts: NEW - BoardManager type
- src/game.css: Add cursor highlight styles

Game Flow:
- Press Space → Game starts → Cursor appears at (0,0)
- Press h/j/k/l → Cursor moves (bounded to grid)
- Visual feedback with blue highlight
- Press Q → Return to waiting state

Phase 40.1 complete. Next: Add number prefixes (5j) and other vim motions.
This commit is contained in:
2025-10-22 18:49:24 +01:00
parent 4e14d54122
commit be41ccee14
8 changed files with 125 additions and 2 deletions
+8 -1
View File
@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react';
import type { GameManager, GameOptions } from './types';
import { useBoard } from './useBoard/useBoard';
import { useGameStatus } from './useGameStatus';
import { useCursor } from './useCursor';
import { useCursorRender } from './useCursor/useCursorRender';
export function useGame(options: GameOptions = {}, platformHook?: unknown): GameManager {
const { difficulty = 'easy' } = options;
@@ -11,6 +13,11 @@ export function useGame(options: GameOptions = {}, platformHook?: unknown): Game
const gameStatusManager = useGameStatus();
const { gameStatus } = gameStatusManager;
const cursor = useCursor(gameStatusManager);
const cursorPosition = cursor.position();
useCursorRender(containerRef, cursorPosition);
const [keyLog, setKeyLog] = useState<{ key: string; timestamp: number }[]>([]);
useEffect(() => {
@@ -30,7 +37,7 @@ export function useGame(options: GameOptions = {}, platformHook?: unknown): Game
containerRef,
renderBoard,
...gameStatusManager,
cursor: {},
cursor,
scoreManager: {
timeValue: 0,
keystrokes: 0,