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:
+8
-3
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user