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

frontend

Browse Source
This commit is contained in:
dylan 2024-03-31 19:40:06 -07:00
parent f17578af17
commit fb145c7531
6 changed files with 120 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/client/GamePage.tsx Normal file
View File

@ -0,0 +1,64 @@
import { 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 [info, setInfo] = useState<Info | null>(null);
useEffect(() => {
const fetchInfo = async () => {
let url = `/api/release?author=${author}&slug=${slug}`;
if (version) {
url += `version=${version}`;
}
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;
`}>
<h1>{info.release.manifest.title ?? slug!.split("-").map(word => word[0].toUpperCase()+word.slice(1)).join(" ")}</h1>
<Pico8Console carts={info.release.carts} />
<div>By: {info.release.author}</div>
<select defaultValue={info.release.version}>
{
info.versions.map(v => (
<option key={v} value={v}>{v}</option>
))
}
</select>
</div>
)
}

3
src/client/HomePage.tsx Normal file
View File

@ -0,0 +1,3 @@
export const HomePage = () => {
return <div>Welcome to Picobook!</div>
}

14
src/client/app.tsx
View File

@ -1,15 +1,17 @@
import { css } from "@emotion/css";
import { Pico8Console } from "./pico8-client/Pico8Console";
import testcarts from "./testcarts";
import { Routing } from "./routing";
const App = (props: {}) => {
return (
<div className={css`
min-height: 100vh;
`}>
<h1>Picobook</h1>
<Pico8Console carts={testcarts.carts} />
</div>
<Routing/>
// <div className={css`
// min-height: 100vh;
// `}>
// <h1>Picobook</h1>
// <Pico8Console carts={testcarts.carts} />
// </div>
);
};

37
src/client/routing.tsx Normal file
View File

@ -0,0 +1,37 @@
import { Outlet, RouterProvider, ScrollRestoration, createBrowserRouter, redirect } from "react-router-dom"
import { HomePage } from "./HomePage";
import { GamePage } from "./GamePage";
const RouteRoot = () => {
return <>
{/* <Nav> */}
<ScrollRestoration />
<Outlet/>
{/* </Nav> */}
</>
}
const router = createBrowserRouter([
{
element: <RouteRoot/>,
children: [
{
path: "/",
element: <HomePage/>,
// loader: () => {
// return redirect("/megachat");
// }
},
{
path: "/u/:author/:slug",
element: <GamePage/>,
},
{
path: "/u/:author/:slug/:version",
element: <GamePage/>,
},
],
},
]);
export const Routing = () => <RouterProvider router={router} />;

8
src/server/index.ts
View File

@ -24,7 +24,13 @@ server.register(fastifyStatic, {
routeList.forEach(firRoute => {
server.route(route(firRoute));
})
});
server.setNotFoundHandler((req, res) => {
if (!req.url.startsWith("/api")) {
res.sendFile('index.html');
}
});
// Run the server!
try {

2
src/server/public/index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<script src="dist/index.js" type="module"></script>
<script src="/dist/index.js" type="module"></script>
<style>
:root {
--measure: 64ch;