From 2dcab21a04505dc4f42c821dff7bd37f3b879cc7 Mon Sep 17 00:00:00 2001
From: Andre Padez <andre.padez@gmail.com>
Date: Thu, 30 Oct 2025 23:57:40 +0000
Subject: [PATCH] test(phase2): update example app to display metrics

- Display totalKeystrokes from scoreManager
- Display finalScore when game ends (game-over or game-won)
- Changed 'Keys' label to 'Keystrokes' for clarity
- Added 'game-won' status message
---
 example/src/App.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index cf4a8f6..aec9ebe 100755
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -27,8 +27,13 @@ function App() {
           Score: {score}
         </div>
         <div className="px-3 py-1 bg-muted rounded">
-          Keys: {keyLog.length}
+          Keystrokes: {scoreManager.totalKeystrokes}
         </div>
+        {scoreManager.finalScore !== null && (
+          <div className="px-3 py-1 bg-muted rounded font-bold">
+            Final Score: {scoreManager.finalScore}
+          </div>
+        )}
       </div>
 
       <div ref={containerRef} className="relative" />
@@ -37,6 +42,7 @@ function App() {
         {gameStatus === "waiting" && <p>Press <kbd className="px-2 py-1 bg-muted rounded">space</kbd> to start</p>}
         {gameStatus === "started" && <p>Use <kbd className="px-2 py-1 bg-muted rounded">hjkl</kbd> to change direction • Press <kbd className="px-2 py-1 bg-muted rounded">q</kbd> to quit</p>}
         {gameStatus === "game-over" && <p>Game Over! Press <kbd className="px-2 py-1 bg-muted rounded">space</kbd> to restart</p>}
+        {gameStatus === "game-won" && <p>You Won! Press <kbd className="px-2 py-1 bg-muted rounded">space</kbd> to restart</p>}
       </div>
     </div>
   );