fix(moq-boy): mute by default, escape to collapse, center grid (#1251)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: kixelated

js/moq-boy/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@moq/boy",
 	"type": "module",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"description": "MoQ Boy - Crowd-controlled Game Boy streaming via MoQ",
 	"license": "(MIT OR Apache-2.0)",
 	"repository": {

js/moq-boy/src/index.ts

@@ -154,11 +154,6 @@ export class Game {
 		this.#signals.run(this.#runCommands.bind(this, connection));
 	}
 
-	/** Toggle this game's expanded state. */
-	toggleExpand() {
-		this.expanded.update((old) => (old === this.sessionId ? undefined : this.sessionId));
-	}
-
 	/** Send a button state update. */
 	sendButtons() {
 		this.sendCommand({ type: "buttons", buttons: [...this.heldButtons] });

js/moq-boy/src/ui/components/Controls.tsx

@@ -1,5 +1,5 @@
-import { createAccessor } from "@moq/signals/solid";
-import { createSignal, For } from "solid-js";
+import { createAccessor, createPair } from "@moq/signals/solid";
+import { For } from "solid-js";
 import { useGameUI } from "../hooks/use-boy-ui";
 
 /** All game controls: D-pad, A/B, Start/Select, Mute, Reset, Jitter slider, Key hints. */
@@ -8,13 +8,11 @@ export default function Controls() {
 	const game = ctx.game;
 
 	const jitter = createAccessor(game.jitter);
-	const [userMuted, setUserMuted] = createSignal(game.userMuted.peek());
+	const [userMuted, setUserMuted] = createPair(game.userMuted);
 
 	const toggleMute = (e: MouseEvent) => {
 		e.stopPropagation();
-		const muted = !game.userMuted.peek();
-		game.userMuted.set(muted);
-		setUserMuted(muted);
+		setUserMuted((prev) => !prev);
 	};
 
 	const onReset = (e: MouseEvent) => {

js/moq-boy/src/ui/components/GameCard.tsx

@@ -27,9 +27,11 @@ function GameCardInner() {
 		game.videoRenderer.canvas.set(canvasRef);
 	});
 
-	// Keyboard input.
+	// Keyboard input — preventDefault when expanded or hovered.
+	const isActive = () => game.expanded.peek() === game.sessionId || game.hovered.peek();
+
 	const onKeyDown = (e: KeyboardEvent) => {
-		if (!game.active.peek()) return;
+		if (!isActive()) return;
 		if (e.repeat) return;
 
 		const button = KEY_MAP[e.key];
@@ -44,7 +46,7 @@ function GameCardInner() {
 	};
 
 	const onKeyUp = (e: KeyboardEvent) => {
-		if (!game.active.peek()) return;
+		if (!isActive()) return;
 		const button = KEY_MAP[e.key];
 		if (button) {
 			game.heldButtons.delete(button);
@@ -94,12 +96,12 @@ function GameCardInner() {
 				ref={canvasRef}
 				class="boy__video"
 				tabIndex={0}
-				onClick={() => game.toggleExpand()}
+				onClick={() => game.expanded.set(game.sessionId)}
 				onKeyDown={(e) => {
 					if (e.key === " ") {
 						e.preventDefault();
 						e.stopPropagation();
-						game.toggleExpand();
+						game.expanded.set(game.sessionId);
 					}
 				}}
 			/>

js/moq-boy/src/ui/styles/grid.css

@@ -23,6 +23,7 @@
 .boy__grid {
 	display: flex;
 	flex-wrap: wrap;
+	justify-content: center;
 	gap: var(--spacing-16);
 	padding: var(--spacing-16);
 }