export class UIManager { constructor(gameLogic, waterBottle, leaderboardManager) { // Added leaderboardManager this.gameLogic = gameLogic; this.waterBottle = waterBottle; // Store waterBottle instance this.leaderboardManager = leaderboardManager; // Store leaderboardManager instance this.isUpgradesPanelVisible = true; // State for panel visibility this.currentBuyMode = 1; // 1, 10, or 'max' this.availableBottleStyles = [ // Define available skins { id: 'style_default', name: 'Classic Blue' }, { id: 'style_basic_red', name: 'Crimson Red' }, { id: 'style_golden_flask', name: 'Golden Flask' } // Add more styles here in the future ]; this.createUI(); this.setupEventListeners(); } createUI() { // Main container this.uiContainer = document.createElement('div'); this.uiContainer.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; font-family: Arial, sans-serif; color: white; z-index: 1000; `; document.body.appendChild(this.uiContainer); // Money display this.moneyDisplay = document.createElement('div'); this.moneyDisplay.style.cssText = ` position: absolute; top: 20px; left: 20px; font-size: 32px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); background: rgba(74, 144, 164, 0.8); padding: 15px 25px; border-radius: 15px; border: 3px solid rgba(255,255,255,0.3); `; this.uiContainer.appendChild(this.moneyDisplay); // Water level indicator this.waterLevelDisplay = document.createElement('div'); this.waterLevelDisplay.style.cssText = ` position: absolute; top: 20px; right: 20px; font-size: 18px; background: rgba(77, 208, 225, 0.8); padding: 10px 20px; border-radius: 10px; border: 2px solid rgba(255,255,255,0.3); `; this.uiContainer.appendChild(this.waterLevelDisplay); // Empty button this.emptyButton = document.createElement('button'); this.emptyButton.textContent = 'EMPTY BOTTLE'; this.emptyButton.style.cssText = ` position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); font-size: 20px; font-weight: bold; padding: 15px 30px; background: linear-gradient(45deg, #ff6b6b, #ee5a52); color: white; border: none; border-radius: 10px; cursor: pointer; pointer-events: auto; transition: all 0.2s ease; box-shadow: 0 4px 8px rgba(0,0,0,0.3); `; this.uiContainer.appendChild(this.emptyButton); // Upgrades panel this.upgradesPanel = document.createElement('div'); this.upgradesPanel.style.cssText = ` position: absolute; bottom: 20px; left: 20px; background: rgba(74, 144, 164, 0.9); padding: 20px; border-radius: 15px; border: 3px solid rgba(255,255,255,0.3); min-width: 300px; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out; opacity: ${this.isUpgradesPanelVisible ? '1' : '0'}; transform: ${this.isUpgradesPanelVisible ? 'translateY(0)' : 'translateY(20px)'}; visibility: ${this.isUpgradesPanelVisible ? 'visible' : 'hidden'}; `; this.uiContainer.appendChild(this.upgradesPanel); this.createBuyModeToggleButtons(); // Add this before upgrade buttons this.createUpgradeButtons(); this.createPrestigeSection(); this.createToggleUpgradesButton(); this.createSaveButton(); // Add save button this.createAchievementsPanel(); // Add achievements panel this.createNotificationArea(); // For achievement popups this.createBoostIndicator(); // Add click power boost indicator this.createIncomeBoostIndicator(); // Add passive income boost indicator this.createShopPanel(); // Add shop panel this.createLeaderboardPanel(); // Add leaderboard panel this.createAutoSaveIndicator(); // Add auto-save indicator } createUpgradeButtons() { const upgradeTypes = [ { type: 'clickPower', name: 'Click Power', desc: 'More water per click' }, { type: 'bottleCapacity', name: 'Bottle Size', desc: 'Larger bottle capacity' }, { type: 'waterValue', name: 'Water Value', desc: 'More money per unit' }, { type: 'autoFill', name: 'Auto Fill', desc: 'Automatic water generation' }, { type: 'criticalBoost', name: 'Critical Boost', desc: 'Chance & power for bonus water' }, { type: 'passiveIncome', name: 'Passive Income', desc: 'Earn interest over time' } ]; this.upgradeButtons = {}; upgradeTypes.forEach(upgrade => { const button = document.createElement('button'); button.style.cssText = ` display: block; width: 100%; margin: 5px 0; padding: 10px; background: rgba(255,255,255,0.2); color: white; border: 2px solid rgba(255,255,255,0.3); border-radius: 8px; cursor: pointer; pointer-events: auto; transition: all 0.2s ease; text-align: left; font-size: 14px; `; button.addEventListener('mouseover', () => { button.style.background = 'rgba(255,255,255,0.3)'; }); button.addEventListener('mouseout', () => { button.style.background = 'rgba(255,255,255,0.2)'; }); this.upgradeButtons[upgrade.type] = button; this.upgradesPanel.appendChild(button); }); } createBuyModeToggleButtons() { this.buyModeContainer = document.createElement('div'); this.buyModeContainer.style.cssText = ` display: flex; justify-content: space-around; margin-bottom: 10px; pointer-events: auto; `; this.buyModeButtons = {}; const modes = [ { mode: 1, text: 'x1' }, { mode: 10, text: 'x10' }, { mode: 'max', text: 'MAX' } ]; modes.forEach(modeInfo => { const button = document.createElement('button'); button.textContent = modeInfo.text; button.dataset.mode = String(modeInfo.mode); // Ensure mode is string for dataset comparison button.style.cssText = ` padding: 5px 10px; font-size: 12px; background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 5px; cursor: pointer; transition: background 0.2s ease; flex-grow: 1; margin: 0 2px; `; button.addEventListener('click', () => { this.currentBuyMode = modeInfo.mode; this.updateBuyModeButtonStyles(); this.update(); // Re-render UI to reflect new costs }); this.buyModeButtons[modeInfo.mode] = button; this.buyModeContainer.appendChild(button); }); this.upgradesPanel.insertBefore(this.buyModeContainer, this.upgradesPanel.firstChild); // Insert at the top of upgrades panel this.updateBuyModeButtonStyles(); // Initial style update } updateBuyModeButtonStyles() { Object.values(this.buyModeButtons).forEach(button => { // Compare dataset.mode (string) with currentBuyMode (can be number or string 'max') if (button.dataset.mode === String(this.currentBuyMode)) { button.style.background = 'rgba(255,255,255,0.4)'; button.style.fontWeight = 'bold'; } else { button.style.background = 'rgba(255,255,255,0.15)'; button.style.fontWeight = 'normal'; } }); } createPrestigeSection() { // Prestige Info Display this.prestigeInfoDisplay = document.createElement('div'); this.prestigeInfoDisplay.style.cssText = ` position: absolute; top: 80px; /* Below money display */ left: 20px; font-size: 16px; text-shadow: 1px 1px 2px rgba(0,0,0,0.4); background: rgba(74, 144, 164, 0.7); padding: 10px 15px; border-radius: 10px; border: 2px solid rgba(255,255,255,0.2); `; this.uiContainer.appendChild(this.prestigeInfoDisplay); // Prestige Button this.prestigeButton = document.createElement('button'); this.prestigeButton.style.cssText = ` position: absolute; bottom: 20px; right: 20px; font-size: 18px; font-weight: bold; padding: 15px 25px; background: linear-gradient(45deg, #f0c14e, #ddb347); color: #333; border: none; border-radius: 10px; cursor: pointer; pointer-events: auto; transition: all 0.2s ease; box-shadow: 0 4px 8px rgba(0,0,0,0.3); `; this.uiContainer.appendChild(this.prestigeButton); } createToggleUpgradesButton() { this.toggleUpgradesButton = document.createElement('button'); this.toggleUpgradesButton.textContent = 'Hide Upgrades'; this.toggleUpgradesButton.style.cssText = ` position: absolute; top: 145px; /* Below prestige info */ left: 20px; padding: 8px 15px; font-size: 14px; background-color: rgba(0, 0, 0, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; cursor: pointer; pointer-events: auto; transition: background-color 0.2s ease; `; this.toggleUpgradesButton.addEventListener('mouseover', () => { this.toggleUpgradesButton.style.backgroundColor = 'rgba(0, 0, 0, 0.3)'; }); this.toggleUpgradesButton.addEventListener('mouseout', () => { this.toggleUpgradesButton.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'; }); this.uiContainer.appendChild(this.toggleUpgradesButton); } createSaveButton() { this.saveButton = document.createElement('button'); this.saveButton.textContent = 'Save Game'; this.saveButton.style.cssText = ` position: absolute; top: 200px; /* Position below toggle button */ left: 20px; padding: 8px 15px; font-size: 14px; background-color: rgba(0, 150, 50, 0.7); color: white; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; cursor: pointer; pointer-events: auto; transition: background-color 0.2s ease; `; this.saveButton.addEventListener('mouseover', () => { this.saveButton.style.backgroundColor = 'rgba(0, 180, 60, 0.8)'; }); this.saveButton.addEventListener('mouseout', () => { this.saveButton.style.backgroundColor = 'rgba(0, 150, 50, 0.7)'; }); this.uiContainer.appendChild(this.saveButton); } createAchievementsPanel() { this.achievementsButton = document.createElement('button'); this.achievementsButton.textContent = '🏆'; // Use an icon for the button this.achievementsButton.title = "Achievements"; this.achievementsButton.style.cssText = ` position: absolute; top: 255px; /* Position below save button */ left: 20px; padding: 8px 12px; font-size: 18px; background-color: rgba(255, 193, 7, 0.7); /* Gold-ish color */ color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 5px; cursor: pointer; pointer-events: auto; transition: background-color 0.2s ease; `; this.achievementsButton.addEventListener('mouseover', () => { this.achievementsButton.style.backgroundColor = 'rgba(255, 203, 57, 0.8)'; }); this.achievementsButton.addEventListener('mouseout', () => { this.achievementsButton.style.backgroundColor = 'rgba(255, 193, 7, 0.7)'; }); this.uiContainer.appendChild(this.achievementsButton); this.achievementsPanel = document.createElement('div'); this.achievementsPanel.style.cssText = ` position: fixed; /* Changed to fixed for centering */ top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: rgba(50, 100, 120, 0.95); padding: 25px; border-radius: 15px; border: 3px solid rgba(255,255,255,0.4); width: 80%; max-width: 450px; max-height: 70vh; overflow-y: auto; z-index: 1001; /* Above other UI */ visibility: hidden; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.4); `; const closeButton = document.createElement('button'); closeButton.textContent = '×'; closeButton.style.cssText = ` position: absolute; top: 10px; right: 15px; font-size: 24px; background: transparent; color: white; border: none; cursor: pointer; pointer-events: auto; `; this.achievementsListContainer = document.createElement('div'); // Container for individual achievements this.achievementsPanel.appendChild(closeButton); this.achievementsPanel.appendChild(this.achievementsListContainer); this.uiContainer.appendChild(this.achievementsPanel); this.achievementsButton.addEventListener('click', () => this.toggleAchievementsPanel(true)); closeButton.addEventListener('click', () => this.toggleAchievementsPanel(false)); } toggleAchievementsPanel(show) { if (show) { this.updateAchievementsDisplay(); this.achievementsPanel.style.visibility = 'visible'; this.achievementsPanel.style.opacity = '1'; this.achievementsPanel.style.transform = 'translate(-50%, -50%) scale(1)'; } else { this.achievementsPanel.style.opacity = '0'; this.achievementsPanel.style.transform = 'translate(-50%, -50%) scale(0.9)'; setTimeout(() => { this.achievementsPanel.style.visibility = 'hidden'; }, 300); } } updateAchievementsDisplay() { this.achievementsListContainer.innerHTML = ''; // Clear previous entries const achievements = this.gameLogic.achievementsManager.getAchievementsStatus(); const title = document.createElement('h2'); title.textContent = 'Achievements'; title.style.cssText = ` text-align: center; margin-top: 0; margin-bottom: 20px; color: #fff; font-size: 22px; `; this.achievementsListContainer.appendChild(title); achievements.forEach(ach => { const achElement = document.createElement('div'); achElement.style.cssText = ` padding: 10px; margin-bottom: 8px; background: rgba(255,255,255,0.1); border-radius: 8px; border-left: 5px solid ${ach.unlocked ? '#4CAF50' : '#777'}; opacity: ${ach.unlocked ? '1' : '0.7'}; display: flex; align-items: center; `; const iconElement = document.createElement('span'); iconElement.textContent = ach.icon; iconElement.style.cssText = `font-size: 24px; margin-right: 15px;`; const textContainer = document.createElement('div'); const nameElement = document.createElement('strong'); nameElement.textContent = ach.name; nameElement.style.display = 'block'; nameElement.style.fontSize = '16px'; nameElement.style.marginBottom = '3px'; const descElement = document.createElement('small'); descElement.textContent = ach.description; descElement.style.fontSize = '13px'; descElement.style.color = ach.unlocked ? '#e0e0e0' : '#bbb'; textContainer.appendChild(nameElement); textContainer.appendChild(descElement); achElement.appendChild(iconElement); achElement.appendChild(textContainer); this.achievementsListContainer.appendChild(achElement); }); } createNotificationArea() { this.notificationArea = document.createElement('div'); this.notificationArea.style.cssText = ` position: fixed; bottom: 20px; right: 20px; z-index: 2000; /* Above most other UI elements */ display: flex; flex-direction: column-reverse; /* New notifications appear on top */ align-items: flex-end; `; this.uiContainer.appendChild(this.notificationArea); } showAchievementNotification(achievement) { // Parameter changed to full achievement object const notification = document.createElement('div'); let rewardText = ''; const reward = achievement.reward; // Extract reward from achievement if (reward) { if (reward.type === 'money' && typeof reward.amount === 'number') { rewardText = `
Reward: +$${achievement.reward.amount.toFixed(2)}`; } else if (reward.type === 'clickPowerBoost' && typeof reward.multiplier === 'number' && typeof reward.duration === 'number') { rewardText = `
Reward: ${reward.multiplier}x Click Power for ${reward.duration}s!`; } else if (reward.type === 'passiveIncomeBoost' && typeof reward.boostPercentage === 'number' && typeof reward.duration === 'number') { rewardText = `
Reward: +${(reward.boostPercentage * 100).toFixed(2)}% Passive Income for ${reward.duration}s!`; } else if (reward.type === 'cosmeticUnlock' && reward.itemType === 'bottleStyle' && reward.itemId) { rewardText = `
New Bottle Style: ${this.availableBottleStyles.find(s => s.id === reward.itemId)?.name || 'Unknown Style'}!`; } } notification.style.cssText = ` background: rgba(50, 180, 100, 0.9); color: white; padding: 15px 25px; margin-top: 10px; /* Space between notifications */ border-radius: 10px; border: 2px solid rgba(255,255,255,0.5); box-shadow: 0 5px 15px rgba(0,0,0,0.2); font-size: 16px; opacity: 0; transform: translateX(100%); transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth pop-in and pop-out */ pointer-events: auto; /* Allow clicking if we add close buttons later */ `; notification.innerHTML = `${achievement.icon} Achievement Unlocked!
${achievement.name}${rewardText}`; this.notificationArea.appendChild(notification); // Animate in setTimeout(() => { notification.style.opacity = '1'; notification.style.transform = 'translateX(0)'; }, 50); // Slight delay to ensure transition applies const notificationDuration = 4000; // Base duration // Animate out and remove setTimeout(() => { notification.style.opacity = '0'; notification.style.transform = 'translateX(100%)'; setTimeout(() => { if (this.notificationArea.contains(notification)) { this.notificationArea.removeChild(notification); } }, 500); // Corresponds to transition duration }, notificationDuration); // Display for base duration // If it's a bottle style unlock, trigger the special animation if (reward && reward.type === 'cosmeticUnlock' && reward.itemType === 'bottleStyle' && reward.itemId) { // Delay the skin unlock animation slightly to not overlap too much with the general notification setTimeout(() => { this.showSkinUnlockAnimation(reward.itemId); }, 1000); // Start 1 second after notification appears } } createBoostIndicator() { this.boostIndicator = document.createElement('div'); this.boostIndicator.style.cssText = ` position: absolute; top: 100px; /* Below money/water, adjust as needed */ right: 20px; padding: 8px 15px; background: rgba(255, 165, 0, 0.85); /* Orange color for boost */ color: white; font-size: 14px; font-weight: bold; border-radius: 8px; border: 2px solid rgba(255,255,255,0.4); text-shadow: 1px 1px 2px rgba(0,0,0,0.3); visibility: hidden; /* Hidden by default */ opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; /* Not interactive */ `; this.uiContainer.appendChild(this.boostIndicator); } createIncomeBoostIndicator() { this.incomeBoostIndicator = document.createElement('div'); this.incomeBoostIndicator.style.cssText = ` position: absolute; top: 150px; /* Below click boost indicator, adjust as needed */ right: 20px; padding: 8px 15px; background: rgba(76, 175, 80, 0.85); /* Green color for income boost */ color: white; font-size: 14px; font-weight: bold; border-radius: 8px; border: 2px solid rgba(255,255,255,0.4); text-shadow: 1px 1px 2px rgba(0,0,0,0.3); visibility: hidden; /* Hidden by default */ opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; /* Not interactive */ `; this.uiContainer.appendChild(this.incomeBoostIndicator); } createShopPanel() { this.shopButton = document.createElement('button'); this.shopButton.textContent = '🛒'; // Shop icon this.shopButton.title = "Bottle Shop"; this.shopButton.style.cssText = ` position: absolute; top: 310px; /* Position below achievements button */ left: 20px; padding: 8px 12px; font-size: 18px; background-color: rgba(100, 100, 220, 0.7); /* A bluish-purple color */ color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 5px; cursor: pointer; pointer-events: auto; transition: background-color 0.2s ease; `; this.shopButton.addEventListener('mouseover', () => { this.shopButton.style.backgroundColor = 'rgba(120, 120, 240, 0.8)'; }); this.shopButton.addEventListener('mouseout', () => { this.shopButton.style.backgroundColor = 'rgba(100, 100, 220, 0.7)'; }); this.uiContainer.appendChild(this.shopButton); // Leaderboard Button - Placed near Shop and Achievements this.leaderboardButton = document.createElement('button'); this.leaderboardButton.textContent = '🏆'; // Re-using trophy, consider a different icon for leaderboard if desired this.leaderboardButton.title = "Leaderboard"; this.leaderboardButton.style.cssText = ` position: absolute; top: 365px; /* Position below shop button */ left: 20px; padding: 8px 12px; font-size: 18px; background-color: rgba(255, 215, 0, 0.7); /* Gold color for leaderboard */ color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 5px; cursor: pointer; pointer-events: auto; transition: background-color 0.2s ease; `; this.leaderboardButton.addEventListener('mouseover', () => { this.leaderboardButton.style.backgroundColor = 'rgba(255, 225, 50, 0.8)'; }); this.leaderboardButton.addEventListener('mouseout', () => { this.leaderboardButton.style.backgroundColor = 'rgba(255, 215, 0, 0.7)'; }); this.uiContainer.appendChild(this.leaderboardButton); this.shopPanel = document.createElement('div'); this.shopPanel.style.cssText = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: rgba(70, 70, 150, 0.95); /* Darker blue/purple */ padding: 25px; border-radius: 15px; border: 3px solid rgba(255,255,255,0.4); width: 80%; max-width: 450px; max-height: 70vh; overflow-y: auto; z-index: 1001; /* Above other UI */ visibility: hidden; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.4); `; const shopCloseButton = document.createElement('button'); shopCloseButton.textContent = '×'; shopCloseButton.style.cssText = ` position: absolute; top: 10px; right: 15px; font-size: 24px; background: transparent; color: white; border: none; cursor: pointer; pointer-events: auto; `; this.shopItemsContainer = document.createElement('div'); // Container for skin items const shopTitle = document.createElement('h2'); shopTitle.textContent = 'Bottle Styles Shop'; shopTitle.style.cssText = ` text-align: center; margin-top: 0; margin-bottom: 20px; color: #fff; font-size: 22px; `; this.shopPanel.appendChild(shopTitle); this.shopPanel.appendChild(shopCloseButton); this.shopPanel.appendChild(this.shopItemsContainer); this.uiContainer.appendChild(this.shopPanel); this.shopButton.addEventListener('click', () => this.toggleShopPanel(true)); shopCloseButton.addEventListener('click', () => this.toggleShopPanel(false)); // Add event listener for the leaderboard button this.leaderboardButton.addEventListener('click', () => this.toggleLeaderboardPanel(true)); } toggleShopPanel(show) { if (show) { this.updateShopDisplay(); // We'll create this method next this.shopPanel.style.visibility = 'visible'; this.shopPanel.style.opacity = '1'; this.shopPanel.style.transform = 'translate(-50%, -50%) scale(1)'; } else { this.shopPanel.style.opacity = '0'; this.shopPanel.style.transform = 'translate(-50%, -50%) scale(0.9)'; setTimeout(() => { this.shopPanel.style.visibility = 'hidden'; }, 300); // Match transition duration } } updateShopDisplay() { this.shopItemsContainer.innerHTML = ''; // Clear previous items // For now, just a placeholder message. We'll populate this properly later. // const placeholderText = document.createElement('p'); // placeholderText.textContent = 'Bottle skins will appear here soon!'; // placeholderText.style.textAlign = 'center'; // placeholderText.style.color = '#ddd'; // this.shopItemsContainer.appendChild(placeholderText); this.availableBottleStyles.forEach(skin => { const skinItem = document.createElement('div'); skinItem.dataset.skinId = skin.id; // Add skinId for easier targeting skinItem.style.cssText = ` display: flex; /* justify-content: space-between; // Will be handled by flex-grow on name */ align-items: center; padding: 10px 15px; /* Adjusted padding */ margin-bottom: 10px; background: rgba(255, 255, 255, 0.08); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; `; skinItem.addEventListener('mouseover', () => { skinItem.style.backgroundColor = 'rgba(255, 255, 255, 0.12)'; skinItem.style.transform = 'scale(1.01)'; skinItem.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)'; }); skinItem.addEventListener('mouseout', () => { skinItem.style.backgroundColor = 'rgba(255, 255, 255, 0.08)'; skinItem.style.transform = 'scale(1)'; skinItem.style.boxShadow = 'none'; }); // Preview Icon Placeholder const previewIcon = document.createElement('div'); previewIcon.style.cssText = ` width: 32px; height: 32px; border-radius: 5px; margin-right: 12px; /* border will be set dynamically */ flex-shrink: 0; /* Prevent icon from shrinking */ display: flex; /* For potential inner elements or complex gradients */ align-items: center; justify-content: center; transition: border-color 0.2s ease, transform 0.2s ease; /* Added transform transition */ `; previewIcon.addEventListener('mouseover', () => { previewIcon.style.transform = 'scale(1.1)'; }); previewIcon.addEventListener('mouseout', () => { previewIcon.style.transform = 'scale(1)'; }); let iconBgColorStart, iconBgColorEnd; switch (skin.id) { case 'style_basic_red': iconBgColorStart = '#ff6666'; iconBgColorEnd = '#cc3333'; break; case 'style_golden_flask': iconBgColorStart = '#FFEB3B'; // Brighter gold iconBgColorEnd = '#FBC02D'; // Darker gold break; case 'style_default': default: iconBgColorStart = '#c0c0ff'; // Lighter blue iconBgColorEnd = '#8080ff'; // Darker blue break; } previewIcon.style.background = `linear-gradient(135deg, ${iconBgColorStart}, ${iconBgColorEnd})`; const isUnlocked = skin.id === 'style_default' || this.gameLogic.unlockedBottleStyles.includes(skin.id); const isSelected = this.gameLogic.currentBottleStyle === skin.id; if (isSelected) { previewIcon.style.border = '2px solid rgba(76, 175, 80, 0.9)'; // Greenish border for selected } else if (isUnlocked) { previewIcon.style.border = '2px solid rgba(120, 120, 255, 0.7)'; // Bluish border for selectable previewIcon.addEventListener('mouseover', () => previewIcon.style.borderColor = 'rgba(150, 150, 255, 0.9)'); previewIcon.addEventListener('mouseout', () => previewIcon.style.borderColor = 'rgba(120, 120, 255, 0.7)'); } else { previewIcon.style.border = '2px solid rgba(100, 100, 100, 0.6)'; // Muted border for locked previewIcon.addEventListener('mouseover', () => previewIcon.style.borderColor = 'rgba(120, 120, 120, 0.7)'); previewIcon.addEventListener('mouseout', () => previewIcon.style.borderColor = 'rgba(100, 100, 100, 0.6)'); } const skinName = document.createElement('span'); skinName.textContent = skin.name; skinName.style.fontSize = '16px'; skinName.style.color = '#f0f0f0'; skinName.style.flexGrow = '1'; // Allow name to take available space const selectButton = document.createElement('button'); selectButton.style.cssText = ` padding: 8px 15px; font-size: 13px; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; pointer-events: auto; /* Ensure button is clickable */ `; // const isUnlocked = skin.id === 'style_default' || this.gameLogic.unlockedBottleStyles.includes(skin.id); // Already defined above // const isSelected = this.gameLogic.currentBottleStyle === skin.id; // Already defined above if (isSelected) { selectButton.textContent = 'Selected'; selectButton.style.backgroundColor = 'rgba(76, 175, 80, 0.7)'; // Greenish for selected selectButton.style.color = 'white'; selectButton.disabled = true; } else if (isUnlocked) { selectButton.textContent = 'Select'; selectButton.style.backgroundColor = 'rgba(120, 120, 255, 0.7)'; // Bluish for select selectButton.style.color = 'white'; selectButton.addEventListener('click', () => { this.gameLogic.setCurrentBottleStyle(skin.id); this.waterBottle.applyStyle(skin.id); this.updateShopDisplay(); // Re-render shop to show new selection }); selectButton.onmouseover = () => selectButton.style.backgroundColor = 'rgba(140, 140, 255, 0.9)'; selectButton.onmouseout = () => selectButton.style.backgroundColor = 'rgba(120, 120, 255, 0.7)'; } else { selectButton.textContent = 'Locked'; selectButton.style.backgroundColor = 'rgba(100, 100, 100, 0.5)'; selectButton.style.color = '#aaa'; selectButton.disabled = true; // Subtle hover for locked button to indicate it's an interactive element, though disabled selectButton.onmouseover = () => { selectButton.style.backgroundColor = 'rgba(110, 110, 110, 0.55)'; selectButton.style.color = '#bbb'; }; selectButton.onmouseout = () => { selectButton.style.backgroundColor = 'rgba(100, 100, 100, 0.5)'; selectButton.style.color = '#aaa'; }; } skinItem.appendChild(previewIcon); // Add icon first skinItem.appendChild(skinName); skinItem.appendChild(selectButton); this.shopItemsContainer.appendChild(skinItem); }); if (this.availableBottleStyles.length === 0) { const placeholderText = document.createElement('p'); placeholderText.textContent = 'More bottle styles coming soon!'; placeholderText.style.textAlign = 'center'; placeholderText.style.color = '#ddd'; this.shopItemsContainer.appendChild(placeholderText); } } showSkinUnlockAnimation(skinId) { const shopWasHidden = this.shopPanel.style.visibility === 'hidden'; // Ensure shop display is up-to-date before animation this.updateShopDisplay(); // Temporarily show shop panel if hidden, or bring to front this.toggleShopPanel(true); const skinItem = Array.from(this.shopItemsContainer.children).find(item => { // This assumes the button's click listener has the skin.id, // or we might need a data attribute on the skinItem itself. // For now, let's find based on the preview icon's background as a proxy if no direct ID. // A better way would be to add `dataset.skinId` to skinItem in updateShopDisplay. const button = item.querySelector('button'); // The select/locked button // Let's check if the button's click handler would operate on this skinId // This is a bit of a hack. Ideal: skinItem.dataset.skinId === skinId // We will modify updateShopDisplay to add this data attribute. return item.dataset.skinId === skinId; }); if (skinItem) { const previewIcon = skinItem.querySelector('div'); // Assuming first div is the icon // Create a temporary overlay to dim the background const overlay = document.createElement('div'); overlay.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; /* Below shop panel but above other UI */ opacity: 0; transition: opacity 0.3s ease; `; document.body.appendChild(overlay); setTimeout(() => overlay.style.opacity = '1', 10); this.shopPanel.style.zIndex = '1002'; // Ensure shop is above overlay skinItem.style.transform = 'scale(1.1)'; skinItem.style.boxShadow = '0 0 25px #ffd700'; if(previewIcon) previewIcon.style.borderColor = '#FFD700'; const unlockText = document.createElement('div'); unlockText.textContent = '✨ UNLOCKED! ✨'; unlockText.style.cssText = ` position: absolute; bottom: -30px; /* Below the item */ left: 50%; transform: translateX(-50%); padding: 5px 10px; background-color: #FFD700; color: #333; font-weight: bold; border-radius: 5px; font-size: 12px; white-space: nowrap; opacity: 0; animation: fadeInOutAlternate 2.5s ease-in-out; `; skinItem.style.position = 'relative'; // For absolute positioning of unlockText skinItem.appendChild(unlockText); // Ensure animation style is injected if (!document.getElementById('fadeInOutAnimation')) { const style = document.createElement('style'); style.id = 'fadeInOutAnimation'; style.textContent = ` @keyframes fadeInOutAlternate { 0%, 100% { opacity: 0; transform: translate(-50%, 10px); } 20%, 80% { opacity: 1; transform: translate(-50%, 0); } } `; document.head.appendChild(style); } setTimeout(() => { skinItem.style.transform = 'scale(1)'; skinItem.style.boxShadow = 'none'; if(previewIcon && previewIcon.style.borderColor === 'rgb(255, 215, 0)') { // only reset if it was gold // Reset to its actual state border (this needs updateShopDisplay to run again or smarter border reset) // For now, just remove the gold. updateShopDisplay will fix it if panel stays open. const isSelected = this.gameLogic.currentBottleStyle === skinId; if (isSelected) { previewIcon.style.border = '2px solid rgba(76, 175, 80, 0.9)'; } else { // It's now unlocked but not selected previewIcon.style.border = '2px solid rgba(120, 120, 255, 0.7)'; } } if (skinItem.contains(unlockText)) skinItem.removeChild(unlockText); overlay.style.opacity = '0'; setTimeout(() => { document.body.removeChild(overlay); this.shopPanel.style.zIndex = '1001'; // Reset z-index if (shopWasHidden) { this.toggleShopPanel(false); // Hide shop again if it was originally hidden } else { this.updateShopDisplay(); // Refresh shop if it remains open } }, 300); // overlay fade out }, 2500); // Duration of the highlight } else { console.warn("Could not find skin item for animation:", skinId); if (shopWasHidden) { this.toggleShopPanel(false); // Still ensure shop visibility is reset } } } createLeaderboardPanel() { this.leaderboardPanel = document.createElement('div'); this.leaderboardPanel.style.cssText = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: rgba(60, 60, 130, 0.95); /* Slightly different from shop */ padding: 25px; border-radius: 15px; border: 3px solid rgba(255,255,255,0.4); width: 80%; max-width: 450px; max-height: 70vh; overflow-y: auto; z-index: 1001; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.4); color: white; `; const leaderboardTitle = document.createElement('h2'); leaderboardTitle.textContent = 'Leaderboard - Top Players'; leaderboardTitle.style.cssText = ` text-align: center; margin-top: 0; margin-bottom: 20px; font-size: 22px; `; this.leaderboardPanel.appendChild(leaderboardTitle); // Player Name Input Section this.playerNameInputContainer = document.createElement('div'); this.playerNameInputContainer.style.cssText = ` display: flex; align-items: center; margin-bottom: 20px; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px; `; this.playerNameInput = document.createElement('input'); this.playerNameInput.type = 'text'; this.playerNameInput.placeholder = 'Enter your name (max 20 chars)'; this.playerNameInput.maxLength = 20; this.playerNameInput.style.cssText = ` flex-grow: 1; padding: 8px 12px; border: 1px solid rgba(255,255,255,0.3); border-radius: 5px; background: rgba(0,0,0,0.2); color: white; font-size: 14px; margin-right: 10px; pointer-events: auto; `; this.setPlayerNameButton = document.createElement('button'); this.setPlayerNameButton.textContent = 'Set Name'; this.setPlayerNameButton.style.cssText = ` padding: 8px 15px; font-size: 14px; background: rgba(76, 175, 80, 0.7); color: white; border: none; border-radius: 5px; cursor: pointer; pointer-events: auto; transition: background-color 0.2s ease; `; this.setPlayerNameButton.addEventListener('mouseover', () => this.setPlayerNameButton.style.backgroundColor = 'rgba(76, 175, 80, 0.9)'); this.setPlayerNameButton.addEventListener('mouseout', () => this.setPlayerNameButton.style.backgroundColor = 'rgba(76, 175, 80, 0.7)'); this.setPlayerNameButton.addEventListener('click', () => { const newName = this.playerNameInput.value; if (this.gameLogic.setPlayerName(newName)) { // Optionally show a success message this.playerNameInput.value = this.gameLogic.playerName; // Reflect trimmed name if changed this.updateLeaderboardDisplay(); // Refresh leaderboard if name change affects it this.updatePlayerNameInputState(); // Update the input field state // Simple visual feedback for name set this.setPlayerNameButton.textContent = 'Updated!'; this.setPlayerNameButton.style.backgroundColor = 'rgba(66, 155, 70, 0.9)'; setTimeout(() => { this.setPlayerNameButton.textContent = 'Set Name'; this.setPlayerNameButton.style.backgroundColor = 'rgba(76, 175, 80, 0.7)'; this.updatePlayerNameInputState(); }, 1500); } else { // Optionally show an error message (e.g., name too long, invalid) this.playerNameInput.style.borderColor = 'red'; setTimeout(() => { this.playerNameInput.style.borderColor = 'rgba(255,255,255,0.3)'; }, 1500); } }); this.playerNameInputContainer.appendChild(this.playerNameInput); this.playerNameInputContainer.appendChild(this.setPlayerNameButton); this.leaderboardPanel.appendChild(this.playerNameInputContainer); this.leaderboardListContainer = document.createElement('div'); this.leaderboardPanel.appendChild(this.leaderboardListContainer); const closeButton = document.createElement('button'); closeButton.textContent = '×'; closeButton.style.cssText = ` position: absolute; top: 10px; right: 15px; font-size: 24px; background: transparent; color: white; border: none; cursor: pointer; pointer-events: auto; `; closeButton.addEventListener('click', () => this.toggleLeaderboardPanel(false)); this.leaderboardPanel.appendChild(closeButton); this.uiContainer.appendChild(this.leaderboardPanel); } toggleLeaderboardPanel(show) { if (show) { if (this.playerNameInput) { // Explicitly set input value when panel opens this.playerNameInput.value = this.gameLogic.playerName; } this.updatePlayerNameInputState(); // Check if name input should be disabled this.updateLeaderboardDisplay(); // Now only updates the list of scores this.leaderboardPanel.style.visibility = 'visible'; this.leaderboardPanel.style.opacity = '1'; this.leaderboardPanel.style.transform = 'translate(-50%, -50%) scale(1)'; } else { this.leaderboardPanel.style.opacity = '0'; this.leaderboardPanel.style.transform = 'translate(-50%, -50%) scale(0.9)'; setTimeout(() => { this.leaderboardPanel.style.visibility = 'hidden'; }, 300); } } updateLeaderboardDisplay() { // Player name input field is now updated by toggleLeaderboardPanel or the setPlayerNameButton handler this.leaderboardListContainer.innerHTML = ''; // Clear previous entries const topScores = this.leaderboardManager.getTopScores(); if (topScores.length === 0) { const noScoresMessage = document.createElement('p'); noScoresMessage.textContent = 'No scores recorded yet. Be the first!'; noScoresMessage.style.textAlign = 'center'; this.leaderboardListContainer.appendChild(noScoresMessage); return; } const listElement = document.createElement('ol'); listElement.style.cssText = ` list-style-type: none; padding: 0; margin: 0; `; topScores.forEach((entry, index) => { const listItem = document.createElement('li'); listItem.style.cssText = ` display: flex; justify-content: space-between; padding: 10px 12px; margin-bottom: 8px; background: rgba(255,255,255, ${index === 0 ? '0.2' : '0.1'}); /* Highlight top player */ border-radius: 8px; border-left: 5px solid ${index === 0 ? '#FFD700' : (index === 1 ? '#C0C0C0' : (index === 2 ? '#CD7F32' : 'rgba(255,255,255,0.3)'))}; /* Gold, Silver, Bronze */ font-size: 16px; `; const rankAndName = document.createElement('span'); rankAndName.textContent = `${index + 1}. ${entry.name}`; rankAndName.style.fontWeight = index < 3 ? 'bold' : 'normal'; const score = document.createElement('span'); score.textContent = `$${entry.score.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 0})}`; // Format score as currency without decimals score.style.color = index < 3 ? '#fff' : '#eee'; listItem.appendChild(rankAndName); listItem.appendChild(score); listElement.appendChild(listItem); }); this.leaderboardListContainer.appendChild(listElement); } updatePlayerNameInputState() { // Disable the input and button if the player name is no longer the default "Player" const isNameSet = this.gameLogic.playerName !== 'Player'; this.playerNameInput.disabled = isNameSet; this.setPlayerNameButton.disabled = isNameSet; if (isNameSet) { this.playerNameInput.style.backgroundColor = 'rgba(0,0,0,0.4)'; this.playerNameInput.style.cursor = 'not-allowed'; this.setPlayerNameButton.style.backgroundColor = 'rgba(100, 100, 100, 0.5)'; this.setPlayerNameButton.style.cursor = 'not-allowed'; this.setPlayerNameButton.textContent = 'Name Set'; } else { this.playerNameInput.style.backgroundColor = 'rgba(0,0,0,0.2)'; this.playerNameInput.style.cursor = 'text'; this.setPlayerNameButton.style.backgroundColor = 'rgba(76, 175, 80, 0.7)'; this.setPlayerNameButton.style.cursor = 'pointer'; this.setPlayerNameButton.textContent = 'Set Name'; } } createAutoSaveIndicator() { this.autoSaveIndicator = document.createElement('div'); this.autoSaveIndicator.style.cssText = ` position: fixed; bottom: 20px; /* Same as achievement notifications for consistency */ left: 20px; /* Or another corner like bottom-left */ background: rgba(0, 0, 0, 0.6); color: #e0e0e0; padding: 8px 15px; border-radius: 5px; font-size: 13px; z-index: 1999; /* Below achievement notifications but above general UI */ opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; pointer-events: none; `; this.autoSaveIndicator.textContent = 'Auto-saving...'; // Default text this.uiContainer.appendChild(this.autoSaveIndicator); } showAutoSaveNotification() { if (!this.autoSaveIndicator) return; this.autoSaveIndicator.style.visibility = 'visible'; this.autoSaveIndicator.style.opacity = '1'; setTimeout(() => { this.autoSaveIndicator.style.opacity = '0'; setTimeout(() => { this.autoSaveIndicator.style.visibility = 'hidden'; }, 500); // Match transition duration }, 1500); // Display for 1.5 seconds } setupEventListeners() { this.emptyButton.addEventListener('click', () => { if (this.gameLogic.emptyBottle()) { this.waterBottle.playEmptyEffect(); // Trigger particle effect // Visual feedback for emptying this.emptyButton.style.transform = 'translateX(-50%) scale(0.95)'; setTimeout(() => { this.emptyButton.style.transform = 'translateX(-50%) scale(1)'; }, 100); } }); // Upgrade button listeners Object.keys(this.upgradeButtons).forEach(type => { this.upgradeButtons[type].addEventListener('click', () => { this.gameLogic.buyUpgrade(type, this.currentBuyMode); }); }); this.prestigeButton.addEventListener('click', () => { const prestigeInfo = this.gameLogic.getPrestigeInfo(); if (prestigeInfo.canPrestige) { // Optional: Add a confirmation dialog here in a real game if (this.gameLogic.prestige()) { this.waterBottle.isEmpty(); // Visually reset water in bottle // Add visual feedback for prestiging this.prestigeButton.style.transform = 'scale(0.95)'; setTimeout(() => { this.prestigeButton.style.transform = 'scale(1)'; }, 100); } } }); this.toggleUpgradesButton.addEventListener('click', () => { this.isUpgradesPanelVisible = !this.isUpgradesPanelVisible; if (this.isUpgradesPanelVisible) { this.upgradesPanel.style.visibility = 'visible'; this.upgradesPanel.style.opacity = '1'; this.upgradesPanel.style.transform = 'translateY(0)'; } else { this.upgradesPanel.style.opacity = '0'; this.upgradesPanel.style.transform = 'translateY(20px)'; // Delay setting visibility to hidden to allow fade-out animation setTimeout(() => { if (!this.isUpgradesPanelVisible) { // Check again in case it was quickly toggled back this.upgradesPanel.style.visibility = 'hidden'; } }, 300); // Should match the transition duration } this.toggleUpgradesButton.textContent = this.isUpgradesPanelVisible ? 'Hide Upgrades' : 'Show Upgrades'; }); this.saveButton.addEventListener('click', () => { this.gameLogic.saveGame(); // Optional: Provide visual feedback for saving this.saveButton.textContent = 'Saved!'; this.saveButton.style.backgroundColor = 'rgba(0, 200, 70, 0.9)'; setTimeout(() => { this.saveButton.textContent = 'Save Game'; this.saveButton.style.backgroundColor = 'rgba(0, 150, 50, 0.7)'; }, 1500); }); } update() { // Removed gameLogic parameter, will use this.gameLogic // If achievements panel is visible, keep it updated (e.g. if an achievement unlocks while panel is open) if (this.achievementsPanel && this.achievementsPanel.style.visibility === 'visible') { this.updateAchievementsDisplay(); } if (this.shopPanel && this.shopPanel.style.visibility === 'visible') { this.updateShopDisplay(); // Keep shop updated if open } if (this.leaderboardPanel && this.leaderboardPanel.style.visibility === 'visible') { this.updateLeaderboardDisplay(); // Keep leaderboard updated if open } const stats = this.gameLogic.getStats(); const prestigeInfo = this.gameLogic.getPrestigeInfo(); // Update money display this.moneyDisplay.textContent = this.formatCurrency(stats.money); // Update water level this.waterLevelDisplay.innerHTML = ` Water: ${stats.currentWater.toFixed(1)}/${stats.bottleCapacity.toFixed(0)}
${stats.fillPercentage.toFixed(1)}% Full `; // Update empty button this.emptyButton.style.opacity = this.gameLogic.canEmpty() ? '1' : '0.5'; this.emptyButton.style.cursor = this.gameLogic.canEmpty() ? 'pointer' : 'not-allowed'; if (this.gameLogic.isFull()) { this.emptyButton.style.animation = 'pulse 1s infinite'; this.emptyButton.style.boxShadow = '0 0 20px rgba(255, 107, 107, 0.8)'; } else { this.emptyButton.style.animation = 'none'; this.emptyButton.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)'; } // Update upgrade buttons const upgradeNames = { clickPower: 'Click Power', bottleCapacity: 'Bottle Size', waterValue: 'Water Value', autoFill: 'Auto Fill', criticalBoost: 'Critical Boost', passiveIncome: 'Passive Income' }; Object.keys(this.upgradeButtons).forEach(type => { const info = this.gameLogic.getUpgradeInfo(type, this.currentBuyMode); const button = this.upgradeButtons[type]; if (!info) return; let description = `${upgradeNames[type]} (Lv.${info.level}${info.count > 1 ? ` +${info.count}` : ''})
Cost: ${this.formatCurrency(info.cost)}`; // Add specific details for new upgrades using stats from gameLogic instance if (type === 'criticalBoost') { const currentChance = this.gameLogic.upgrades.criticalBoost.level * this.gameLogic.upgrades.criticalBoost.chancePerLevel; const currentCritMultiplier = 2.0 + this.gameLogic.upgrades.criticalBoost.level * this.gameLogic.upgrades.criticalBoost.multiplierPerLevel; description += `
Chance: ${(currentChance * 100).toFixed(1)}%, Multi: ${currentCritMultiplier.toFixed(1)}x`; } else if (type === 'passiveIncome') { const currentRate = this.gameLogic.upgrades.passiveIncome.level * this.gameLogic.upgrades.passiveIncome.ratePerLevel; description += `
Rate: ${(currentRate * 100).toFixed(3)}%/s`; } button.innerHTML = description; button.style.opacity = info.canAfford ? '1' : '0.6'; button.style.cursor = info.canAfford ? 'pointer' : 'not-allowed'; button.disabled = !info.canAfford; }); // Update Prestige Info Display this.prestigeInfoDisplay.innerHTML = ` Prestige Level: ${prestigeInfo.level}
Money Multiplier: x${prestigeInfo.currentMultiplier.toFixed(2)} `; // Update Prestige Button this.prestigeButton.innerHTML = ` PRESTIGE!
Cost: ${this.formatCurrency(prestigeInfo.cost)}
Next Bonus: x${prestigeInfo.nextMultiplier.toFixed(2)} `; this.prestigeButton.style.opacity = prestigeInfo.canPrestige ? '1' : '0.6'; this.prestigeButton.style.cursor = prestigeInfo.canPrestige ? 'pointer' : 'not-allowed'; this.prestigeButton.style.background = prestigeInfo.canPrestige ? 'linear-gradient(45deg, #f0c14e, #ddb347)' : 'linear-gradient(45deg, #aaa, #888)'; if (prestigeInfo.canPrestige) { this.prestigeButton.style.animation = 'pulsePrestige 1.5s infinite'; } else { this.prestigeButton.style.animation = 'none'; } // Update Boost Indicator if (this.gameLogic.activeClickBoostMultiplier > 1.0 && this.gameLogic.clickBoostEndTime > Date.now()) { const remainingTime = Math.max(0, (this.gameLogic.clickBoostEndTime - Date.now()) / 1000); this.boostIndicator.textContent = `💥 ${this.gameLogic.activeClickBoostMultiplier.toFixed(1)}x Click Power! (${remainingTime.toFixed(0)}s)`; this.boostIndicator.style.visibility = 'visible'; this.boostIndicator.style.opacity = '1'; } else { this.boostIndicator.style.opacity = '0'; // Delay hiding to allow fade out setTimeout(() => { if (!(this.gameLogic.activeClickBoostMultiplier > 1.0 && this.gameLogic.clickBoostEndTime > Date.now())) { this.boostIndicator.style.visibility = 'hidden'; } }, 300); // Match transition duration } // Update Passive Income Boost Indicator if (this.gameLogic.activeIncomeBoostPercentage > 0 && this.gameLogic.incomeBoostEndTime > Date.now()) { const remainingTime = Math.max(0, (this.gameLogic.incomeBoostEndTime - Date.now()) / 1000); const boostPercent = (this.gameLogic.activeIncomeBoostPercentage * 100).toFixed(2); this.incomeBoostIndicator.textContent = `💸 +${boostPercent}% Income! (${remainingTime.toFixed(0)}s)`; this.incomeBoostIndicator.style.visibility = 'visible'; this.incomeBoostIndicator.style.opacity = '1'; } else { this.incomeBoostIndicator.style.opacity = '0'; // Delay hiding to allow fade out setTimeout(() => { if (!(this.gameLogic.activeIncomeBoostPercentage > 0 && this.gameLogic.incomeBoostEndTime > Date.now())) { this.incomeBoostIndicator.style.visibility = 'hidden'; } }, 300); // Match transition duration } // Add pulse animation CSS if not exists if (!document.getElementById('pulseAnimation')) { const pulseStyle = document.createElement('style'); pulseStyle.id = 'pulseAnimation'; pulseStyle.textContent = ` @keyframes pulse { 0% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } 100% { transform: translateX(-50%) scale(1); } } @keyframes pulsePrestige { 0% { transform: scale(1); box-shadow: 0 4px 8px rgba(0,0,0,0.3); } 50% { transform: scale(1.03); box-shadow: 0 6px 15px rgba(240, 193, 78, 0.7); } 100% { transform: scale(1); box-shadow: 0 4px 8px rgba(0,0,0,0.3); } } `; document.head.appendChild(pulseStyle); } } formatCurrency(value) { if (value == null || isNaN(value)) return '$0.00'; const suffixes = ["", "K", "M", "B", "T", "Q", "Qt", "Sx", "Sp", "Oc", "No", "Dc"]; let suffixNum = 0; let num = parseFloat(value); if (num < 1000) { return `$${num.toFixed(2)}`; } while (num >= 1000 && suffixNum < suffixes.length - 1) { num /= 1000; suffixNum++; } let precision = 2; if (num >= 100) { precision = 1; } if (num >= 10) { precision = 2; } // For K, M, B, etc. we generally want 2 decimal places unless it's a large number already if (suffixNum > 0 && num < 10) precision = 2; else if (suffixNum > 0 && num < 100) precision = 2; else if (suffixNum > 0 && num < 1000) precision = 1; // Special case: if the number becomes very small after division (e.g. 0.001K), show more precision or avoid suffix if (num < 1 && suffixNum > 0) { num *= 1000; // revert last division suffixNum--; precision = (suffixNum === 0) ? 2 : 0; // show decimals if back to no suffix, otherwise whole number for K+ } // Final check for numbers that are whole after formatting (e.g., 1.00M should be 1M) let formattedNum = num.toFixed(precision); if (precision > 0 && parseFloat(formattedNum) === parseFloat(num.toFixed(0))) { // If it's like 1.00M, make it 1M. If 1.20M, keep 1.2M. if (parseFloat(formattedNum.split('.')[1]) === 0) { formattedNum = num.toFixed(0); } else if (precision === 2 && formattedNum.endsWith('0')) { formattedNum = num.toFixed(1); } } return `$${formattedNum}${suffixes[suffixNum]}`; } }