picobook/src/client/GamePage.tsx

import { Link, useParams, useSearchParams } from "react-router-dom"
import { Pico8Console } from "./pico8-client/Pico8Console";
import { useEffect, useState } from "react";
import { DbRelease } from "../server/dbal/dbal";
import { css } from "@emotion/css";
import { useWebsocket } from "./hooks/useWebsocket";

type Info = {
    release: DbRelease | null;
    versions: string[];
}

export const GamePage = () => {
	const {author, slug} = useParams();
	const [searchParams, setSearchParams] = useSearchParams();
	const room = searchParams.get('room');
	const socket = useWebsocket({
		url: `/api/ws/room?room=${room}`,
		// url: "wss://echo.websocket.org",
		onMessage({message}) {
			console.log('message', message);
		}
	})
	// const version = searchParams.get('v');
	const [v, setVersion] = useState<string | null>(null);
	const [info, setInfo] = useState<Info | null>(null);

	const version = v ?? info?.release?.version ?? info?.versions[0];

	useEffect(() => {
		const fetchInfo = async () => {
			let url = `/api/release?author=${author}&slug=${slug}`;
			if (version) {
				url += `&version=${version}`;
			}
			const information = await fetch(url);
			const json = await information.json();
			setInfo(json);
		}
		fetchInfo();
	}, [setInfo, author, slug, version]);

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

	if (!info.release) {
		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>{info.release.manifest.title ?? slug!.split("-").map(word => word[0].toUpperCase()+word.slice(1)).join(" ")}</h1>
				<h2>by <Link to={`/u/${info.release.author}`}>{info.release.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;
					}
				`}>
					<Pico8Console carts={info.release.carts} />
				</div>
				<div className={css`
					display: flex;
					justify-content: end;
				`}>
					Version: <select defaultValue={info.release.version} onChange={(ev) => setVersion(ev.target.value)}>
						{
							[...info.versions].reverse().map(v => (
								<option key={v} value={v}>{v}</option>
							))
						}
					</select>
				</div>
			</div>
			<div>
				<button onClick={() => {
					room && socket.sendMessage({room, type: "hello", name: "world"});
				}}>Websocket</button>
			</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>
	)
}