improve ui

src/client/GamePage.tsx

@@ -50,16 +50,32 @@ export const GamePage = () => {
 	return (
 		<div className={css`
 			min-height: 100vh;
+			background-color: hsl(230, 10%, 10%);
+			color: white;
 		`}>
 			<div className={css`
 				margin: auto;
 				width: max-content;
+				max-inline-size: 66ch;
+				padding: 1.5em;
+				display: flex;
+				flex-direction: column;
+				gap: 1em;
 			`}>
+				<div>
 					<h1>{info.release.manifest.title ?? slug!.split("-").map(word => word[0].toUpperCase()+word.slice(1)).join(" ")}</h1>
-				<h2>By {info.release.author}</h2>
+					<h2>by {info.release.author}</h2>
+				</div>
 				<div className={css`
 					width: 512px;
 					max-width: 100%;
+					margin: auto;
+				`}>
+					<div className={css`
+						border: 2px solid transparent;
+						&:focus-within {
+							border: 2px solid limegreen;
+						}
 					`}>
 						<Pico8Console carts={info.release.carts} />
 					</div>
@@ -69,27 +85,16 @@ export const GamePage = () => {
 					`}>
 						Version: <select defaultValue={info.release.version} onChange={(ev) => navigate(`/u/${author}/${slug}/v${ev.target.value}`)}>
 							{
-							info.versions.map(v => (
+								[...info.versions].reverse().map(v => (
 									<option key={v} value={v}>{v}</option>
 								))
 							}
 						</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>
+					<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> */}
 			</div>
 		</div>
 	)

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.tabIndex=0;
-		picoConsole.canvas.addEventListener('click', () => {
-			codoTextarea.focus();
-			codoTextarea.select();
-		})
 		if (ref.current) {
 			ref.current.appendChild(picoConsole.canvas);
-			ref.current.appendChild(codoTextarea);
+			picoConsole.canvas.focus();
 		}
 		setHandle(picoConsole);
-		listeners.current.keydown = function (event) {
+		picoConsole.canvas.addEventListener('keydown',(event) => {
-			console.log("keydown", event.key);
+			if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(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();
 			}
-			}
+		}, {passive: false});
-		};
+		picoConsole.canvas.addEventListener('click', () => {
-		document.addEventListener('keydown',
+			picoConsole.canvas.focus();
-			listeners.current.keydown,
+		})
-			{passive: false}
-		);
 	}, [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>

src/client/pico8-client/build/veryRawRenderCart.js

@@ -19391,7 +19391,7 @@ var require_veryRawRenderCart = __commonJS((exports, module) => {
     }, function() {
       if (typeof codo_key_buffer === "undefined")
         codo_key_buffer = [];
-      document.addEventListener("keydown", function(e) {
+      Module["canvas"].addEventListener("keydown", function(e) {
         var val = -1;
         if (e.key.length == 1) {
           val = e.key.charCodeAt(0);

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, codo_textarea: HTMLTextAreaElement}, 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

@@ -91,7 +91,7 @@ export const makePicoConsole = async (props: {
 	codoTextarea.style.left="-9999px";
 	codoTextarea.style.height="0px";
 	codoTextarea.style.overflow="hidden";
-	const Module = {canvas, codo_textarea: codoTextarea};
+	const Module = {canvas, keyboardListeningElement: canvas};
 	const cartsDatas = await Promise.all(carts.map(cart => getRom(cart)));
 	const handle = rawRenderCart(Module, carts.map(cart => cart.name), cartsDatas, audioContext);
 	handle.pico8_state = {};

src/server/public/reference.html

@@ -1120,7 +1120,22 @@ canvas{
 
 <!-- Add content below the cart here -->
 
-
+<div>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+Content here<br/>
+<input type="text"/>
+	</div>
 
 
 </div> <!-- body_0 -->