make react component

TODO.md

@@ -1,15 +1,20 @@
-TODO
+# TODO
 
-- [ ] User Auth
+## MVP
-- [x] Component Pack
+- [ ] Update GH Workflow to be by push
-- [x] Typescript Pack
+- [ ] Add version prop to picobook.json
-	- [ ] Can this be used in a way where it doesn't need to be imported everywhere (lib?)
+- [ ] "Compile" carts in server and save them to db
-- [ ] Consider making more parts into Packs
+- [ ] Load cart by URL in React
-	- [ ] tsconfig with extends
+
-	- [ ] server with wrapper around fastify
+## Later
-	- [ ] scripts from package.json
+- [ ] Update pico console handle
-- [ ] Streamline spinning up a server
+- [ ] Add readme prop to picobook.json (figure out best name) and display it in React
-- [ ] Should public be top level?
+- [ ] Multiplayer support
-- [ ] Clean up .env variable names
+- [ ] More console support (touch detected, gamepad count, etc.)
-- [ ] use Temporal (polyfill)?
+- [ ] User accounts to manage published games, and user accounts for players to save progress
-- [ ] Do I want to add testing infrastructure?
+- [ ] GPIO Support (maybe gpio prop in picobook.json can have values like "ignore" | "v1")
+
+## GPIO ideas
+- RGB background color
+- Awards
+- Extra buttons?

src/client/app.tsx

@@ -1,34 +1,16 @@
 import { css } from "@emotion/css";
 import { Center, Cover, Stack } from "@firebox/components";
+import { Pico8Console } from "./pico8-client/Pico8Console";
+import testcarts from "./testcarts";
 
-const App = (props: { name: string }) => {
+const App = (props: {}) => {
-	const {name} = props;
 	return (
-		<Stack>
+		<div className={css`
-			<div className={css`background-color: floralwhite;`}>
+			min-height: 100vh;
-				<Cover gap pad>
+		`}>
-					<Center>
+			<Pico8Console carts={testcarts.carts} />
-						<Stack gap={-1}>
-							<h1>Hello, {name}!</h1>
-							<p>Welcome to a website with a certain design philosophy. Tell me how it's working out! I want to see this text wrap a few times. Hopefully this sentence will help.</p>
-						</Stack>
-					</Center>
-					<Cover.Footer>A page by Dylan Pizzo</Cover.Footer>
-				</Cover>
 		</div>
-			<div className={css`background-color: aliceblue;`}>
-				<Cover gap pad>
-					<Center>
-						<Stack gap={-1}>
-							<h1>Hello, {name}!</h1>
-							<p>Welcome to a website with a certain design philosophy. Tell me how it's working out! I want to see this text wrap a few times. Hopefully this sentence will help.</p>
-						</Stack>
-					</Center>
-					<Cover.Footer>A page by Dylan Pizzo</Cover.Footer>
-				</Cover>
-			</div>
-		</Stack>
 	);
 };
 
-export const app = <App name="World" />;
+export const app = <App />;

src/client/index.ts

@@ -1,8 +1,8 @@
-// import { createRoot } from "react-dom/client";
+import { createRoot } from "react-dom/client";
-// import { app } from "./app.js";
+import { app } from "./app.js";
 
-// const domNode = document.getElementById("root")!;
+const domNode = document.getElementById("root")!;
-// const root = createRoot(domNode);
+const root = createRoot(domNode);
-// root.render(app);
+root.render(app);
 
-export * from "./pico8-client/index";
+// export * from "./pico8-client/index";

src/client/pico8-client/Pico8Console.tsx

@@ -0,0 +1,44 @@
+import { css } from "@emotion/css";
+import { PicoCart, PicoPlayerHandle, makePicoConsole } from "./renderCart";
+import { ForwardedRef, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+
+type Pico8ConsoleImperatives = {
+	getPicoConsoleHandle(): PicoPlayerHandle | null;
+}
+
+export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedRef: ForwardedRef<Pico8ConsoleImperatives>) => {
+	const {carts} = props;
+	const ref = useRef<HTMLDivElement>(null);
+	const [handle, setHandle] = useState<PicoPlayerHandle | null>(null);
+	const attachConsole = useCallback(async () => {
+		const picoConsole = await makePicoConsole({
+			carts,
+		});
+		if (ref.current) {
+			ref.current.appendChild(picoConsole.canvas);
+		}
+		setHandle(picoConsole);
+	}, [carts]);
+	useImperativeHandle(forwardedRef, () => ({
+		getPicoConsoleHandle() {
+			return handle;
+		}
+	}), [handle]);
+	useEffect(() => {
+		attachConsole();
+	}, [attachConsole]);
+	return (
+		<div ref={ref} className={css`
+			width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			& > canvas {
+				width: 100%;
+				height: 100%;
+			}
+		`}></div>
+	);
+});

src/client/pico8-client/rawRenderCart.ts

@@ -1,9 +1,9 @@
 // @ts-ignore
 import "./build/veryRawRenderCart.js";
 
-type PicoBool = 0 | 1;
+export type PicoBool = 0 | 1;
 
-type RenderCart = (Module: {canvas: HTMLCanvasElement}, cartNames: string[], cartDatas: number[][], audioContext: AudioContext) => {
+export type RenderCart = (Module: {canvas: HTMLCanvasElement}, 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

@@ -1,8 +1,8 @@
 import { assertNever } from "@firebox/tsutil";
 import { pngToRom } from "./pngToRom";
-import { renderCart as rawRenderCart } from "./rawRenderCart";
+import { RenderCart, renderCart as rawRenderCart } from "./rawRenderCart";
 
-type PicoCart = {
+export type PicoCart = {
 	name: string;
 	src: string;
 } | {
@@ -20,7 +20,9 @@ type PlayerButtons = {
 	menu: boolean;
 }
 
-type PicoPlayerHandle = {
+export type PicoPlayerHandle = {
+	raw: ReturnType<RenderCart>;
+	rawModule: unknown;
 	// external things
 	readonly canvas: HTMLCanvasElement;
 
@@ -35,16 +37,16 @@ type PicoPlayerHandle = {
 	setGamepadCount: (count: number) => void;
 	readonly gpio: number[]; // read + write (should be 256-tuple)
 
-	// state (all communicated out)
+	// state
 	readonly state: {
-		readonly frameNumber: number;
+		frameNumber: number;
-		readonly isPaused: boolean;
+		isPaused: boolean;
-		readonly hasFocus: boolean;
+		hasFocus: boolean;
-		readonly requestPointerLock: boolean;
+		requestPointerLock: boolean;
-		readonly requirePageNavigateConfirmation: boolean;
+		requirePageNavigateConfirmation: boolean;
-		readonly showDpad: boolean;
+		showDpad: boolean;
-		readonly shutdownRequested: boolean;
+		shutdownRequested: boolean;
-		readonly soundVolume: number;
+		soundVolume: number;
 	};
 
 	// misc?
@@ -109,6 +111,8 @@ export const makePicoConsole = async (props: {
 	];
 	handle.pico8_gamepads = {count: 0};
 	return {
+		raw: handle,
+		rawModule: Module,
 		canvas,
 		state: {
 			frameNumber: handle.pico8_state.frame_number!,

src/client/testcarts.ts

@@ -0,0 +1,21 @@
+const hexToArray = (hex: string) => {
+	const h = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
+	const a = [];
+	for (let i = 0; i < hex.length; i+=2) {
+		a.push(16*h.indexOf(hex[i])+h.indexOf(hex[i+1]));
+	}
+	return a;
+};
+
+export default {
+	"carts": [
+		{
+			"name": "mygame",
+			"rom": hexToArray("000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000077000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000007007000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000070070000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000077000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000Line truncated
+		},
+		{
+			"name": "secondcart",
+			"src": "data:image/png;base64,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"
+		}
+	]
+}

src/server/public/reference.html

@@ -3,11 +3,6 @@
 <meta name="viewport" content="width=device-width, user-scalable=no">
 <script type="text/javascript">
 
-	console.log(Object.keys(window));
-	setTimeout(() => {
-		console.log(Object.keys(window));
-	}, 1000);
-
 	// Default shell for PICO-8 0.2.2 (includes @weeble's gamepad mod 1.0)
 	// This file is available under a CC0 license https://creativecommons.org/share-your-work/public-domain/cc0/
 	// (note: "this file" does not include any cartridge or cartridge artwork injected into a derivative html file when using the PICO-8 html exporter)