diff --git a/src/useCursor/useCursor.ts b/src/useCursor/useCursor.ts index 6c80603..a8e96f2 100644 --- a/src/useCursor/useCursor.ts +++ b/src/useCursor/useCursor.ts @@ -1,4 +1,4 @@ -import { useRef } from 'react' +import { useRef, useEffect } from 'react' import type { CursorMode, Coord, BoardManager, GameStatus } from '../types' import { useHero } from './useHero' @@ -13,6 +13,13 @@ export function useCursor(board: BoardManager, gameStatus: GameStatus) { const hero = useHero(board, gameStatus); + // Sync cursor position with hero position + useEffect(() => { + if (hero.heroPos) { + position.current = hero.heroPos; + } + }, [hero.heroPos]); + function findAnchorTarget(dir: "left" | "right") { const m = board.mazeRef.current; const pos = position.current; @@ -232,6 +239,13 @@ export function useCursor(board: BoardManager, gameStatus: GameStatus) { getLastKey, } + if (gameStatus) { + return { + ...cursorAPI, + hero, + }; + } + return cursorAPI; } diff --git a/src/useGame.ts b/src/useGame.ts index d257815..9671f39 100644 --- a/src/useGame.ts +++ b/src/useGame.ts @@ -10,10 +10,11 @@ export function useGame(options: GameOptions, platformHook?: unknown): GameManag const { containerRef, renderBoard } = board; const gameStatusManager = useGameStatus(); - const { gameStatus, startGame, togglePause, quitGame } = gameStatusManager; +const { gameStatus, startGame, togglePause, quitGame, setGameStatus } = gameStatusManager; const cursor = useCursor(board, gameStatus); - const keyManager = useKeyBindings({ cursor, gameStatus }); + + const keyManager = useKeyBindings({ cursor, hero: cursor.hero, gameStatus, setGameStatus }); const gameManager = { containerRef, diff --git a/src/useKeyBindings/useKeyBindings.ts b/src/useKeyBindings/useKeyBindings.ts index 6b106e3..c50090b 100644 --- a/src/useKeyBindings/useKeyBindings.ts +++ b/src/useKeyBindings/useKeyBindings.ts @@ -1,4 +1,4 @@ -import type { GameStatus, KeyLogEntry } from "../types"; +import type { GameStatus, KeyLogEntry, UseHeroType } from "../types"; import { useEffect, useRef, useState } from "react"; export type CursorBindingContext = { @@ -20,7 +20,9 @@ export type CursorBindingContext = { type UseKeyBindingsParams = { cursor: CursorBindingContext; + hero: UseHeroType; gameStatus: GameStatus; + setGameStatus: (status: GameStatus) => void; }; const RELEVANT_KEYS = new Set([ @@ -28,7 +30,7 @@ const RELEVANT_KEYS = new Set([ "1", "2", "3", "4", "5", "6", "7", "8", "9" ]); -export const useKeyBindings = ({ cursor, gameStatus }: UseKeyBindingsParams) => { +export const useKeyBindings = ({ cursor, hero, gameStatus, setGameStatus }: UseKeyBindingsParams) => { const [keyLog, setKeyLog] = useState([]); const logRef = useRef([]); @@ -112,13 +114,13 @@ export const useKeyBindings = ({ cursor, gameStatus }: UseKeyBindingsParams) => switch (ev.key) { case "h": - case "H": cursor.moveLeft(count); break; + case "H": hero.moveHero(0, -1, count, gameStatus, setGameStatus); break; case "j": - case "J": cursor.moveDown(count); break; + case "J": hero.moveHero(1, 0, count, gameStatus, setGameStatus); break; case "k": - case "K": cursor.moveUp(count); break; + case "K": hero.moveHero(-1, 0, count, gameStatus, setGameStatus); break; case "l": - case "L": cursor.moveRight(count); break; + case "L": hero.moveHero(0, 1, count, gameStatus, setGameStatus); break; default: return; } };