Session 5: Prestige System with Stellar Essence

2026-08-20 13:43:23 +00:00
parent f18ef5c396
commit 3ee33ee43f
7 changed files with 769 additions and 88 deletions
@@ -0,0 +1,125 @@
+/**
+ * Cosmic Garden - Prestige UI Manager
+ * Handles all prestige-related UI rendering and interactions
+ */
+
+const PrestigeUI = {
+    /**
+     * Initialize the prestige UI
+     */
+    init() {
+        this.renderPrestigeUpgrades();
+        this.setupEventListeners();
+        this.update();
+    },
+
+    /**
+     * Setup event listeners
+     */
+    setupEventListeners() {
+        // Prestige button
+        document.getElementById('prestige-btn')?.addEventListener('click', () => {
+            const essenceGain = PRESTIGE.calculateEssence();
+            
+            if (essenceGain > 0) {
+                if (confirm(
+                    `Prestige now to earn ${essenceGain} Stellar Essence?\n\n` +
+                    `You will keep your prestige upgrades and essence.\n` +
+                    `All buildings, upgrades, and stardust will be reset.`
+                )) {
+                    PRESTIGE.prestige();
+                }
+            } else {
+                UI.showNotification('Need more stardust to prestige!', 'warning');
+            }
+        });
+
+        // Tab switching for prestige tab
+        document.querySelectorAll('.tab-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const tab = e.target.dataset.tab;
+                if (tab === 'prestige') {
+                    this.renderPrestigeUpgrades();
+                }
+            });
+        });
+    },
+
+    /**
+     * Render prestige upgrade cards
+     */
+    renderPrestigeUpgrades() {
+        const container = document.getElementById('prestige-upgrades-list');
+        if (!container) return;
+
+        container.innerHTML = '';
+
+        for (const [id, upgrade] of Object.entries(PRESTIGE_UPGRADES)) {
+            const card = document.createElement('div');
+            card.className = 'prestige-upgrade-card';
+            card.id = `prestige-upgrade-${id}`;
+
+            const purchased = Game.state.prestigeUpgrades?.includes(id);
+            const canAfford = (Game.state.stellarEssence || 0) >= upgrade.cost;
+
+            card.classList.toggle('purchased', purchased);
+            card.classList.toggle('locked', !purchased && !canAfford);
+
+            card.innerHTML = `
+                <div class=\"prestige-upgrade-name\">${upgrade.icon} ${upgrade.name}</div>
+                <div class=\"prestige-upgrade-desc\">${upgrade.description}</div>
+                <div class=\"prestige-upgrade-cost\">${purchased ? '✓ Owned' : `${upgrade.cost} ✦`}</div>
+            `;
+
+            if (!purchased && canAfford) {
+                card.addEventListener('click', () => {
+                    PRESTIGE.buyUpgrade(id);
+                });
+            }
+
+            container.appendChild(card);
+        }
+    },
+
+    /**
+     * Update prestige display
+     */
+    update() {
+        // Essence count
+        const essenceEl = document.getElementById('prestige-essence-count');
+        if (essenceEl) {
+            essenceEl.textContent = Game.state.stellarEssence || 0;
+        }
+
+        // Multiplier display
+        const multiplierEl = document.getElementById('prestige-multiplier');
+        if (multiplierEl) {
+            const multiplier = PRESTIGE.getMultiplier();
+            const percent = Math.round((multiplier - 1) * 100);
+            multiplierEl.textContent = `+${percent}%`;
+        }
+
+        // Next prestige essence
+        const nextEl = document.getElementById('prestige-next-essence');
+        if (nextEl) {
+            const nextEssence = PRESTIGE.calculateEssence();
+            nextEl.textContent = nextEssence;
+        }
+
+        // Update prestige button state
+        const prestigeBtn = document.getElementById('prestige-btn');
+        if (prestigeBtn) {
+            const canPrestige = PRESTIGE.calculateEssence() > 0;
+            prestigeBtn.disabled = !canPrestige;
+            prestigeBtn.classList.toggle('can-prestige', canPrestige);
+        }
+
+        // Update prestige upgrades list if visible
+        const prestigeTab = document.getElementById('prestige-tab');
+        if (prestigeTab?.classList.contains('active')) {
+            this.renderPrestigeUpgrades();
+        }
+    }
+};
+
+window.PrestigeUI = PrestigeUI;