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> ) }