improve ui

src/client/pico8-client/Pico8Console.tsx

@@ -9,45 +9,26 @@ 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();
-		})
+		picoConsole.canvas.tabIndex=0;
 		if (ref.current) {
 			ref.current.appendChild(picoConsole.canvas);
-			ref.current.appendChild(codoTextarea);
+			picoConsole.canvas.focus();
 		}
 		setHandle(picoConsole);
-		listeners.current.keydown = function (event) {
-			console.log("keydown", event.key);
-			if (!playingRef.current) {
-				return;
+		picoConsole.canvas.addEventListener('keydown',(event) => {
+			if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+				event.preventDefault();
 			}
-			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}
-		);
+		}, {passive: false});
+		picoConsole.canvas.addEventListener('click', () => {
+			picoConsole.canvas.focus();
+		})
 	}, [carts]);
 	useImperativeHandle(forwardedRef, () => ({
 		getPicoConsoleHandle() {
@@ -55,17 +36,12 @@ export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedR
 		}
 	}), [handle]);
 	useEffect(() => {
-		if (playing && playingRef.current) {
+		if (playing) {
 			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]);
@@ -84,7 +60,8 @@ export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedR
 					color: white;
 					cursor: pointer;
 				`}
-				onClick={() => {playingRef.current = true; setPlaying(true)}}
+				tabIndex={0}
+				onClick={() => {setPlaying(true)}}
 			>
 				Play!
 			</div>