Add Game Boy feature and modal interaction. Introduced a Game Boy model in the scene, updated main.js to handle zoom interactions and modal display, and enhanced UI components in ui.js for opening and closing the Game Boy modal. Added corresponding styles in style.css for the modal's appearance and animations. Updated index.html to include a new label for the Game Boy interaction.

frontend/index.html

@@ -29,6 +29,7 @@
       <span>♪ cassette collection</span>
     </div>
     <div id="lamp-label" class="hover-label"><span>☾ turn on night</span></div>
+    <div id="gameboy-label" class="hover-label"><span>▸ play</span></div>
 
     <div id="machine-modal" class="hidden">
       <button id="modal-close" aria-label="close">×</button>
@@ -175,6 +176,32 @@
     </a>
   </div>
 
+  <div id="gameboy-modal" class="hidden">
+    <button id="gameboy-close" aria-label="close">×</button>
+    <div class="gb-shell">
+      <div class="gb-screen-frame">
+        <div class="gb-power"><i></i>BATTERY</div>
+        <div id="gameboy-screen" class="gb-screen">
+          <p class="gb-line">★ MINI-GAME ★</p>
+          <p class="gb-line gb-blink">▶ COMING SOON</p>
+        </div>
+      </div>
+      <div class="gb-logo">LoFinity<span>♪</span></div>
+      <div class="gb-controls">
+        <div class="gb-dpad" aria-hidden="true">
+          <span class="gb-pad-v"></span><span class="gb-pad-h"></span>
+        </div>
+        <div class="gb-ab" aria-hidden="true">
+          <span class="gb-btn">B</span><span class="gb-btn">A</span>
+        </div>
+      </div>
+      <div class="gb-startsel" aria-hidden="true"><span></span><span></span></div>
+      <div class="gb-speaker" aria-hidden="true">
+        <i></i><i></i><i></i><i></i><i></i><i></i>
+      </div>
+    </div>
+  </div>
+
   <div id="now-playing" class="hidden">
       <button id="np-toggle" aria-label="play/pause">❚❚</button>
       <span id="np-title"></span>

frontend/main.js

@@ -123,7 +123,7 @@ scene.add(sun);
 // skipped automatically since they aren't plain opaque Lambert.
 function mergeStaticWorld(scene, world) {
   scene.updateMatrixWorld(true);
-  const excludedRoots = [world.vending, world.bench, world.lamp, ...world.clouds];
+  const excludedRoots = [world.vending, world.bench, world.lamp, world.gameboy, ...world.clouds];
   const isExcluded = (obj) => {
     for (let o = obj; o; o = o.parent) if (excludedRoots.includes(o)) return true;
     return false;
@@ -246,6 +246,14 @@ const interactables = [
     labelOffsetX: -0.3, // left of the bubble
     onClick: () => toggleNight(),
   },
+  {
+    object: world.gameboy,
+    outlines: [world.gameboy.userData.outline],
+    label: document.getElementById("gameboy-label"),
+    anchor: world.gameboy.position.clone(),
+    labelOffsetY: 1.3, // floats just above the handheld on the ground
+    onClick: () => zoomToGameboy(),
+  },
 ];
 
 window.addEventListener("pointermove", (e) => {
@@ -306,10 +314,13 @@ const MACHINE_LOOK = new THREE.Vector3(-2.9, 2.6, 4.2);
 // Leans over the bench seat where the tapes and walkman rest.
 const BENCH_CAM = new THREE.Vector3(1.3, 3.3, 8.4);
 const BENCH_LOOK = new THREE.Vector3(1.3, 1.15, 4.4);
+// Crouches toward the game boy on the sidewalk; the modal sits over it.
+const GAMEBOY_CAM = new THREE.Vector3(5.6, 2.3, 9.0);
+const GAMEBOY_LOOK = new THREE.Vector3(6.5, 0.3, 5.6);
 const ZOOM_MS = 1500;
 
 const view = {
-  mode: "scene", // scene | zoom-in | machine | bench | zoom-out
+  mode: "scene", // scene | zoom-in | machine | bench | gameboy | zoom-out
   target: "machine", // what the current zoom-in lands on
   t0: 0,
   camFrom: new THREE.Vector3(),
@@ -349,6 +360,17 @@ function closeBenchView() {
   startViewTransition("zoom-out", CAM_END, LOOK_SCENE);
 }
 
+function zoomToGameboy() {
+  setHoveredItem(null);
+  view.target = "gameboy";
+  startViewTransition("zoom-in", GAMEBOY_CAM, GAMEBOY_LOOK);
+}
+
+function closeGameboyView() {
+  ui.closeGameboy();
+  startViewTransition("zoom-out", CAM_END, LOOK_SCENE);
+}
+
 canvas.addEventListener("click", () => {
   if (hoveredItem && view.mode === "scene" && intro.phase === "idle") {
     hoveredItem.onClick();
@@ -358,7 +380,9 @@ canvas.addEventListener("click", () => {
 });
 
 window.addEventListener("keydown", (e) => {
-  if (e.key === "Escape" && view.mode === "bench") closeBenchView();
+  if (e.key !== "Escape") return;
+  if (view.mode === "bench") closeBenchView();
+  else if (view.mode === "gameboy") closeGameboyView();
 });
 
 // Machine glow while generating
@@ -473,6 +497,9 @@ const ui = initUI({
   onRequestCloseCollection: () => {
     if (view.mode === "bench") closeBenchView();
   },
+  onRequestCloseGameboy: () => {
+    if (view.mode === "gameboy") closeGameboyView();
+  },
   onGeneratingChange: setMachineBusy,
 });
 
@@ -559,6 +586,13 @@ window.lofinityDebug = {
     lookTarget.copy(BENCH_LOOK);
     ui.openCollection();
   },
+  openGameboy() {
+    this.skipIntro();
+    view.mode = "gameboy";
+    camera.position.copy(GAMEBOY_CAM);
+    lookTarget.copy(GAMEBOY_LOOK);
+    ui.openGameboy();
+  },
   stats() {
     return { ...renderer.info.render, ...renderer.info.memory };
   },
@@ -646,6 +680,7 @@ function animate(now = 0) {
         view.mode = view.target;
         if (view.target === "machine") ui.openModal();
         else if (view.target === "bench") ui.openCollection();
+        else if (view.target === "gameboy") ui.openGameboy();
       } else {
         view.mode = "scene";
         intro.idleStart = elapsed; // sway ramps back in

frontend/style.css

@@ -1128,3 +1128,242 @@ body {
   opacity: 0.4;
   pointer-events: none;
 }
+
+/* --- game boy modal --------------------------------------------------------- */
+
+#gameboy-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 19;
+  transition: opacity 0.3s ease;
+}
+
+#gameboy-modal.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#gameboy-modal.opening .gb-shell {
+  animation: gb-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+#gameboy-modal.closing .gb-shell {
+  animation: gb-drop 0.28s ease both;
+}
+
+@keyframes gb-pop {
+  from {
+    opacity: 0;
+    transform: translateY(26px) scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes gb-drop {
+  to {
+    opacity: 0;
+    transform: translateY(20px) scale(0.92);
+  }
+}
+
+#gameboy-close {
+  position: absolute;
+  top: -14px;
+  right: -14px;
+  z-index: 2;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.22);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  color: #fff;
+  font-size: 1.15rem;
+  line-height: 1;
+  cursor: pointer;
+  text-shadow: 0 1px 3px rgba(15, 40, 90, 0.4);
+}
+
+#gameboy-close:hover {
+  background: rgba(255, 255, 255, 0.38);
+}
+
+.gb-shell {
+  width: min(330px, 86vw);
+  padding: 22px 22px 26px;
+  background: linear-gradient(160deg, #d3d0c6, #b7b4a9);
+  border-radius: 16px 16px 64px 16px;
+  box-shadow:
+    inset 0 2px 0 rgba(255, 255, 255, 0.6),
+    inset 0 -6px 14px rgba(0, 0, 0, 0.18),
+    0 24px 60px rgba(15, 40, 90, 0.45);
+  font-family: "Baloo 2", sans-serif;
+}
+
+.gb-screen-frame {
+  background: linear-gradient(160deg, #585d56, #3f443d);
+  border-radius: 10px 10px 30px 10px;
+  padding: 14px 26px 22px;
+  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5);
+}
+
+.gb-power {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin: 0 0 8px 2px;
+  font-size: 0.52rem;
+  letter-spacing: 0.14em;
+  font-weight: 700;
+  color: #c4c8d0;
+}
+
+.gb-power i {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #d9534f;
+  box-shadow: 0 0 6px #ff6a64;
+}
+
+.gb-screen {
+  aspect-ratio: 10 / 9;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  border-radius: 4px;
+  color: #213a08;
+  box-shadow:
+    inset 0 0 0 2px #6b8b06,
+    inset 0 2px 10px rgba(0, 0, 0, 0.25);
+  background-image:
+    linear-gradient(#9bbc0f, #8ba30c),
+    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 4px);
+}
+
+.gb-line {
+  margin: 0;
+  font-family: "DotGothic16", monospace;
+  font-size: 0.95rem;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+
+.gb-blink {
+  animation: gb-blink 1s steps(1) infinite;
+}
+
+@keyframes gb-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+.gb-logo {
+  margin: 12px 0 14px;
+  text-align: center;
+  font-weight: 800;
+  font-style: italic;
+  font-size: 1.05rem;
+  color: #2c3550;
+}
+
+.gb-logo span {
+  color: #8c2d52;
+  margin-left: 2px;
+}
+
+.gb-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 6px;
+}
+
+.gb-dpad {
+  position: relative;
+  width: 56px;
+  height: 56px;
+}
+
+.gb-pad-v,
+.gb-pad-h {
+  position: absolute;
+  background: #2b2f2b;
+  border-radius: 4px;
+  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.12);
+}
+
+.gb-pad-v {
+  left: 19px;
+  top: 0;
+  width: 18px;
+  height: 56px;
+}
+
+.gb-pad-h {
+  top: 19px;
+  left: 0;
+  width: 56px;
+  height: 18px;
+}
+
+.gb-ab {
+  display: flex;
+  gap: 14px;
+  transform: rotate(-18deg);
+}
+
+.gb-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, #a8406b, #7a1f45);
+  color: #f2d6e2;
+  font-weight: 800;
+  font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow:
+    0 3px 5px rgba(0, 0, 0, 0.3),
+    inset 0 2px 3px rgba(255, 255, 255, 0.25);
+}
+
+.gb-startsel {
+  display: flex;
+  justify-content: center;
+  gap: 18px;
+  margin-top: 18px;
+}
+
+.gb-startsel span {
+  width: 34px;
+  height: 11px;
+  border-radius: 999px;
+  background: #6b7280;
+  transform: rotate(-22deg);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.gb-speaker {
+  display: flex;
+  gap: 6px;
+  justify-content: flex-end;
+  margin: 16px 10px 0 0;
+  transform: rotate(-22deg);
+}
+
+.gb-speaker i {
+  width: 4px;
+  height: 26px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.22);
+}

frontend/ui.js

@@ -9,9 +9,11 @@ export function initUI({
   listSongs,
   onRequestClose,
   onRequestCloseCollection,
+  onRequestCloseGameboy,
   onGeneratingChange,
 }) {
   const modal = $("machine-modal");
+  const gameboyModal = $("gameboy-modal");
   const input = $("prompt-input");
   const coinBtn = $("coin-button");
   const controlsRow = $("controls-row");
@@ -43,6 +45,7 @@ export function initUI({
   audio.loop = true; // a cassette of endless chill
   let busy = false;
   let collectionOpen = false;
+  let gameboyOpen = false;
   let currentSong = null; // { title, url } of the tape in the deck
 
   function setStage(stage) {
@@ -302,6 +305,7 @@ export function initUI({
   deckProgress.addEventListener("click", seek(deckProgress));
 
   $("collection-close").addEventListener("click", () => onRequestCloseCollection());
+  $("gameboy-close").addEventListener("click", () => onRequestCloseGameboy());
   caroPrev.addEventListener("click", () => centerOn(centerIndex - 1, { load: true }));
   caroNext.addEventListener("click", () => centerOn(centerIndex + 1, { load: true }));
 
@@ -339,12 +343,16 @@ export function initUI({
   });
 
   function syncPill() {
-    // the corner pill yields to the machine modal and the tape deck
+    // the corner pill yields to the machine modal, the collection, and the game boy
     const modalHidden = modal.classList.contains("hidden");
-    pill.classList.toggle("hidden", !(audio.src && modalHidden && !collectionOpen));
+    pill.classList.toggle(
+      "hidden",
+      !(audio.src && modalHidden && !collectionOpen && !gameboyOpen),
+    );
   }
 
   let closeTimer = null;
+  let gbCloseTimer = null;
 
   return {
     openModal() {
@@ -370,5 +378,25 @@ export function initUI({
     },
     openCollection,
     closeCollection,
+    openGameboy() {
+      clearTimeout(gbCloseTimer);
+      gameboyOpen = true;
+      gameboyModal.classList.remove("hidden", "closing");
+      void gameboyModal.offsetWidth; // restart the entrance animation
+      gameboyModal.classList.add("opening");
+      syncPill();
+    },
+    closeGameboy() {
+      gameboyOpen = false;
+      if (gameboyModal.classList.contains("hidden")) return syncPill();
+      gameboyModal.classList.remove("opening");
+      gameboyModal.classList.add("closing");
+      clearTimeout(gbCloseTimer);
+      gbCloseTimer = setTimeout(() => {
+        gameboyModal.classList.add("hidden");
+        gameboyModal.classList.remove("closing");
+      }, 300);
+      syncPill();
+    },
   };
 }

frontend/world.js

@@ -529,6 +529,81 @@ function buildHeadphones() {
   return shadows(g);
 }
 
+// --- game boy (dropped on the sidewalk) -------------------------------------
+
+function buildGameboy() {
+  const g = new THREE.Group();
+  // classic DMG shell lying flat, face up. local axes: x=width, z=length, y=up
+  const body = box(0.42, 0.1, 0.64, lambert(0xbfc4bd));
+  body.position.y = 0.05;
+  g.add(body);
+
+  const lip = box(0.4, 0.02, 0.62, lambert(0xced2cb));
+  lip.position.y = 0.1;
+  g.add(lip);
+
+  // screen bezel (upper half, toward -z) + glowing green LCD
+  const bezel = box(0.34, 0.03, 0.28, lambert(0x49544b));
+  bezel.position.set(0, 0.105, -0.14);
+  g.add(bezel);
+  const screen = new THREE.Mesh(
+    new THREE.BoxGeometry(0.26, 0.034, 0.2),
+    new THREE.MeshBasicMaterial({ color: 0x9bbc0f })
+  );
+  screen.position.set(0, 0.108, -0.14);
+  g.add(screen);
+
+  // d-pad (lower-left): a dark cross
+  const dpadMat = lambert(0x2b2f2b);
+  for (const [w, d] of [[0.045, 0.12], [0.12, 0.045]]) {
+    const arm = box(w, 0.022, d, dpadMat);
+    arm.position.set(-0.11, 0.108, 0.14);
+    g.add(arm);
+  }
+
+  // A/B buttons (lower-right): dark magenta, set diagonally
+  const btnMat = lambert(0x8c2d52);
+  for (const [bx, bz] of [[0.07, 0.18], [0.155, 0.12]]) {
+    const btn = cyl(0.032, 0.032, 0.024, 12, btnMat);
+    btn.position.set(bx, 0.11, bz);
+    g.add(btn);
+  }
+
+  // start / select: two little grey pills, angled
+  const pillMat = lambert(0x6b7280);
+  for (const px of [-0.04, 0.05]) {
+    const pill = box(0.07, 0.018, 0.022, pillMat);
+    pill.position.set(px, 0.103, 0.265);
+    pill.rotation.y = -0.4;
+    g.add(pill);
+  }
+
+  // speaker grille (lower-right corner): a few slits
+  const grilleMat = lambert(0x9aa09a);
+  for (let i = 0; i < 4; i++) {
+    const slit = box(0.012, 0.016, 0.07, grilleMat);
+    slit.position.set(0.1 + i * 0.022, 0.104, 0.27);
+    slit.rotation.y = -0.5;
+    g.add(slit);
+  }
+
+  shadows(g);
+
+  // hover outline: a single inflated back-face hull (see buildWalkman)
+  const outline = new THREE.Group();
+  const hull = box(0.5, 0.2, 0.72, new THREE.MeshBasicMaterial({
+    color: 0xffd84a,
+    side: THREE.BackSide,
+  }));
+  hull.position.y = 0.07;
+  outline.add(hull);
+  outline.visible = false;
+  g.add(outline);
+  g.userData.outline = outline;
+
+  return g;
+}
+
 // --- little bird ---------------------------------------------------------------
 
 function buildBird() {
@@ -1098,6 +1173,12 @@ export function buildWorld(scene) {
   lamp.position.set(9.6, 0.3, 3.6);
   scene.add(lamp);
 
+  // someone dropped their game boy on the sidewalk between the bench and lamp
+  const gameboy = buildGameboy();
+  gameboy.position.set(6.6, 0.3, 5.7);
+  gameboy.rotation.y = -0.55;
+  scene.add(gameboy);
+
   const wall = buildStoneWall();
   wall.position.set(-13.5, 0, 3.4);
   wall.rotation.y = 0.25;
@@ -1167,5 +1248,5 @@ export function buildWorld(scene) {
   const clouds = buildClouds();
   for (const cloud of clouds) scene.add(cloud);
 
-  return { vending, bench, collection, sign, lamp, bigTree, house, clouds, bird };
+  return { vending, bench, collection, sign, lamp, gameboy, bigTree, house, clouds, bird };
 }