new format wip

src/client/GamePage.tsx

@@ -1,20 +1,18 @@
-import { Link, useParams, useSearchParams } from "react-router-dom"
-import { Pico8Console, Pico8ConsoleImperatives } from "./pico8-client/Pico8Console";
+import { Link, useParams, useSearchParams } from "react-router-dom";
 import { useEffect, useRef, useState } from "react";
-import { DbRelease } from "../server/dbal/dbal";
 import { css } from "@emotion/css";
 import { useWebsocket } from "./hooks/useWebsocket";
+import { Pico8Player } from "@athingperday/react-pico-player";
 
-type Info = {
-    release: DbRelease | null;
-    versions: string[];
-}
+type Game = {
+	carts: Parameters<typeof Pico8Player>["0"]["carts"];
+};
 
 export const GamePage = () => {
-	const {author, slug} = useParams();
+	const { author, slug } = useParams();
 	// const [searchParams, setSearchParams] = useSearchParams();
 	// const room = searchParams.get('room');
-	const picoRef = useRef<Pico8ConsoleImperatives>(null);
+	// const picoRef = useRef<Pico8ConsoleImperatives>(null);
 	// const socket = useWebsocket({
 	// 	url: `/api/ws/room?room=${room}`,
 	// 	// url: "wss://echo.websocket.org",
@@ -36,68 +34,63 @@ export const GamePage = () => {
 	// 	}
 	// })
 	// 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];
+	const [game, setGame] = useState<Game | null>(null);
 
 	useEffect(() => {
 		const fetchInfo = async () => {
-			let url = `/api/release?author=${author}&slug=${slug}`;
-			if (version) {
-				url += `&version=${version}`;
-			}
+			let url = `/api/game?author=${author}&name=${slug ?? ""}`;
 			const information = await fetch(url);
 			const json = await information.json();
-			setInfo(json);
-		}
+			console.log(json);
+			setGame(json);
+		};
 		fetchInfo();
-	}, [setInfo, author, slug, version]);
+	}, [setGame, slug]);
 
-	if (!info) {
-		return (
-			<div>
-				LOADING...
-			</div>
-		)
+	if (!game) {
+		return <div>LOADING...</div>;
 	}
 
-	if (!info.release) {
-		return (
-			<div>
-				NOT FOUND
-			</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>{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%;
+		<div
+			className={css`
 				margin: auto;
-			`}>
-				<div className={css`
-					border: 2px solid transparent;
-					&:focus-within {
-						border: 2px solid limegreen;
-					}
-				`}>
-					<Pico8Console
-						ref={picoRef}
-						carts={info.release.carts}
+				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
+						// ref={picoRef}
+						carts={game.carts}
 						// onGpioChange={(gpio: number[]) => {
 						// console.log("sending gpio");
 						// socket.sendMessage({
@@ -107,22 +100,10 @@ export const GamePage = () => {
 						// }}
 					/>
 				</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>
 				<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>
-	)
-}
+	);
+};