class Example extends Phaser.Scene { constructor() { super(); this.score = 0; this.baseIncrement = 1; this.useScientific = false; this.energy = 0; this.energyMultiplier = 1; this.energyUpgradeCost = 10; this.energyGainRate = 0.1; this.energyEfficiency = 1; this.infinityPoints = 0; this.infinityUnlocked = false; this.prestigePoints = 0; this.prestigeBoostLevel = 0; this.autoUpgradeEnabled = false; this.upgradeCost = 5; this.generatorPoints = 0; // Shop items this.shopItems = [{ id: 'tempAutoclicker', name: 'Temp Autoclicker', description: 'Clicks automatically for 60 seconds', cost: 100, currency: 'prestige', level: 0, maxLevel: 1, effect: level => level > 0 ? 3 : 0, // 3 clicks per second when active icon: '⏱️', duration: 60000 // 60 seconds in milliseconds }, { id: 'energyBooster', name: 'Energy Booster', description: 'Instant energy boost', cost: 500, currency: 'score', level: 0, maxLevel: 5, effect: level => 50 * level, // Adds 50 energy per level icon: '⚡' }, { id: 'scoreExchanger', name: 'Energy Exchange', description: 'Convert 25 energy to score', cost: 25, currency: 'energy', level: 0, maxLevel: 5, effect: level => 1000 * Math.pow(2, level), // Score gained per use icon: '💱' }, { id: 'energyCapacitor', name: 'Energy Capacitor', description: 'Increases energy storage efficiency', cost: 3, level: 0, maxLevel: 5, effect: level => 1 + (level * 0.2), // Multiplier for energy gain icon: '⚡' }, { id: 'energyConverter', name: 'Energy Converter', description: 'Improves energy to score conversion rate', cost: 7, level: 0, maxLevel: 5, effect: level => 1 + (level * 0.3), // Energy score multiplier icon: '🔋' }, { id: 'autoclicker', name: 'Auto Clicker', description: 'Automatically clicks the upgrade button', cost: 5, level: 0, maxLevel: 5, effect: level => level * 0.5, // Clicks per second icon: '⚙️' }, { id: 'scoreBooster', name: 'Score Amplifier', description: 'Permanently increases base score gain', cost: 10, level: 0, maxLevel: 10, effect: level => 1 + (level * 0.2), // Multiplier icon: '📈' }, { id: 'generatorBoost', name: 'Generator Catalyst', description: 'Speeds up generator point generation', cost: 15, level: 0, maxLevel: 5, effect: level => 1 + (level * 0.25), // Growth rate multiplier icon: '⚡' }, { id: 'prestigeMultiplier', name: 'Prestige Enhancer', description: 'Each level increases prestige point gain by 30%', cost: 25, level: 0, maxLevel: 5, effect: level => 1 + (level * 0.3), // Prestige gain multiplier icon: '💎' }]; this.autoclickerActive = false; this.generatorUnlocked = false; this.tickspeedCost = 50; this.tickspeedDelay = 1000; // Achievement system this.achievements = [{ id: 'energized', name: 'Energized Production', description: 'Reach 50 Energy', condition: () => this.energy >= 50, reward: 'Energy gain rate +20%', rewardFunction: () => { this.energyGainRate *= 1.2; }, completed: false, progress: () => Math.min(this.energy / 50, 1) }, { id: 'powerhouse', name: 'Industrial Powerhouse', description: 'Reach 200 Energy', condition: () => this.energy >= 200, reward: 'Base score increment +3', rewardFunction: () => { this.baseIncrement += 3; }, completed: false, progress: () => Math.min(this.energy / 200, 1) }, { id: 'energySynergy', name: 'Energy Synergy', description: 'Upgrade energy 10 times', condition: () => this.energyMultiplier >= 10, reward: 'Energy efficiency +30%', rewardFunction: () => { this.energyEfficiency *= 1.3; }, completed: false, progress: () => Math.min((this.energyMultiplier - 1) / 9, 1) }, { id: 'beginner', name: 'Factory Novice', description: 'Reach a score of 1,000', condition: () => this.score >= 1000, reward: 'Base increment +1', rewardFunction: () => { this.baseIncrement += 1; }, completed: false, progress: () => Math.min(this.score / 1000, 1) }, { id: 'producer', name: 'Production Expert', description: 'Reach a score of 1,000,000', condition: () => this.score >= 1000000, reward: 'Tickspeed 10% faster', rewardFunction: () => { this.tickspeedDelay *= 0.9; }, completed: false, progress: () => Math.min(this.score / 1000000, 1) }, { id: 'magnate', name: 'Factory Magnate', description: 'Reach a score of 1e9', condition: () => this.score >= 1e9, reward: '5 Prestige Points', rewardFunction: () => { this.prestigePoints += 5; }, completed: false, progress: () => Math.min(this.score / 1e9, 1) }, { id: 'tycoon', name: 'Industrial Tycoon', description: 'Reach a score of 1e15', condition: () => this.score >= 1e15, reward: 'Base increment +5', rewardFunction: () => { this.baseIncrement += 5; }, completed: false, progress: () => Math.min(this.score / 1e15, 1) }, { id: 'prestige1', name: 'First Prestige', description: 'Perform your first prestige', condition: () => this.prestigePoints > 0, reward: 'Prestige point gain +10%', rewardFunction: () => { this.prestigeMultiplier = (this.prestigeMultiplier || 1) * 1.1; }, completed: false, progress: () => this.prestigePoints > 0 ? 1 : 0 }, { id: 'prestige10', name: 'Prestige Master', description: 'Reach 10 Prestige Points', condition: () => this.prestigePoints >= 10, reward: '+1 Generator Point', rewardFunction: () => { this.generatorPoints += 1; }, completed: false, progress: () => Math.min(this.prestigePoints / 10, 1) }, { id: 'infinity1', name: 'Infinite Power', description: 'Go infinite for the first time', condition: () => this.infinityPoints > 0, reward: '+2 Generator Points', rewardFunction: () => { this.generatorPoints += 2; }, completed: false, progress: () => this.infinityPoints > 0 ? 1 : 0 }, { id: 'speedster', name: 'Factory Speedster', description: 'Reach 10 ticks per second', condition: () => 1000 / this.tickspeedDelay >= 10, reward: 'Prestige point gain +25%', rewardFunction: () => { this.prestigeMultiplier = (this.prestigeMultiplier || 1) * 1.25; }, completed: false, progress: () => Math.min((1000 / this.tickspeedDelay) / 10, 1) }, { id: 'generator', name: 'Power Generator', description: 'Reach 5 Generator Points', condition: () => this.generatorPoints >= 5, reward: 'Generator points grow 10% faster', rewardFunction: () => { this.generatorGrowthRate = (this.generatorGrowthRate || 0.05) * 1.1; }, completed: false, progress: () => Math.min(this.generatorPoints / 5, 1) }, { id: 'automated', name: 'Automation Expert', description: 'Enable Auto-Upgrades', condition: () => this.autoUpgradeEnabled, reward: 'Auto-upgrades are 25% more efficient', rewardFunction: () => { this.autoUpgradeEfficiency = (this.autoUpgradeEfficiency || 1) * 1.25; }, completed: false, progress: () => this.autoUpgradeEnabled ? 1 : 0 }]; // Achievement system stats this.achievementsCompleted = 0; this.achievementTotalCount = this.achievements.length; this.prestigeMultiplier = 1; this.generatorGrowthRate = 0.05; this.autoUpgradeEfficiency = 1; this.endScreenShown = false; // Store historical data for resource tracking this.resourceHistory = { score: Array(20).fill(0), generators: Array(20).fill(0), prestige: Array(20).fill(0), energy: Array(20).fill(0) }; // We no longer need these since we have a dedicated timer // this.historyUpdateTimer = 0; // this.historyUpdateInterval = 1000; } create() { // Define right side position for buttons const rightSideX = 1100; // Right side position for buttons // Set the background color to black // Create a gradient background effect const width = this.cameras.main.width; const height = this.cameras.main.height; const backgroundGradient = this.add.graphics(); // Dark industrial gradient background const gradientColors = [0x111827, 0x1e293b, 0x0f172a]; for (let i = 0; i < height; i++) { const ratio = i / height; const colorIndex = Math.min(Math.floor(ratio * gradientColors.length), gradientColors.length - 1); const nextColorIndex = Math.min(colorIndex + 1, gradientColors.length - 1); const segmentRatio = (ratio * gradientColors.length) - colorIndex; // Interpolate between colors const color = Phaser.Display.Color.Interpolate.ColorWithColor( Phaser.Display.Color.ValueToColor(gradientColors[colorIndex]), Phaser.Display.Color.ValueToColor(gradientColors[nextColorIndex]), 1, segmentRatio ); backgroundGradient.fillStyle(Phaser.Display.Color.GetColor(color.r, color.g, color.b), 1); backgroundGradient.fillRect(0, i, width, 2); } // Add subtle grid pattern const gridGraphics = this.add.graphics(); gridGraphics.lineStyle(1, 0xffffff, 0.05); for (let x = 0; x < width; x += 50) { gridGraphics.lineBetween(x, 0, x, height); } for (let y = 0; y < height; y += 50) { gridGraphics.lineBetween(0, y, width, y); } // Add score text // Add decorative factory header // Create shop button and position it at the bottom right corner const shopButton = this.createFactoryButton(rightSideX, 650, 160, 60, 0x4CAF50, 0x388E3C); const shopButtonText = this.add.text(0, 0, 'ITEM SHOP', { fontSize: '24px', fontStyle: 'bold', fill: '#fff', align: 'center' }).setOrigin(0.5); // Add shopping cart icon const shopIcon = this.add.graphics(); shopIcon.fillStyle(0xFFFFFF, 1); // Cart handle shopIcon.fillRect(-30, -10, 5, 10); // Cart body shopIcon.fillStyle(0xFFFFFF, 0.8); shopIcon.fillRect(-45, 0, 30, 15); // Cart wheels shopIcon.fillStyle(0xFFFFFF, 1); shopIcon.fillCircle(-40, 15, 4); shopIcon.fillCircle(-20, 15, 4); // Add pulsing animation to make the shop button stand out this.tweens.add({ targets: shopButton, scale: 1.05, duration: 1500, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); shopButton.add([shopButtonText, shopIcon]); // Shop button event handler shopButton.on('pointerdown', () => { this.showItemShop(); }); const headerGraphics = this.add.graphics(); headerGraphics.fillStyle(0x334155, 0.7); headerGraphics.fillRoundedRect(10, 10, 360, 50, 10); headerGraphics.lineStyle(2, 0x64748b); headerGraphics.strokeRoundedRect(10, 10, 360, 50, 10); // Add metallic shine to header const headerShine = this.add.graphics(); headerShine.fillStyle(0xffffff, 0.1); headerShine.fillRoundedRect(10, 10, 360, 20, { tl: 10, tr: 10, bl: 0, br: 0 }); // Factory icon const factoryIcon = this.add.graphics(); factoryIcon.fillStyle(0x6b7280); factoryIcon.fillRect(26, 22, 16, 24); factoryIcon.fillStyle(0x9ca3af); factoryIcon.fillRect(30, 18, 4, 6); factoryIcon.fillRect(38, 18, 4, 6); this.scoreText = this.add.text(60, 22, 'Score: 0.00', { fontSize: '28px', fill: '#e2e8f0', fontStyle: 'bold' }); this.scoreText.setShadow(1, 1, '#000000', 3, true, true); // Add tickspeed stat display // Create tickspeed container with factory theme const tickContainer = this.add.container(16, 56); const tickBar = this.add.graphics(); tickBar.fillStyle(0x1e293b, 0.7); tickBar.fillRoundedRect(0, 0, 280, 36, 6); // Create energy container with factory theme const energyContainer = this.add.container(16, 176); const energyBar = this.add.graphics(); energyBar.fillStyle(0x1e293b, 0.7); energyBar.fillRoundedRect(0, 0, 280, 36, 6); energyBar.lineStyle(1, 0xf59e0b); energyBar.strokeRoundedRect(0, 0, 280, 36, 6); // Add energy icon (lightning bolt) const energyIcon = this.add.graphics(); energyIcon.lineStyle(2, 0xfacc15); energyIcon.beginPath(); energyIcon.moveTo(22, 8); energyIcon.lineTo(15, 18); energyIcon.lineTo(22, 18); energyIcon.lineTo(15, 28); energyIcon.lineTo(29, 13); energyIcon.lineTo(22, 13); energyIcon.lineTo(29, 8); energyIcon.closePath(); energyIcon.strokePath(); energyIcon.fillStyle(0xfacc15, 0.7); energyIcon.fillPath(); // Add pulsing effect to energy icon this.tweens.add({ targets: energyIcon, alpha: 0.7, duration: 800, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); this.energyText = this.add.text(44, 7, 'Energy: 0.00', { fontSize: '20px', fill: '#fef3c7', fontStyle: 'bold' }); this.energyText.setShadow(1, 1, '#000000', 2); energyContainer.add([energyBar, energyIcon, this.energyText]); tickBar.lineStyle(1, 0x4b5563); tickBar.strokeRoundedRect(0, 0, 280, 36, 6); // Add gear icon const tickGear = this.add.graphics(); tickGear.fillStyle(0xb0b0b0); // Create simple gear shape const gearCenter = { x: 22, y: 18 }; const gearOuterRadius = 12; const gearInnerRadius = 6; const gearTeeth = 8; for (let i = 0; i < gearTeeth; i++) { const angle1 = (Math.PI * 2 / gearTeeth) * i; const angle2 = (Math.PI * 2 / gearTeeth) * (i + 0.5); const angle3 = (Math.PI * 2 / gearTeeth) * (i + 1); tickGear.lineBetween( gearCenter.x + Math.cos(angle1) * gearInnerRadius, gearCenter.y + Math.sin(angle1) * gearInnerRadius, gearCenter.x + Math.cos(angle1) * gearOuterRadius, gearCenter.y + Math.sin(angle1) * gearOuterRadius ); tickGear.lineBetween( gearCenter.x + Math.cos(angle3) * gearInnerRadius, gearCenter.y + Math.sin(angle3) * gearInnerRadius, gearCenter.x + Math.cos(angle3) * gearOuterRadius, gearCenter.y + Math.sin(angle3) * gearOuterRadius ); tickGear.lineBetween( gearCenter.x + Math.cos(angle1) * gearOuterRadius, gearCenter.y + Math.sin(angle1) * gearOuterRadius, gearCenter.x + Math.cos(angle3) * gearOuterRadius, gearCenter.y + Math.sin(angle3) * gearOuterRadius ); } tickGear.fillCircle(gearCenter.x, gearCenter.y, gearInnerRadius); // Create rotation animation for gear this.tweens.add({ targets: tickGear, angle: 360, duration: 8000, repeat: -1, ease: 'Linear' }); this.tickspeedStatText = this.add.text(44, 7, 'Ticks per second: 1.00', { fontSize: '20px', fill: '#cbd5e1', fontStyle: 'bold' }); this.tickspeedStatText.setShadow(1, 1, '#000000', 2); tickContainer.add([tickBar, tickGear, this.tickspeedStatText]); // Add prestige points display // Create prestige display with factory theme const prestigeContainer = this.add.container(16, 96); const prestigeBar = this.add.graphics(); prestigeBar.fillStyle(0x1e293b, 0.7); prestigeBar.fillRoundedRect(0, 0, 280, 36, 6); prestigeBar.lineStyle(1, 0x9d174d, 0.8); // Pinkish border for prestige prestigeBar.strokeRoundedRect(0, 0, 280, 36, 6); // Add prestige icon (diamond shape) const prestigeIcon = this.add.graphics(); prestigeIcon.fillStyle(0xe91e63); prestigeIcon.beginPath(); prestigeIcon.moveTo(22, 6); // top prestigeIcon.lineTo(34, 18); // right prestigeIcon.lineTo(22, 30); // bottom prestigeIcon.lineTo(10, 18); // left prestigeIcon.closePath(); prestigeIcon.fill(); // Add shine effect prestigeIcon.fillStyle(0xffffff, 0.5); prestigeIcon.beginPath(); prestigeIcon.moveTo(22, 9); // top prestigeIcon.lineTo(29, 18); // right prestigeIcon.lineTo(22, 20); // bottom prestigeIcon.closePath(); prestigeIcon.fill(); this.prestigeText = this.add.text(44, 7, 'Prestige Points: 0.00', { fontSize: '20px', fill: '#f8bbd0', fontStyle: 'bold' }); this.prestigeText.setShadow(1, 1, '#000000', 2); // Add pulsing effect to the prestige icon this.tweens.add({ targets: prestigeIcon, scaleX: 1.1, scaleY: 1.1, duration: 1000, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); prestigeContainer.add([prestigeBar, prestigeIcon, this.prestigeText]); // Create history chart container on middle left of screen - now draggable this.historyChartContainer = this.add.container(150, 300); // Make the panel draggable this.makeContainerDraggable(this.historyChartContainer, "Resource History"); // Create factory-themed chart background const chartBg = this.add.graphics(); chartBg.fillStyle(0x1e293b, 0.9); chartBg.fillRoundedRect(-140, -120, 280, 240, 10); chartBg.lineStyle(2, 0x475569); chartBg.strokeRoundedRect(-140, -120, 280, 240, 10); // Add metallic header for chart chartBg.fillStyle(0x0f172a, 0.95); chartBg.fillRoundedRect(-140, -120, 280, 30, { tl: 10, tr: 10, bl: 0, br: 0 }); // Add drag handle visual cue const dragHandle = this.add.graphics(); dragHandle.fillStyle(0x60a5fa, 0.4); dragHandle.fillRect(-120, -120, 16, 30); dragHandle.fillRect(-98, -120, 16, 30); dragHandle.lineStyle(1, 0x94a3b8); dragHandle.strokeRect(-120, -120, 16, 30); dragHandle.strokeRect(-98, -120, 16, 30); this.historyChartContainer.add(dragHandle); // Add chart title const chartTitle = this.add.text(0, -105, 'RESOURCE HISTORY', { fontSize: '16px', fontStyle: 'bold', fill: '#94a3b8' }).setOrigin(0.5); // Add timestamp display to show live updates this.timestampText = this.add.text(125, -105, '', { fontSize: '12px', fill: '#64748b' }).setOrigin(1, 0.5); // Add grid lines const chartGrid = this.add.graphics(); chartGrid.lineStyle(1, 0x334155, 0.5); // Horizontal grid lines for (let y = -90; y < 120; y += 30) { chartGrid.lineBetween(-130, y, 130, y); } // Vertical grid lines for (let x = -130; x < 130; x += 20) { chartGrid.lineBetween(x, -90, x, 110); } // Create bar chart elements this.scoreHistory = this.add.graphics(); this.generatorHistory = this.add.graphics(); this.prestigeHistory = this.add.graphics(); // Create legend const legendBg = this.add.graphics(); legendBg.fillStyle(0x334155, 0.7); legendBg.fillRoundedRect(-130, 80, 260, 30, 5); // Add energy to legend const energyLegend = this.add.graphics(); energyLegend.fillStyle(0xfacc15, 1); energyLegend.fillRect(90, 90, 12, 12); const energyLegendText = this.add.text(105, 90, 'Energy', { fontSize: '12px', fill: '#ffffff' }).setOrigin(0, 0.5); // Legend items const scoreLegend = this.add.graphics(); scoreLegend.fillStyle(0x4ade80, 1); scoreLegend.fillRect(-120, 90, 12, 12); const generatorLegend = this.add.graphics(); generatorLegend.fillStyle(0x60a5fa, 1); generatorLegend.fillRect(-40, 90, 12, 12); const prestigeLegend = this.add.graphics(); prestigeLegend.fillStyle(0xe879f9, 1); prestigeLegend.fillRect(40, 90, 12, 12); // Legend labels const scoreLegendText = this.add.text(-105, 90, 'Score', { fontSize: '12px', fill: '#ffffff' }).setOrigin(0, 0.5); const generatorLegendText = this.add.text(-25, 90, 'Generators', { fontSize: '12px', fill: '#ffffff' }).setOrigin(0, 0.5); const prestigeLegendText = this.add.text(55, 90, 'Prestige', { fontSize: '12px', fill: '#ffffff' }).setOrigin(0, 0.5); // Add Y-axis labels const yAxisTop = this.add.text(-135, -90, '', { fontSize: '10px', fill: '#94a3b8' }).setOrigin(1, 0.5); this.yAxisTop = yAxisTop; const yAxisMiddle = this.add.text(-135, 0, '', { fontSize: '10px', fill: '#94a3b8' }).setOrigin(1, 0.5); this.yAxisMiddle = yAxisMiddle; const yAxisBottom = this.add.text(-135, 90, '0', { fontSize: '10px', fill: '#94a3b8' }).setOrigin(1, 0.5); // Add all elements to chart container this.historyChartContainer.add([ chartBg, chartGrid, chartTitle, this.timestampText, this.scoreHistory, this.generatorHistory, this.prestigeHistory, legendBg, scoreLegend, generatorLegend, prestigeLegend, energyLegend, scoreLegendText, generatorLegendText, prestigeLegendText, energyLegendText, yAxisTop, yAxisMiddle, yAxisBottom ]); // Create function to draw the chart based on current data this.drawResourceChart(); // Add prestige button (hidden initially) // Prestige button is now created near the boost button // Add infinity points display // Create infinity display with factory theme const infinityContainer = this.add.container(16, 136); const infinityBar = this.add.graphics(); infinityBar.fillStyle(0x1e293b, 0.7); infinityBar.fillRoundedRect(0, 0, 280, 36, 6); infinityBar.lineStyle(1, 0x00acc1, 0.8); // Cyan border for infinity infinityBar.strokeRoundedRect(0, 0, 280, 36, 6); // Add infinity symbol icon const infinityIcon = this.add.graphics(); infinityIcon.lineStyle(3, 0x00bcd4); // Draw infinity symbol infinityIcon.beginPath(); infinityIcon.moveTo(10, 18); infinityIcon.lineTo(16, 18); infinityIcon.arc(22, 18, 6, Math.PI, 0); infinityIcon.arc(28, 18, 6, Math.PI, 0); infinityIcon.lineTo(34, 18); infinityIcon.strokePath(); // Rotating effect for infinity symbol this.tweens.add({ targets: infinityIcon, angle: { from: -5, to: 5 }, duration: 2000, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); this.infinityText = this.add.text(44, 7, 'Infinity Points: 0', { fontSize: '20px', fill: '#b2ebf2', fontStyle: 'bold' }); this.infinityText.setShadow(1, 1, '#000000', 2); infinityContainer.add([infinityBar, infinityIcon, this.infinityText]); // Add infinity button (hidden initially) // Create a factory-themed infinity button // Create infinity button with properly aligned text this.infinityButton = this.createFactoryButton(700, 470, 160, 60, 0x00BCD4, 0x0097A7); this.infinityButton.setVisible(false); this.infinityButtonText = this.add.text(0, 0, 'Go Infinite\n+1 IP', { fontSize: '20px', fill: '#fff', align: 'center' }).setOrigin(0.5); this.infinityButtonText.setVisible(false); this.infinityButton.add(this.infinityButtonText); // Fix infinity button event handler this.infinityButton.on('pointerdown', () => { this.infinityPoints += 1; this.resetGame(); }); // Create auto upgrade button and position it above the achievements button const autoUpgradeButton = this.createFactoryButton(100, 580, 160, 60, 0x795548, 0x5D4037); this.autoUpgradeText = this.add.text(0, 0, 'Auto Upgrade\nCost: 15 PP', { fontSize: '20px', fill: '#fff', align: 'center' }).setOrigin(0.5); autoUpgradeButton.add(this.autoUpgradeText); // Add prestige boost upgrade button below the energy amplifier // Create prestige boost button with properly aligned text const prestigeBoostButton = this.createFactoryButton(rightSideX, 390, 160, 60, 0x9C27B0, 0x7B1FA2); this.prestigeBoostText = this.add.text(0, 0, 'Prestige Boost\nCost: 1 PP', { fontSize: '20px', fill: '#fff', align: 'center' }).setOrigin(0.5); prestigeBoostButton.add(this.prestigeBoostText); // Create prestige button and place it below the prestige boost button this.prestigeButton = this.createFactoryButton(rightSideX, 460, 160, 60, 0xE91E63, 0xC2185B); this.prestigeButton.setVisible(false); this.prestigeButtonText = this.add.text(0, 0, 'Prestige\n+0.00 points', { fontSize: '20px', fill: '#fff', align: 'center' }).setOrigin(0.5); // Add small generator synergy icon on prestige button const synergyIcon = this.add.graphics(); synergyIcon.fillStyle(0x60a5fa, 0.8); synergyIcon.fillCircle(40, -20, 8); synergyIcon.lineStyle(2, 0xe91e63); synergyIcon.lineBetween(40, -13, 40, -5); synergyIcon.lineBetween(37, -10, 43, -10); this.prestigeButton.add(synergyIcon); this.prestigeButtonText.setVisible(false); this.prestigeButton.add(this.prestigeButtonText); // Ensure prestige boost button event handler is properly attached prestigeBoostButton.on('pointerdown', () => { if (this.prestigePoints >= 1) { this.prestigePoints -= 1; this.prestigeBoostLevel += 1; this.updateAllDisplays(); } }); // Ensure auto upgrade button event handler is properly attached autoUpgradeButton.on('pointerdown', () => { if (this.prestigePoints >= 15 && !this.autoUpgradeEnabled) { this.prestigePoints -= 15; this.autoUpgradeEnabled = true; this.autoUpgradeText.setText('Auto Upgrade\nActive'); // Start auto upgrade timer this.time.addEvent({ delay: 100, callback: this.tryAutoUpgrade, callbackScope: this, loop: true }); this.updateAllDisplays(); } }); // Ensure prestige button event handler is properly attached this.prestigeButton.on('pointerdown', () => { const newPoints = this.calculatePrestigePoints(); // Create visual effect showing synergy between generators and prestige if (this.generatorPoints > 0 && this.generatorPanel.visible) { // Create energy beam from generator to prestige button (updated position) const beam = this.add.graphics(); beam.lineStyle(4, 0x60a5fa, 0.8); beam.lineBetween(400, 500, rightSideX, 460); // Add particles along the beam for (let i = 0; i < 20; i++) { const ratio = i / 20; const x = 400 + (rightSideX - 400) * ratio; const y = 500 + (460 - 500) * ratio; const particle = this.add.circle( x + Phaser.Math.Between(-10, 10), y + Phaser.Math.Between(-10, 10), Phaser.Math.Between(2, 5), 0xe91e63 ); // Animate particles this.tweens.add({ targets: particle, alpha: 0, scale: 0.1, duration: 500, onComplete: () => particle.destroy() }); } // Show generator bonus text const generatorBonus = 1 + (this.generatorPoints * 0.15); const bonusText = this.add.text(550, 360, `Generator Synergy: ×${generatorBonus.toFixed(2)}`, { fontSize: '22px', fontStyle: 'bold', fill: '#60a5fa', stroke: '#1e40af', strokeThickness: 2 }).setOrigin(0.5); // Fade out beam and text this.tweens.add({ targets: [beam, bonusText], alpha: 0, duration: 1000, onComplete: () => { beam.destroy(); bonusText.destroy(); } }); } this.prestigePoints += newPoints; this.resetGame(); }); // Add scientific notation toggle button below energy amplifier // Create scientific notation button with properly aligned text const notationButton = this.createFactoryButton(rightSideX, 320, 160, 60, 0xFF9800, 0xF57C00); this.notationText = this.add.text(0, 0, 'Scientific\nNotation: OFF', { fontSize: '20px', fill: '#fff', align: 'center' }).setOrigin(0.5); notationButton.add(this.notationText); // Ensure notation button event handler is properly attached notationButton.on('pointerdown', () => { this.useScientific = !this.useScientific; this.notationText.setText('Scientific\nNotation: ' + (this.useScientific ? 'ON' : 'OFF')); this.updateAllDisplays(); }); // Add generator UI (hidden initially) // Move generator panel to bottom center of the screen - now draggable this.generatorPanel = this.add.container(400, 500); this.generatorPanel.setVisible(false); // Make the panel draggable this.makeContainerDraggable(this.generatorPanel, "Power Generators"); // Make the panel interactive to catch clicks this.generatorPanel.setInteractive(new Phaser.Geom.Rectangle(-180, -120, 360, 200), Phaser.Geom.Rectangle.Contains, { useHandCursor: false }); // Prevent panel from resetting scale when clicked this.generatorPanel.on('pointerdown', (pointer, x, y, event) => { // Stop event propagation to prevent any unwanted behavior event.stopPropagation(); }); // Create enhanced factory-themed generator panel const generatorBg = this.add.graphics(); // Modern industrial panel background with angled corners generatorBg.fillStyle(0x1e293b, 0.9); generatorBg.fillRoundedRect(-180, -120, 360, 200, 12); generatorBg.lineStyle(3, 0x3b82f6); generatorBg.strokeRoundedRect(-180, -120, 360, 200, 12); // Add dark metallic header generatorBg.fillStyle(0x0f172a, 0.95); generatorBg.fillRoundedRect(-180, -120, 360, 40, { tl: 12, tr: 12, bl: 0, br: 0 }); // Add subtle pattern to the panel const panelPattern = this.add.graphics(); panelPattern.lineStyle(1, 0x475569, 0.15); for (let i = -180; i <= 180; i += 25) { panelPattern.lineBetween(i, -80, i, 80); } for (let j = -120; j <= 80; j += 25) { panelPattern.lineBetween(-180, j, 180, j); } // Add sleek metallic details const panelDetails = this.add.graphics(); // Add modern control panel rivets const rivetPositions = [{ x: -170, y: -110 }, // top left { x: 170, y: -110 }, // top right { x: -170, y: 70 }, // bottom left { x: 170, y: 70 } // bottom right ]; rivetPositions.forEach(pos => { // Create modern hexagonal rivets panelDetails.lineStyle(1, 0x60a5fa); panelDetails.beginPath(); for (let i = 0; i < 6; i++) { const angle = (Math.PI / 3) * i; const x = pos.x + Math.cos(angle) * 8; const y = pos.y + Math.sin(angle) * 8; if (i === 0) { panelDetails.moveTo(x, y); } else { panelDetails.lineTo(x, y); } } panelDetails.closePath(); panelDetails.strokePath(); // Add metallic center panelDetails.fillStyle(0x64748b); panelDetails.fillCircle(pos.x, pos.y, 4); panelDetails.fillStyle(0xdbeafe, 0.5); panelDetails.fillCircle(pos.x - 1, pos.y - 1, 2); }); // Add decorative power meter in bottom section panelDetails.lineStyle(1, 0x3b82f6); panelDetails.strokeCircle(0, 20, 20); // Add gauge needle this.gaugeNeedle = this.add.graphics(); this.gaugeNeedle.fillStyle(0xff0000); this.gaugeNeedle.fillTriangle(0, 10, -2, 20, 2, 20); // Add needle rotation animation this.tweens.add({ targets: this.gaugeNeedle, angle: 180, duration: 3000, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); this.generatorPanel.add(this.gaugeNeedle); // Add stylized generator title with icon const generatorIcon = this.add.graphics(); generatorIcon.fillStyle(0x60a5fa); // Create generator icon (stylized power generator) generatorIcon.fillRect(-165, -105, 18, 10); generatorIcon.fillRect(-160, -115, 8, 20); // Add pulsing coils generatorIcon.fillStyle(0x93c5fd); generatorIcon.fillRect(-168, -105, 4, 3); generatorIcon.fillRect(-144, -105, 4, 3); // Create animated electricity effect const electricity = this.add.graphics(); electricity.fillStyle(0xdbeafe, 0.8); electricity.fillRect(-155, -118, 2, 6); // Add pulsing animation to electricity this.tweens.add({ targets: electricity, alpha: 0.2, duration: 500, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); const generatorTitle = this.add.text(-135, -110, 'POWER GENERATORS', { fontSize: '20px', fontStyle: 'bold', fill: '#60a5fa' }); // Add drag handle visual beside the title const genDragHandle = this.add.graphics(); genDragHandle.fillStyle(0x60a5fa, 0.4); genDragHandle.fillRect(-100, -110, 12, 20); genDragHandle.fillRect(-85, -110, 12, 20); genDragHandle.lineStyle(1, 0x94a3b8); genDragHandle.strokeRect(-100, -110, 12, 20); genDragHandle.strokeRect(-85, -110, 12, 20); this.generatorPanel.add(genDragHandle); // Add separator line const separator = this.add.graphics(); separator.lineStyle(2, 0x3b82f6, 0.5); separator.lineBetween(-165, -80, 165, -80); // Generator info with improved styling this.generatorPointsText = this.add.text(-165, -60, 'Generator Points: 0.00', { fontSize: '18px', fill: '#f0f9ff', fontStyle: 'bold' }); this.generatorMultiplierText = this.add.text(-165, -20, 'Score Multiplier: ×1.00', { fontSize: '18px', fill: '#f0f9ff', fontStyle: 'bold' }); // Add prestige synergy text this.generatorPrestigeText = this.add.text(-165, 10, 'Prestige Bonus: ×1.00', { fontSize: '18px', fill: '#f8bbd0', fontStyle: 'bold' }); // Add visual power indicator const powerBarBg = this.add.rectangle(0, 20, 300, 16, 0x0f172a); const powerBarContainer = this.add.container(0, 20); this.powerBarFill = this.add.rectangle(-150, 0, 0, 16, 0x3b82f6); this.powerBarFill.setOrigin(0, 0.5); powerBarContainer.add([powerBarBg, this.powerBarFill]); // Add power text label const powerLabel = this.add.text(-150, 50, 'FACTORY POWER OUTPUT', { fontSize: '14px', fill: '#94a3b8' }); // Add all elements to the generator panel this.generatorPanel.add([ generatorBg, panelPattern, panelDetails, generatorIcon, electricity, generatorTitle, separator, this.generatorPointsText, this.generatorMultiplierText, this.generatorPrestigeText, powerBarContainer, powerLabel ]); // Add minimize/maximize button const minimizeBtn = this.add.graphics(); minimizeBtn.fillStyle(0x334155); minimizeBtn.fillCircle(160, -110, 12); minimizeBtn.lineStyle(2, 0x60a5fa); minimizeBtn.strokeCircle(160, -110, 12); // Add minimize icon minimizeBtn.fillStyle(0xffffff); minimizeBtn.fillRect(154, -110, 12, 2); // Make minimize button interactive const minimizeHitArea = this.add.circle(160, -110, 12); minimizeHitArea.setInteractive(); // State tracking for panel this.generatorPanelMinimized = false; // Create a flag to track panel clicks this.generatorPanelClicked = false; minimizeHitArea.on('pointerdown', () => { this.generatorPanelMinimized = !this.generatorPanelMinimized; // Set clicked flag to prevent resetting size this.generatorPanelClicked = true; if (this.generatorPanelMinimized) { // Minimize panel - show only the header this.tweens.add({ targets: this.generatorPanel, scaleY: 0.2, duration: 300, ease: 'Power2' }); // Change button icon to maximize minimizeBtn.clear(); minimizeBtn.fillStyle(0x334155); minimizeBtn.fillCircle(160, -110, 12); minimizeBtn.lineStyle(2, 0x60a5fa); minimizeBtn.strokeCircle(160, -110, 12); minimizeBtn.fillStyle(0xffffff); minimizeBtn.fillRect(154, -110, 12, 2); minimizeBtn.fillRect(160, -116, 2, 12); } else { // Maximize panel this.tweens.add({ targets: this.generatorPanel, scaleY: 1, duration: 300, ease: 'Power2' }); // Change button icon to minimize minimizeBtn.clear(); minimizeBtn.fillStyle(0x334155); minimizeBtn.fillCircle(160, -110, 12); minimizeBtn.lineStyle(2, 0x60a5fa); minimizeBtn.strokeCircle(160, -110, 12); minimizeBtn.fillStyle(0xffffff); minimizeBtn.fillRect(154, -110, 12, 2); } }); // Add smooth appearance animation when panel first becomes visible this.generatorPanel.setScale(1, 0); this.generatorPanel.add([minimizeBtn, minimizeHitArea]); // Add upgrade button // Create upgrade button on right side const upgradeButton = this.createFactoryButton(rightSideX, 50, 160, 60, 0x4CAF50, 0x388E3C); this.upgradeText = this.add.text(0, 0, 'Upgrade (+1)\nCost: 5.00', { fontSize: '20px', fill: '#fff', align: 'center' }).setOrigin(0.5); upgradeButton.add(this.upgradeText); // Add tickspeed upgrade button on right side const tickspeedButton = this.createFactoryButton(rightSideX, 120, 160, 60, 0x2196F3, 0x1976D2); this.tickspeedText = this.add.text(0, 0, 'Tickspeed\nCost: 50.00', { fontSize: '20px', fill: '#fff', align: 'center' }).setOrigin(0.5); tickspeedButton.add(this.tickspeedText); // Add score multiplier button on right side const scoreMultButton = this.createFactoryButton(rightSideX, 190, 160, 60, 0x607D8B, 0x455A64); this.scoreMultText = this.add.text(0, 0, 'Multiply\n×1.01', { fontSize: '20px', fill: '#fff', align: 'center' }).setOrigin(0.5); scoreMultButton.add(this.scoreMultText); // Ensure score multiplier button event handler is properly attached scoreMultButton.on('pointerdown', () => { this.score *= 1.01; this.updateAllDisplays(); }); // Create energy multiplier button on right side const energyMultButton = this.createFactoryButton(rightSideX, 260, 160, 60, 0xF59E0B, 0xD97706); this.energyMultText = this.add.text(0, 0, 'Energy Amplifier\nCost: 10.00', { fontSize: '20px', fill: '#fff', align: 'center' }).setOrigin(0.5); energyMultButton.add(this.energyMultText); // Energy multiplier button event handler energyMultButton.on('pointerdown', () => { if (this.score >= this.energyUpgradeCost) { this.score -= this.energyUpgradeCost; this.energyMultiplier += 1; this.energyUpgradeCost *= 1.5; this.energyMultText.setText('Energy Amplifier\nCost: ' + this.formatNumber(this.energyUpgradeCost)); this.updateAllDisplays(); } }); // Ensure tickspeed button event handler is properly attached tickspeedButton.on('pointerdown', () => { if (this.score >= this.tickspeedCost) { this.score -= this.tickspeedCost; this.tickspeedDelay *= Math.pow(0.5, 1 + this.infinityPoints * 9); // 50% reduction with infinity points multiplier this.tickspeedCost *= 1.50; // Update the timer this.tickTimer.reset({ delay: this.tickspeedDelay, callback: this.increaseScore, callbackScope: this, loop: true }); this.tickspeedText.setText('Tickspeed\nCost: ' + this.tickspeedCost.toFixed(2)); this.scoreText.setText('Score: ' + this.score.toFixed(2)); this.tickspeedStatText.setText('Ticks per second: ' + (1000 / this.tickspeedDelay).toFixed(2)); } }); // Ensure upgrade button event handler is properly attached upgradeButton.on('pointerdown', () => { if (this.score >= this.upgradeCost) { this.score -= this.upgradeCost; this.baseIncrement += 1; this.upgradeCost *= 1.25; this.upgradeText.setText('Upgrade (+' + this.baseIncrement + ')\nCost: ' + this.upgradeCost.toFixed(2)); this.scoreText.setText('Score: ' + this.score.toFixed(2)); } }); // Create a timer event this.tickTimer = this.time.addEvent({ delay: this.tickspeedDelay, callback: this.increaseScore, callbackScope: this, loop: true }); // Add energy generation timer this.energyTimer = this.time.addEvent({ delay: 1000, callback: this.generateEnergy, callbackScope: this, loop: true }); // Add dedicated timer for resource history updates this.historyTimer = this.time.addEvent({ delay: 1000, // Update every second callback: this.updateResourceHistory, callbackScope: this, loop: true }); // Create achievements button // Create achievements button in bottom left corner const achievementsButton = this.createFactoryButton(100, 650, 160, 60, 0x4B5563, 0x374151); // Add achievements icon to the button const trophyIcon = this.add.graphics(); trophyIcon.fillStyle(0xFFC107); trophyIcon.fillRect(-30, -5, 12, 8); trophyIcon.fillStyle(0xFFD54F); trophyIcon.fillRect(-30, -13, 12, 8); trophyIcon.fillCircle(-24, -13, 6); trophyIcon.fillStyle(0xFFB300); trophyIcon.fillCircle(-32, -9, 3); trophyIcon.fillCircle(-16, -9, 3); achievementsButton.add(trophyIcon); // Add achievements text to the button this.achievementButtonText = this.add.text(10, 0, 'Achievements\n(0/' + this.achievementTotalCount + ')', { fontSize: '20px', fill: '#fff', align: 'center' }).setOrigin(0.5); achievementsButton.add(this.achievementButtonText); // Add click handler // Ensure achievements button event handler is properly attached achievementsButton.on('pointerdown', () => { this.showAchievementPanel(); }); // Set up notification badge for new achievements this.achievementBadge = this.add.graphics(); this.drawAchievementBadge(0); } // Helper method to draw the achievement notification badge drawAchievementBadge(count) { this.achievementBadge.clear(); if (count > 0) { // Update badge position to match new button position in bottom left this.achievementBadge.fillStyle(0xEF4444, 1); this.achievementBadge.fillCircle(180, 530, 15); this.achievementBadge.lineStyle(2, 0xFFFFFF); this.achievementBadge.strokeCircle(180, 530, 15); const badgeText = this.add.text(180, 530, count.toString(), { fontSize: '16px', fill: '#FFFFFF', fontStyle: 'bold' }).setOrigin(0.5); this.achievementBadge.add(badgeText); } } // Helper method to create factory-styled buttons createFactoryButton(x, y, width, height, color, shadowColor) { const buttonContainer = this.add.container(x, y); // Button shadow const shadow = this.add.rectangle(2, 4, width, height, shadowColor, 0.7); shadow.setOrigin(0.5); // Button base const buttonBase = this.add.rectangle(0, 0, width, height, color); buttonBase.setOrigin(0.5); // Make the container interactive instead of just the base const hitArea = new Phaser.Geom.Rectangle(-width / 2, -height / 2, width, height); buttonContainer.setInteractive(hitArea, Phaser.Geom.Rectangle.Contains); // Add metallic details const buttonDetails = this.add.graphics(); // Gradient effect for (let i = 0; i < 15; i++) { buttonDetails.fillStyle(0xffffff, 0.1 - (i * 0.006)); buttonDetails.fillRect(-width / 2 + 4, -height / 2 + 4 + i, width - 8, 1); } // Add rivets to corners const rivetPositions = [{ x: -width / 2 + 10, y: -height / 2 + 10 }, { x: width / 2 - 10, y: -height / 2 + 10 }, { x: -width / 2 + 10, y: height / 2 - 10 }, { x: width / 2 - 10, y: height / 2 - 10 }]; rivetPositions.forEach(pos => { buttonDetails.fillStyle(0x000000, 0.3); buttonDetails.fillCircle(pos.x, pos.y, 4); buttonDetails.fillStyle(0xffffff, 0.5); buttonDetails.fillCircle(pos.x, pos.y, 2); }); // Hover and click effects - attach to container instead of base buttonContainer.on('pointerover', () => { buttonBase.setScale(1.05); shadow.setScale(1.05); }); buttonContainer.on('pointerout', () => { buttonBase.setScale(1); shadow.setScale(1); }); buttonContainer.on('pointerdown', () => { buttonBase.setScale(0.95); shadow.setScale(0.95); shadow.setPosition(1, 2); }); buttonContainer.on('pointerup', () => { buttonBase.setScale(1); shadow.setScale(1); shadow.setPosition(2, 4); }); buttonContainer.add([shadow, buttonBase, buttonDetails]); return buttonContainer; } // Helper method to make a container draggable makeContainerDraggable(container, name) { // Make the container interactive but prevent it from handling all pointer events globally container.setInteractive(new Phaser.Geom.Rectangle(-180, -120, 360, 240), Phaser.Geom.Rectangle.Contains); // Create a dragging state container.isDragging = false; container.dragOffsetX = 0; container.dragOffsetY = 0; // Add a drag label to show when dragging const dragLabel = this.add.text(0, 0, `Moving ${name}...`, { fontSize: '18px', fontStyle: 'bold', fill: '#ffffff', backgroundColor: '#1e293b', padding: { x: 8, y: 4 } }).setOrigin(0.5); dragLabel.setVisible(false); container.add(dragLabel); container.dragLabel = dragLabel; // Start dragging on pointer down container.on('pointerdown', (pointer, x, y, event) => { container.isDragging = true; container.dragOffsetX = container.x - pointer.x; container.dragOffsetY = container.y - pointer.y; // Show drag label dragLabel.setVisible(true); // Give visual feedback this.tweens.add({ targets: container, alpha: 0.8, duration: 100 }); // Prevent event from bubbling up event.stopPropagation(); }); // Listen for global pointer move and up events this.input.on('pointermove', pointer => { if (container.isDragging) { container.x = pointer.x + container.dragOffsetX; container.y = pointer.y + container.dragOffsetY; // Keep panel within screen bounds const bounds = { left: 180, right: this.cameras.main.width - 180, top: 120, bottom: this.cameras.main.height - 120 }; container.x = Phaser.Math.Clamp(container.x, bounds.left, bounds.right); container.y = Phaser.Math.Clamp(container.y, bounds.top, bounds.bottom); } }); this.input.on('pointerup', () => { if (container.isDragging) { container.isDragging = false; dragLabel.setVisible(false); // Restore normal appearance this.tweens.add({ targets: container, alpha: 1, duration: 100 }); } }); } // Method to draw the resource history chart drawResourceChart() { // Clear previous graph drawings this.scoreHistory.clear(); this.generatorHistory.clear(); this.prestigeHistory.clear(); // Update timestamp const now = new Date(); const timeString = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0') + ':' + now.getSeconds().toString().padStart(2, '0'); this.timestampText.setText(timeString); // Find maximum value for scaling const maxScore = Math.max(...this.resourceHistory.score, 1); const maxGenerator = Math.max(...this.resourceHistory.generators, 1); const maxPrestige = Math.max(...this.resourceHistory.prestige, 1); // Calculate overall max for y-axis scale const overallMax = Math.max(maxScore, maxGenerator * 10, maxPrestige * 100); // Update y-axis labels this.yAxisTop.setText(this.formatShortNumber(overallMax)); this.yAxisMiddle.setText(this.formatShortNumber(overallMax / 2)); // Define bar width and spacing const barWidth = 10; const barSpacing = 13; const maxHeight = 180; // Track the newest bar for highlighting animation const newestIndex = this.resourceHistory.score.length - 1; // Draw score bars (green) this.scoreHistory.fillStyle(0x4ade80, 0.7); this.scoreHistory.lineStyle(1, 0x22c55e); // Draw generator bars (blue) this.generatorHistory.fillStyle(0x60a5fa, 0.7); this.generatorHistory.lineStyle(1, 0x3b82f6); // Draw prestige bars (purple) this.prestigeHistory.fillStyle(0xe879f9, 0.7); this.prestigeHistory.lineStyle(1, 0xd946ef); // Draw each set of bars // Create energy history graphics if not already created if (!this.energyHistory) { this.energyHistory = this.add.graphics(); this.energyHistory.fillStyle(0xfacc15, 0.7); this.energyHistory.lineStyle(1, 0xf59e0b); // Add it to the history chart container this.historyChartContainer.add(this.energyHistory); } else { // Clear existing energy history graphics this.energyHistory.clear(); this.energyHistory.fillStyle(0xfacc15, 0.7); this.energyHistory.lineStyle(1, 0xf59e0b); } for (let i = 0; i < this.resourceHistory.score.length; i++) { const x = -130 + (i * barSpacing); // Score bars const scoreHeight = (this.resourceHistory.score[i] / overallMax) * maxHeight; if (scoreHeight > 0) { this.scoreHistory.fillRect(x, 110 - scoreHeight, barWidth, scoreHeight); this.scoreHistory.strokeRect(x, 110 - scoreHeight, barWidth, scoreHeight); } // Energy bars (scaled to be visible) const energyHeight = (this.resourceHistory.energy[i] * 5 / overallMax) * maxHeight; if (energyHeight > 0) { this.energyHistory.fillRect(x, 110 - energyHeight, barWidth, energyHeight); this.energyHistory.strokeRect(x, 110 - energyHeight, barWidth, energyHeight); } // Generator bars (scaled to be visible alongside score) const genHeight = (this.resourceHistory.generators[i] * 10 / overallMax) * maxHeight; if (genHeight > 0) { this.generatorHistory.fillRect(x, 110 - genHeight, barWidth, genHeight); this.generatorHistory.strokeRect(x, 110 - genHeight, barWidth, genHeight); } // Prestige bars (scaled to be visible alongside score) const prestigeHeight = (this.resourceHistory.prestige[i] * 100 / overallMax) * maxHeight; if (prestigeHeight > 0) { this.prestigeHistory.fillRect(x, 110 - prestigeHeight, barWidth, prestigeHeight); this.prestigeHistory.strokeRect(x, 110 - prestigeHeight, barWidth, prestigeHeight); } } // Add highlight animation to the newest bars if (newestIndex >= 0) { const x = -130 + (newestIndex * barSpacing); // Create a highlight effect for newest bars const highlightGraphics = this.add.graphics(); // Score highlight const scoreHeight = (this.resourceHistory.score[newestIndex] / overallMax) * maxHeight; if (scoreHeight > 0) { highlightGraphics.lineStyle(2, 0xffffff, 0.8); highlightGraphics.strokeRect(x, 110 - scoreHeight, barWidth, scoreHeight); } // Generator highlight const genHeight = (this.resourceHistory.generators[newestIndex] * 10 / overallMax) * maxHeight; if (genHeight > 0) { highlightGraphics.lineStyle(2, 0xffffff, 0.8); highlightGraphics.strokeRect(x, 110 - genHeight, barWidth, genHeight); } // Prestige highlight const prestigeHeight = (this.resourceHistory.prestige[newestIndex] * 100 / overallMax) * maxHeight; if (prestigeHeight > 0) { highlightGraphics.lineStyle(2, 0xffffff, 0.8); highlightGraphics.strokeRect(x, 110 - prestigeHeight, barWidth, prestigeHeight); } // Add the highlight to the chart container temporarily this.historyChartContainer.add(highlightGraphics); // Energy highlight const energyHeight = (this.resourceHistory.energy[newestIndex] * 5 / overallMax) * maxHeight; if (energyHeight > 0) { highlightGraphics.lineStyle(2, 0xffffff, 0.8); highlightGraphics.strokeRect(x, 110 - energyHeight, barWidth, energyHeight); } // Animate the highlight this.tweens.add({ targets: highlightGraphics, alpha: 0, duration: 800, onComplete: () => { highlightGraphics.destroy(); } }); } } // Helper method to format large numbers in a compact way for chart labels formatShortNumber(num) { if (num < 1000) return num.toFixed(0); const units = ['', 'K', 'M', 'B', 'T', 'Qa', 'Qi']; const unit = Math.floor(Math.log10(num) / 3); const value = num / Math.pow(1000, unit); return value.toFixed(1) + units[unit]; } increaseScore() { // Track previous values for achievement checks const previousScore = this.score; const previousTickSpeed = 1000 / this.tickspeedDelay; // Get score booster effect if purchased const scoreBooster = this.shopItems.find(item => item.id === 'scoreBooster'); const scoreBoostMultiplier = scoreBooster ? scoreBooster.effect(scoreBooster.level) : 1; // Get energy converter effect if purchased const energyConverter = this.shopItems.find(item => item.id === 'energyConverter'); const energyConversionRate = energyConverter ? energyConverter.effect(energyConverter.level) : 1; // Calculate total score multiplier const scoreMultiplier = Math.pow(2, this.generatorPoints) * (1 + this.prestigePoints) * (1 + this.prestigeBoostLevel * 0.5) * Math.pow(25, this.infinityPoints) * scoreBoostMultiplier * (1 + (this.energy * this.energyMultiplier * 0.01 * energyConversionRate)); // Energy boost this.score += this.baseIncrement * scoreMultiplier; // Check for end game if (this.score >= 1e3800 && !this.endScreenShown) { this.showEndScreen(); } this.updateAllDisplays(); // Check for achievement progress this.checkAchievements(); // Update achievement button text this.achievementButtonText.setText('Achievements\n(' + this.achievementsCompleted + '/' + this.achievementTotalCount + ')'); // Check for prestige unlock if (this.score >= 1e5) { this.prestigeButton.setVisible(true); this.prestigeButtonText.setVisible(true); this.prestigeButtonText.setText('Prestige\n+' + this.formatNumber(this.calculatePrestigePoints()) + ' points'); } // Check for generator unlock with improved animation if (this.score >= 10000 && !this.generatorUnlocked) { this.generatorUnlocked = true; this.generatorPanel.setVisible(true); // Apply appropriate initial scale based on panel state if (this.generatorPanelMinimized) { this.generatorPanel.setScale(1, 0); // Reveal to minimized state this.tweens.add({ targets: this.generatorPanel, scaleY: 0.2, duration: 500, ease: 'Back.easeOut' }); } else { this.generatorPanel.setScale(1, 0); // Reveal to full size this.tweens.add({ targets: this.generatorPanel, scaleY: 1, duration: 500, ease: 'Back.easeOut' }); } // Add notification of unlocked feature const unlockNotification = this.add.container(400, -50); // Create notification background const notifBg = this.add.graphics(); notifBg.fillStyle(0x0f172a, 0.9); notifBg.fillRoundedRect(-200, -30, 400, 60, 10); notifBg.lineStyle(2, 0x3b82f6); notifBg.strokeRoundedRect(-200, -30, 400, 60, 10); // Create notification text const notifText = this.add.text(0, 0, 'Power Generators Unlocked!', { fontSize: '24px', fontStyle: 'bold', fill: '#60a5fa', align: 'center' }).setOrigin(0.5); unlockNotification.add([notifBg, notifText]); // Slide in and out animation this.tweens.add({ targets: unlockNotification, y: 100, duration: 1000, ease: 'Bounce.easeOut', onComplete: () => { this.time.delayedCall(2000, () => { this.tweens.add({ targets: unlockNotification, y: -50, duration: 500, ease: 'Back.easeIn', onComplete: () => unlockNotification.destroy() }); }); } }); // Start generator points timer this.time.addEvent({ delay: 1000, callback: this.increaseGeneratorPoints, callbackScope: this, loop: true }); } } increaseGeneratorPoints() { if (this.generatorPoints < 10.00) { const oldPoints = this.generatorPoints; this.generatorPoints += this.generatorGrowthRate; if (this.generatorPoints > 10.00) { this.generatorPoints = 10.00; } // Create visual power pulse effect if (this.generatorPanel.visible) { // Create energy particles at the power meter for (let i = 0; i < 5; i++) { const particle = this.add.circle( 400 + Phaser.Math.Between(-20, 20), 500 + Phaser.Math.Between(-20, 20), Phaser.Math.Between(2, 5), 0x60a5fa ); // Animate particles this.tweens.add({ targets: particle, alpha: 0, x: 400 + Phaser.Math.Between(-40, 40), y: 500 + Phaser.Math.Between(-40, 40), scale: 0.1, duration: 800, onComplete: () => particle.destroy() }); } // Flash effect on power bar if (this.powerBarFill) { this.tweens.add({ targets: this.powerBarFill, alpha: 0.4, yoyo: true, duration: 100, repeat: 1 }); } } const multiplier = Math.pow(2, this.generatorPoints); this.updateAllDisplays(); } } // Method to update resource history every second updateResourceHistory() { // Shift arrays and add new values this.resourceHistory.score.shift(); this.resourceHistory.generators.shift(); this.resourceHistory.prestige.shift(); this.resourceHistory.energy.shift(); this.resourceHistory.score.push(this.score); this.resourceHistory.generators.push(this.generatorPoints); this.resourceHistory.prestige.push(this.prestigePoints); this.resourceHistory.energy.push(this.energy); // Redraw the chart with new data this.drawResourceChart(); } formatNumber(num) { if (!this.useScientific || num < 1000) { return num.toFixed(2); } return num.toExponential(2); } updateAllDisplays() { const scoreMultiplier = Math.pow(2, this.generatorPoints); const prestigeBonus = 1 + (this.generatorPoints * 0.15); // Get energy converter effect if purchased const energyConverter = this.shopItems.find(item => item.id === 'energyConverter'); const energyConversionRate = energyConverter ? energyConverter.effect(energyConverter.level) : 1; // Calculate energy's effect on score const energyBoost = 1 + (this.energy * this.energyMultiplier * 0.01 * energyConversionRate); // Update generator power bar to reflect current power if (this.powerBarFill) { const powerWidth = (this.generatorPoints / 10) * 300; this.powerBarFill.width = powerWidth; // Change color based on power level if (this.generatorPoints < 3) { this.powerBarFill.fillColor = 0x3b82f6; // blue } else if (this.generatorPoints < 6) { this.powerBarFill.fillColor = 0x10b981; // green } else if (this.generatorPoints < 9) { this.powerBarFill.fillColor = 0xf59e0b; // amber } else { this.powerBarFill.fillColor = 0xef4444; // red } } // Update score display this.scoreText.setText('Score: ' + this.formatNumber(this.score)); // Update generator displays this.generatorPointsText.setText('Generator Points: ' + this.formatNumber(this.generatorPoints)); this.generatorMultiplierText.setText('Score Multiplier: ×' + this.formatNumber(scoreMultiplier)); this.generatorPrestigeText.setText('Prestige Bonus: ×' + this.formatNumber(prestigeBonus)); // Update upgrade costs this.upgradeText.setText('Upgrade (+' + this.baseIncrement + ')\nCost: ' + this.formatNumber(this.upgradeCost)); this.tickspeedText.setText('Tickspeed\nCost: ' + this.formatNumber(this.tickspeedCost)); // Update tickspeed stat this.tickspeedStatText.setText('Ticks per second: ' + this.formatNumber(1000 / this.tickspeedDelay)); // Update prestige displays this.prestigeText.setText('Prestige Points: ' + this.formatNumber(this.prestigePoints)); this.infinityText.setText('Infinity Points: ' + this.infinityPoints); // Update energy display this.energyText.setText('Energy: ' + this.formatNumber(this.energy) + ' (×' + this.formatNumber(energyBoost) + ')'); // Check for infinity button visibility if (this.score >= 1.80e+308 && !this.infinityUnlocked) { this.infinityUnlocked = true; this.infinityButton.setVisible(true); this.infinityButtonText.setVisible(true); } if (this.score >= 1e5) { const points = this.calculatePrestigePoints(); const generatorBonus = 1 + (this.generatorPoints * 0.15); let bonusText = ''; if (this.generatorPoints > 0) { bonusText = ` (×${generatorBonus.toFixed(2)} gen bonus)`; } this.prestigeButtonText.setText('Prestige\n+' + this.formatNumber(points) + ' points' + bonusText); } } tryAutoUpgrade() { if (this.autoUpgradeEnabled && this.score >= this.upgradeCost) { this.score -= this.upgradeCost; this.baseIncrement += 1 * this.autoUpgradeEfficiency; this.upgradeCost *= 1.25; this.updateAllDisplays(); } } calculatePrestigePoints() { // Add generator synergy - each generator point adds 15% to prestige gain const generatorBonus = 1 + (this.generatorPoints * 0.15); // Check for prestige multiplier shop item const prestigeMultItem = this.shopItems.find(item => item.id === 'prestigeMultiplier'); const prestigeShopMultiplier = prestigeMultItem ? prestigeMultItem.effect(prestigeMultItem.level) : 1; return Math.floor(Math.pow(this.score / 1e5, 0.5) * Math.pow(5, this.infinityPoints) * this.prestigeMultiplier * generatorBonus * prestigeShopMultiplier); } resetGame() { // Reset all game values except prestige points and shop items this.score = 0; this.baseIncrement = 1; this.upgradeCost = 5; this.autoUpgradeEnabled = false; this.infinityUnlocked = false; this.generatorPoints = 0; this.generatorUnlocked = false; this.tickspeedCost = 50; this.tickspeedDelay = 1000; this.energy = 0; this.energyUpgradeCost = 10; // Reset UI elements - preserve minimized state this.generatorPanel.setVisible(false); // Don't reset the minimized state flag (this.generatorPanelMinimized) this.prestigeButton.setVisible(false); this.prestigeButtonText.setVisible(false); // Reset timer this.tickTimer.reset({ delay: this.tickspeedDelay, callback: this.increaseScore, callbackScope: this, loop: true }); // Update all displays this.updateAllDisplays(); // Reset history data this.resourceHistory.score = Array(20).fill(0); this.resourceHistory.generators = Array(20).fill(0); this.resourceHistory.prestige = Array(20).fill(this.prestigePoints); this.resourceHistory.energy = Array(20).fill(0); this.drawResourceChart(); // Reset history timer but keep it running this.historyTimer.reset({ delay: 1000, callback: this.updateResourceHistory, callbackScope: this, loop: true }); // Restart autoclicker if it was active const autoclicker = this.shopItems.find(item => item.id === 'autoclicker'); if (autoclicker && autoclicker.level > 0) { this.setupAutoClicker(autoclicker.effect(autoclicker.level)); } } showEndScreen() { // Create industrial-themed end screen const overlay = this.add.graphics(); // Create gradient overlay for (let y = 0; y < 600; y++) { const alpha = 0.85 + (Math.sin(y / 30) * 0.05); overlay.fillStyle(0x0f172a, alpha); overlay.fillRect(0, y, 800, 1); } // Create decorative factory-themed frame const frame = this.add.graphics(); frame.lineStyle(4, 0x2563eb); frame.strokeRoundedRect(150, 150, 500, 300, 20); // Add inner metallic frame frame.lineStyle(2, 0x93c5fd); frame.strokeRoundedRect(160, 160, 480, 280, 15); // Add corner rivets const rivetPositions = [{ x: 150, y: 150 }, { x: 650, y: 150 }, { x: 150, y: 450 }, { x: 650, y: 450 }]; rivetPositions.forEach(pos => { frame.fillStyle(0x475569); frame.fillCircle(pos.x, pos.y, 12); frame.fillStyle(0x94a3b8); frame.fillCircle(pos.x, pos.y, 8); frame.fillStyle(0x1e293b); frame.fillCircle(pos.x, pos.y, 4); }); // Add thank you text with glow effect const thankYouText = this.add.text(400, 240, 'Thanks for playing my demo!', { fontSize: '48px', fontStyle: 'bold', fill: '#fff', align: 'center', stroke: '#2563eb', strokeThickness: 4 }); thankYouText.setOrigin(0.5); // Add congratulations text const congratsText = this.add.text(400, 330, 'Your factory empire is complete!', { fontSize: '28px', fill: '#93c5fd', align: 'center' }); congratsText.setOrigin(0.5); // Add animated particles for (let i = 0; i < 40; i++) { const x = Phaser.Math.Between(200, 600); const y = Phaser.Math.Between(100, 500); const size = Phaser.Math.Between(2, 8); const particle = this.add.rectangle(x, y, size, size, 0x60a5fa); this.tweens.add({ targets: particle, x: x + Phaser.Math.Between(-100, 100), y: y + Phaser.Math.Between(-100, 100), alpha: 0, duration: Phaser.Math.Between(2000, 8000), repeat: -1, delay: Phaser.Math.Between(0, 1000) }); } // Stop all timers and interactions this.tickTimer.remove(); this.historyTimer.remove(); this.energyTimer.remove(); this.endScreenShown = true; // Add glow pulse animation to the frame this.tweens.add({ targets: frame, alpha: 0.7, duration: 1500, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); } // Method to show the item shop showItemShop() { // If shop panel already exists, destroy it if (this.shopPanel) { this.shopPanel.destroy(); this.shopPanel = null; return; } // Create shop panel container - position near button but not covering it this.shopPanel = this.add.container(950, 400).setDepth(100); // Set higher depth so it appears on top // Make the panel draggable this.makeContainerDraggable(this.shopPanel, "Item Shop"); // No need for full screen overlay since panel is now draggable // Create a wider panel with space for two columns const panelBg = this.add.graphics(); panelBg.fillStyle(0x1E293B, 0.95); panelBg.fillRoundedRect(-450, -300, 850, 550, 15); panelBg.lineStyle(3, 0x4CAF50); // Green border panelBg.strokeRoundedRect(-450, -300, 850, 550, 15); // Panel header const headerBg = this.add.graphics(); headerBg.fillStyle(0x388E3C, 1); // Darker green headerBg.fillRoundedRect(-450, -300, 850, 60, { tl: 15, tr: 15, bl: 0, br: 0 }); // Metallic shine on header const headerShine = this.add.graphics(); headerShine.fillStyle(0xFFFFFF, 0.1); headerShine.fillRoundedRect(-450, -300, 850, 25, { tl: 15, tr: 15, bl: 0, br: 0 }); // Shop title with industrial style const title = this.add.text(-150, -270, 'FACTORY UPGRADES SHOP', { fontSize: '24px', fontStyle: 'bold', fill: '#FFFFFF', stroke: '#1B5E20', strokeThickness: 4 }); // Add drag handle visual cue like other panels const dragHandle = this.add.graphics(); dragHandle.fillStyle(0x4CAF50, 0.4); dragHandle.fillRect(-65, -290, 16, 30); dragHandle.fillRect(-45, -290, 16, 30); dragHandle.lineStyle(1, 0x94a3b8); dragHandle.strokeRect(-65, -290, 16, 30); dragHandle.strokeRect(-45, -290, 16, 30); this.shopPanel.add(dragHandle); // Add column divider const divider = this.add.graphics(); divider.lineStyle(2, 0x388E3C, 0.7); divider.lineBetween(-25, -240, -25, 240); // Add subtle separator details for (let y = -220; y < 240; y += 40) { divider.fillStyle(0x4CAF50, 0.5); divider.fillCircle(-25, y, 3); } // Right column with info panel - positioned in the right column const infoPanelBg = this.add.graphics(); infoPanelBg.fillStyle(0x283548, 0.7); infoPanelBg.fillRoundedRect(10, -240, 380, 120, 10); infoPanelBg.lineStyle(1, 0x4CAF50, 0.5); infoPanelBg.strokeRoundedRect(10, -240, 380, 120, 10); // Add info panel title const infoPanelTitle = this.add.text(200, -230, 'AVAILABLE RESOURCES', { fontSize: '16px', fontStyle: 'bold', fill: '#94A3B8', }).setOrigin(0.5); // Currency displays - now in right column const pointsDisplay = this.add.text(200, -200, `Prestige Points: ${this.formatNumber(this.prestigePoints)}`, { fontSize: '18px', fill: '#f8bbd0', fontStyle: 'bold' }).setOrigin(0.5); const energyDisplay = this.add.text(200, -170, `Energy: ${this.formatNumber(this.energy)}`, { fontSize: '18px', fill: '#fef3c7', fontStyle: 'bold' }).setOrigin(0.5); const scoreDisplay = this.add.text(200, -140, `Score: ${this.formatNumber(this.score)}`, { fontSize: '18px', fill: '#e2e8f0', fontStyle: 'bold' }).setOrigin(0.5); // Add a back button in the right column const backButton = this.createFactoryButton(200, 200, 160, 60, 0x388E3C, 0x2E7D32); const backButtonText = this.add.text(0, 0, 'BACK', { fontSize: '24px', fontStyle: 'bold', fill: '#FFFFFF', align: 'center' }).setOrigin(0.5); // Add arrow icon to back button const backArrow = this.add.graphics(); backArrow.fillStyle(0xFFFFFF, 1); backArrow.beginPath(); backArrow.moveTo(-40, 0); backArrow.lineTo(-25, -10); backArrow.lineTo(-25, 10); backArrow.closePath(); backArrow.fill(); backArrow.fillRect(-25, -3, 15, 6); backButton.add([backButtonText, backArrow]); // Make back button functional backButton.on('pointerdown', () => { this.shopPanel.destroy(); this.shopPanel = null; }); // Close button (X in top right) const closeBtn = this.add.graphics(); closeBtn.fillStyle(0xEF4444, 1); closeBtn.fillCircle(320, -270, 20); closeBtn.fillStyle(0xFFFFFF, 1); closeBtn.fillRect(310, -275, 20, 4); closeBtn.rotation = Math.PI / 4; closeBtn.fillRect(310, -275, 20, 4); closeBtn.rotation = -Math.PI / 4; // Make close button interactive const closeHitArea = this.add.circle(320, -270, 20); closeHitArea.setInteractive(); closeHitArea.on('pointerdown', () => { this.shopPanel.destroy(); this.shopPanel = null; }); // Add shop items - now in the left column with adjusted width const itemsStartY = -240; const itemSpacing = 70; const itemButtons = []; this.shopItems.forEach((item, index) => { const y = itemsStartY + (index * itemSpacing); // Item container with industrial theme - positioned in left column const itemContainer = this.add.container(-225, y); // Item background - narrower to fit in column const itemBg = this.add.graphics(); itemBg.fillStyle(0x334155, 0.8); itemBg.fillRoundedRect(-200, -30, 400, 60, 10); itemBg.lineStyle(2, 0x60A5FA); itemBg.strokeRoundedRect(-200, -30, 400, 60, 10); // Item icon background - adjusted position for left column const iconBg = this.add.graphics(); iconBg.fillStyle(0x2563EB, 0.7); iconBg.fillCircle(-175, 0, 20); // Item icon text (emoji) const iconText = this.add.text(-175, 0, item.icon, { fontSize: '24px' }).setOrigin(0.5); // Item name const nameText = this.add.text(-150, -15, item.name, { fontSize: '20px', fontStyle: 'bold', fill: '#FFFFFF' }); // Item description - shorter to fit in column const descText = this.add.text(-150, 10, item.description, { fontSize: '12px', fill: '#94A3B8' }); // Level display - adjusted position for left column const levelText = this.add.text(80, -15, `Level: ${item.level}/${item.maxLevel}`, { fontSize: '16px', fill: item.level === item.maxLevel ? '#4ADE80' : '#FFFFFF' }); // Current effect display const effectDescription = this.getEffectDescription(item); const effectText = this.add.text(80, 10, effectDescription, { fontSize: '12px', fill: '#94A3B8' }); // Purchase button - adjusted position for left column let purchaseButton; if (item.level < item.maxLevel) { // Check if player can afford the item based on currency type let canAfford = false; if (item.currency === 'prestige') { canAfford = this.prestigePoints >= item.cost; } else if (item.currency === 'energy') { canAfford = this.energy >= item.cost; } else if (item.currency === 'score') { canAfford = this.score >= item.cost; } const buttonColor = canAfford ? 0x4CAF50 : 0x9E9E9E; const buttonShadow = canAfford ? 0x388E3C : 0x616161; purchaseButton = this.createFactoryButton(165, 0, 70, 40, buttonColor, buttonShadow); // Show correct currency with cost const currencySymbol = item.currency === 'prestige' ? 'PP' : (item.currency === 'energy' ? '⚡' : '$'); const costText = this.add.text(0, 0, item.cost + ' ' + currencySymbol, { fontSize: '16px', fontStyle: 'bold', fill: '#FFFFFF' }).setOrigin(0.5); purchaseButton.add(costText); // Make button interactive only if player has enough of the required currency if (canAfford) { purchaseButton.on('pointerdown', () => { this.purchaseItem(item); // Update shop display this.shopPanel.destroy(); this.showItemShop(); }); } else { // Visually disable the button purchaseButton.alpha = 0.7; } } else { // Max level reached purchaseButton = this.createFactoryButton(165, 0, 70, 40, 0x4CAF50, 0x388E3C); const maxText = this.add.text(0, 0, 'MAX', { fontSize: '16px', fontStyle: 'bold', fill: '#FFFFFF' }).setOrigin(0.5); purchaseButton.add(maxText); } // Add all elements to item container itemContainer.add([itemBg, iconBg, iconText, nameText, descText, levelText, effectText, purchaseButton]); // Store item container for later addition itemButtons.push(purchaseButton); itemContainer.purchaseButton = purchaseButton; itemButtons.push(itemContainer); }); // Add a right panel title section for item details const detailPanelBg = this.add.graphics(); detailPanelBg.fillStyle(0x283548, 0.7); detailPanelBg.fillRoundedRect(10, -100, 380, 280, 10); detailPanelBg.lineStyle(1, 0x4CAF50, 0.5); detailPanelBg.strokeRoundedRect(10, -100, 380, 280, 10); // Add detail panel title const detailTitle = this.add.text(200, -90, 'ITEM DETAILS', { fontSize: '16px', fontStyle: 'bold', fill: '#94A3B8', }).setOrigin(0.5); // Add shop description const shopDescText = this.add.text(200, -60, 'Purchase factory upgrades to\nimprove your production efficiency.', { fontSize: '16px', fill: '#FFFFFF', align: 'center' }).setOrigin(0.5); // Add item benefits section const benefitsText = this.add.text(200, 0, 'UPGRADE BENEFITS:\n\n• Increase score multipliers\n• Unlock auto-upgraders\n• Boost energy production\n• Enhance prestige gains\n• Convert resources efficiently', { fontSize: '14px', fill: '#94A3B8', align: 'center' }).setOrigin(0.5); // Footer note in right column const footerText = this.add.text(200, 100, 'All upgrades persist through prestige resets', { fontSize: '14px', fontStyle: 'italic', fill: '#FFFFFF' }).setOrigin(0.5); // Add all elements to shop panel this.shopPanel.add([ panelBg, headerBg, headerShine, title, divider, infoPanelBg, infoPanelTitle, pointsDisplay, energyDisplay, scoreDisplay, detailPanelBg, detailTitle, shopDescText, benefitsText, closeBtn, closeHitArea, footerText, backButton ]); // Now add all item containers on top of the panel for (let i = 0; i < itemButtons.length; i++) { if (itemButtons[i].purchaseButton === undefined) continue; // Skip if not an item container this.shopPanel.add(itemButtons[i]); } // Panel is already interactive from makeContainerDraggable // We just need to prevent clicks from passing through this.shopPanel.setInteractive(new Phaser.Geom.Rectangle(-450, -300, 850, 550), Phaser.Geom.Rectangle.Contains, { useHandCursor: false }); // Add opening animation this.shopPanel.setScale(0.8); this.shopPanel.alpha = 0; this.tweens.add({ targets: this.shopPanel, scale: 1, alpha: 1, duration: 300, ease: 'Back.easeOut', onComplete: () => { // Ensure panel remains visible and interactive this.shopPanel.setDepth(100); } }); } // Get item effect description based on type getEffectDescription(item) { switch (item.id) { case 'autoclicker': return `Click rate: ${item.effect(item.level).toFixed(1)}/sec`; case 'scoreBooster': return `Score mult: ×${item.effect(item.level).toFixed(1)}`; case 'generatorBoost': return `Gen speed: ×${item.effect(item.level).toFixed(2)}`; case 'prestigeMultiplier': return `Prestige gain: ×${item.effect(item.level).toFixed(2)}`; default: return `Effect: ${item.effect(item.level).toFixed(2)}`; } } // Purchase an item from the shop purchaseItem(item) { // Check if player has enough of the required currency let canPurchase = false; if (item.currency === 'prestige' && this.prestigePoints >= item.cost) { this.prestigePoints -= item.cost; canPurchase = true; } else if (item.currency === 'energy' && this.energy >= item.cost) { this.energy -= item.cost; canPurchase = true; } else if (item.currency === 'score' && this.score >= item.cost) { this.score -= item.cost; canPurchase = true; } if (canPurchase && item.level < item.maxLevel) { item.level++; // Apply effects based on item type switch (item.id) { case 'autoclicker': this.setupAutoClicker(item.effect(item.level)); break; case 'tempAutoclicker': this.setupTempAutoClicker(item.effect(item.level), item.duration); break; case 'energyBooster': // Instantly add energy this.energy += item.effect(item.level); break; case 'scoreExchanger': // Convert energy to score this.score += item.effect(item.level); break; case 'scoreBooster': // This multiplier is applied in increaseScore method break; case 'generatorBoost': // This increases generator growth rate this.generatorGrowthRate = 0.05 * item.effect(item.level); break; case 'prestigeMultiplier': // This factor is applied in calculatePrestigePoints break; } // Show success notification this.showPurchaseNotification(item); // Update displays this.updateAllDisplays(); } } // Setup the autoclicker based on current level setupAutoClicker(clicksPerSecond) { // Clear any existing autoclicker timer if (this.autoclickerTimer) { this.autoclickerTimer.remove(); } if (clicksPerSecond > 0) { const delay = 1000 / clicksPerSecond; this.autoclickerTimer = this.time.addEvent({ delay: delay, callback: this.autoClickUpgrade, callbackScope: this, loop: true }); this.autoclickerActive = true; } } // Setup temporary autoclicker that runs for a specified duration setupTempAutoClicker(clicksPerSecond, duration) { // Clear any existing temporary autoclicker timer if (this.tempAutoclickerTimer) { this.tempAutoclickerTimer.remove(); } if (clicksPerSecond > 0) { const delay = 1000 / clicksPerSecond; // Create the autoclicker this.tempAutoclickerTimer = this.time.addEvent({ delay: delay, callback: this.autoClickUpgrade, callbackScope: this, loop: true }); // Show notification that temp autoclicker is active this.showNotification('Temporary Autoclicker Active!', 'Will run for 60 seconds', 0x4CAF50); // Set timer to remove the autoclicker after duration this.time.delayedCall(duration, () => { if (this.tempAutoclickerTimer) { this.tempAutoclickerTimer.remove(); this.tempAutoclickerTimer = null; // Show notification that temp autoclicker has ended this.showNotification('Temporary Autoclicker Ended', 'Purchase again to reactivate', 0xF44336); } }, [], this); } } // Generic notification method showNotification(title, message, color) { // Create notification container const notification = this.add.container(400, -50); // Background const notifBg = this.add.graphics(); notifBg.fillStyle(color, 0.9); notifBg.fillRoundedRect(-150, -35, 300, 70, 10); notifBg.lineStyle(2, 0xFFFFFF, 0.7); notifBg.strokeRoundedRect(-150, -35, 300, 70, 10); // Title text const titleText = this.add.text(0, -15, title, { fontSize: '18px', fontStyle: 'bold', fill: '#FFFFFF', align: 'center' }).setOrigin(0.5); // Message text const messageText = this.add.text(0, 10, message, { fontSize: '14px', fill: '#FFFFFF', align: 'center' }).setOrigin(0.5); notification.add([notifBg, titleText, messageText]); // Animation this.tweens.add({ targets: notification, y: 100, duration: 800, ease: 'Bounce.easeOut', onComplete: () => { this.time.delayedCall(2000, () => { this.tweens.add({ targets: notification, y: -50, alpha: 0, duration: 500, ease: 'Back.easeIn', onComplete: () => notification.destroy() }); }); } }); } // Function for autoclicker to use autoClickUpgrade() { if (this.score >= this.upgradeCost) { this.score -= this.upgradeCost; this.baseIncrement += 1; this.upgradeCost *= 1.25; this.updateAllDisplays(); } } // Show a notification when an item is purchased showPurchaseNotification(item) { // Create notification container const notification = this.add.container(400, -50); // Background const notifBg = this.add.graphics(); notifBg.fillStyle(0x388E3C, 0.9); notifBg.fillRoundedRect(-150, -25, 300, 50, 10); notifBg.lineStyle(2, 0x4CAF50); notifBg.strokeRoundedRect(-150, -25, 300, 50, 10); // Purchase text const purchaseText = this.add.text(0, 0, `Purchased: ${item.name} (Lv. ${item.level})`, { fontSize: '18px', fontStyle: 'bold', fill: '#FFFFFF', align: 'center' }).setOrigin(0.5); notification.add([notifBg, purchaseText]); // Animation this.tweens.add({ targets: notification, y: 100, duration: 800, ease: 'Bounce.easeOut', onComplete: () => { this.time.delayedCall(1500, () => { this.tweens.add({ targets: notification, y: -50, alpha: 0, duration: 500, ease: 'Back.easeIn', onComplete: () => notification.destroy() }); }); } }); } // Method to check achievements checkAchievements() { let newCompletions = false; this.achievements.forEach(achievement => { if (!achievement.completed && achievement.condition()) { achievement.completed = true; this.achievementsCompleted++; this.showAchievementNotification(achievement); achievement.rewardFunction(); newCompletions = true; // Update relevant displays after reward this.updateAllDisplays(); } }); if (newCompletions) { this.updateAchievementDisplay(); } } // Method to show achievement notification showAchievementNotification(achievement) { // Create notification container that slides in from the top const notificationContainer = this.add.container(400, -80); // Create background with industrial theme const background = this.add.graphics(); background.fillStyle(0x1E293B, 0.9); background.fillRoundedRect(-200, -40, 400, 80, 10); background.lineStyle(2, 0x475569); background.strokeRoundedRect(-200, -40, 400, 80, 10); // Add metallic shine const shine = this.add.graphics(); shine.fillStyle(0xffffff, 0.1); shine.fillRoundedRect(-200, -40, 400, 20, { tl: 10, tr: 10, bl: 0, br: 0 }); // Achievement icon - trophy const icon = this.add.graphics(); // Trophy base icon.fillStyle(0xFFC107); icon.fillRect(-170, -15, 30, 20); // Trophy cup icon.fillStyle(0xFFD54F); icon.fillRect(-170, -30, 30, 20); icon.fillCircle(-155, -30, 15); icon.fillCircle(-155, -30, 15); // Trophy handles icon.fillStyle(0xFFB300); icon.fillCircle(-175, -20, 6); icon.fillCircle(-135, -20, 6); // Achievement title const title = this.add.text(-130, -30, 'Achievement Unlocked!', { fontSize: '18px', fill: '#60A5FA', fontStyle: 'bold' }); // Achievement name const name = this.add.text(-130, -5, achievement.name, { fontSize: '22px', fill: '#ffffff', fontStyle: 'bold' }); // Achievement reward const reward = this.add.text(-130, 20, 'Reward: ' + achievement.reward, { fontSize: '16px', fill: '#FBBF24', fontStyle: 'bold' }); // Add all elements to container notificationContainer.add([background, shine, icon, title, name, reward]); // Animate notification sliding in this.tweens.add({ targets: notificationContainer, y: 80, duration: 800, ease: 'Bounce.easeOut', onComplete: () => { // Wait and slide out this.time.delayedCall(3000, () => { this.tweens.add({ targets: notificationContainer, y: -80, duration: 800, ease: 'Back.easeIn', onComplete: () => { notificationContainer.destroy(); } }); }); } }); } // Method to show achievement panel showAchievementPanel() { // If panel already exists, destroy it first if (this.achievementPanel) { this.achievementPanel.destroy(); return; } // Create panel container this.achievementPanel = this.add.container(400, 300); // Semi-transparent background using game width and height const bgOverlay = this.add.rectangle(0, 0, this.cameras.main.width, this.cameras.main.height, 0x000000, 0.7); // Panel background with industrial theme const panelBg = this.add.graphics(); panelBg.fillStyle(0x1E293B, 0.95); panelBg.fillRoundedRect(-350, -250, 700, 500, 15); panelBg.lineStyle(3, 0x475569); panelBg.strokeRoundedRect(-350, -250, 700, 500, 15); // Panel header const headerBg = this.add.graphics(); headerBg.fillStyle(0x334155, 1); headerBg.fillRoundedRect(-350, -250, 700, 60, { tl: 15, tr: 15, bl: 0, br: 0 }); // Panel title const title = this.add.text(0, -220, 'ACHIEVEMENTS', { fontSize: '32px', fill: '#ffffff', fontStyle: 'bold' }).setOrigin(0.5); // Close button (X in top right) const closeBtn = this.add.graphics(); closeBtn.fillStyle(0xEF4444, 1); closeBtn.fillCircle(320, -220, 20); closeBtn.fillStyle(0xFFFFFF, 1); closeBtn.fillRect(310, -225, 20, 4); closeBtn.rotation = Math.PI / 4; closeBtn.fillRect(310, -225, 20, 4); closeBtn.rotation = -Math.PI / 4; // Make close button interactive const closeHitArea = this.add.circle(320, -220, 20); closeHitArea.setInteractive(); closeHitArea.on('pointerdown', () => { this.achievementPanel.destroy(); this.achievementPanel = null; }); // Add back button at bottom of panel const backButton = this.createFactoryButton(0, 220, 160, 60, 0x3B82F6, 0x2563EB); const backButtonText = this.add.text(0, 0, 'BACK', { fontSize: '24px', fill: '#ffffff', fontStyle: 'bold' }).setOrigin(0.5); // Add arrow icon to back button const backArrow = this.add.graphics(); backArrow.fillStyle(0xFFFFFF, 1); backArrow.beginPath(); backArrow.moveTo(-40, 0); backArrow.lineTo(-25, -10); backArrow.lineTo(-25, 10); backArrow.closePath(); backArrow.fill(); backArrow.fillRect(-25, -3, 15, 6); backButton.add([backButtonText, backArrow]); // Make back button functional backButton.on('pointerdown', () => { this.achievementPanel.destroy(); this.achievementPanel = null; }); // Achievement progress const progress = this.add.text(0, -180, `Progress: ${this.achievementsCompleted}/${this.achievementTotalCount} Achievements Completed`, { fontSize: '22px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Progress bar const progressBarBg = this.add.rectangle(0, -150, 500, 20, 0x475569); const progressBarFg = this.add.rectangle(-250 + (this.achievementsCompleted / this.achievementTotalCount * 500) / 2, -150, this.achievementsCompleted / this.achievementTotalCount * 500, 20, 0x3B82F6); progressBarFg.setOrigin(0, 0.5); // Add initial elements to panel this.achievementPanel.add([ bgOverlay, panelBg, headerBg, title, closeBtn, closeHitArea, progress, progressBarBg, progressBarFg, backButton ]); // Create scrollable achievement list const achievementsY = -100; const spacing = 70; this.achievements.forEach((achievement, index) => { const y = achievementsY + (index * spacing); // Skip if achievement would be outside visible area if (y > 220) return; // Achievement container const achievementBg = this.add.graphics(); achievementBg.fillStyle(0x334155, 0.8); achievementBg.fillRoundedRect(-325, y - 25, 650, 60, 8); if (achievement.completed) { // Golden border for completed achievements achievementBg.lineStyle(2, 0xFBBF24); } else { achievementBg.lineStyle(2, 0x94A3B8); } achievementBg.strokeRoundedRect(-325, y - 25, 650, 60, 8); // Achievement name const name = this.add.text(-310, y - 15, achievement.name, { fontSize: '22px', fill: achievement.completed ? '#FBBF24' : '#ffffff', fontStyle: 'bold' }); // Achievement description const description = this.add.text(-310, y + 10, achievement.description, { fontSize: '16px', fill: '#94A3B8' }); // Achievement progress bar const progressBg = this.add.rectangle(220, y, 100, 12, 0x475569); const progressFg = this.add.rectangle(170 + (achievement.progress() * 100) / 2, y, achievement.progress() * 100, 12, achievement.completed ? 0x22C55E : 0x3B82F6); progressFg.setOrigin(0, 0.5); // Status text const status = this.add.text(220, y + 20, achievement.completed ? 'COMPLETED' : Math.floor(achievement.progress() * 100) + '%', { fontSize: '14px', fill: achievement.completed ? '#22C55E' : '#94A3B8' }).setOrigin(0.5); this.achievementPanel.add([achievementBg, name, description, progressBg, progressFg, status]); }); } // Method to update achievement display when progress changes updateAchievementDisplay() { if (this.achievementPanel) { this.achievementPanel.destroy(); this.showAchievementPanel(); } } // Method to generate energy generateEnergy() { // Check for energy capacitor shop item const energyCapacitor = this.shopItems.find(item => item.id === 'energyCapacitor'); const capacitorMultiplier = energyCapacitor ? energyCapacitor.effect(energyCapacitor.level) : 1; // Calculate energy gain with all multipliers const energyGain = this.energyGainRate * capacitorMultiplier * this.energyEfficiency * (1 + (this.prestigeBoostLevel * 0.1)); this.energy += energyGain; // Add a visual effect when energy increases if (energyGain > 0) { // Create a small pulse effect near the energy display const pulse = this.add.circle(40, 194, 5, 0xfacc15, 0.8); this.tweens.add({ targets: pulse, alpha: 0, scale: 2, duration: 800, onComplete: () => pulse.destroy() }); } this.updateAllDisplays(); // Check for achievements related to energy this.checkAchievements(); } } const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 1280, height: 720, scene: Example }; window.phaserGame = new Phaser.Game(config);