diff --git a/src/components/cgol-canvas.tsx b/src/components/cgol-canvas.tsx index 761e21a..a96467b 100644 --- a/src/components/cgol-canvas.tsx +++ b/src/components/cgol-canvas.tsx @@ -1,53 +1,26 @@ -import { useEffect, useRef, useCallback } from "react"; +import { useEffect, useRef } from "react"; + +let wasmStarted = false; export function CgolCanvas() { const canvasRef = useRef(null); - const initializedRef = useRef(false); - const cleanupRef = useRef<(() => void) | null>(null); - - const initializeWasm = useCallback(async () => { - if (typeof window === "undefined") return; - - try { - const canvas = canvasRef.current; - if (!canvas || initializedRef.current) return; - - const cgolModule = await import("cgol"); - - // Initialize WASM module - const initFunction = cgolModule.default; - if (initFunction && typeof initFunction === "function") { - await initFunction(); - } - - // Start CGOL - if (typeof cgolModule.start === "function") { - cgolModule.start(); - initializedRef.current = true; - - const cleanupFn = (cgolModule as { cleanup?: () => void }).cleanup; - if (typeof cleanupFn === "function") { - cleanupRef.current = cleanupFn; - } - } - } catch (error: unknown) { - console.error("Failed to initialize CGOL WebAssembly module:", error); - } - }, []); useEffect(() => { - // Initialize immediately without delay - void initializeWasm(); + if (wasmStarted) return; + wasmStarted = true; - return () => { - // Call cleanup if available from WASM module - if (cleanupRef.current) { - cleanupRef.current(); + import("cgol").then(async (cgolModule) => { + if (typeof cgolModule.default === "function") { + await cgolModule.default(); } - // Reset initialization state on unmount - initializedRef.current = false; - }; - }, [initializeWasm]); + if (typeof cgolModule.start === "function") { + cgolModule.start(); + } + }).catch((error: unknown) => { + console.error("Failed to initialize CGOL WebAssembly module:", error); + wasmStarted = false; + }); + }, []); return (