patching for smoother experience

src/client/GamePage.tsx

@@ -15,6 +15,22 @@ type Game = {
 	carts: Parameters<typeof Pico8Player>["0"]["carts"];
 };
 
+const getPatch = (before: number[], after: number[]) => {
+	const diff: Record<number, number> = {};
+	for (const i in after) {
+		if (after[i] !== before[i]) {
+			diff[i] = after[i];
+		}
+	}
+	return diff;
+};
+
+const applyPatch = (before: number[], patch: Record<number, number>) => {
+	for (const i in patch) {
+		before[i] = patch[i];
+	}
+};
+
 export const GamePage = () => {
 	const { author, slug } = useParams();
 	// const [text, setText] = useState("");
@@ -46,6 +62,16 @@ export const GamePage = () => {
 					}
 				}
 			}
+			if (msg.gpioPatch) {
+				if (picoRef.current) {
+					const handle = picoRef.current;
+					if (handle) {
+						// console.log("updating pico gpio");
+						applyPatch(handle.gpio, msg.gpioPatch);
+						setPrevGpio([...handle.gpio]);
+					}
+				}
+			}
 		},
 	});
 	const [game, setGame] = useState<Game | null>(null);
@@ -70,7 +96,9 @@ export const GamePage = () => {
 			if (JSON.stringify(handle.gpio) !== JSON.stringify(prevGpio)) {
 				if (prevGpio) {
 					setPrevGpio([...handle.gpio]);
-					socket.sendMessage({ gpio: handle.gpio });
+					socket.sendMessage({
+						gpioPatch: getPatch(prevGpio, handle.gpio),
+					});
 				} else {
 					socket.sendMessage({ getGpio: true });
 					setPrevGpio([...handle.gpio]);