import { css } from "@emotion/css"; import { PicoCart, PicoPlayerHandle, makePicoConsole } from "./renderCart"; import { ForwardedRef, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react"; type Pico8ConsoleImperatives = { getPicoConsoleHandle(): PicoPlayerHandle | null; } export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedRef: ForwardedRef<Pico8ConsoleImperatives>) => { const {carts} = props; const ref = useRef<HTMLDivElement>(null); const [handle, setHandle] = useState<PicoPlayerHandle | null>(null); const attachConsole = useCallback(async () => { const picoConsole = await makePicoConsole({ carts, }); if (ref.current) { ref.current.appendChild(picoConsole.canvas); } setHandle(picoConsole); }, [carts]); useImperativeHandle(forwardedRef, () => ({ getPicoConsoleHandle() { return handle; } }), [handle]); useEffect(() => { attachConsole(); }, [attachConsole]); return ( <div ref={ref} className={css` width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; & > canvas { width: 100%; height: 100%; } `}></div> ); });