From fb145c7531ddd295617d45e733e0fe12a5ff35a1 Mon Sep 17 00:00:00 2001 From: dylan <> Date: Sun, 31 Mar 2024 19:40:06 -0700 Subject: [PATCH 01/11] frontend --- src/client/GamePage.tsx | 64 ++++++++++++++++++++++++++++++++++++ src/client/HomePage.tsx | 3 ++ src/client/app.tsx | 14 ++++---- src/client/routing.tsx | 37 +++++++++++++++++++++ src/server/index.ts | 8 ++++- src/server/public/index.html | 2 +- 6 files changed, 120 insertions(+), 8 deletions(-) create mode 100644 src/client/GamePage.tsx create mode 100644 src/client/HomePage.tsx create mode 100644 src/client/routing.tsx diff --git a/src/client/GamePage.tsx b/src/client/GamePage.tsx new file mode 100644 index 0000000..51de8ec --- /dev/null +++ b/src/client/GamePage.tsx @@ -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(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 ( +
+ LOADING... +
+ ) + } + + if (!info.release) { + return ( +
+ NOT FOUND +
+ ) + } + + return ( +
+

{info.release.manifest.title ?? slug!.split("-").map(word => word[0].toUpperCase()+word.slice(1)).join(" ")}

+ +
By: {info.release.author}
+ +
+ ) +} \ No newline at end of file diff --git a/src/client/HomePage.tsx b/src/client/HomePage.tsx new file mode 100644 index 0000000..0fe54a6 --- /dev/null +++ b/src/client/HomePage.tsx @@ -0,0 +1,3 @@ +export const HomePage = () => { + return
Welcome to Picobook!
+} \ No newline at end of file diff --git a/src/client/app.tsx b/src/client/app.tsx index 5f0c34d..98f4011 100644 --- a/src/client/app.tsx +++ b/src/client/app.tsx @@ -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 ( -
-

Picobook

- -
+ + //
+ //

Picobook

+ // + //
); }; diff --git a/src/client/routing.tsx b/src/client/routing.tsx new file mode 100644 index 0000000..f67a7a0 --- /dev/null +++ b/src/client/routing.tsx @@ -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 <> + {/* */} + +} + +const router = createBrowserRouter([ + { + element: , + children: [ + { + path: "/", + element: , + // loader: () => { + // return redirect("/megachat"); + // } + }, + { + path: "/u/:author/:slug", + element: , + }, + { + path: "/u/:author/:slug/:version", + element: , + }, + ], + }, +]); + +export const Routing = () => ; \ No newline at end of file diff --git a/src/server/index.ts b/src/server/index.ts index bb23c48..d74db0f 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -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 { diff --git a/src/server/public/index.html b/src/server/public/index.html index f96075f..5a63f9a 100644 --- a/src/server/public/index.html +++ b/src/server/public/index.html @@ -1,7 +1,7 @@ - +