dylan/picobook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add author page!

Browse Source
This commit is contained in:
dylan
2024-04-02 19:04:34 -07:00
parent 2b614dcb79
commit 11783ba2fb
6 changed files with 177 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/GamePage.tsx
+41 -47
View File
@@ -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>
)
}