refactor: simplify example app by moving renderBoard call into useGame

- Remove useMounted and manual renderBoard call from example App
- Call renderBoard from useGame useEffect on initialization
- Follow vim-maze pattern for cleaner example app
This commit is contained in:
2025-11-03 21:46:42 +00:00
parent c036dc372d
commit fb79aa0229
2 changed files with 7 additions and 18 deletions
+1 -17
View File
@@ -1,26 +1,10 @@
import { useEffect, useRef } from "react";
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, cursor } = gameManager;
const gameManagerRef = useRef<GameManager>(gameManager);
const [mounted] = useMounted();
useEffect(() => {
gameManagerRef.current = gameManager;
}, [gameManager]);
// Re-render board when cursor position changes
useEffect(() => {
if (mounted) {
renderBoard();
}
}, [cursor.position(), renderBoard, mounted]);
const { containerRef, gameStatus, scoreManager } = gameManager;
const formatTime = (ms: number) => {
const seconds = Math.floor(ms / 1000);