Refactor HTML structure and enhance CSS for Game Boy modal. Improved the organization of meta tags in index.html for better readability and SEO. Updated style.css to optimize the Game Boy modal's appearance and interaction, including new styles for the d-pad and button interactions. Enhanced ui.js to integrate a garden mini-game within the Game Boy modal, ensuring a smoother user experience.

frontend/garden.js

@@ -0,0 +1,788 @@
+// LoFinity — the Game Boy mini-game: a tiny, relaxing garden.
+// Plant a seed, water it, watch it grow. No score, no losing, nothing to chase.
+// Rendered as Game-Boy-Color-style pixel art on a 160x144 canvas.
+
+const W = 160; // Game Boy (Color) screen resolution
+const H = 144;
+
+const SEEDS = ["sunflower", "dandelion", "daisy", "pumpkin"];
+// the bottom tray = the four seeds plus a "dig" tool for removing a plant
+const TRAY = [...SEEDS, "dig"];
+const SEED_LABEL = {
+  sunflower: "SUNFLOWER",
+  dandelion: "DANDELION",
+  daisy: "DAISY",
+  pumpkin: "PUMPKIN",
+  dig: "DIG UP",
+};
+
+// Garden plots: two rows of four, drawn back-to-front for a little depth.
+const COLS = 4;
+const ROWS = 2;
+const COL_X = [29, 63, 97, 131]; // soil centre x per column
+const ROW_Y = [84, 110]; // soil-top y per row (plants grow upward from here)
+// each row is sheared sideways (~22°) so the front row sits offset from the
+// back row instead of directly in front of it — the back plots stay visible.
+const ROW_SHEAR = 12;
+
+// Growth tuning — gentle. A watered plant blooms in ~10s; left dry it crawls.
+const WET_TIME = 6; // seconds the soil stays damp after a watering
+const WET_RATE = 0.5; // growth-stages per second while damp
+const DRY_RATE = 0.1; // growth-stages per second while dry
+const WATER_BUMP = 0.18; // instant nudge each time you water
+
+// A cohesive, sunny GBC-ish palette.
+const P = {
+  sky0: "#7ec8ff",
+  sky1: "#a6dcff",
+  sky2: "#cdeeff",
+  haze: "#e7f7ff",
+  sun: "#ffe45e",
+  sunHi: "#fff6c2",
+  cloud: "#ffffff",
+  cloudShade: "#d8eefc",
+  grass: "#7bcf5a",
+  grassHi: "#9be06f",
+  grassLo: "#57b045",
+  soilTop: "#b9824e",
+  soil: "#9a6336",
+  soilDark: "#74462450",
+  soilWetTop: "#7c5230",
+  soilWet: "#5f3c20",
+  shadow: "#3a6b3055",
+  stem: "#4faa46",
+  stemDark: "#2f7d3a",
+  leaf: "#6cc24a",
+  leafHi: "#8ed86a",
+  petalSun: "#ffc01e",
+  petalSunHi: "#ffe066",
+  sunCenter: "#7a431b",
+  sunCenter2: "#9c5a26",
+  dandel: "#ffd23f",
+  dandelHi: "#fff0a6",
+  white: "#ffffff",
+  whiteShade: "#dfe8f0",
+  daisyCenter: "#ffcb1f",
+  pumpkin: "#ff8a3d",
+  pumpkinHi: "#ffb072",
+  pumpkinDark: "#e0651f",
+  pumpkinRib: "#c8531a",
+  bud: "#9bd06a",
+  drop: "#7cc6ff",
+  star: "#fff6c2",
+  cursor: "#ffffff",
+  cursorDark: "#1c2540",
+  tray: "#2a2350",
+  trayLo: "#1a1530",
+  traySlot: "#3a3070",
+  traySel: "#ffe45e",
+};
+
+export function createGarden(root) {
+  const canvas = root.querySelector("#gb-canvas");
+  const caption = root.querySelector("#gb-caption");
+  const ctx = canvas.getContext("2d");
+  ctx.imageSmoothingEnabled = false;
+
+  // --- state (persists across opens — your garden stays put) -----------------
+  // progress (0..3 → seed, sprout, bud, bloom) is the single source of truth;
+  // the drawn stage is always floor(progress), so the art never lags the state.
+  const plots = Array.from({ length: COLS * ROWS }, (_, i) => ({
+    type: null,
+    progress: 0,
+    bloomed: false, // tracks the one-shot bloom sparkle
+    wet: 0, // seconds of dampness left
+    phase: i * 1.7, // desync the sway
+  }));
+  const stageOf = (p) => Math.min(3, Math.floor(p.progress));
+  let cursor = 0; // selected plot index
+  let seedIdx = 0; // selected seed type
+  const particles = [];
+  const cloud = { x: 116 };
+  const fly = { t: 0 }; // butterfly clock
+  let t = 0; // game clock (seconds)
+
+  let running = false;
+  let raf = 0;
+  let last = 0;
+
+  // --- helpers ---------------------------------------------------------------
+  const r = (x, y, w, h, c) => {
+    ctx.fillStyle = c;
+    ctx.fillRect(x | 0, y | 0, w | 0, h | 0);
+  };
+  const px = (x, y, c) => {
+    ctx.fillStyle = c;
+    ctx.fillRect(x | 0, y | 0, 1, 1);
+  };
+  const disc = (cx, cy, rad, c) => {
+    ctx.fillStyle = c;
+    for (let y = -rad; y <= rad; y++) {
+      const w = Math.floor(Math.sqrt(rad * rad - y * y));
+      ctx.fillRect((cx - w) | 0, (cy + y) | 0, 2 * w + 1, 1);
+    }
+  };
+  const oval = (cx, cy, rx, ry, c) => {
+    ctx.fillStyle = c;
+    for (let y = -ry; y <= ry; y++) {
+      const w = Math.floor(rx * Math.sqrt(1 - (y * y) / (ry * ry)));
+      ctx.fillRect((cx - w) | 0, (cy + y) | 0, 2 * w + 1, 1);
+    }
+  };
+
+  function plotPos(i) {
+    const col = i % COLS;
+    const row = Math.floor(i / COLS);
+    // shear rows around the centre so the layout leans diagonally
+    return {
+      cx: COL_X[col] + (row - (ROWS - 1) / 2) * ROW_SHEAR,
+      baseY: ROW_Y[row],
+    };
+  }
+
+  // --- input -----------------------------------------------------------------
+  function move(dx, dy) {
+    const col = cursor % COLS;
+    const row = Math.floor(cursor / COLS);
+    const nc = Math.min(COLS - 1, Math.max(0, col + dx));
+    const nr = Math.min(ROWS - 1, Math.max(0, row + dy));
+    cursor = nr * COLS + nc;
+  }
+
+  function spawnDrops(cx, baseY) {
+    for (let i = 0; i < 6; i++) {
+      particles.push({
+        type: "drop",
+        x: cx - 8 + Math.floor((i / 6) * 16),
+        y: baseY - 26 - (i % 3) * 4,
+        vy: 36 + (i % 3) * 8,
+        life: 0.7,
+        max: 0.7,
+      });
+    }
+  }
+  function spawnStars(cx, cy) {
+    for (let i = 0; i < 6; i++) {
+      const a = (i / 6) * Math.PI * 2;
+      particles.push({
+        type: "star",
+        x: cx + Math.cos(a) * 8,
+        y: cy + Math.sin(a) * 8,
+        vx: Math.cos(a) * 6,
+        vy: Math.sin(a) * 6 - 4,
+        life: 0.9,
+        max: 0.9,
+      });
+    }
+  }
+  function spawnPoof(cx, baseY) {
+    for (let i = 0; i < 8; i++) {
+      particles.push({
+        type: "poof",
+        x: cx - 6 + (i % 4) * 4,
+        y: baseY - 4 - Math.floor(i / 4) * 4,
+        vx: ((i % 4) - 1.5) * 8,
+        vy: -10 - (i % 3) * 6,
+        life: 0.6,
+        max: 0.6,
+      });
+    }
+  }
+
+  // A button: with the dig tool selected, remove the plant; with a seed
+  // selected, plant on an empty plot or water what's already growing.
+  function act() {
+    if (TRAY[seedIdx] === "dig") {
+      clearPlot();
+      return;
+    }
+    const p = plots[cursor];
+    const { cx, baseY } = plotPos(cursor);
+    if (!p.type) {
+      // just sow the seed — it grows slowly until you water it
+      p.type = SEEDS[seedIdx];
+      p.progress = 0;
+      p.bloomed = false;
+      p.wet = 0;
+    } else {
+      p.wet = WET_TIME;
+      if (p.progress < 3) p.progress = Math.min(3, p.progress + WATER_BUMP);
+      spawnDrops(cx, baseY);
+      if (p.progress >= 3) spawnStars(cx, baseY - bloomHeight(p.type));
+      flash(caption, P.drop);
+    }
+  }
+
+  function cycleSeed(dir = 1) {
+    seedIdx = (seedIdx + dir + TRAY.length) % TRAY.length;
+    updateCaption();
+  }
+
+  // dig up the current plot so you can replant / rearrange (B→dig tool, or START)
+  function clearPlot() {
+    const p = plots[cursor];
+    if (!p.type) return;
+    const { cx, baseY } = plotPos(cursor);
+    p.type = null;
+    p.progress = 0;
+    p.bloomed = false;
+    p.wet = 0;
+    spawnPoof(cx, baseY);
+  }
+
+  function input(action) {
+    if (!running) return;
+    switch (action) {
+      case "up":
+        move(0, -1);
+        break;
+      case "down":
+        move(0, 1);
+        break;
+      case "left":
+        move(-1, 0);
+        break;
+      case "right":
+        move(1, 0);
+        break;
+      case "a":
+        act();
+        break;
+      case "b":
+        cycleSeed(1);
+        break;
+      case "select":
+        cycleSeed(1);
+        break;
+      case "start":
+        clearPlot();
+        break;
+    }
+  }
+
+  // --- update ----------------------------------------------------------------
+  function update(dt) {
+    t += dt;
+    fly.t += dt;
+    cloud.x -= dt * 4;
+    if (cloud.x < -34) cloud.x = W + 6;
+
+    for (const p of plots) {
+      if (!p.type) continue;
+      if (p.wet > 0) {
+        p.wet = Math.max(0, p.wet - dt);
+        p.progress = Math.min(3, p.progress + WET_RATE * dt);
+      } else {
+        p.progress = Math.min(3, p.progress + DRY_RATE * dt);
+      }
+      if (p.progress >= 3 && !p.bloomed) {
+        p.bloomed = true;
+        const { cx, baseY } = plotPos(plots.indexOf(p));
+        spawnStars(cx, baseY - bloomHeight(p.type));
+      }
+    }
+
+    for (let i = particles.length - 1; i >= 0; i--) {
+      const q = particles[i];
+      q.life -= dt;
+      if (q.life <= 0) {
+        particles.splice(i, 1);
+        continue;
+      }
+      q.x += (q.vx || 0) * dt;
+      q.y += (q.vy || 0) * dt;
+      if (q.type === "drop") q.vy += 120 * dt;
+      if (q.type === "poof") q.vy += 40 * dt;
+    }
+  }
+
+  // --- drawing ---------------------------------------------------------------
+  function drawSky() {
+    r(0, 0, W, 14, P.sky0);
+    r(0, 14, W, 12, P.sky1);
+    r(0, 26, W, 10, P.sky2);
+    r(0, 36, W, 6, P.haze);
+
+    // sun, top-left, with a few soft rays
+    const sx = 22,
+      sy = 22;
+    for (let a = 0; a < 8; a++) {
+      const ang = (a / 8) * Math.PI * 2 + Math.sin(t * 0.4) * 0.05;
+      px(sx + Math.cos(ang) * 13, sy + Math.sin(ang) * 13, P.sunHi);
+      px(sx + Math.cos(ang) * 14, sy + Math.sin(ang) * 14, P.sunHi);
+    }
+    disc(sx, sy, 9, P.sun);
+    disc(sx - 2, sy - 2, 4, P.sunHi);
+
+    // a drifting cloud
+    const cx = cloud.x | 0,
+      cy = 18;
+    oval(cx, cy + 2, 16, 5, P.cloudShade);
+    oval(cx, cy, 16, 5, P.cloud);
+    disc(cx - 7, cy - 2, 5, P.cloud);
+    disc(cx + 6, cy - 1, 6, P.cloud);
+  }
+
+  function drawGround() {
+    r(0, 42, W, H - 42, P.grass);
+    // a brighter strip near the top of the field + a darker foreground
+    r(0, 42, W, 4, P.grassHi);
+    r(0, H - 16, W, 16, P.grassLo);
+    // scattered grass tufts for texture
+    for (let i = 0; i < 16; i++) {
+      const gx = (i * 53 + 11) % W;
+      const gy = 52 + ((i * 37) % (H - 70));
+      px(gx, gy, P.grassHi);
+      px(gx + 1, gy - 1, P.grassHi);
+    }
+  }
+
+  function soilMound(cx, baseY, wet) {
+    const c = wet > 0 ? P.soilWet : P.soil;
+    const top = wet > 0 ? P.soilWetTop : P.soilTop;
+    oval(cx, baseY + 3, 15, 5, P.soilDark);
+    oval(cx, baseY + 1, 14, 4, c);
+    oval(cx, baseY - 1, 13, 3, top);
+    // a couple of pebbles / specks
+    px(cx - 6, baseY, P.soilDark);
+    px(cx + 5, baseY + 1, P.soilDark);
+  }
+
+  function bloomHeight(type) {
+    return { sunflower: 30, dandelion: 20, daisy: 16, pumpkin: 6 }[type] || 16;
+  }
+
+  // green stem that leans slightly with `sway` near the top
+  function stem(cx, baseY, top, sway) {
+    const span = baseY - top;
+    for (let y = baseY; y >= top; y--) {
+      const f = span > 0 ? (baseY - y) / span : 0;
+      r(cx - 1 + sway * f, y, 2, 1, P.stem);
+    }
+    return cx + sway; // x of the tip
+  }
+
+  function leaf(x, y, dir) {
+    const d = dir; // -1 left, +1 right
+    r(x, y, 3 * d, 1, P.leaf);
+    r(x + d, y - 1, 3 * d, 1, P.leafHi);
+    r(x + d, y + 1, 2 * d, 1, P.leaf);
+  }
+
+  function drawSunflower(hx, hy) {
+    disc(hx, hy, 7, P.petalSun);
+    // petal points
+    const pts = [
+      [0, -8],
+      [0, 8],
+      [-8, 0],
+      [8, 0],
+      [-6, -6],
+      [6, -6],
+      [-6, 6],
+      [6, 6],
+    ];
+    for (const [dx, dy] of pts)
+      disc(hx + dx * 0.7, hy + dy * 0.7, 2, P.petalSunHi);
+    disc(hx, hy, 4, P.sunCenter);
+    disc(hx - 1, hy - 1, 2, P.sunCenter2);
+    px(hx + 1, hy + 1, P.sunCenter2);
+    px(hx - 2, hy + 1, P.sunCenter2);
+  }
+  function drawDandelion(hx, hy) {
+    disc(hx, hy, 5, P.dandel);
+    const rag = [
+      [-6, 0],
+      [6, 0],
+      [0, -6],
+      [0, 6],
+      [-4, -4],
+      [4, -4],
+      [-4, 4],
+      [4, 4],
+    ];
+    for (const [dx, dy] of rag) px(hx + dx, hy + dy, P.dandel);
+    disc(hx - 1, hy - 1, 2, P.dandelHi);
+  }
+  function drawDaisy(hx, hy) {
+    const pet = [
+      [0, -4],
+      [0, 4],
+      [-4, 0],
+      [4, 0],
+      [-3, -3],
+      [3, -3],
+      [-3, 3],
+      [3, 3],
+    ];
+    for (const [dx, dy] of pet) disc(hx + dx, hy + dy, 2, P.white);
+    for (const [dx, dy] of pet) px(hx + dx, hy + dy + 1, P.whiteShade);
+    disc(hx, hy, 2, P.daisyCenter);
+  }
+
+  function drawUpright(p, cx, baseY, sway, stage) {
+    const cfg = bloomHeight(p.type);
+    if (stage === 0) {
+      // a sprouting seed: a tiny green nub poking out of the soil
+      r(cx - 1, baseY - 3, 2, 3, P.stem);
+      px(cx - 2, baseY - 3, P.leafHi);
+      px(cx + 1, baseY - 4, P.leafHi);
+      return;
+    }
+    if (stage === 1) {
+      const top = baseY - 7;
+      stem(cx, baseY, top, sway * 0.4);
+      leaf(cx, baseY - 4, -1);
+      leaf(cx, baseY - 6, 1);
+      return;
+    }
+    if (stage === 2) {
+      const top = baseY - Math.round(cfg * 0.6);
+      const tip = stem(cx, baseY, top, sway * 0.7);
+      leaf(cx, baseY - 6, -1);
+      leaf(cx, baseY - Math.round(cfg * 0.4), 1);
+      // a closed bud, tinted toward the flower it will become
+      const budCol =
+        p.type === "daisy"
+          ? P.bud
+          : p.type === "sunflower"
+            ? P.stemDark
+            : P.bud;
+      disc(tip, top - 1, 2, budCol);
+      px(tip, top - 2, P.leafHi);
+      return;
+    }
+    // stage 3 — bloom
+    const top = baseY - cfg;
+    const tip = stem(cx, baseY, top + 2, sway);
+    leaf(cx, baseY - 7, -1);
+    leaf(cx, baseY - Math.round(cfg * 0.5), 1);
+    if (p.type === "sunflower") drawSunflower(tip, top);
+    else if (p.type === "dandelion") drawDandelion(tip, top);
+    else drawDaisy(tip, top);
+  }
+
+  function drawPumpkin(p, cx, baseY, sway, stage) {
+    if (stage === 0) {
+      r(cx - 1, baseY - 3, 2, 3, P.stem);
+      px(cx + 1, baseY - 4, P.leafHi);
+      return;
+    }
+    if (stage === 1) {
+      // a vine creeping along the soil with a couple of leaves
+      r(cx - 6, baseY, 12, 1, P.stemDark);
+      leaf(cx - 5, baseY - 1, -1);
+      leaf(cx + 4, baseY - 1, 1);
+      return;
+    }
+    if (stage === 2) {
+      // small unripe green pumpkin + a yellow blossom
+      r(cx - 7, baseY, 14, 1, P.stemDark);
+      oval(cx - 3, baseY - 2, 4, 3, P.stem);
+      oval(cx - 3, baseY - 3, 3, 2, P.leafHi);
+      disc(cx + 6, baseY - 4 + sway, 2, P.dandel);
+      px(cx + 6, baseY - 4 + sway, P.daisyCenter);
+      leaf(cx + 3, baseY - 1, 1);
+      return;
+    }
+    // stage 3 — a plump ribbed pumpkin resting on the soil
+    const py = baseY - 5;
+    oval(cx, py, 10, 7, P.pumpkin);
+    oval(cx - 5, py, 3, 6, P.pumpkinRib);
+    oval(cx + 5, py, 3, 6, P.pumpkinRib);
+    oval(cx, py, 2, 7, P.pumpkinDark);
+    oval(cx - 3, py - 1, 2, 5, P.pumpkinHi);
+    r(cx - 1, py - 8, 3, 3, P.stemDark);
+    // a leaf and a little curling vine off to the side
+    leaf(cx + 8, py - 5, 1);
+    px(cx + 10, py - 6, P.stem);
+    px(cx + 11, py - 5, P.stem);
+  }
+
+  function drawPlant(p, cx, baseY) {
+    if (!p.type) return;
+    const stage = stageOf(p);
+    const sway = stage >= 2 ? Math.sin(t * 1.6 + p.phase) * 1.4 : 0;
+    // soft shadow on the soil
+    oval(
+      cx,
+      baseY + 2,
+      p.type === "pumpkin" && stage === 3 ? 11 : 6,
+      2,
+      P.shadow,
+    );
+    if (p.type === "pumpkin") drawPumpkin(p, cx, baseY, sway, stage);
+    else drawUpright(p, cx, baseY, sway, stage);
+  }
+
+  function drawCursor() {
+    const { cx, baseY } = plotPos(cursor);
+    if (Math.floor(t * 2.2) % 2 === 0) return; // blink
+    const x0 = cx - 15,
+      x1 = cx + 14,
+      y0 = baseY - 8,
+      y1 = baseY + 7,
+      len = 5;
+    const corners = [
+      [x0, y0, 1, 1],
+      [x1, y0, -1, 1],
+      [x0, y1, 1, -1],
+      [x1, y1, -1, -1],
+    ];
+    for (const [bx, by, sx, sy] of corners) {
+      // a dark backing so the bracket reads on any colour, then the bright line
+      r(bx, by + sy, len * sx, 1, P.cursorDark);
+      r(bx + sx, by, 1, len * sy, P.cursorDark);
+      r(bx, by, len * sx, 1, P.cursor);
+      r(bx, by, 1, len * sy, P.cursor);
+    }
+  }
+
+  function drawParticles() {
+    for (const q of particles) {
+      if (q.type === "drop") {
+        r(q.x, q.y, 1, 2, P.drop);
+      } else if (q.type === "star") {
+        const c = q.life > q.max * 0.5 ? P.star : P.white;
+        px(q.x, q.y - 1, c);
+        px(q.x, q.y + 1, c);
+        px(q.x - 1, q.y, c);
+        px(q.x + 1, q.y, c);
+        px(q.x, q.y, c);
+      } else if (q.type === "poof") {
+        disc(q.x, q.y, q.life > q.max * 0.5 ? 2 : 1, P.soilTop);
+      }
+    }
+  }
+
+  function drawButterfly() {
+    const bx = (W / 2 + Math.sin(fly.t * 0.6) * 56) | 0;
+    const by =
+      (62 + Math.sin(fly.t * 1.3) * 14 + Math.cos(fly.t * 0.5) * 6) | 0;
+    const up = Math.floor(fly.t * 9) % 2 === 0;
+    px(bx, by, P.stemDark); // body
+    px(bx, by + 1, P.stemDark);
+    const wy = up ? -1 : 1;
+    r(bx - 3, by + (up ? -1 : 0), 2, 2, "#ff9ecb");
+    r(bx + 2, by + (up ? -1 : 0), 2, 2, "#ff9ecb");
+    px(bx - 3, by + wy, "#ffd2e8");
+    px(bx + 3, by + wy, "#ffd2e8");
+  }
+
+  function miniIcon(type, cx, cy) {
+    if (type === "sunflower") {
+      disc(cx, cy, 3, P.petalSun);
+      disc(cx, cy, 1, P.sunCenter);
+    } else if (type === "dandelion") {
+      disc(cx, cy, 3, P.dandel);
+      px(cx, cy, P.dandelHi);
+    } else if (type === "daisy") {
+      const pet = [
+        [0, -2],
+        [0, 2],
+        [-2, 0],
+        [2, 0],
+      ];
+      for (const [dx, dy] of pet) px(cx + dx, cy + dy, P.white);
+      disc(cx, cy, 1, P.daisyCenter);
+    } else if (type === "pumpkin") {
+      oval(cx, cy + 1, 3, 2, P.pumpkin);
+      px(cx, cy - 1, P.stemDark);
+    } else {
+      // dig — a little shovel: wooden handle + silver spade
+      r(cx, cy - 4, 1, 4, "#9a6336");
+      r(cx - 2, cy, 5, 1, "#c3c8d2");
+      r(cx - 2, cy + 1, 5, 1, "#aeb4c0");
+      r(cx - 1, cy + 2, 3, 1, "#aeb4c0");
+      px(cx, cy + 3, "#9aa0ad");
+    }
+  }
+
+  function drawTray() {
+    const ty = H - 14;
+    r(0, ty, W, 14, P.trayLo);
+    r(0, ty, W, 1, P.traySlot);
+    const cw = W / TRAY.length;
+    for (let i = 0; i < TRAY.length; i++) {
+      const cx = (i * cw + cw / 2) | 0;
+      const sel = i === seedIdx;
+      if (sel) {
+        r(i * cw + 3, ty + 1, cw - 6, 12, P.tray);
+        // bright selection frame
+        r(i * cw + 3, ty + 1, cw - 6, 1, P.traySel);
+        r(i * cw + 3, ty + 12, cw - 6, 1, P.traySel);
+        r(i * cw + 3, ty + 1, 1, 12, P.traySel);
+        r(i * cw + cw - 4, ty + 1, 1, 12, P.traySel);
+      }
+      miniIcon(TRAY[i], cx, ty + 7 - (sel ? 1 : 0));
+    }
+  }
+
+  function render() {
+    drawSky();
+    drawGround();
+    for (let i = 0; i < plots.length; i++) {
+      const { cx, baseY } = plotPos(i);
+      soilMound(cx, baseY, plots[i].wet);
+    }
+    // plants back-to-front so front rows overlap correctly
+    for (let i = 0; i < plots.length; i++) {
+      const { cx, baseY } = plotPos(i);
+      drawPlant(plots[i], cx, baseY);
+    }
+    drawCursor();
+    drawButterfly();
+    drawParticles();
+    drawTray();
+  }
+
+  // --- caption (DotGothic16 DOM line under the screen) -----------------------
+  function updateCaption() {
+    if (!caption) return;
+    const tool = TRAY[seedIdx];
+    if (tool === "dig") {
+      caption.innerHTML =
+        `<span class="gb-seed" style="color:#cdd2e0">✖ DIG UP</span>` +
+        `<span class="gb-hint">Ⓐ remove plant &nbsp; Ⓑ next</span>`;
+      return;
+    }
+    const col = {
+      sunflower: P.petalSun,
+      dandelion: P.dandel,
+      daisy: "#ffffff",
+      pumpkin: P.pumpkin,
+    }[tool];
+    caption.innerHTML =
+      `<span class="gb-seed" style="color:${col}">✿ ${SEED_LABEL[tool]}</span>` +
+      `<span class="gb-hint">Ⓐ plant · water &nbsp; Ⓑ next</span>`;
+  }
+  function flash(el, _c) {
+    if (!el) return;
+    el.classList.remove("gb-flash");
+    void el.offsetWidth;
+    el.classList.add("gb-flash");
+  }
+
+  // --- loop ------------------------------------------------------------------
+  function frame(now) {
+    if (!running) return;
+    const dt = Math.min(0.05, (now - last) / 1000 || 0);
+    last = now;
+    update(dt);
+    render();
+    raf = requestAnimationFrame(frame);
+  }
+
+  // --- input wiring ----------------------------------------------------------
+  function bindButton(el, action) {
+    if (!el) return;
+    el.addEventListener("click", (e) => {
+      e.preventDefault();
+      input(action);
+    });
+  }
+  root
+    .querySelectorAll("[data-dir]")
+    .forEach((el) => bindButton(el, el.dataset.dir));
+  root
+    .querySelectorAll("[data-action]")
+    .forEach((el) => bindButton(el, el.dataset.action));
+
+  const TRAY_TOP = H - 14; // matches drawTray()
+
+  function pointAt(e) {
+    const rect = canvas.getBoundingClientRect();
+    return {
+      mx: ((e.clientX - rect.left) / rect.width) * W,
+      my: ((e.clientY - rect.top) / rect.height) * H,
+    };
+  }
+
+  // click the seed tray to pick a flower, or a plot to plant / water it
+  canvas.addEventListener("click", (e) => {
+    if (!running) return;
+    const { mx, my } = pointAt(e);
+    if (my >= TRAY_TOP) {
+      const i = Math.floor(mx / (W / TRAY.length));
+      seedIdx = Math.min(TRAY.length - 1, Math.max(0, i));
+      updateCaption();
+      return;
+    }
+    let best = -1,
+      bestD = 1e9;
+    for (let i = 0; i < plots.length; i++) {
+      const { cx, baseY } = plotPos(i);
+      const d = (mx - cx) ** 2 + (my - (baseY - 4)) ** 2;
+      if (d < bestD) {
+        bestD = d;
+        best = i;
+      }
+    }
+    if (best >= 0 && bestD < 26 * 26) {
+      cursor = best;
+      act();
+    }
+  });
+
+  // a pointer cursor over the clickable spots (tray + plots) hints they're interactive
+  canvas.addEventListener("mousemove", (e) => {
+    if (!running) return;
+    const { mx, my } = pointAt(e);
+    let hot = my >= TRAY_TOP;
+    if (!hot) {
+      for (let i = 0; i < plots.length; i++) {
+        const { cx, baseY } = plotPos(i);
+        if ((mx - cx) ** 2 + (my - (baseY - 4)) ** 2 < 26 * 26) {
+          hot = true;
+          break;
+        }
+      }
+    }
+    canvas.style.cursor = hot ? "pointer" : "default";
+  });
+
+  // arrows move; the A/B keys mirror the on-screen A/B buttons (z/x/space/enter alias A).
+  const KEYS = {
+    ArrowUp: "up",
+    ArrowDown: "down",
+    ArrowLeft: "left",
+    ArrowRight: "right",
+    a: "a",
+    A: "a",
+    z: "a",
+    Z: "a",
+    Enter: "a",
+    " ": "a",
+    b: "b",
+    B: "b",
+    x: "b",
+    X: "b",
+  };
+  function onKey(e) {
+    if (!running) return;
+    const action = KEYS[e.key];
+    if (!action) return;
+    e.preventDefault();
+    e.stopPropagation();
+    input(action);
+  }
+
+  return {
+    start() {
+      if (running) return;
+      running = true;
+      last = 0;
+      updateCaption();
+      window.addEventListener("keydown", onKey, true);
+      raf = requestAnimationFrame((now) => {
+        last = now;
+        frame(now);
+      });
+    },
+    stop() {
+      running = false;
+      cancelAnimationFrame(raf);
+      window.removeEventListener("keydown", onKey, true);
+    },
+  };
+}

frontend/index.html

@@ -4,24 +4,51 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>LoFinity — chill beats, freshly vended</title>
-    <meta name="description" content="A magical vending machine that dispenses endless lofi cassette tapes. Tell it a vibe; it brews you a beat." />
+    <meta
+      name="description"
+      content="A magical vending machine that dispenses endless lofi cassette tapes. Tell it a vibe; it brews you a beat."
+    />
 
     <!-- Open Graph / Discord / social preview (single-line per tag so simple
          scrapers parse them). Absolute URLs point at the deployed Space;
          the image is built by scripts/make_og.py. -->
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="LoFinity" />
-    <meta property="og:title" content="LoFinity — chill beats, freshly vended" />
-    <meta property="og:description" content="A magical vending machine that dispenses endless lofi cassette tapes. Tell it a vibe; it brews you a beat." />
-    <meta property="og:url" content="https://build-small-hackathon-lofinity.hf.space/" />
-    <meta property="og:image" content="https://build-small-hackathon-lofinity.hf.space/static/og.png" />
+    <meta
+      property="og:title"
+      content="LoFinity — chill beats, freshly vended"
+    />
+    <meta
+      property="og:description"
+      content="A magical vending machine that dispenses endless lofi cassette tapes. Tell it a vibe; it brews you a beat."
+    />
+    <meta
+      property="og:url"
+      content="https://build-small-hackathon-lofinity.hf.space/"
+    />
+    <meta
+      property="og:image"
+      content="https://build-small-hackathon-lofinity.hf.space/static/og.png"
+    />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
-    <meta property="og:image:alt" content="LoFinity title screen — chill beats, freshly vended" />
+    <meta
+      property="og:image:alt"
+      content="LoFinity title screen — chill beats, freshly vended"
+    />
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="LoFinity — chill beats, freshly vended" />
-    <meta name="twitter:description" content="A magical vending machine that dispenses endless lofi cassette tapes." />
-    <meta name="twitter:image" content="https://build-small-hackathon-lofinity.hf.space/static/og.png" />
+    <meta
+      name="twitter:title"
+      content="LoFinity — chill beats, freshly vended"
+    />
+    <meta
+      name="twitter:description"
+      content="A magical vending machine that dispenses endless lofi cassette tapes."
+    />
+    <meta
+      name="twitter:image"
+      content="https://build-small-hackathon-lofinity.hf.space/static/og.png"
+    />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -165,62 +192,114 @@
     </div>
 
     <div id="collection-panel" class="hidden">
-    <p id="collection-heading"><span>♪ cassette collection</span></p>
-    <button id="collection-close" aria-label="close collection">×</button>
-    <p id="collection-status" class="hidden"></p>
-    <div id="carousel-row">
-      <button class="caro-btn" id="caro-prev" aria-label="scroll left">‹</button>
-      <div id="carousel"></div>
-      <button class="caro-btn" id="caro-next" aria-label="scroll right">›</button>
+      <p id="collection-heading"><span>♪ cassette collection</span></p>
+      <button id="collection-close" aria-label="close collection">×</button>
+      <p id="collection-status" class="hidden"></p>
+      <div id="carousel-row">
+        <button class="caro-btn" id="caro-prev" aria-label="scroll left">
+          ‹
+        </button>
+        <div id="carousel"></div>
+        <button class="caro-btn" id="caro-next" aria-label="scroll right">
+          ›
+        </button>
+      </div>
     </div>
-  </div>
 
-  <div id="tape-deck" class="hidden">
-    <button id="deck-play" aria-label="play/pause">▶</button>
-    <div id="deck-info">
-      <span id="deck-title">pick a tape</span>
-      <div id="deck-progress"><div id="deck-fill"></div></div>
-    </div>
-    <span id="deck-time">0:00</span>
-    <div id="deck-cassette" aria-hidden="true">
-      <span class="mini-reel"></span>
-      <span class="mini-reel"></span>
+    <div id="tape-deck" class="hidden">
+      <button id="deck-play" aria-label="play/pause">▶</button>
+      <div id="deck-info">
+        <span id="deck-title">pick a tape</span>
+        <div id="deck-progress"><div id="deck-fill"></div></div>
+      </div>
+      <span id="deck-time">0:00</span>
+      <div id="deck-cassette" aria-hidden="true">
+        <span class="mini-reel"></span>
+        <span class="mini-reel"></span>
+      </div>
+      <a
+        id="deck-download"
+        class="disabled"
+        aria-label="download tape"
+        title="download tape"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="20"
+          height="20"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M12 3v12" />
+          <path d="m6 11 6 6 6-6" />
+          <path d="M5 21h14" />
+        </svg>
+      </a>
     </div>
-    <a id="deck-download" class="disabled" aria-label="download tape" title="download tape">
-      <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor"
-        stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M12 3v12" /><path d="m6 11 6 6 6-6" /><path d="M5 21h14" />
-      </svg>
-    </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 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>POWER</div>
+          <div id="gameboy-screen" class="gb-screen">
+            <canvas id="gb-canvas" width="160" height="144"></canvas>
+          </div>
         </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 id="gb-caption" class="gb-caption"></div>
+        <div class="gb-logo">NO DOPAMINE<span>♪</span></div>
+        <div class="gb-controls">
+          <div class="gb-dpad">
+            <span class="gb-pad-v"></span><span class="gb-pad-h"></span>
+            <button
+              class="gb-pad-hit gb-up"
+              data-dir="up"
+              aria-label="up"
+            ></button>
+            <button
+              class="gb-pad-hit gb-down"
+              data-dir="down"
+              aria-label="down"
+            ></button>
+            <button
+              class="gb-pad-hit gb-left"
+              data-dir="left"
+              aria-label="left"
+            ></button>
+            <button
+              class="gb-pad-hit gb-right"
+              data-dir="right"
+              aria-label="right"
+            ></button>
+          </div>
+          <div class="gb-ab">
+            <button class="gb-btn" data-action="b">B</button>
+            <button class="gb-btn" data-action="a">A</button>
+          </div>
         </div>
-        <div class="gb-ab" aria-hidden="true">
-          <span class="gb-btn">B</span><span class="gb-btn">A</span>
+        <div class="gb-startsel">
+          <button
+            class="gb-ss"
+            data-action="select"
+            aria-label="select (change seed)"
+          ></button>
+          <button
+            class="gb-ss"
+            data-action="start"
+            aria-label="start (dig up)"
+          ></button>
+        </div>
+        <div class="gb-speaker" aria-hidden="true">
+          <i></i><i></i><i></i><i></i><i></i><i></i>
         </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">
+    <div id="now-playing" class="hidden">
       <button id="np-toggle" aria-label="play/pause">❚❚</button>
       <span id="np-title"></span>
     </div>

frontend/style.css

@@ -1137,12 +1137,12 @@ body {
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 19;
-  transition: opacity 0.3s ease;
 }
 
+/* display:none (like #machine-modal) — an opacity fade here would let the inner
+   .gb-shell snap back to full opacity as .closing is removed, causing a flicker. */
 #gameboy-modal.hidden {
-  opacity: 0;
-  pointer-events: none;
+  display: none;
 }
 
 #gameboy-modal.opening .gb-shell {
@@ -1233,37 +1233,66 @@ body {
 }
 
 .gb-screen {
+  position: relative;
   aspect-ratio: 10 / 9;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
   border-radius: 4px;
-  color: #213a08;
+  overflow: hidden;
   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);
+    inset 0 0 0 2px #1d2540,
+    inset 0 2px 10px rgba(0, 0, 0, 0.35);
 }
 
-.gb-line {
-  margin: 0;
+#gb-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}
+
+/* faint scanlines for retro feel — subtle so the colour reads */
+.gb-screen::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0.07) 0 1px,
+    transparent 1px 3px
+  );
+}
+
+.gb-caption {
+  margin: 9px 2px 0;
+  min-height: 14px;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
   font-family: "DotGothic16", monospace;
-  font-size: 0.95rem;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+  transition: filter 0.15s ease;
 }
 
-.gb-blink {
-  animation: gb-blink 1s steps(1) infinite;
+.gb-caption .gb-seed {
+  font-size: 0.72rem;
+  letter-spacing: 0.06em;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
 }
 
-@keyframes gb-blink {
-  50% {
-    opacity: 0;
-  }
+.gb-caption .gb-hint {
+  font-size: 0.5rem;
+  letter-spacing: 0.03em;
+  color: #6a6f86;
+}
+
+.gb-caption.gb-flash {
+  animation: gb-flash 0.3s ease;
+}
+
+@keyframes gb-flash {
+  0% { filter: brightness(1.9); }
+  100% { filter: brightness(1); }
 }
 
 .gb-logo {
@@ -1315,6 +1344,28 @@ body {
   height: 18px;
 }
 
+/* transparent click targets over each arm of the d-pad */
+.gb-pad-hit {
+  position: absolute;
+  z-index: 2;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.gb-pad-hit:active {
+  background: rgba(255, 255, 255, 0.14);
+  border-radius: 3px;
+}
+
+.gb-up    { left: 19px; top: 0;    width: 18px; height: 19px; }
+.gb-down  { left: 19px; top: 37px; width: 18px; height: 19px; }
+.gb-left  { left: 0;    top: 19px; width: 19px; height: 18px; }
+.gb-right { left: 37px; top: 19px; width: 19px; height: 18px; }
+
 .gb-ab {
   display: flex;
   gap: 14px;
@@ -1325,6 +1376,10 @@ body {
   width: 40px;
   height: 40px;
   border-radius: 50%;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  font-family: inherit;
   background: radial-gradient(circle at 35% 30%, #a8406b, #7a1f45);
   color: #f2d6e2;
   font-weight: 800;
@@ -1335,6 +1390,15 @@ body {
   box-shadow:
     0 3px 5px rgba(0, 0, 0, 0.3),
     inset 0 2px 3px rgba(255, 255, 255, 0.25);
+  -webkit-tap-highlight-color: transparent;
+  transition: transform 0.06s ease, box-shadow 0.06s ease;
+}
+
+.gb-btn:active {
+  transform: translateY(2px);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.3),
+    inset 0 2px 3px rgba(255, 255, 255, 0.25);
 }
 
 .gb-startsel {
@@ -1344,13 +1408,22 @@ body {
   margin-top: 18px;
 }
 
-.gb-startsel span {
+.gb-startsel .gb-ss {
   width: 34px;
   height: 11px;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
   border-radius: 999px;
   background: #6b7280;
   transform: rotate(-22deg);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+  -webkit-tap-highlight-color: transparent;
+  transition: background 0.1s ease;
+}
+
+.gb-startsel .gb-ss:active {
+  background: #565d6b;
 }
 
 .gb-speaker {

frontend/ui.js

@@ -1,6 +1,8 @@
 // LoFinity — vending machine modal: prompt → coin drop → brewing → cassette.
 // main.js owns the camera; this module owns the DOM and the audio element.
 
+import { createGarden } from "/static/garden.js";
+
 const $ = (id) => document.getElementById(id);
 const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
@@ -59,6 +61,7 @@ export function initUI({
   let busy = false;
   let collectionOpen = false;
   let gameboyOpen = false;
+  let garden = null; // the Game Boy garden mini-game (lazily started)
   let currentSong = null; // { title, url } of the tape in the deck
 
   function setStage(stage) {
@@ -491,10 +494,13 @@ export function initUI({
       gameboyModal.classList.remove("hidden", "closing");
       void gameboyModal.offsetWidth; // restart the entrance animation
       gameboyModal.classList.add("opening");
+      if (!garden) garden = createGarden(gameboyModal);
+      garden.start();
       syncPill();
     },
     closeGameboy() {
       gameboyOpen = false;
+      garden?.stop();
       if (gameboyModal.classList.contains("hidden")) return syncPill();
       gameboyModal.classList.remove("opening");
       gameboyModal.classList.add("closing");