diff --git a/example/src/App.tsx b/example/src/App.tsx index e096da5..f6815e7 100755 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -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); - 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); diff --git a/src/useGame/useGame.ts b/src/useGame/useGame.ts index aed2ff8..cdbe1fd 100755 --- a/src/useGame/useGame.ts +++ b/src/useGame/useGame.ts @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import type { GameManager, GameOptions, KeyLogEntry } from "../types"; import { useBoard } from "../useBoard"; import { useCursor } from "../useCursor"; @@ -21,6 +21,11 @@ export function useGame( boardManager.renderBoard(cursorManager.position()); }; + // Initial render on mount + useEffect(() => { + renderBoardWrapped(); + }, []); + const gameManager: GameManager = { containerRef: boardManager.containerRef, renderBoard: renderBoardWrapped,