picobook/src/client/GamePage.tsx

import { Link, useParams, useSearchParams } from "react-router-dom";
import { useEffect, useRef, useState } from "react";
import { css } from "@emotion/css";
import { useWebsocket } from "./hooks/useWebsocket";
import { Pico8Player } from "@athingperday/react-pico-player";

// type ConsoleRef = Parameters<typeof Pico8Player>["0"]["consoleRef"];

type Game = {
	carts: Parameters<typeof Pico8Player>["0"]["carts"];
};

export const GamePage = () => {
	const { author, slug } = useParams();
	// const [searchParams, setSearchParams] = useSearchParams();
	// const room = searchParams.get('room');
	// const picoRef = useRef<ConsoleRef>(null);
	// const socket = useWebsocket({
	// 	url: `/api/ws/room?room=${room}`,
	// 	// url: "wss://echo.websocket.org",
	// 	onMessage({message}) {
	// 		// const msg = message as any;
	// 		// if (msg.type === "gpio") {
	// 		// 	if (picoRef.current) {
	// 		// 		const handle = picoRef.current.getPicoConsoleHandle();
	// 		// 		if (handle) {
	// 		// 			console.log("updating pico gpio");
	// 		// 			(handle.gpio as any).dontSend = true;
	// 		// 			handle.gpio.length = 0;
	// 		// 			handle.gpio.push(...msg.gpio);
	// 		// 			(handle.gpio as any).dontSend = false;
	// 		// 		}
	// 		// 	}
	// 		// }
	// 		console.log('message', message);
	// 	}
	// })
	// const version = searchParams.get('v');
	const [game, setGame] = useState<Game | null>(null);

	useEffect(() => {
		const fetchInfo = async () => {
			let url = `/api/game?author=${author}&name=${slug ?? ""}`;
			const information = await fetch(url);
			const json = await information.json();
			console.log(json);
			setGame(json);
		};
		fetchInfo();
	}, [setGame, slug]);

	if (!game) {
		return <div>LOADING...</div>;
	}

	if (!game.carts) {
		return <div>NOT FOUND</div>;
	}

	return (
		<div
			className={css`
				margin: auto;
				width: max-content;
				max-inline-size: 66ch;
				padding: 1.5em;
				display: flex;
				flex-direction: column;
				gap: 1em;
			`}
		>
			<div>
				<h1>{slug}</h1>
				<h2>
					by <Link to={`/u/${author}`}>{author}</Link>
				</h2>
			</div>
			<div
				className={css`
					width: 512px;
					max-width: 100%;
					margin: auto;
				`}
			>
				<div
					className={css`
						border: 2px solid transparent;
						&:focus-within {
							border: 2px solid limegreen;
						}
					`}
				>
					<Pico8Player
						// consoleRef={picoRef}
						carts={game.carts}
						// onGpioChange={(gpio: number[]) => {
						// console.log("sending gpio");
						// socket.sendMessage({
						// 	type: "gpio",
						// 	gpio,
						// });
						// }}
					/>
				</div>
			</div>
			{/* <div>
				<p>This is a paragraph about this game. It is a cool game. And a cool website to play it on. It automagically connects from GitHub.</p>
			</div> */}
		</div>
	);
};