game start/stop, snake rendered on board

This commit is contained in:
2025-10-16 12:56:15 +01:00
parent 39dde6e5e6
commit 6a3cfad409
7 changed files with 216 additions and 13 deletions
+6 -1
View File
@@ -3,12 +3,17 @@ import "@vimazing/vim-snake/game.css";
import { useKeyBindings } from "./useKeyBindings";
function App() {
const { containerRef } = useGame(30, 20, useKeyBindings);
const { containerRef, gameStatus } = useGame(30, 20, useKeyBindings);
return (
<div className="relative mx-auto my-4 w-fit space-y-4">
<h1 className="text-2xl font-bold text-center">VIMazing Snake</h1>
<div ref={containerRef} className="relative" />
<div className="text-center text-sm 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 move • 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>
);
}