player moving

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;
 }
 

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,

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<KeyLogEntry[]>([]);
   const logRef = useRef<KeyLogEntry[]>([]);
@@ -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;
       }
     };