74 lines
1.7 KiB
TypeScript
74 lines
1.7 KiB
TypeScript
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 [playing, setPlaying] = useState(false);
|
|
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(() => {
|
|
if (playing) {
|
|
attachConsole();
|
|
return () => {
|
|
if (ref.current) {
|
|
ref.current.innerHTML = "";
|
|
}
|
|
}
|
|
}
|
|
}, [playing, attachConsole]);
|
|
if (!playing) {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={css`
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
aspect-ratio: 1;
|
|
background-color: black;
|
|
color: white;
|
|
cursor: pointer;
|
|
`}
|
|
onClick={() => {setPlaying(true)}}
|
|
>
|
|
Play!
|
|
</div>
|
|
)
|
|
}
|
|
return (
|
|
<div ref={ref} className={css`
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
& > canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
`}></div>
|
|
);
|
|
});
|