Session 11: Golden Starbloom random event (clickable bonus + production boost)

js/ui.js

@@ -38,6 +38,9 @@ const UI = {
         
         // Prestige
         PrestigeUI.update();
+        
+        // Golden Starbloom countdown badge
+        this.updateGoldenBloomBadge();
     },
 
     /**
@@ -229,6 +232,71 @@ const UI = {
         }
     },
 
+    /**
+     * Spawn a Golden Starbloom in the click area. Called by Game when the
+     * random event becomes active. The bloom floats at a random position and
+     * is clickable to claim its bonus.
+     */
+    spawnGoldenBloom() {
+        const container = document.getElementById('golden-bloom-container');
+        if (!container) return;
+
+        // Remove any existing bloom first (shouldn't be one, but stay safe).
+        this.removeGoldenBloom();
+
+        const bloom = document.createElement('div');
+        bloom.className = 'golden-bloom';
+        bloom.textContent = '⭐';
+        bloom.title = 'Golden Starbloom! Click for a bonus!';
+
+        // Random position within the click area.
+        const rect = container.getBoundingClientRect();
+        const x = 20 + Math.random() * (Math.max(1, rect.width - 80));
+        const y = 20 + Math.random() * (Math.max(1, rect.height - 80));
+        bloom.style.left = `${x}px`;
+        bloom.style.top = `${y}px`;
+
+        // Click handler claims the bonus.
+        bloom.addEventListener('click', () => {
+            const earned = Game.claimGoldenBloom(rect.left + x, rect.top + y);
+            this.removeGoldenBloom();
+            if (earned > 0) {
+                UI.showFloatingText(
+                    rect.left + x, rect.top + y,
+                    `+${Game.formatNumber(earned)} ✨`
+                );
+            }
+        });
+
+        container.appendChild(bloom);
+    },
+
+    /**
+     * Remove any visible Golden Starbloom from the click area.
+     */
+    removeGoldenBloom() {
+        const container = document.getElementById('golden-bloom-container');
+        if (!container) return;
+        const existing = container.querySelector('.golden-bloom');
+        if (existing) existing.remove();
+    },
+
+    /**
+     * Update the Golden Starbloom countdown badge shown in the header.
+     */
+    updateGoldenBloomBadge() {
+        const el = document.getElementById('golden-bloom-badge');
+        const remaining = Game.getGoldenBloomRemaining();
+        if (!el) return;
+
+        if (remaining > 0) {
+            el.classList.add('active');
+            el.textContent = `⭐ Golden Bloom: ${remaining}s`;
+        } else {
+            el.classList.remove('active');
+        }
+    },
+
     /**
      * Show floating text animation
      */