Add back button to game controls UI (#1325)

Co-authored-by: Claude <noreply@anthropic.com>

Author: kixelated

js/moq-boy/package.json

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

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

@@ -26,8 +26,16 @@ export default function Controls() {
 		game.sendCommand({ type: "reset" });
 	};
 
+	const onBack = (e: MouseEvent) => {
+		e.stopPropagation();
+		game.expanded.set(undefined);
+	};
+
 	return (
 		<div class="boy__controls">
+			<button type="button" class="boy__back-btn" onClick={onBack}>
+				<span aria-hidden="true">←</span> Back
+			</button>
 			<Dpad />
 			<ABButtons />
 			<MetaButtons />
@@ -64,7 +72,7 @@ export default function Controls() {
 				<div>Arrows: D-pad</div>
 				<div>Z: B &nbsp; X: A</div>
 				<div>Enter: Start &nbsp; Shift: Select</div>
-				<div>Esc: Collapse</div>
+				<div>Esc: Back</div>
 			</div>
 		</div>
 	);

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

@@ -5,6 +5,28 @@
 	gap: 1.5rem;
 }
 
+/* Back button */
+.boy__back-btn {
+	width: 100%;
+	background: var(--color-white-alpha-05);
+	color: var(--boy-text-muted);
+	border: 1px solid var(--boy-border);
+	padding: 0.5rem;
+	border-radius: 6px;
+	cursor: pointer;
+	font-size: 0.75rem;
+	transition: all 0.15s;
+}
+
+.boy__back-btn:hover {
+	border-color: var(--boy-accent);
+	color: var(--boy-text);
+}
+
+.boy__back-btn:active {
+	transform: scale(0.98);
+}
+
 /* D-pad grid */
 .boy__dpad {
 	display: grid;