make react component

src/client/pico8-client/Pico8Console.tsx

@@ -0,0 +1,44 @@
+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>
+	);
+});