e to ev

example/src/App.tsx

@@ -14,8 +14,15 @@ function App() {
   const { containerRef, gameStatus } = gameManager;
 
   return (
-    <div className="relative mx-auto my-4 w-fit" id="maze_container">
-      <div ref={containerRef} className="relative" />
+    <div>
+      <div className="relative mx-auto my-4 w-fit" id="maze_container">
+        <div ref={containerRef} className="relative" />
+      </div>
+      <div className="text-center text-2xl text-muted-foreground">
+        {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>}
+      </div>
     </div>
   );
 };