codo_textarea wip

src/client/GamePage.tsx

@@ -75,6 +75,21 @@ export const GamePage = () => {
 						}
 					</select>
 				</div>
+				<div>
+					Content below<br/>
+					Content below<br/>
+					Content below<br/>
+					Content below<br/>
+					Content below<br/>
+					Content below<br/>
+					Content below<br/>
+					Content below<br/>
+					Content below<br/>
+					Content below<br/>
+					Content below<br/>
+					Content below<br/>
+					Content below<br/>
+				</div>
 			</div>
 		</div>
 	)

src/client/pico8-client/Pico8Console.tsx

@@ -9,16 +9,45 @@ type Pico8ConsoleImperatives = {
 export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedRef: ForwardedRef<Pico8ConsoleImperatives>) => {
 	const {carts} = props;
 	const [playing, setPlaying] = useState(false);
+	const playingRef = useRef(false);
 	const ref = useRef<HTMLDivElement>(null);
+	const listeners = useRef<Partial<{
+		keydown: null | ((ev: KeyboardEvent) => void)
+	}>>({});
 	const [handle, setHandle] = useState<PicoPlayerHandle | null>(null);
 	const attachConsole = useCallback(async () => {
 		const picoConsole = await makePicoConsole({
 			carts,
 		});
+		const codoTextarea: HTMLTextAreaElement = (picoConsole.rawModule as any).codo_textarea;
+		picoConsole.canvas.addEventListener('click', () => {
+			codoTextarea.focus();
+			codoTextarea.select();
+		})
 		if (ref.current) {
 			ref.current.appendChild(picoConsole.canvas);
+			ref.current.appendChild(codoTextarea);
 		}
 		setHandle(picoConsole);
+		listeners.current.keydown = function (event) {
+			console.log("keydown", event.key);
+			if (!playingRef.current) {
+				return;
+			}
+			console.log(picoConsole.state);
+			if (picoConsole.state.hasFocus) {
+				console.log("hasFocus");
+				// block only cursors, M R P, tab
+				if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "M", "R", "P", "m", "r", "p", "Tab"].includes(event.key)) {
+						console.log("preventDefault");
+						event.preventDefault();
+				}
+			}
+		};
+		document.addEventListener('keydown',
+			listeners.current.keydown,
+			{passive: false}
+		);
 	}, [carts]);
 	useImperativeHandle(forwardedRef, () => ({
 		getPicoConsoleHandle() {
@@ -26,12 +55,17 @@ export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedR
 		}
 	}), [handle]);
 	useEffect(() => {
-		if (playing) {
+		if (playing && playingRef.current) {
 			attachConsole();
 			return () => {
+				playingRef.current = false;
 				if (ref.current) {
 					ref.current.innerHTML = "";
 				}
+				if (listeners.current.keydown) {
+					document.removeEventListener("keydown", listeners.current.keydown);
+					listeners.current.keydown = null;
+				}
 			}
 		}
 	}, [playing, attachConsole]);
@@ -50,7 +84,7 @@ export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedR
 					color: white;
 					cursor: pointer;
 				`}
-				onClick={() => {setPlaying(true)}}
+				onClick={() => {playingRef.current = true; setPlaying(true)}}
 			>
 				Play!
 			</div>

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;
@@ -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, codo_textarea: codoTextarea};
 	const cartsDatas = await Promise.all(carts.map(cart => getRom(cart)));
 	const handle = rawRenderCart(Module, carts.map(cart => cart.name), cartsDatas, audioContext);
 	handle.pico8_state = {};