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; `}> <div className={css` margin: auto; width: max-content; `}> <h1>{info.release.manifest.title ?? slug!.split("-").map(word => word[0].toUpperCase()+word.slice(1)).join(" ")}</h1> <h2>By {info.release.author}</h2> <div className={css` width: 512px; max-width: 100%; `}> <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.map(v => ( <option key={v} value={v}>{v}</option> )) } </select> </div> </div> </div> ) }