picobook/src/client/GamePage.tsx

import { useNavigate, useParams } 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";

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

export const GamePage = () => {
	const {author, slug, version} = useParams();
	const navigate = useNavigate();
	const [info, setInfo] = useState<Info | null>(null);

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

	if (!info) {
		return (
			<div className={`
				min-height: 100vh;
			`}>
				LOADING...
			</div>
		)
	}

	if (!info.release) {
		return (
			<div className={`
				min-height: 100vh;
			`}>
				NOT FOUND
			</div>
		)
	}

	return (
		<div className={css`
			min-height: 100vh;
			background-color: hsl(230, 10%, 10%);
			color: white;
		`}>
			<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 {info.release.author}</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) => navigate(`/u/${author}/${slug}/v${ev.target.value}`)}>
							{
								[...info.versions].reverse().map(v => (
									<option key={v} value={v}>{v}</option>
								))
							}
						</select>
					</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>
		</div>
	)
}