exporting version

example/src/App.tsx

@@ -1,4 +1,4 @@
-import { useGame } from "../../src/useGame";
+import { useGame, version } from "../../src";
 import { useKeyBindings } from "./useKeyBindings";
 import { useIsMobile } from "./useIsMobile";
 import '../../src/game.css';
@@ -10,7 +10,7 @@ function App() {
 
   const gameManager = useGame({ cols, rows }, useKeyBindings);
   const { containerRef, gameStatus, scoreManager } = gameManager;
-  const { timeValue, keystrokes, efficiency, optimalSteps, finalScore } = scoreManager;
+  const { timeValue, keystrokes, finalScore } = scoreManager;
 
   const formatTime = (ms: number) => {
     const seconds = Math.floor(ms / 1000);
@@ -21,7 +21,7 @@ function App() {
 
   return (
     <div className="flex flex-col items-center justify-around min-h-[100vh]">
-      <h1 className="text-6xl">VIMazing vim-maze example</h1>
+      <h1 className="text-6xl">VIMazing vim-maze <small>v{version}</small> example</h1>
       <div className="mx-auto my-4 w-fit bg-muted rounded-lg p-4">
         {(gameStatus === "started" || gameStatus === "has-key" || gameStatus === "game-won") && (
           <div className="flex gap-8 text-sm font-mono items-center">
@@ -33,16 +33,6 @@ function App() {
               <div className="text-muted-foreground">Keystrokes</div>
               <div className="text-lg font-bold">{keystrokes}</div>
             </div>
-            <div>
-              <div className="text-muted-foreground">Efficiency</div>
-              <div className={`text-lg font-bold ${efficiency > 150 ? 'text-red-500' : efficiency > 100 ? 'text-yellow-500' : 'text-green-500'}`}>
-                {efficiency}%
-              </div>
-            </div>
-            <div>
-              <div className="text-muted-foreground">Optimal</div>
-              <div className="text-lg font-bold">{optimalSteps}</div>
-            </div>
             {gameStatus === "game-won" && finalScore && (
               <>
                 <div className="w-px h-12 bg-muted-foreground/20" />

src/index.ts

@@ -2,4 +2,6 @@ export * from './types';
 export * from './useGame';
 export * from './useGameStatus';
 export { gameInfo } from './gameInfo';
+import { version } from '../package.json';
 export type { GameInfo } from './gameInfo';
+export { version };

src/useCursor/useCursor.ts

@@ -1,7 +1,6 @@
 import { useRef, useEffect } from 'react'
 import type { CursorMode, Coord } from './types';
-import type { BoardManager } from '../useBoard/types';
-import type { GameStatusManager } from '../useGameStatus/types';
+import type { GameStatusManager, BoardManager, CellTag } from '../types';
 import { useHero } from './useHero';
 import { useGameKeys } from './useGameKeys';
 import { useMazeNavigation } from '../useBoard';
@@ -16,6 +15,9 @@ export function useCursor(board: BoardManager, gameStatusManager: GameStatusMana
   const navigator = useMazeNavigation(board.mazeRef.current);
   const vimMotions = useVimMotions();
 
+  const maze = board.mazeInstanceRef.current?.maze;
+  const exitPos = maze?.[0].findIndex((cell: CellTag) => cell.includes('door'));
+
   // Sync cursor position with hero position
   useEffect(() => {
     if (hero.heroPos) {
@@ -122,6 +124,9 @@ export function useCursor(board: BoardManager, gameStatusManager: GameStatusMana
 
   function moveToTop(): void {
     const currentPos = position.current;
+
+    console.log("Exit position:", exitPos, currentPos);
+    console.log(currentPos, board);
     const target = navigator.findAnchorTarget(currentPos, 'top');
     if (!target) {
       window.dispatchEvent(new Event("maze-invalid"));

src/useScore/useTimer.ts

@@ -8,17 +8,24 @@ export function useTimer(): TimerManager {
   const startTimeRef = useRef<number | null>(null);
   const frameRef = useRef<number | null>(null);
   const runningRef = useRef(false);
+  const lastUpdateRef = useRef(0);
+  const currentTimeRef = useRef(0);
 
   const startTimer = () => {
     if (runningRef.current) return;
     runningRef.current = true;
     startTimeRef.current = performance.now();
+    lastUpdateRef.current = 0;
 
     const tick = () => {
       if (!runningRef.current) return;
       const now = performance.now();
       const elapsed = now - (startTimeRef.current ?? now);
+      currentTimeRef.current = elapsed;
+      if (elapsed - lastUpdateRef.current >= 1000) {
+        lastUpdateRef.current = elapsed;
         setTimeValue(elapsed);
+      }
       frameRef.current = requestAnimationFrame(tick);
     };
 
@@ -26,6 +33,7 @@ export function useTimer(): TimerManager {
   };
 
   const stopTimer = () => {
+    setTimeValue(currentTimeRef.current);
     runningRef.current = false;
     if (frameRef.current) {
       cancelAnimationFrame(frameRef.current);
@@ -37,6 +45,7 @@ export function useTimer(): TimerManager {
     stopTimer();
     setTimeValue(0);
     startTimeRef.current = null;
+    lastUpdateRef.current = 0;
   };
 
   useEffect(() => {
@@ -45,5 +54,7 @@ export function useTimer(): TimerManager {
     };
   }, []);
 
+  console.log('timeValue', timeValue);
+
   return { timeValue, startTimer, stopTimer, resetTimer };
 }