feat: implement game board rendering and spaceship player control

- Create 10x20 game board grid with retro styling
- Render spaceship emoji at player position (bottom center)
- Implement cursor movement with hjkl (left/right only)
- Add moveToStart (0) and moveToEnd ($) anchor motions
- Re-render board when cursor position changes
- Board displays dark grid with highlighted player row
This commit is contained in:
2025-11-03 21:41:26 +00:00
parent 80f7aa3f8a
commit c036dc372d
5 changed files with 95 additions and 26 deletions
+8 -3
View File
@@ -3,19 +3,24 @@ import { useGame } from "@vimazing/typing-chud";
import "@vimazing/typing-chud/game.css";
import type { GameManager } from "@vimazing/typing-chud";
import { useKeyBindings } from "./useKeyBindings";
import { useMounted } from "./useMounted";
function App() {
const gameManager = useGame({}, useKeyBindings);
const { containerRef, gameStatus, scoreManager, renderBoard } = gameManager;
const { containerRef, gameStatus, scoreManager, renderBoard, cursor } = gameManager;
const gameManagerRef = useRef<GameManager>(gameManager);
const [mounted] = useMounted();
useEffect(() => {
gameManagerRef.current = gameManager;
}, [gameManager]);
// Re-render board when cursor position changes
useEffect(() => {
renderBoard();
}, [renderBoard]);
if (mounted) {
renderBoard();
}
}, [cursor.position(), renderBoard, mounted]);
const formatTime = (ms: number) => {
const seconds = Math.floor(ms / 1000);