Merge branch 'main' into dev

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 src/server/public/dist
+src/server/shrinko8
 .env

src/client/GamePage.tsx

@@ -0,0 +1,101 @@
+import { useNavigate, 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 navigate = useNavigate();
+	const [info, setInfo] = useState<Info | null>(null);
+
+	useEffect(() => {
+		const fetchInfo = async () => {
+			let url = `/api/release?author=${author}&slug=${slug}`;
+			if (version) {
+				url += `&version=${version.slice(1)}`;
+			}
+			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;
+			background-color: hsl(230, 10%, 10%);
+			color: white;
+		`}>
+			<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 {info.release.author}</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;
+						}
+					`}>
+						<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>
+				</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>
+	)
+}

src/client/HomePage.tsx

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

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 (
-		<div className={css`
+		<Routing/>
-			min-height: 100vh;
+		// <div className={css`
-		`}>
+		// 	min-height: 100vh;
-			<h1>Picobook</h1>
+		// `}>
-			<Pico8Console carts={testcarts.carts} />
+		// 	<h1>Picobook</h1>
-		</div>
+		// 	<Pico8Console carts={testcarts.carts} />
+		// </div>
 	);
 };
 

src/client/pico8-client/Pico8Console.tsx

@@ -8,16 +8,27 @@ type Pico8ConsoleImperatives = {
 
 export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedRef: ForwardedRef<Pico8ConsoleImperatives>) => {
 	const {carts} = props;
+	const [playing, setPlaying] = useState(false);
 	const ref = useRef<HTMLDivElement>(null);
 	const [handle, setHandle] = useState<PicoPlayerHandle | null>(null);
 	const attachConsole = useCallback(async () => {
 		const picoConsole = await makePicoConsole({
 			carts,
 		});
+		picoConsole.canvas.tabIndex=0;
 		if (ref.current) {
 			ref.current.appendChild(picoConsole.canvas);
+			picoConsole.canvas.focus();
 		}
 		setHandle(picoConsole);
+		picoConsole.canvas.addEventListener('keydown',(event) => {
+			if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+				event.preventDefault();
+			}
+		}, {passive: false});
+		picoConsole.canvas.addEventListener('click', () => {
+			picoConsole.canvas.focus();
+		})
 	}, [carts]);
 	useImperativeHandle(forwardedRef, () => ({
 		getPicoConsoleHandle() {
@@ -25,8 +36,37 @@ export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedR
 		}
 	}), [handle]);
 	useEffect(() => {
+		if (playing) {
 			attachConsole();
-	}, [attachConsole]);
+			return () => {
+				if (ref.current) {
+					ref.current.innerHTML = "";
+				}
+			}
+		}
+	}, [playing, attachConsole]);
+	if (!playing) {
+		return (
+			<div
+				ref={ref}
+				className={css`
+					width: 100%;
+					height: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					aspect-ratio: 1;
+					background-color: black;
+					color: white;
+					cursor: pointer;
+				`}
+				tabIndex={0}
+				onClick={() => {setPlaying(true)}}
+			>
+				Play!
+			</div>
+		)
+	}
 	return (
 		<div ref={ref} className={css`
 			width: 100%;

src/client/pico8-client/build/veryRawRenderCart.js

@@ -18435,6 +18435,7 @@ use chrome, FireFox or Internet Explorer 11`);
 var require_veryRawRenderCart = __commonJS((exports, module) => {
   var __dirname = "/home/dylan/repos/picobook/src/client/pico8-client";
   window.P8 = function(Module, cartNames, cartDatas) {
+    const codo_textarea_el = Module.codo_textarea || document.getElementById("codo_textarea");
     let p8_touch_detected;
     let p8_dropped_cart;
     let p8_dropped_cart_name;
@@ -19390,7 +19391,7 @@ var require_veryRawRenderCart = __commonJS((exports, module) => {
     }, function() {
       if (typeof codo_key_buffer === "undefined")
         codo_key_buffer = [];
-      document.addEventListener("keydown", function(e) {
+      Module["canvas"].addEventListener("keydown", function(e) {
         var val = -1;
         if (e.key.length == 1) {
           val = e.key.charCodeAt(0);
@@ -19406,7 +19407,7 @@ var require_veryRawRenderCart = __commonJS((exports, module) => {
           if (val == -1) {
           }
         }
-        var el2 = document.getElementById("codo_textarea");
+        var el2 = codo_textarea_el;
         codo_key_buffer.push(val);
       });
     }, function() {
@@ -19515,7 +19516,7 @@ var require_veryRawRenderCart = __commonJS((exports, module) => {
     }, function() {
       if (document.hidden)
         return 0;
-      el = typeof codo_textarea === "undefined" ? document.getElementById("codo_textarea") : codo_textarea;
+      el = typeof codo_textarea === "undefined" ? codo_textarea_el : codo_textarea;
       if (el && el == document.activeElement)
         return 1;
       el = document.activeElement;
@@ -19529,13 +19530,13 @@ var require_veryRawRenderCart = __commonJS((exports, module) => {
       }
       return 0;
     }, function() {
-      el = typeof codo_textarea === "undefined" ? document.getElementById("codo_textarea") : codo_textarea;
+      el = typeof codo_textarea === "undefined" ? codo_textarea_el : codo_textarea;
       if (el && el.style.display != "none") {
         el.focus();
         el.select();
       }
     }, function() {
-      el = typeof codo_textarea === "undefined" ? document.getElementById("codo_textarea") : codo_textarea;
+      el = typeof codo_textarea === "undefined" ? codo_textarea_el : codo_textarea;
       if (el && el.style.display != "none") {
         el.select();
       }
@@ -19550,7 +19551,7 @@ var require_veryRawRenderCart = __commonJS((exports, module) => {
     }, function() {
       Module["canvas"].exitPointerLock();
     }, function() {
-      el = typeof codo_textarea === "undefined" ? document.getElementById("codo_textarea") : codo_textarea;
+      el = typeof codo_textarea === "undefined" ? codo_textarea_el : codo_textarea;
       if (el) {
       }
     }, function() {
@@ -19558,21 +19559,21 @@ var require_veryRawRenderCart = __commonJS((exports, module) => {
     }, function($0, $1) {
       _codo_str_out = Module.UTF8ToString($0, $1);
     }, function() {
-      el = typeof codo_textarea === "undefined" ? document.getElementById("codo_textarea") : codo_textarea;
+      el = typeof codo_textarea === "undefined" ? codo_textarea_el : codo_textarea;
       if (el) {
         el.value = _codo_str_out;
         return 0;
       } else
         return 1;
     }, function() {
-      el = typeof codo_textarea === "undefined" ? document.getElementById("codo_textarea") : codo_textarea;
+      el = typeof codo_textarea === "undefined" ? codo_textarea_el : codo_textarea;
       if (el && el.style.display == "none" && (typeof p8_touch_detected === "undefined" || !p8_touch_detected)) {
         el.style.display = "";
         el.focus();
         el.select();
       }
     }, function() {
-      el = typeof codo_textarea === "undefined" ? document.getElementById("codo_textarea") : codo_textarea;
+      el = typeof codo_textarea === "undefined" ? codo_textarea_el : codo_textarea;
       if (el && el.style.display != "none" && el.value != "") {
         _codo_text_value = el.value;
         return 1;

src/client/pico8-client/rawRenderCart.ts

@@ -3,7 +3,7 @@ import "./build/veryRawRenderCart.js";
 
 export type PicoBool = 0 | 1;
 
-export type RenderCart = (Module: {canvas: HTMLCanvasElement}, cartNames: string[], cartDatas: number[][], audioContext: AudioContext) => {
+export type RenderCart = (Module: {canvas: HTMLCanvasElement, codo_textarea?: HTMLTextAreaElement}, cartNames: string[], cartDatas: number[][], audioContext: AudioContext) => {
 	p8_touch_detected?: PicoBool;
 	p8_dropped_cart?: string;
 	p8_dropped_cart_name?: string;

src/client/pico8-client/renderCart.ts

@@ -80,12 +80,18 @@ const getRom = async (cart: PicoCart) => {
 
 export const makePicoConsole = async (props: {
 	canvas?: HTMLCanvasElement;
+	codoTextarea?: HTMLTextAreaElement;
 	audioContext?: AudioContext;
 	carts: PicoCart[];
 }): Promise<PicoPlayerHandle> => {
-	const {carts, canvas = document.createElement("canvas"), audioContext = new AudioContext()} = props;
+	const {carts, canvas = document.createElement("canvas"), codoTextarea = document.createElement("textarea"), audioContext = new AudioContext()} = props;
 	canvas.style.imageRendering = "pixelated";
-	const Module = {canvas};
+	codoTextarea.style.display="none";
+	codoTextarea.style.position="fixed";
+	codoTextarea.style.left="-9999px";
+	codoTextarea.style.height="0px";
+	codoTextarea.style.overflow="hidden";
+	const Module = {canvas, keyboardListeningElement: canvas};
 	const cartsDatas = await Promise.all(carts.map(cart => getRom(cart)));
 	const handle = rawRenderCart(Module, carts.map(cart => cart.name), cartsDatas, audioContext);
 	handle.pico8_state = {};

src/client/pico8-client/veryRawRenderCart.js

@@ -1,4 +1,6 @@
 window.P8 = function (Module, cartNames, cartDatas) {
+	const codo_textarea_el = Module.codo_textarea || document.getElementById("codo_textarea");
+
 	let p8_touch_detected;
 	let p8_dropped_cart;
 	let p8_dropped_cart_name;
@@ -34,7 +36,7 @@ window.P8 = function (Module, cartNames, cartDatas) {
 	var _cdpos=0; var iii=0; var ciii=0;
 	
 
-	var Module=typeof Module!=="undefined"?Module:{};if(!Module.expectedDataFileDownloads){Module.expectedDataFileDownloads=0;Module.finishedDataFileDownloads=0}Module.expectedDataFileDownloads++;(function(){var loadPackage=function(metadata){function runWithFS(){var fileData0=[];fileData0.push.apply(fileData0,[67,80,79,68,68,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,99,70,73,76,0,0,0,0,123,144,0,0,112,111,100,47,112,105,99,111,56,95,98,111,111,116,46,112,56,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,97,1,0,0,242,16,112,105,99,111,45,56,32,99,97,114,116,114,105,100,103,101,32,47,47,32,104,116,116,112,58,47,47,119,119,119,46,31,0,255,13,46,99,111,109,10,118,101,114,115,105,111,110,32,56,10,95,95,108,117,97,95,95,10,10,45,45,62,56,6,0,25,159,95,95,103,102,120,95,95,10,48,1,0,108,15,129,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,45,1,137,64,31,102,137,64,112,15,139,1,109,15,1,1,239,95,95,95,109,97,112,10,2,240,15,1,1,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,44,50,95,95,115,187,98,48,49,48,99,17,0,161,51,48,53,53,53,50,98,53,54,53,10,0,64,51,53,53,52,5,0,128,49,53,51,53,55,48,53,48,3,0,15,5,0,106,0,169,0,16,56,12,0,115,50,52,48,51,53,50,52,26,0,15,91,2,130,30,49,154,0,15,169,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,238,113,95,95,109,117,115,105,99,114,74,50,32,52,49,2,0,15,12,0,255,255,224,80,49,52,49,10,10,99,70,73,76,0,0,0,0,18,190,12,0,112,111,100,47,103,102,120,49,46,112,111,100,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,122,74,0,0,243,22,67,80,79,68,68,0,0,0,1,0,0,0,103,102,120,49,46,112,111,100,0,47,112,97,98,97,47,112,105,99,111,56,47,112,111,100,47,25,0,63,12,1,0,1,0,10,177,67,66,77,80,20,0,1,0,128,0,0,4,0,47,32,0,1,0,255,255,255,255,255,255,255,255,207,79,77,0,255,255,4,0,73,47,0,0,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,91,63,163,255,255,4,0,73,47,232,241,4,0,75,47,170,204,4,0,75,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,155,79,39,236,255,255,4,0,73,47,232,241,4,0,255,12,47,168,119,4,0,75,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,59,15,1,0,77,79,54,228,0,255,4,0,73,15,160,1,77,63,156,118,131,4,0,74,15,160,1,77,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,155,15,1,0,77,79,255,173,41,255,4,0,73,15,99,1,77,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,92,15,1,0,255,255,255,255,255,255,255,36,97,67,80,65,76,0,3,11,0,255,39,29,43,83,126,37,83,0,135,81,171,82,54,95,87,79,194,195,199,255,241,232,255,0,77,255,163,0,255,236,39,0,228,54,41,173,255,131,118,156,255,119,168,255,204,170,0,0,0,2,4,6,2,4,8,3,0,101,111,3,5,10,3,5,10,126,0,100,31,9,54,0,37,27,9,192,0,5,3,0,254,33,41,24,20,17,29,53,66,33,54,18,83,89,116,47,41,73,51,59,162,136,121,243,239,125,190,18,80,255,108,36,168,231,46,0,181,67,6,90,181,117,70,101,255,110,89,255,157,129,122,1,15,3,0,255,44,255,2,67,66,77,80,164,1,0,0,40,0,0,0,10,0,0,0,8,68,3,24,15,44,0,20,63,9,7,15,39,0,17,95,10,7,7,7,14,41,0,17,51,11,7,13,10,0,66,7,7,7,7,5,0,20,0,5,0,22,7,25,0,37,0,12,39,0,0,3,0,5,4,0,4,16,0,0,10,0,1,3,0,23,0,79,0,14,40,0,3,99,0,9,40,0,5,7,0,10,80,0,1,18,0,12,40,0,6,165,0,9,159,0,31,7,180,4,54,57,79,72,67,180,4,91,231,39,0,231,86,180,4,15,1,0,29,240,3,28,0,73,109,24,69,0,122,44,160,72,50,52,54,53,173,177,183,100,14,240,8,0,77,255,132,0,255,255,39,0,226,50,41,173,255,174,75,176,255,136,188,255,214,197,48,0,32,48,102,144,0,177,131,72,171,82,54,63,65,65,180,182,188,48,0,49,42,255,163,79,0,96,231,86,41,162,255,132,48,0,245,7,175,255,217,177,0,0,0,32,51,123,140,28,60,0,131,49,171,100,54,80,80,80,120,0,35,255,155,9,0,97,63,155,255,132,112,169,192,0,0,75,0,255,0,28,24,87,135,37,77,0,147,60,0,0,0,69,69,69,180,0,2,98,146,133,174,255,105,154,48,0,48,55,67,91,19,0,143,135,81,0,0,0,86,70,59,48,0,2,53,131,118,156,12,0,53,37,55,77,Line truncated
+	var Module=typeof Module!=="undefined"?Module:{};if(!Module.expectedDataFileDownloads){Module.expectedDataFileDownloads=0;Module.finishedDataFileDownloads=0}Module.expectedDataFileDownloads++;(function(){var loadPackage=function(metadata){function runWithFS(){var fileData0=[];fileData0.push.apply(fileData0,[67,80,79,68,68,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,99,70,73,76,0,0,0,0,123,144,0,0,112,111,100,47,112,105,99,111,56,95,98,111,111,116,46,112,56,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,97,1,0,0,242,16,112,105,99,111,45,56,32,99,97,114,116,114,105,100,103,101,32,47,47,32,104,116,116,112,58,47,47,119,119,119,46,31,0,255,13,46,99,111,109,10,118,101,114,115,105,111,110,32,56,10,95,95,108,117,97,95,95,10,10,45,45,62,56,6,0,25,159,95,95,103,102,120,95,95,10,48,1,0,108,15,129,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,45,1,137,64,31,102,137,64,112,15,139,1,109,15,1,1,239,95,95,95,109,97,112,10,2,240,15,1,1,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,44,50,95,95,115,187,98,48,49,48,99,17,0,161,51,48,53,53,53,50,98,53,54,53,10,0,64,51,53,53,52,5,0,128,49,53,51,53,55,48,53,48,3,0,15,5,0,106,0,169,0,16,56,12,0,115,50,52,48,51,53,50,52,26,0,15,91,2,130,30,49,154,0,15,169,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,238,113,95,95,109,117,115,105,99,114,74,50,32,52,49,2,0,15,12,0,255,255,224,80,49,52,49,10,10,99,70,73,76,0,0,0,0,18,190,12,0,112,111,100,47,103,102,120,49,46,112,111,100,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,122,74,0,0,243,22,67,80,79,68,68,0,0,0,1,0,0,0,103,102,120,49,46,112,111,100,0,47,112,97,98,97,47,112,105,99,111,56,47,112,111,100,47,25,0,63,12,1,0,1,0,10,177,67,66,77,80,20,0,1,0,128,0,0,4,0,47,32,0,1,0,255,255,255,255,255,255,255,255,207,79,77,0,255,255,4,0,73,47,0,0,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,91,63,163,255,255,4,0,73,47,232,241,4,0,75,47,170,204,4,0,75,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,155,79,39,236,255,255,4,0,73,47,232,241,4,0,255,12,47,168,119,4,0,75,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,59,15,1,0,77,79,54,228,0,255,4,0,73,15,160,1,77,63,156,118,131,4,0,74,15,160,1,77,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,155,15,1,0,77,79,255,173,41,255,4,0,73,15,99,1,77,15,0,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,92,15,1,0,255,255,255,255,255,255,255,36,97,67,80,65,76,0,3,11,0,255,39,29,43,83,126,37,83,0,135,81,171,82,54,95,87,79,194,195,199,255,241,232,255,0,77,255,163,0,255,236,39,0,228,54,41,173,255,131,118,156,255,119,168,255,204,170,0,0,0,2,4,6,2,4,8,3,0,101,111,3,5,10,3,5,10,126,0,100,31,9,54,0,37,27,9,192,0,5,3,0,254,33,41,24,20,17,29,53,66,33,54,18,83,89,116,47,41,73,51,59,162,136,121,243,239,125,190,18,80,255,108,36,168,231,46,0,181,67,6,90,181,117,70,101,255,110,89,255,157,129,122,1,15,3,0,255,44,255,2,67,66,77,80,164,1,0,0,40,0,0,0,10,0,0,0,8,68,3,24,15,44,0,20,63,9,7,15,39,0,17,95,10,7,7,7,14,41,0,17,51,11,7,13,10,0,66,7,7,7,7,5,0,20,0,5,0,22,7,25,0,37,0,12,39,0,0,3,0,5,4,0,4,16,0,0,10,0,1,3,0,23,0,79,0,14,40,0,3,99,0,9,40,0,5,7,0,10,80,0,1,18,0,12,40,0,6,165,0,9,159,0,31,7,180,4,54,57,79,72,67,180,4,91,231,39,0,231,86,180,4,15,1,0,29,240,3,28,0,73,109,24,69,0,122,44,160,72,50,52,54,53,173,177,183,100,14,240,8,0,77,255,132,0,255,255,39,0,226,50,41,173,255,174,75,176,255,136,188,255,214,197,48,0,32,48,102,144,0,177,131,72,171,82,54,63,65,65,180,182,188,48,0,49,42,255,163,79,0,96,231,86,41,162,255,132,48,0,245,7,175,255,217,177,0,0,0,32,51,123,140,28,60,0,131,49,171,100,54,80,80,80,120,0,35,255,155,9,0,97,63,155,255,132,112,169,192,0,0,75,0,255,0,28,24,87,135,37,77,0,147,60,0,0,0,69,69,69,180,0,2,98,146,133,174,255,105,154,48,0,48,55,67,91,19,0,143,135,81,0,0,0,86,70,59,48,0,2,53,131,118,156,12,0,53,37,55,77,Line truncated
 	var asm=(/** @suppress {uselessCode} */ function(global,env,buffer) {
 	"use asm";var a=new global.Int8Array(buffer),b=new global.Int16Array(buffer),c=new global.Int32Array(buffer),d=new global.Uint8Array(buffer),e=new global.Uint16Array(buffer),f=new global.Float32Array(buffer),g=new global.Float64Array(buffer),h=env.ae|0,i=env.af|0,j=0,k=0,l=0,m=0,n=0,o=0,p=0,q=0.0,r=global.NaN,s=global.Infinity,t=global.Math.floor,u=global.Math.abs,v=global.Math.sqrt,w=global.Math.cos,x=global.Math.sin,y=global.Math.atan,z=global.Math.atan2,A=global.Math.ceil,B=global.Math.imul,C=global.Math.min,D=global.Math.clz32,E=env.a,F=env.b,G=env.c,H=env.d,I=env.e,J=env.f,K=env.g,L=env.h,M=env.i,N=env.j,O=env.k,P=env.l,Q=env.m,R=env.n,S=env.o,T=env.p,U=env.q,V=env.r,W=env.s,X=env.t,Y=env.u,Z=env.v,_=env.w,$=env.x,aa=env.y,ba=env.z,ca=env.A,da=env.B,ea=env.C,fa=env.D,ga=env.E,ha=env.F,ia=env.G,ja=env.H,ka=env.I,la=env.J,ma=env.K,na=env.L,oa=env.M,pa=env.N,qa=env.O,ra=env.P,sa=env.Q,ta=env.R,ua=env.S,va=env.T,wa=env.U,xa=env.V,ya=env.W,za=env.X,Aa=env.Y,Ba=env.Z,Ca=env._,Da=env.$,Ea=env.aa,Fa=env.ab,Ga=env.ac,Ha=env.ad,Ia=3145136,Ja=8388016,Ka=0.0;
 	// EMSCRIPTEN_START_FUNCS

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 <>
+		{/* <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} />;

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 {

src/server/public/index.html

@@ -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;

src/server/public/reference.html

@@ -1120,7 +1120,22 @@ canvas{
 
 <!-- Add content below the cart here -->
 
-
+<div>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+<input type="text"/>
+	</div>
 
 
 </div> <!-- body_0 -->