Add "play while waiting" feature to enhance user experience. Introduced a new button in index.html that allows users to engage with a garden mini-game while waiting. Updated main.js to handle the button's functionality, and modified ui.js to manage its visibility based on the current stage. Enhanced style.css with new styles for the button, ensuring it is visually appealing and interactive.

frontend/index.html

@@ -189,6 +189,30 @@
         </div>
         <button id="again-btn">MAKE ANOTHER</button>
       </div>
+      <button
+        id="play-while-waiting"
+        class="hidden"
+        aria-label="play the garden game while you wait"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="22"
+          height="22"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.7"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <rect x="5" y="2.5" width="14" height="19" rx="2.6" />
+          <rect x="8" y="5" width="8" height="6.5" rx="1" />
+          <path d="M9 16.6h2.4M10.2 15.4v2.4" />
+          <circle cx="15" cy="15.6" r="0.95" fill="currentColor" stroke="none" />
+          <circle cx="16.6" cy="17.1" r="0.95" fill="currentColor" stroke="none" />
+        </svg>
+        <span>play a relaxed game while waiting</span>
+      </button>
     </div>
 
     <div id="collection-panel" class="hidden">

frontend/main.js

@@ -500,6 +500,13 @@ const ui = initUI({
   onRequestCloseGameboy: () => {
     if (view.mode === "gameboy") closeGameboyView();
   },
+  // "play while waiting": leave the beat brewing in the background and fly
+  // from the machine over to the garden mini-game.
+  onPlayWhileWaiting: () => {
+    if (view.mode !== "machine") return;
+    ui.closeModal();
+    zoomToGameboy();
+  },
   onGeneratingChange: setMachineBusy,
 });
 

frontend/style.css

@@ -197,6 +197,61 @@ body {
   display: none;
 }
 
+/* "play while waiting" nudge — a frosted pill below the card, shown only while
+   the machine is brewing. Clicking it whisks you off to the garden mini-game. */
+#play-while-waiting {
+  position: absolute;
+  top: calc(100% + 16px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  white-space: nowrap;
+  padding: 9px 17px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.18);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  color: #fff;
+  font-family: "Baloo 2", sans-serif;
+  font-weight: 600;
+  font-size: 0.9rem;
+  cursor: pointer;
+  text-shadow: 0 1px 3px rgba(15, 40, 90, 0.45);
+  box-shadow: 0 8px 24px rgba(15, 40, 90, 0.28);
+  transition:
+    background 0.18s ease,
+    transform 0.18s ease;
+  animation: pww-in 0.4s ease;
+}
+
+#play-while-waiting svg {
+  flex: none;
+  opacity: 0.95;
+}
+
+#play-while-waiting:hover {
+  background: rgba(255, 255, 255, 0.32);
+  transform: translateX(-50%) translateY(-2px);
+}
+
+#play-while-waiting.hidden {
+  display: none;
+}
+
+@keyframes pww-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
 /* anime panel entrance: a thin slash from the corner that springs open */
 #machine-modal.opening {
   animation: modal-in 0.55s cubic-bezier(0.25, 0.9, 0.35, 1.2) both;

frontend/ui.js

@@ -12,10 +12,12 @@ export function initUI({
   onRequestClose,
   onRequestCloseCollection,
   onRequestCloseGameboy,
+  onPlayWhileWaiting,
   onGeneratingChange,
 }) {
   const modal = $("machine-modal");
   const gameboyModal = $("gameboy-modal");
+  const playWaitBtn = $("play-while-waiting");
   const input = $("prompt-input");
   const coinBtn = $("coin-button");
   const controlsRow = $("controls-row");
@@ -68,6 +70,7 @@ export function initUI({
     controlsRow.classList.toggle("hidden", stage !== "prompt");
     generating.classList.toggle("hidden", stage !== "generating");
     cassetteStage.classList.toggle("hidden", stage !== "cassette");
+    playWaitBtn.classList.toggle("hidden", stage !== "generating");
     input.classList.toggle("hidden", stage === "cassette");
     input.disabled = stage === "generating";
     if (stage === "prompt") {
@@ -416,6 +419,7 @@ export function initUI({
 
   $("collection-close").addEventListener("click", () => onRequestCloseCollection());
   $("gameboy-close").addEventListener("click", () => onRequestCloseGameboy());
+  playWaitBtn.addEventListener("click", () => onPlayWhileWaiting());
   caroPrev.addEventListener("click", () => centerOn(centerIndex - 1, { load: true }));
   caroNext.addEventListener("click", () => centerOn(centerIndex + 1, { load: true }));