126 lines
4.1 KiB
JavaScript
126 lines
4.1 KiB
JavaScript
/**
|
|
* 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;
|