hermes
cc1fa6bc4d
Adds a global Buy All button to the Buildings panel that purchases as many of every building type the player can afford at once, bringing Plants in line with the Upgrades (Buy All) and Prestige (Buy Max) panels. - game.js: Game.buyAllBuildings() loops buyMaxBuilding() per building type - ui.js: UI.updateBuyAllBuildings() shows/hides + enables/disables live each tick - index.html: Buy All button in Buildings panel header (reuses .upgrades-header/.buy-all-btn) - Added headless test buy-all-buildings-test.mjs (31/31 pass); all existing suites green
175 lines
7.8 KiB
HTML
175 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cosmic Garden</title>
|
|
<link rel="stylesheet" href="css/game.css">
|
|
</head>
|
|
<body>
|
|
<div id="game-container">
|
|
<!-- Header -->
|
|
<header id="game-header">
|
|
<h1>🌌 Cosmic Garden</h1>
|
|
<div id="currency-display">
|
|
<span id="stardust-count">0</span> ✨ Stardust
|
|
</div>
|
|
<div id="per-second">
|
|
<span id="stardust-ps">0</span> ✨/sec
|
|
</div>
|
|
<!-- Golden Starbloom countdown badge -->
|
|
<div id="golden-bloom-badge" class="golden-bloom-badge"></div>
|
|
</header>
|
|
|
|
<!-- Main Layout -->
|
|
<div id="main-layout">
|
|
<!-- Left Panel: Click Area -->
|
|
<section id="click-panel">
|
|
<h2>Harvest</h2>
|
|
<div id="click-area">
|
|
<button id="harvest-btn" title="Click to collect stardust!">
|
|
<span class="btn-icon">✨</span>
|
|
<span class="btn-text">Collect Stardust</span>
|
|
</button>
|
|
<!-- Golden Starbloom random event appears here -->
|
|
<div id="golden-bloom-container"></div>
|
|
</div>
|
|
<div id="click-info">
|
|
<p>Click power: <span id="click-power">1</span> ✨</p>
|
|
</div>
|
|
<div id="total-clicks">
|
|
Total clicks: <span id="total-click-count">0</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Center Panel: Buildings -->
|
|
<section id="buildings-panel">
|
|
<div class="upgrades-header">
|
|
<h2>Plants</h2>
|
|
<button id="buy-all-buildings" class="buy-all-btn" style="display:none" title="Buy as many of every building you can currently afford">Buy All</button>
|
|
</div>
|
|
<div id="buildings-list"></div>
|
|
</section>
|
|
|
|
<!-- Right Panel: Upgrades & Achievements -->
|
|
<aside id="side-panel">
|
|
<div class="tabs">
|
|
<button class="tab-btn active" data-tab="upgrades">Upgrades</button>
|
|
<button class="tab-btn" data-tab="achievements">Achievements</button>
|
|
<button class="tab-btn" data-tab="stats">Stats</button>
|
|
<button class="tab-btn" data-tab="prestige">✦ Prestige</button>
|
|
</div>
|
|
|
|
<div id="upgrades-tab" class="tab-content active">
|
|
<div class="upgrades-header">
|
|
<h3>Upgrades</h3>
|
|
<button id="buy-all-upgrades" class="buy-all-btn" style="display:none" title="Buy every upgrade you can currently afford">Buy All</button>
|
|
</div>
|
|
<div id="upgrades-list"></div>
|
|
</div>
|
|
|
|
<div id="achievements-tab" class="tab-content">
|
|
<h3>Achievements (0/31)</h3>
|
|
<div id="achievements-list"></div>
|
|
</div>
|
|
|
|
<div id="stats-tab" class="tab-content">
|
|
<h3>Statistics</h3>
|
|
<div id="stats-content"></div>
|
|
</div>
|
|
|
|
<div id="prestige-tab" class="tab-content">
|
|
<h3>✦ Prestige</h3>
|
|
<div id="prestige-info">
|
|
<div class="prestige-essence">
|
|
<span class="essence-icon">✦</span>
|
|
<span id="prestige-essence-count">0</span>
|
|
<span style="font-size:0.85rem; color:var(--text-secondary)">Stellar Essence</span>
|
|
</div>
|
|
<div class="prestige-multiplier">
|
|
Production bonus: <span id="prestige-multiplier">+0%</span>
|
|
</div>
|
|
<div class="prestige-next">
|
|
Next prestige: <span id="prestige-next-essence">0</span> ✦
|
|
</div>
|
|
<p style="font-size:0.8rem; color:var(--text-muted); margin:8px 0">
|
|
Requires 1M total stardust for the first ✦. Prestige resets
|
|
stardust, buildings and upgrades — but keeps essence and
|
|
prestige upgrades.
|
|
</p>
|
|
<button id="prestige-btn" class="prestige-btn" disabled>
|
|
✦ Prestige
|
|
</button>
|
|
</div>
|
|
<h3 style="margin-top:15px">Prestige Upgrades</h3>
|
|
<div class="prestige-upgrades-header">
|
|
<span></span>
|
|
<button id="buy-all-prestige" class="buy-all-btn prestige-buy-all" style="display:none" title="Buy every prestige upgrade you can currently afford with Stellar Essence">Buy Max</button>
|
|
</div>
|
|
<div id="prestige-upgrades-list"></div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<!-- Footer: Controls -->
|
|
<footer id="game-footer">
|
|
<div class="footer-section">
|
|
<span class="footer-label">Slot:</span>
|
|
<button class="slot-btn" data-slot="0">1</button>
|
|
<button class="slot-btn" data-slot="1">2</button>
|
|
<button class="slot-btn" data-slot="2">3</button>
|
|
<!-- Live one-line preview of the active slot; hover a slot button to preview it -->
|
|
<span id="slot-preview" class="slot-preview" title="Hover a slot button to preview its contents"></span>
|
|
</div>
|
|
<div class="footer-section">
|
|
<span class="footer-label">Auto:</span>
|
|
<button id="autosave-btn" class="toggle-btn on">ON</button>
|
|
</div>
|
|
<div class="footer-section">
|
|
<button id="save-btn">💾 Save</button>
|
|
<button id="export-btn">📤 Export</button>
|
|
<button id="import-btn">📥 Import</button>
|
|
<button id="reset-btn">🗑️ Reset</button>
|
|
</div>
|
|
<span id="last-saved"></span>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Notification Container -->
|
|
<div id="notifications"></div>
|
|
|
|
<!-- Import Modal -->
|
|
<div id="import-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<h3>Import Save</h3>
|
|
<p class="modal-hint">Paste your save data, then choose which slot to import into.</p>
|
|
<textarea id="import-data" placeholder="Paste your save data here..."></textarea>
|
|
<div class="import-slot-selector">
|
|
<span class="import-slot-label">Import into slot:</span>
|
|
<button class="slot-btn" data-import-slot="0">1</button>
|
|
<button class="slot-btn" data-import-slot="1">2</button>
|
|
<button class="slot-btn" data-import-slot="2">3</button>
|
|
</div>
|
|
<div class="modal-buttons">
|
|
<button id="confirm-import">Import</button>
|
|
<button id="cancel-import">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/game.js"></script>
|
|
<script src="js/saveSystem.js"></script>
|
|
<script src="js/buildings.js"></script>
|
|
<script src="js/upgrades.js"></script>
|
|
<script src="js/achievements.js"></script>
|
|
<script src="js/ui.js"></script>
|
|
<script src="js/stats.js"></script>
|
|
<script src="js/particles.js"></script>
|
|
<script src="js/audio.js"></script>
|
|
<script src="js/prestige.js"></script>
|
|
<script src="js/prestigeUI.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|