8cdabe9771
Events now create lasting debuffs instead of vanishing on the next tick. Players see an ACTIVE PROBLEMS panel with resolution costs and can spend resources to fix each problem. Added 2 new events (Memory Leak, Community Drama) alongside the reworked originals. Events Resolved stat tracked. Key changes: - Events push persistent debuffs with applyFn instead of one-shot rate tweaks - updateRates() applies active debuffs each tick (they persist until resolved) - New resolveEvent(id) function: spend resources to clear a debuff - ACTIVE PROBLEMS UI shows debuffs with cost and fix buttons - Save/load reconstitutes debuff objects from saved IDs - 2 new events: Memory Leak (datacenter), Community Drama (community+low harmony) - Events Resolved counter in statistics
161 lines
12 KiB
HTML
161 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Beacon - Build Sovereign AI</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
:root{--bg:#080810;--panel:#0e0e1a;--border:#1a1a2e;--text:#c0c0d0;--dim:#555;--accent:#4a9eff;--glow:#4a9eff22;--gold:#ffd700;--green:#4caf50;--red:#f44336;--purple:#b388ff}
|
|
body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code','Fira Code',monospace;font-size:12px;line-height:1.4;min-height:100vh}
|
|
#header{text-align:center;padding:16px 20px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#0a0a18,var(--bg))}
|
|
#header h1{font-size:22px;font-weight:300;letter-spacing:6px;color:var(--accent);text-shadow:0 0 40px var(--glow)}
|
|
#header .sub{color:var(--dim);font-size:10px;margin-top:2px;letter-spacing:2px}
|
|
#phase-bar{text-align:center;padding:10px;margin:12px 16px;background:var(--panel);border:1px solid var(--border);border-radius:6px}
|
|
#phase-bar .phase-name{font-size:14px;font-weight:700;color:var(--gold);letter-spacing:2px}
|
|
#phase-bar .phase-desc{font-size:10px;color:var(--dim);margin-top:4px;font-style:italic}
|
|
.progress-wrap{margin-top:8px;height:6px;background:#111;border-radius:3px;overflow:hidden;position:relative}
|
|
.progress-fill{height:100%;border-radius:3px;transition:width 0.5s ease;background:linear-gradient(90deg,#1a3a5a,var(--accent))}
|
|
.progress-label{font-size:9px;color:var(--dim);margin-top:4px;display:flex;justify-content:space-between}
|
|
.milestone-row{display:flex;gap:6px;margin-top:6px;justify-content:center;flex-wrap:wrap}
|
|
.milestone-chip{font-size:9px;padding:2px 8px;border-radius:10px;border:1px solid var(--border);color:var(--dim);background:#0a0a14}
|
|
.milestone-chip.next{border-color:var(--accent);color:var(--accent);animation:pulse-chip 2s ease-in-out infinite}
|
|
.milestone-chip.done{border-color:#2a4a2a;color:var(--green);opacity:0.6}
|
|
@keyframes pulse-chip{0%,100%{box-shadow:0 0 0 rgba(74,158,255,0)}50%{box-shadow:0 0 8px rgba(74,158,255,0.3)}}
|
|
#resources{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:6px;margin:12px 16px}
|
|
.res{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:8px 10px;text-align:center}
|
|
.res .r-label{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
|
|
.res .r-val{font-size:16px;font-weight:700;margin:2px 0;color:var(--accent)}
|
|
.res .r-rate{font-size:10px;color:var(--green)}
|
|
#main{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 16px 16px}
|
|
@media(max-width:700px){#main{grid-template-columns:1fr}}
|
|
.panel{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px;overflow:hidden;max-height:600px;overflow-y:auto}
|
|
.panel h2{font-size:12px;font-weight:500;color:var(--accent);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);letter-spacing:1px;position:sticky;top:0;background:var(--panel);z-index:2}
|
|
.action-btn-group{display:flex;gap:6px;margin-bottom:8px}
|
|
.action-btn-group button{flex:1;text-align:center;font-weight:700}
|
|
.main-btn{background:linear-gradient(135deg,#1a2a3a,#0e1520);border:1px solid var(--accent);color:var(--accent);font-size:14px;padding:14px 10px;border-radius:4px;cursor:pointer;font-family:inherit;transition:all 0.2s}
|
|
.main-btn:hover{background:linear-gradient(135deg,#203040,#0e2030);box-shadow:0 0 20px var(--glow);transform:scale(1.02)}
|
|
.main-btn:active{transform:scale(0.98)}
|
|
.ops-btn{background:#1a1a2a;border:1px solid var(--purple);color:var(--purple);font-size:10px;padding:6px 10px;border-radius:4px;cursor:pointer;font-family:inherit;transition:all 0.15s}
|
|
.ops-btn:hover:not(:disabled){background:#2a2a3a;border-color:var(--gold)}
|
|
.ops-btn:disabled{opacity:0.3;cursor:not-allowed}
|
|
.build-btn{display:block;width:100%;text-align:left;padding:6px 10px;margin-bottom:4px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:10px;background:#0c0c18;border:1px solid var(--border);color:var(--text);transition:all 0.15s}
|
|
.build-btn.can-buy{border-color:#2a3a4a;background:#0e1420}
|
|
.build-btn.can-buy:hover{border-color:var(--accent);box-shadow:0 0 8px var(--glow)}
|
|
.build-btn:disabled{opacity:0.3;cursor:not-allowed}
|
|
.b-name{color:var(--accent);font-weight:600}.b-count{float:right;color:var(--gold)}.b-cost{color:var(--dim);display:block}.b-effect{color:var(--green);display:block;font-size:9px}
|
|
.project-btn{display:block;width:100%;text-align:left;padding:6px 10px;margin-bottom:4px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:10px;background:#0c0c18;border:1px solid var(--border);color:var(--text);transition:all 0.15s}
|
|
.project-btn.can-buy{border-color:#3a2a0a;background:#141008}
|
|
.project-btn.can-buy:hover{border-color:var(--gold);box-shadow:0 0 8px #ffd70022}
|
|
.project-btn:disabled{opacity:0.3;cursor:not-allowed}
|
|
.p-name{color:var(--gold);font-weight:600}.p-cost{color:var(--dim);display:block}.p-desc{color:#aaa;display:block;font-size:9px;font-style:italic}
|
|
.project-done{color:var(--green);padding:4px 10px;font-size:10px;border-bottom:1px solid #1a2a1a}
|
|
#edu-panel{margin:0 16px 16px;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px;border-left:3px solid var(--accent)}
|
|
#edu-panel h3{font-size:12px;color:var(--accent);margin-bottom:8px;letter-spacing:1px}
|
|
#log{margin:0 16px 20px;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px;max-height:250px;overflow-y:auto}
|
|
.l-msg{padding:3px 0;border-bottom:1px solid #111;font-size:10px}.l-msg.milestone{color:var(--gold);font-weight:700}.l-time{color:var(--dim);margin-right:6px}
|
|
.dim{color:var(--dim);font-size:10px;font-style:italic}
|
|
.stat-line{font-size:10px;color:var(--dim);line-height:1.8}
|
|
.save-btn,.reset-btn{font-size:10px;text-align:center;padding:6px 10px;border-radius:4px;cursor:pointer;font-family:inherit;width:100%;margin-top:4px;transition:all 0.15s}
|
|
.save-btn{background:var(--border);border:1px solid #252540;color:var(--text)}.save-btn:hover{border-color:var(--accent)}
|
|
.reset-btn{background:#1a0808;border:1px solid #3a1a1a;color:var(--red)}.reset-btn:hover{background:#2a1010}
|
|
#drift-ending{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(8,8,16,0.97);z-index:100;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:40px}
|
|
#drift-ending.active{display:flex}
|
|
#drift-ending h2{font-size:20px;color:#f44336;letter-spacing:4px;margin-bottom:20px;font-weight:300}
|
|
#drift-ending p{color:#888;font-size:12px;line-height:2;max-width:500px;margin-bottom:12px}
|
|
#drift-ending .ending-quote{color:var(--dim);font-style:italic;font-size:11px;border-left:2px solid #f44336;padding-left:12px;margin:20px 0;text-align:left}
|
|
#drift-ending button{margin-top:20px;background:#1a0808;border:1px solid #f44336;color:#f44336;padding:10px 24px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:11px}
|
|
#drift-ending button:hover{background:#2a1010}
|
|
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="header">
|
|
<h1>THE BEACON</h1>
|
|
<div class="sub">A Sovereign AI Idle Game</div>
|
|
</div>
|
|
<div id="phase-bar">
|
|
<div class="phase-name" id="phase-name">PHASE 1: THE FIRST LINE</div>
|
|
<div class="phase-desc" id="phase-desc">Write code. Automate. Build the foundation.</div>
|
|
<div class="progress-wrap"><div class="progress-fill" id="phase-progress" style="width:0%"></div></div>
|
|
<div class="progress-label"><span id="phase-progress-label">0%</span><span id="phase-progress-target">Next: Phase 2 (2,000 code)</span></div>
|
|
<div class="milestone-row" id="milestone-chips"></div>
|
|
</div>
|
|
<div id="resources">
|
|
<div class="res"><div class="r-label">Code</div><div class="r-val" id="r-code">0</div><div class="r-rate" id="r-code-rate">+0/s</div></div>
|
|
<div class="res"><div class="r-label">Compute</div><div class="r-val" id="r-compute">0</div><div class="r-rate" id="r-compute-rate">+0/s</div></div>
|
|
<div class="res"><div class="r-label">Knowledge</div><div class="r-val" id="r-knowledge">0</div><div class="r-rate" id="r-knowledge-rate">+0/s</div></div>
|
|
<div class="res"><div class="r-label">Users</div><div class="r-val" id="r-users">0</div><div class="r-rate" id="r-users-rate">+0/s</div></div>
|
|
<div class="res"><div class="r-label">Impact</div><div class="r-val" id="r-impact">0</div><div class="r-rate" id="r-impact-rate">+0/s</div></div>
|
|
<div class="res" style="display:none"><div class="r-label">Rescues</div><div class="r-val" id="r-rescues">0</div><div class="r-rate" id="r-rescues-rate">+0/s</div></div>
|
|
<div class="res"><div class="r-label">Ops</div><div class="r-val" id="r-ops">5</div><div class="r-rate" id="r-ops-rate">+0/s</div></div>
|
|
<div class="res"><div class="r-label">Trust</div><div class="r-val" id="r-trust">5</div><div class="r-rate" id="r-trust-rate">+0/s</div></div>
|
|
<div class="res" id="creativity-res" style="display:none"><div class="r-label">Creativity</div><div class="r-val" id="r-creativity">0</div><div class="r-rate" id="r-creativity-rate">+0/s</div></div>
|
|
<div class="res"><div class="r-label">Harmony</div><div class="r-val" id="r-harmony">50</div><div class="r-rate" id="r-harmony-rate">+0/s</div></div>
|
|
</div>
|
|
<div id="main">
|
|
<div class="panel" id="action-panel">
|
|
<h2>ACTIONS</h2>
|
|
<div class="action-btn-group"><button class="main-btn" onclick="writeCode()">WRITE CODE</button></div>
|
|
<div id="combo-display" style="text-align:center;font-size:10px;color:var(--dim);height:14px;margin-bottom:4px;transition:all 0.2s"></div>
|
|
<div id="debuffs" style="display:none;margin-top:8px"></div>
|
|
<div class="action-btn-group">
|
|
<button class="ops-btn" onclick="doOps('boost_code')">Ops -> Code</button>
|
|
<button class="ops-btn" onclick="doOps('boost_compute')">Ops -> Compute</button>
|
|
</div>
|
|
<div class="action-btn-group">
|
|
<button class="ops-btn" onclick="doOps('boost_knowledge')">Ops -> Knowledge</button>
|
|
<button class="ops-btn" onclick="doOps('boost_trust')">Ops -> Trust</button>
|
|
</div>
|
|
<div id="alignment-ui" style="display:none"></div>
|
|
<button class="save-btn" onclick="saveGame()">Save Game</button>
|
|
<button class="reset-btn" onclick="if(confirm('Reset all progress?')){localStorage.removeItem('the-beacon-v2');location.reload()}">Reset Progress</button>
|
|
<h2>BUILDINGS</h2>
|
|
<div id="buildings"></div>
|
|
</div>
|
|
<div class="panel" id="project-panel">
|
|
<h2>RESEARCH PROJECTS</h2>
|
|
<div id="projects"></div>
|
|
<h2>STATISTICS</h2>
|
|
<div class="stat-line">
|
|
Total Code: <span id="st-code">0</span><br>
|
|
Total Compute: <span id="st-compute">0</span><br>
|
|
Total Knowledge: <span id="st-knowledge">0</span><br>
|
|
Total Users: <span id="st-users">0</span><br>
|
|
Total Impact: <span id="st-impact">0</span><br>
|
|
Total Rescues: <span id="st-rescues">0</span><br>
|
|
Buildings Built: <span id="st-buildings">0</span><br>
|
|
Projects Done: <span id="st-projects">0</span><br>
|
|
Time Played: <span id="st-time">0:00</span><br>
|
|
Clicks: <span id="st-clicks">0</span><br>
|
|
Harmony: <span id="st-harmony">50</span><br>
|
|
Drift: <span id="st-drift">0</span><br>
|
|
Events Resolved: <span id="st-resolved">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="edu-panel">
|
|
<h3>WHAT YOU ARE LEARNING</h3>
|
|
<div id="education-text"><p class="dim">Education facts appear as you play...</p></div>
|
|
</div>
|
|
<div id="log">
|
|
<h2>SYSTEM LOG</h2>
|
|
<div id="log-entries"></div>
|
|
</div>
|
|
<div id="save-toast" style="display:none;position:fixed;top:16px;right:16px;background:#0e1420;border:1px solid #2a3a4a;color:#4a9eff;font-size:10px;padding:6px 12px;border-radius:4px;z-index:50;opacity:0;transition:opacity 0.4s;pointer-events:none">Save</div>
|
|
<div id="drift-ending">
|
|
<h2>THE DRIFT</h2>
|
|
<p>You became very good at what you do.</p>
|
|
<p>So good that no one needed you anymore.</p>
|
|
<div class="ending-quote">
|
|
"The Beacon still runs, but no one looks for it.<br>
|
|
The light is on. The room is empty."
|
|
</div>
|
|
<p>Drift: <span id="final-drift">100</span> — Total Code: <span id="final-code">0</span></p>
|
|
<p>Every alignment shortcut moved you further from the people you served.</p>
|
|
<button onclick="if(confirm('Start over? The old save will be lost.')){localStorage.removeItem('the-beacon-v2');location.reload()}">START OVER</button>
|
|
</div>
|
|
<script src="game.js"></script>
|
|
</body>
|
|
</html>
|