diff --git a/src/useCursor/useCursor.ts b/src/useCursor/useCursor.ts index 0c93a7d..6c205d2 100644 --- a/src/useCursor/useCursor.ts +++ b/src/useCursor/useCursor.ts @@ -1,21 +1,26 @@ -import { useRef, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import type { Coord, CursorManager } from './types'; import type { GameStatusManager } from '../useGameStatus/types'; export function useCursor(gameStatusManager: GameStatusManager) { - const position = useRef({ row: 0, col: 0 }); + const [position, setPosition] = useState({ row: 0, col: 0 }); const { gameStatus } = gameStatusManager; function move(dRows: number, dCols: number, count: number = 1): void { - const currentPos = position.current; - const newRow = currentPos.row + (dRows * count); - const newCol = currentPos.col + (dCols * count); + setPosition(currentPos => { + const newRow = currentPos.row + (dRows * count); + const newCol = currentPos.col + (dCols * count); - if (newRow < 0 || newRow > 8 || newCol < 0 || newCol > 8) { - return; - } + console.log('🚀 Move attempt:', { currentPos, dRows, dCols, count, newRow, newCol }); - position.current = { row: newRow, col: newCol }; + if (newRow < 0 || newRow > 8 || newCol < 0 || newCol > 8) { + console.log('⛔ Out of bounds, movement blocked'); + return currentPos; + } + + console.log('✅ Position updated to:', { row: newRow, col: newCol }); + return { row: newRow, col: newCol }; + }); } function moveLeft(count = 1): void { @@ -35,28 +40,42 @@ export function useCursor(gameStatusManager: GameStatusManager) { } useEffect(() => { - if (gameStatus !== 'started') return; + console.log('🎮 useCursor effect - gameStatus:', gameStatus); + + if (gameStatus !== 'started') { + console.log('⏸️ Not started, skipping key listener'); + return; + } function handleKeyDown(e: KeyboardEvent) { const key = e.key; + console.log('⌨️ Key pressed:', key); if (key === 'h') { + console.log('← Move left'); moveLeft(); } else if (key === 'j') { + console.log('↓ Move down'); moveDown(); } else if (key === 'k') { + console.log('↑ Move up'); moveUp(); } else if (key === 'l') { + console.log('→ Move right'); moveRight(); } } + console.log('✅ Adding keydown listener'); window.addEventListener('keydown', handleKeyDown); - return () => window.removeEventListener('keydown', handleKeyDown); + return () => { + console.log('🗑️ Removing keydown listener'); + window.removeEventListener('keydown', handleKeyDown); + }; }, [gameStatus]); const cursor: CursorManager = { - position: () => position.current, + position: () => position, moveLeft, moveRight, moveUp, diff --git a/src/useCursor/useCursorRender.ts b/src/useCursor/useCursorRender.ts index 7b2ee46..40ad62e 100644 --- a/src/useCursor/useCursorRender.ts +++ b/src/useCursor/useCursorRender.ts @@ -4,10 +4,16 @@ import type { BoardManager } from '../useBoard/types'; export function useCursorRender(containerRef: BoardManager['containerRef'], position: Coord) { useEffect(() => { + console.log('🎯 Cursor position:', position); + const container = containerRef.current; - if (!container) return; + if (!container) { + console.log('❌ No container ref'); + return; + } const cells = container.querySelectorAll('.sudoku-cell'); + console.log('📊 Found cells:', cells.length); cells.forEach(cell => { cell.classList.remove('cursor'); @@ -15,8 +21,13 @@ export function useCursorRender(containerRef: BoardManager['containerRef'], posi const index = position.row * 9 + position.col; const targetCell = cells[index]; + console.log('🎯 Target cell index:', index, 'cell:', targetCell); + if (targetCell) { targetCell.classList.add('cursor'); + console.log('✅ Added cursor class to cell'); + } else { + console.log('❌ Target cell not found'); } }, [position, containerRef]); }