Update the readme

README.md

@@ -1,12 +1,6 @@
-# Firstack
+# Picobook
 
-Firstack is a template repo for a tech stack. This stack includes
-
-- [react](https://react.dev/)
-- [emotion](https://emotion.sh/)
-- [fastify](https://fastify.dev/)
-- [postgres](https://www.postgresql.org/)
-- [typescript](https://www.typescriptlang.org/)
+A website for hosting pico8 projects.
 
 ## Dependencies
 

src/client/GamePage.tsx

@@ -4,7 +4,6 @@ import { useEffect, useRef, useState } from "react";
 import { DbRelease } from "../server/dbal/dbal";
 import { css } from "@emotion/css";
 import { useWebsocket } from "./hooks/useWebsocket";
-import { PicoPortal } from "./components/PicoPortal";
 
 type Info = {
     release: DbRelease | null;
@@ -13,35 +12,29 @@ type Info = {
 
 export const GamePage = () => {
 	const {author, slug} = useParams();
-	const [searchParams, setSearchParams] = useSearchParams();
-	const room = searchParams.get('room');
+	// const [searchParams, setSearchParams] = useSearchParams();
+	// const room = searchParams.get('room');
 	const picoRef = useRef<Pico8ConsoleImperatives>(null);
-	const socket = useWebsocket({
-		url: `/api/ws/room?room=${room}&`,
-		// url: "wss://echo.websocket.org",
-		onMessage({message}) {
-			if (picoRef.current) {
-				const handle = picoRef.current.getPicoConsoleHandle();
-				if (handle) {
-					handle.buttons;
-				}
-			}
-			// const msg = message as any;
-			// if (msg.type === "gpio") {
-			// 	if (picoRef.current) {
-			// 		const handle = picoRef.current.getPicoConsoleHandle();
-			// 		if (handle) {
-			// 			console.log("updating pico gpio");
-			// 			(handle.gpio as any).dontSend = true;
-			// 			handle.gpio.length = 0;
-			// 			handle.gpio.push(...msg.gpio);
-			// 			(handle.gpio as any).dontSend = false;
+	// const socket = useWebsocket({
+	// 	url: `/api/ws/room?room=${room}`,
+	// 	// url: "wss://echo.websocket.org",
+	// 	onMessage({message}) {
+	// 		// const msg = message as any;
+	// 		// if (msg.type === "gpio") {
+	// 		// 	if (picoRef.current) {
+	// 		// 		const handle = picoRef.current.getPicoConsoleHandle();
+	// 		// 		if (handle) {
+	// 		// 			console.log("updating pico gpio");
+	// 		// 			(handle.gpio as any).dontSend = true;
+	// 		// 			handle.gpio.length = 0;
+	// 		// 			handle.gpio.push(...msg.gpio);
+	// 		// 			(handle.gpio as any).dontSend = false;
+	// 		// 		}
+	// 		// 	}
+	// 		// }
+	// 		console.log('message', message);
 	// 	}
-			// 	}
-			// }
-			console.log('message', message);
-		}
-	})
+	// })
 	// const version = searchParams.get('v');
 	const [v, setVersion] = useState<string | null>(null);
 	const [info, setInfo] = useState<Info | null>(null);
@@ -127,7 +120,6 @@ export const GamePage = () => {
 					</select>
 				</div>
 			</div>
-			<PicoPortal />
 			{/* <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> */}

src/client/components/PicoPortal.tsx

@@ -1,26 +0,0 @@
-import { useRef } from "react";
-import { Pico8Console, Pico8ConsoleImperatives } from "../pico8-client/Pico8Console"
-
-export const PicoPortal = () => {
-	const emptyCartData: number[] = new Array(32786).fill(0);
-	const cart = {name: "empty", rom: emptyCartData};
-	// const picoRef = useRef<Pico8ConsoleImperatives>(null);
-
-	return <div>
-		<Pico8Console
-			ref={(ref) => {
-				if (!ref) {
-					return;
-				}
-				const handle = ref.getPicoConsoleHandle();
-				if (!handle) {
-					return;
-				}
-				handle.buttons.subscribe((buttons) => {
-					console.log(buttons);
-				});
-			}}
-			carts={[cart]}
-		/>
-	</div>
-}

src/client/pico8-client/renderCart.ts

@@ -1,7 +1,6 @@
 import { assertNever } from "@firebox/tsutil";
 import { pngToRom } from "./pngToRom";
 import { RenderCart, renderCart as rawRenderCart } from "./rawRenderCart";
-import { Watched, watch } from "../util/watch";
 
 export type PicoCart = {
 	name: string;
@@ -21,16 +20,13 @@ type PlayerButtons = {
 	menu: boolean;
 }
 
-type RawHandle = ReturnType<RenderCart>;
-
 export type PicoPlayerHandle = {
-	raw: RawHandle;
+	raw: ReturnType<RenderCart>;
 	rawModule: unknown;
 	// external things
 	readonly canvas: HTMLCanvasElement;
 
 	// i/o
-	buttons: Watched<NonNullable<RawHandle["pico8_buttons"]>>;
 	setButtons: (buttons: PlayerButtons[]) => void;
 	setMouse: (mouse: {
 		x: number;
@@ -181,7 +177,6 @@ export const makePicoConsole = async (props: {
 		setMouse({x, y, leftClick, rightClick}) {
 			handle.pico8_mouse = [x, y, bitfield(leftClick, rightClick)];
 		},
-		buttons: watch(handle.pico8_buttons!),
 		setButtons(buttons) {
 			// TODO: pad this properly here instead of casting
 			handle.pico8_buttons = buttons.map(({left, right, up, down, o, x, menu}) => bitfield(left, right, up, down, o, x, menu)) as any;

src/client/util/watch.ts

@@ -1,67 +0,0 @@
-const deepEqual = (a: any, b: any) => {
-	if (a === b) return true;
-   
-	if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) return false;
-   
-	let keysA = Object.keys(a), keysB = Object.keys(b);
-   
-	if (keysA.length !== keysB.length) return false;
-   
-	for (let key of keysA) {
-		if (!keysB.includes(key)) return false;
-	
-		if (typeof a[key] === 'function' || typeof b[key] === 'function') {
-			if (a[key].toString() !== b[key].toString()) return false;
-		} else {
-			if (!deepEqual(a[key], b[key])) return false;
-		}
-	}
-   
-	return true;
-}
-
-export type Watched<T> = {
-	value: T;
-	subscribe: (f: (newVal: T, oldVal: T) => void) => void;
-	unsubscribe: (f: (newVal: T, oldVal: T) => void) => void;
-	locked: boolean;
-}
-
-export const watch = <T extends Record<any,any> | any[]>(target: T): Watched<T> => {
-	let listeners: Array<(newVal: T, oldVal: T) => void> = [];
-	let locked = false;
-	const proxy = new Proxy(target, {
-		get(t: any, prop) {
-			return t[prop as any];
-		},
-		set(t: any, prop, newValue) {
-			if (locked) {
-				return false;
-			}
-			const prev = structuredClone(t);
-			t[prop as any] = newValue;
-			if (deepEqual(prev, t)) {
-				listeners.forEach(listener => listener(t, prev));
-			}
-			return true;
-		}
-	});
-	return {
-		get value() {
-			return target;
-		},
-		subscribe(f) {
-			listeners.push(f)
-		},
-		unsubscribe(f) {
-			listeners = listeners.filter(l => l !== f);
-		},
-		get locked() {
-			return locked;
-		},
-		set locked(newVal: boolean) {
-			locked = newVal;
-		}
-	}
-}
-

src/server/public/index.html

@@ -40,6 +40,14 @@
 			footer {
 				max-inline-size: none;
 			}
+
+			a,
+			a:hover,
+			a:focus,
+			a:active,
+			a:visited {
+				color: lime;
+			}
 		</style>
 	</head>
 	<body>