From 156c6db9d264b37a4a1de193a357ea83f8776ffb Mon Sep 17 00:00:00 2001
From: Andre Padez <andre.padez@gmail.com>
Date: Sun, 2 Nov 2025 16:55:46 +0000
Subject: [PATCH] feat: display optimalSteps and efficiency metrics on
 scoreboard

- Show optimal steps required for the maze
- Display player efficiency percentage (100% = perfect play)
- Metrics appear after maze loads (when optimalSteps > 0)
- Separated from final score with visual divider
- Helps players understand their navigation performance
---
 example/src/App.tsx | 59 +++++++++++++++++++++++++++------------------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index cb89a9a..45c2c98 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -10,7 +10,7 @@ function App() {
 
   const gameManager = useGame({ cols, rows }, useKeyBindings);
   const { containerRef, gameStatus, scoreManager } = gameManager;
-  const { timeValue, keystrokes, finalScore } = scoreManager;
+  const { timeValue, keystrokes, optimalSteps, efficiency, finalScore } = scoreManager;
 
   const formatTime = (ms: number) => {
     const seconds = Math.floor(ms / 1000);
@@ -23,28 +23,41 @@ function App() {
     <div className="flex flex-col items-center justify-around min-h-[100vh]">
       <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">
-            <div>
-              <div className="text-muted-foreground">Time</div>
-              <div className="text-lg font-bold">{formatTime(timeValue)}</div>
-            </div>
-            <div>
-              <div className="text-muted-foreground">Keystrokes</div>
-              <div className="text-lg font-bold">{keystrokes}</div>
-            </div>
-            {gameStatus === "game-won" && finalScore && (
-              <>
-                <div className="w-px h-12 bg-muted-foreground/20" />
-                <div className="text-center">
-                  <div className="text-muted-foreground">Final Score</div>
-                  <div className="text-3xl font-bold bg-gradient-to-r from-green-400 to-emerald-500 bg-clip-text text-transparent">{finalScore}</div>
-                </div>
-              </>
-            )}
-          </div>
-        )}
-      </div>
+         {(gameStatus === "started" || gameStatus === "has-key" || gameStatus === "game-won") && (
+           <div className="flex gap-8 text-sm font-mono items-center">
+             <div>
+               <div className="text-muted-foreground">Time</div>
+               <div className="text-lg font-bold">{formatTime(timeValue)}</div>
+             </div>
+             <div>
+               <div className="text-muted-foreground">Keystrokes</div>
+               <div className="text-lg font-bold">{keystrokes}</div>
+             </div>
+             {optimalSteps > 0 && (
+               <>
+                 <div className="w-px h-12 bg-muted-foreground/20" />
+                 <div>
+                   <div className="text-muted-foreground">Optimal Steps</div>
+                   <div className="text-lg font-bold">{optimalSteps}</div>
+                 </div>
+                 <div>
+                   <div className="text-muted-foreground">Efficiency</div>
+                   <div className="text-lg font-bold">{efficiency}%</div>
+                 </div>
+               </>
+             )}
+             {gameStatus === "game-won" && finalScore && (
+               <>
+                 <div className="w-px h-12 bg-muted-foreground/20" />
+                 <div className="text-center">
+                   <div className="text-muted-foreground">Final Score</div>
+                   <div className="text-3xl font-bold bg-gradient-to-r from-green-400 to-emerald-500 bg-clip-text text-transparent">{finalScore}</div>
+                 </div>
+               </>
+             )}
+           </div>
+         )}
+       </div>
       <div className="relative mx-auto my-4 w-fit" id="maze_container">
         <div ref={containerRef} className="relative" />
       </div>