add author page!

src/client/AuthorPage.tsx

@@ -0,0 +1,62 @@
+import { Link, useParams } from "react-router-dom"
+import { useEffect, useState } from "react";
+import { DbRelease } from "../server/dbal/dbal";
+import { css } from "@emotion/css";
+
+type Info = {
+    author: string | null;
+    games: {slug: string; releases: DbRelease[]}[];
+}
+
+export const AuthorPage = () => {
+	const {author} = useParams();
+	const [info, setInfo] = useState<Info | null>(null);
+
+	useEffect(() => {
+		const fetchInfo = async () => {
+			let url = `/api/author?author=${author}`;
+			const information = await fetch(url);
+			const json = await information.json();
+			console.log('json', json);
+			setInfo(json);
+		}
+		fetchInfo();
+	}, [setInfo, author]);
+
+	if (!info) {
+		return (
+			<div>
+				LOADING...
+			</div>
+		)
+	}
+
+	if (!info.author) {
+		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;
+		`}>
+			<h1>{author}</h1>
+			{
+				info.games.map(game => (
+					<Link key={game.slug} to={`/u/${author}/${game.slug}`}>
+						<h3>{game.releases[0].manifest.title ?? game.slug}</h3>
+					</Link>
+				))
+			}
+		</div>
+	)
+}

src/client/GamePage.tsx

@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from "react-router-dom"
+import { Link, useParams } from "react-router-dom"
 import { Pico8Console } from "./pico8-client/Pico8Console";
 import { useEffect, useState } from "react";
 import { DbRelease } from "../server/dbal/dbal";
@@ -10,15 +10,19 @@ type Info = {
 }
 
 export const GamePage = () => {
-	const {author, slug, version} = useParams();
-	const navigate = useNavigate();
+	const {author, slug} = useParams();
+	// const [searchParams, setSearchParams] = useSearchParams();
+	// 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.slice(1)}`;
+				url += `&version=${version}`;
 			}
 			const information = await fetch(url);
 			const json = await information.json();
@@ -29,9 +33,7 @@ export const GamePage = () => {
 
 	if (!info) {
 		return (
-			<div className={`
-				min-height: 100vh;
-			`}>
+			<div>
 				LOADING...
 			</div>
 		)
@@ -39,9 +41,7 @@ export const GamePage = () => {
 
 	if (!info.release) {
 		return (
-			<div className={`
-				min-height: 100vh;
-			`}>
+			<div>
 				NOT FOUND
 			</div>
 		)
@@ -49,53 +49,47 @@ export const GamePage = () => {
 
 	return (
 		<div className={css`
-			min-height: 100vh;
-			background-color: hsl(230, 10%, 10%);
-			color: white;
+			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;
-				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 className={css`
+					border: 2px solid transparent;
+					&:focus-within {
+						border: 2px solid limegreen;
+					}
+				`}>
+					<Pico8Console carts={info.release.carts} />
 				</div>
 				<div className={css`
-					width: 512px;
-					max-width: 100%;
-					margin: auto;
+					display: flex;
+					justify-content: end;
 				`}>
-					<div className={css`
-						border: 2px solid transparent;
-						&:focus-within {
-							border: 2px solid limegreen;
+					Version: <select defaultValue={info.release.version} onChange={(ev) => setVersion(ev.target.value)}>
+						{
+							[...info.versions].reverse().map(v => (
+								<option key={v} value={v}>{v}</option>
+							))
 						}
-					`}>
-						<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>
+					</select>
 				</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>
+				<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>
 	)
 }

src/client/routing.tsx

@@ -1,12 +1,20 @@
 import { Outlet, RouterProvider, ScrollRestoration, createBrowserRouter, redirect } from "react-router-dom"
 import { HomePage } from "./HomePage";
 import { GamePage } from "./GamePage";
+import { AuthorPage } from "./AuthorPage";
+import { css } from "@emotion/css";
 
 const RouteRoot = () => {
 	return <>
 		{/* <Nav> */}
+		<div className={css`
+			min-height: 100vh;
+			background-color: hsl(230, 10%, 10%);
+			color: white;
+		`}>
 			<ScrollRestoration />
 			<Outlet/>
+		</div>
 		{/* </Nav> */}
 	</>
 }
@@ -23,11 +31,11 @@ const router = createBrowserRouter([
 				// }
 			},
 			{
-				path: "/u/:author/:slug",
-				element: <GamePage/>,
+				path: "/u/:author",
+				element: <AuthorPage/>,
 			},
 			{
-				path: "/u/:author/:slug/:version",
+				path: "/u/:author/:slug",
 				element: <GamePage/>,
 			},
 		],

src/server/api/getAuthor.ts

@@ -0,0 +1,34 @@
+import { Type } from "@sinclair/typebox";
+import { FirRouteInput, FirRouteOptions } from "../util/routewrap.ts";
+import { getAuthorGames, getReleases } from "../dbal/dbal.ts";
+
+const method = "GET";
+const url = "/api/author";
+
+const payloadT = Type.Any();
+
+const handler = async ({payload}: FirRouteInput<typeof payloadT>) => {
+	const {author} = payload;
+
+	if (typeof author !== "string") {
+		return {
+			author: null,
+			releases: [],
+		};
+	}
+	console.log("author", author);
+
+	const games = await getAuthorGames({author});
+	
+	return {
+		author,
+		games,
+	}
+};
+
+export default {
+	method,
+	url,
+	payloadT,
+	handler,
+} as const satisfies FirRouteOptions<typeof payloadT>;

src/server/dbal/dbal.ts

@@ -38,12 +38,18 @@ const compareByVersion = (a: DbRelease, b: DbRelease) => compareVersions(a.versi
 
 export const getReleases = async (where: {
 	author: string;
-	slug: string;
+	slug?: string;
 	version?: string;
 }): Promise<DbRelease[]> => {
 	const {author, slug, version} = where;
 	let rows: DbReleaseInternal[];
-	if (!version) {
+	if (!slug) {
+		rows = await db.query(sql`
+			SELECT * from releases
+			WHERE
+				author = ${author}
+		`);
+	} else if (!version) {
 		rows = await db.query(sql`
 			SELECT * from releases
 			WHERE
@@ -84,6 +90,25 @@ export const getRelease = async (where: {
 	}
 }
 
+export const getAuthorGames = async (where: {
+	author: string;
+}) => {
+	const releases = await getReleases(where);
+	const games = releases.reduce((accum, curr) => {
+		const found = accum.find(r => r.slug === curr.slug);
+		if (found) {
+			found.releases.push(curr);
+		} else {
+			accum.push({slug: curr.slug, releases: [curr]});
+		}
+		return accum;
+	}, [] as {slug: string; releases: DbRelease[]}[]);
+	games.forEach(game => {
+		game.releases.sort(compareByVersion);
+	});
+	return games;
+}
+
 export const insertRelease = async (props: {manifest: PicobookManifest, carts: {name: string; rom: number[]}[]}) => {
 	const {manifest, carts} = props;
 	// console.log('carts', JSON.stringify(carts));

src/server/routelist.ts

@@ -1,4 +1,5 @@
 import echo from "./api/echo.ts";
+import getAuthor from "./api/getAuthor.ts";
 import getRelease from "./api/getRelease.ts";
 import release from "./api/release.ts";
 import webhook from "./api/webhook.ts";
@@ -8,6 +9,7 @@ export const routeList = [
 	webhook,
 	release,
 	getRelease,
+	getAuthor,
 ];
 
 export type RouteList = typeof routeList;