gpio!

src/client/GamePage.tsx

@@ -1,10 +1,15 @@
 import { Link, useParams, useSearchParams } from "react-router-dom";
-import { useEffect, useRef, useState } from "react";
+import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { css } from "@emotion/css";
 import { useWebsocket } from "./hooks/useWebsocket";
 import { Pico8Player } from "@athingperday/react-pico-player";
 
-// type ConsoleRef = Parameters<typeof Pico8Player>["0"]["consoleRef"];
+type PicoPlayerHandle =
+	NonNullable<
+		Parameters<typeof Pico8Player>["0"]["consoleRef"]
+	> extends MutableRefObject<infer T>
+		? NonNullable<T>
+		: never;
 
 type Game = {
 	carts: Parameters<typeof Pico8Player>["0"]["carts"];
@@ -12,30 +17,37 @@ type Game = {
 
 export const GamePage = () => {
 	const { author, slug } = useParams();
-	// const [searchParams, setSearchParams] = useSearchParams();
-	// const room = searchParams.get('room');
-	// const picoRef = useRef<ConsoleRef>(null);
-	// 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);
-	// 	}
-	// })
-	// const version = searchParams.get('v');
+	const [text, setText] = useState("");
+	const [prevGpio, setPrevGpio] = useState<number[] | null>(null);
+	const [searchParams, setSearchParams] = useSearchParams();
+	const room = searchParams.get("room");
+	const picoRef = useRef<PicoPlayerHandle>(null);
+	const socket = useWebsocket({
+		url: `/api/ws/room?room=${room}`,
+		onMessage({ message }) {
+			// console.log("message", message);
+			const msg = message as any;
+			if (msg.getGpio) {
+				if (picoRef.current) {
+					const handle = picoRef.current;
+					if (handle) {
+						socket.sendMessage({ gpio: handle.gpio });
+					}
+				}
+			}
+			if (msg.gpio) {
+				if (picoRef.current) {
+					const handle = picoRef.current;
+					if (handle) {
+						// console.log("updating pico gpio");
+						handle.gpio.length = 0;
+						handle.gpio.push(...msg.gpio);
+						setPrevGpio([...handle.gpio]);
+					}
+				}
+			}
+		},
+	});
 	const [game, setGame] = useState<Game | null>(null);
 
 	useEffect(() => {
@@ -49,6 +61,28 @@ export const GamePage = () => {
 		fetchInfo();
 	}, [setGame, slug]);
 
+	useEffect(() => {
+		const interval = setInterval(() => {
+			const handle = picoRef.current;
+			if (!handle) {
+				return;
+			}
+			if (JSON.stringify(handle.gpio) !== JSON.stringify(prevGpio)) {
+				if (prevGpio) {
+					setPrevGpio([...handle.gpio]);
+					socket.sendMessage({ gpio: handle.gpio });
+				} else {
+					socket.sendMessage({ getGpio: true });
+					setPrevGpio([...handle.gpio]);
+				}
+			}
+		}, 1000 / 60);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+
 	if (!game) {
 		return <div>LOADING...</div>;
 	}
@@ -90,19 +124,19 @@ export const GamePage = () => {
 						}
 					`}
 				>
-					<Pico8Player
-						// consoleRef={picoRef}
-						carts={game.carts}
-						// onGpioChange={(gpio: number[]) => {
-						// console.log("sending gpio");
-						// socket.sendMessage({
-						// 	type: "gpio",
-						// 	gpio,
-						// });
-						// }}
-					/>
+					<Pico8Player consoleRef={picoRef} carts={game.carts} />
 				</div>
 			</div>
+			<div>
+				<input onChange={(x) => setText(x.target.value)} />
+				<button
+					onClick={() => {
+						socket.sendMessage({ text });
+					}}
+				>
+					Send
+				</button>
+			</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> */}

src/client/hooks/useWebsocket.ts

@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
-export const useWebsocket = (props: {url: string; onMessage: (stuff: {socket: WebSocket; message: unknown}) => void}) => {
-    const {url, onMessage} = props;
+export const useWebsocket = (props: {
+	url: string;
+	onMessage: (stuff: { socket: WebSocket; message: unknown }) => void;
+}) => {
+	const { url, onMessage } = props;
 	const onMessageRef = useRef(onMessage);
 	const ws = useRef<WebSocket | null>(null);
 	onMessageRef.current = onMessage;
@@ -14,7 +17,10 @@ export const useWebsocket = (props: {url: string; onMessage: (stuff: {socket: We
 		});
 
 		webSocket.addEventListener("message", (event: any) => {
-            onMessageRef.current({socket: webSocket, message: JSON.parse(event.data)});
+			onMessageRef.current({
+				socket: webSocket,
+				message: JSON.parse(event.data),
+			});
 		});
 
 		webSocket.addEventListener("error", (event) => {
@@ -31,16 +37,16 @@ export const useWebsocket = (props: {url: string; onMessage: (stuff: {socket: We
 		return () => {
 			webSocket.close();
 		};
-
 	}, [url]);
 
 	const sendMessage = useCallback((message: unknown) => {
 		if (ws.current && ws.current.readyState === WebSocket.OPEN) {
 			ws.current.send(JSON.stringify(message));
+			// console.log("sending", message);
 		} else {
 			console.error("WebSocket is not open. Message not sent.");
 		}
 	}, []);
 
-    return {sendMessage};
+	return { sendMessage };
 };