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:
+8
-1
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user