529248fd94
The game evolves alongside its players. Tracks behavior patterns (click frequency, resource spending, upgrade choices), detects player strategies (hoarder, rusher, optimizer, idle), and generates dynamic events that reward or challenge those strategies. - EmergentMechanics class: track(), detectPatterns(), generateEvent(), getState() - 6 pattern detectors: hoarder, rusher, optimizer, idle_player, clicker, balanced - 16 emergent events across all patterns with meaningful choices - localStorage persistence for cross-session behavior tracking - 25 unit tests, all passing - Hooks into writeCode, buyBuilding, doOps, and tick() - Stats panel shows emergent events count, pattern detections, active strategy - Self-contained: additive system, does not break existing mechanics
295 lines
25 KiB
HTML
295 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="The Beacon — a sovereign AI idle game. Build an AI from scratch. Write code, train models, save lives.">
|
|
<meta name="theme-color" content="#0a0a0a">
|
|
<meta name="author" content="Timmy Foundation">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:title" content="The Beacon">
|
|
<meta property="og:description" content="A sovereign AI idle game. Build an AI from scratch. Write code, train models, save lives.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:image" content="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🏠</text></svg>">
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:title" content="The Beacon">
|
|
<meta name="twitter:description" content="A sovereign AI idle game. Build an AI from scratch. Write code, train models, save lives.">
|
|
|
|
<!-- Favicon (inline SVG beacon) -->
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🏠</text></svg>">
|
|
<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)}}
|
|
@keyframes beacon-glow{0%,100%{opacity:0.7}50%{opacity:1}}
|
|
#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)}
|
|
@keyframes pulse-glow{0%,100%{box-shadow:0 0 10px rgba(74,158,255,0.1)}50%{box-shadow:0 0 25px rgba(74,158,255,0.4)}}
|
|
.main-btn.pulse{animation:pulse-glow 2s ease-in-out infinite}
|
|
.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}
|
|
@keyframes res-pulse{0%{transform:scale(1);color:inherit}50%{transform:scale(1.18);color:#4caf50}100%{transform:scale(1);color:inherit}}
|
|
@keyframes res-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px);color:#f44336}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
|
|
.res .pulse{animation:res-pulse 0.35s ease-out}
|
|
.res .shake{animation:res-shake 0.35s ease-out}
|
|
.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}
|
|
#phase-transition{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(8,8,16,0.95);z-index:95;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:40px;pointer-events:none}
|
|
#phase-transition.active{display:flex}
|
|
#toast-container{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:320px}
|
|
.toast{pointer-events:auto;padding:8px 14px;border-radius:6px;font-size:11px;font-family:inherit;line-height:1.4;animation:toast-in 0.3s ease-out;opacity:0.95;border:1px solid;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
|
|
.toast.fade-out{animation:toast-out 0.4s ease-in forwards}
|
|
.toast-event{background:rgba(244,67,54,0.12);border-color:#f44336;color:#ff8a80}
|
|
.toast-project{background:rgba(255,215,0,0.12);border-color:#ffd700;color:#ffd700}
|
|
.toast-milestone{background:rgba(76,175,80,0.12);border-color:#4caf50;color:#81c784}
|
|
.toast-info{background:rgba(74,158,255,0.12);border-color:#4a9eff;color:#80bfff}
|
|
@keyframes toast-in{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:0.95}}
|
|
@keyframes toast-out{from{opacity:0.95;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}}
|
|
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
|
|
/* High contrast mode (#57 Accessibility) */
|
|
.high-contrast{--bg:#000;--panel:#0a0a0a;--border:#fff;--text:#fff;--dim:#ccc;--accent:#0ff;--glow:#0ff444;--gold:#ff0;--green:#0f0;--red:#f00;--purple:#f0f}
|
|
.high-contrast .main-btn{border-width:2px}
|
|
.high-contrast .build-btn,.high-contrast .project-btn{border-width:2px}
|
|
.high-contrast .res{border-width:2px}
|
|
.high-contrast #phase-bar{border-width:2px}
|
|
.high-contrast .milestone-chip{border-width:2px}
|
|
.high-contrast #header h1{color:#0ff;text-shadow:0 0 40px #0ff444}
|
|
/* Custom tooltip */
|
|
#custom-tooltip{position:fixed;z-index:500;pointer-events:none;opacity:0;transition:opacity 0.15s;background:#0e0e1a;border:1px solid #1a3a5a;border-radius:6px;padding:8px 12px;max-width:280px;font-size:10px;font-family:inherit;line-height:1.6;box-shadow:0 4px 20px rgba(0,0,0,0.5)}
|
|
#custom-tooltip.visible{opacity:1}
|
|
#custom-tooltip .tt-label{color:#4a9eff;font-weight:600;margin-bottom:4px;font-size:11px}
|
|
#custom-tooltip .tt-desc{color:#aaa;font-size:10px;margin-bottom:4px}
|
|
#custom-tooltip .tt-edu{color:#888;font-style:italic;font-size:9px}
|
|
/* Mute & contrast buttons */
|
|
.header-btns{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;gap:6px}
|
|
.header-btn{background:#0e0e1a;border:1px solid #333;color:#666;font-size:13px;width:28px;height:28px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;font-family:inherit}
|
|
.header-btn:hover{border-color:#4a9eff;color:#4a9eff}
|
|
.header-btn.muted{opacity:0.5}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="header" style="position:relative">
|
|
<div class="header-btns">
|
|
<button id="mute-btn" class="header-btn" onclick="toggleMute()" aria-label="Sound on, click to mute" title="Toggle sound (M)">🔊</button>
|
|
<button id="contrast-btn" class="header-btn" onclick="toggleContrast()" aria-label="High contrast off, click to enable" title="Toggle high contrast (C)">◐</button>
|
|
</div>
|
|
<div id="pulse-container" style="position:relative;display:inline-block;margin-bottom:4px">
|
|
<div id="pulse-dot" style="width:8px;height:8px;border-radius:50%;background:#333;display:inline-block;vertical-align:middle;transition:background 0.5s,box-shadow 0.5s"></div>
|
|
<span id="pulse-label" style="font-size:9px;color:#444;margin-left:6px;vertical-align:middle;letter-spacing:1px">OFFLINE</span>
|
|
</div>
|
|
<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" role="region" aria-label="Resources" aria-live="off">
|
|
<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" role="region" aria-label="Actions">
|
|
<h2>ACTIONS</h2>
|
|
<div class="action-btn-group"><button class="main-btn" onclick="writeCode()" aria-label="Write code, generates code resource">WRITE CODE</button></div>
|
|
<div id="combo-display" role="status" aria-live="off" 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')" aria-label="Convert 1 ops to code boost">Ops -> Code</button>
|
|
<button class="ops-btn" onclick="doOps('boost_compute')" aria-label="Convert 1 ops to compute boost">Ops -> Compute</button>
|
|
</div>
|
|
<div class="action-btn-group">
|
|
<button class="ops-btn" onclick="doOps('boost_knowledge')" aria-label="Convert 1 ops to knowledge boost">Ops -> Knowledge</button>
|
|
<button class="ops-btn" onclick="doOps('boost_trust')" aria-label="Convert 1 ops to trust boost">Ops -> Trust</button>
|
|
</div>
|
|
<div id="sprint-container" style="display:none;margin-top:6px">
|
|
<button id="sprint-btn" class="main-btn" onclick="activateSprint()" aria-label="Activate code sprint, 10x code production for 10 seconds" style="font-size:11px;padding:8px 10px;border-color:#ffd700;color:#ffd700;width:100%">⚡ CODE SPRINT — 10x Code for 10s</button>
|
|
<div id="sprint-bar-wrap" style="display:none;margin-top:4px;height:4px;background:#111;border-radius:2px;overflow:hidden"><div id="sprint-bar" style="height:100%;background:linear-gradient(90deg,#ffd700,#ff8c00);border-radius:2px;transition:width 0.1s"></div></div>
|
|
<div id="sprint-label" style="font-size:9px;color:#666;margin-top:2px;text-align:center"></div>
|
|
</div>
|
|
<div id="alignment-ui" style="display:none"></div>
|
|
<button class="save-btn" onclick="saveGame()" aria-label="Save game progress">Save Game [Ctrl+S]</button>
|
|
<div style="display:flex;gap:4px;margin-top:4px">
|
|
<button class="save-btn" onclick="exportSave()" aria-label="Export save to file" style="flex:1">Export [E]</button>
|
|
<button class="save-btn" onclick="importSave()" aria-label="Import save from file" style="flex:1">Import [I]</button>
|
|
</div>
|
|
<button class="reset-btn" onclick="if(confirm('Reset all progress?')){localStorage.removeItem('the-beacon-v2');location.reload()}" aria-label="Reset all game progress permanently">Reset Progress</button>
|
|
<h2>BUILDINGS</h2>
|
|
<div id="buildings"></div>
|
|
</div>
|
|
<div class="panel" id="project-panel" role="region" aria-label="Research Projects and Statistics">
|
|
<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><br>
|
|
<span id="emergent-stats" style="color:#b388ff;display:none">✦ Emergent Events: <span id="st-emergent">0</span> | Patterns: <span id="st-patterns">0</span> | Strategy: <span id="st-strategy">—</span></span>
|
|
</div>
|
|
<div id="production-breakdown" style="display:none;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)"></div>
|
|
</div>
|
|
</div>
|
|
<div id="edu-panel" role="region" aria-label="Educational Content">
|
|
<h3>WHAT YOU ARE LEARNING</h3>
|
|
<div id="education-text"><p class="dim">Education facts appear as you play...</p></div>
|
|
</div>
|
|
<div id="strategy-panel" style="margin:0 16px 16px;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px;border-left:3px solid var(--gold)">
|
|
<h3>SOVEREIGN GUIDANCE (GOFAI)</h3>
|
|
<div id="strategy-recommendation" style="font-size:11px;color:var(--gold);font-style:italic">Analyzing system state...</div>
|
|
</div>
|
|
<div id="combat-panel" style="margin:0 16px 16px;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px;border-left:3px solid var(--red)">
|
|
<h3>REASONING BATTLES</h3>
|
|
<canvas id="combat-canvas" style="width:100%;max-width:310px;border:1px solid var(--border);border-radius:4px;display:block;margin:8px auto"></canvas>
|
|
<div id="combat-panel-info"><span class="dim">Combat unlocks at Phase 3</span></div>
|
|
<button class="ops-btn" onclick="Combat.startBattle()" style="margin-top:8px;width:100%;border-color:var(--red);color:var(--red)">START BATTLE</button>
|
|
</div>
|
|
<div id="log" role="log" aria-label="System Log" aria-live="off">
|
|
<h2>SYSTEM LOG</h2>
|
|
<div id="log-entries"></div>
|
|
</div>
|
|
<div id="save-toast" role="status" aria-live="off" 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="help-btn" onclick="toggleHelp()" style="position:fixed;bottom:16px;right:16px;width:28px;height:28px;background:#0e0e1a;border:1px solid #333;color:#555;font-size:14px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:50;font-family:inherit;transition:all 0.2s" title="Keyboard shortcuts (?)">?</div>
|
|
<div id="help-overlay" onclick="if(event.target===this)toggleHelp()" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(8,8,16,0.92);z-index:80;justify-content:center;align-items:center;flex-direction:column;padding:40px">
|
|
<div style="background:#0e0e1a;border:1px solid #1a3a5a;border-radius:8px;padding:24px 32px;max-width:420px;width:100%">
|
|
<h3 style="color:#4a9eff;font-size:14px;letter-spacing:2px;margin-bottom:16px;text-align:center">KEYBOARD SHORTCUTS</h3>
|
|
<div style="font-size:11px;line-height:2.2;color:#aaa">
|
|
<div style="display:flex;justify-content:space-between"><span style="color:#555">Write Code</span><span style="color:#4a9eff;font-family:monospace">SPACE</span></div>
|
|
<div style="display:flex;justify-content:space-between"><span style="color:#555">Code Sprint</span><span style="color:#ffd700;font-family:monospace">S</span></div>
|
|
<div style="display:flex;justify-content:space-between"><span style="color:#555">Ops → Code</span><span style="color:#b388ff;font-family:monospace">1</span></div>
|
|
<div style="display:flex;justify-content:space-between"><span style="color:#555">Ops → Compute</span><span style="color:#b388ff;font-family:monospace">2</span></div>
|
|
<div style="display:flex;justify-content:space-between"><span style="color:#555">Ops → Knowledge</span><span style="color:#b388ff;font-family:monospace">3</span></div>
|
|
<div style="display:flex;justify-content:space-between"><span style="color:#555">Ops → Trust</span><span style="color:#b388ff;font-family:monospace">4</span></div>
|
|
<div style="display:flex;justify-content:space-between"><span style="color:#555">Cycle Buy Amount (x1/x10/MAX)</span><span style="color:#4a9eff;font-family:monospace">B</span></div>
|
|
<div style="display:flex;justify-content:space-between"><span style="color:#555">Save Game</span><span style="color:#4a9eff;font-family:monospace">Ctrl+S</span></div>
|
|
<div style="display:flex;justify-content:space-between"><span style="color:#555">Export Save</span><span style="color:#4a9eff;font-family:monospace">E</span></div>
|
|
<div style="display:flex;justify-content:space-between"><span style="color:#555">Import Save</span><span style="color:#4a9eff;font-family:monospace">I</span></div>
|
|
<div style="display:flex;justify-content:space-between;border-top:1px solid #1a1a2e;padding-top:8px;margin-top:4px"><span style="color:#555">This Help</span><span style="color:#555;font-family:monospace">? or /</span></div>
|
|
</div>
|
|
<div style="text-align:center;margin-top:16px;font-size:9px;color:#444">Click WRITE CODE fast for combo bonuses! 10x=ops, 20x=knowledge, 30x+=bonus code</div>
|
|
<button onclick="toggleHelp()" aria-label="Close keyboard shortcuts help" style="display:block;margin:16px auto 0;background:#1a2a3a;border:1px solid #4a9eff;color:#4a9eff;padding:6px 20px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:11px">Close [?]</button>
|
|
</div>
|
|
</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 aria-label="Start over, reset all progress" onclick="if(confirm('Start over? The old save will be lost.')){localStorage.removeItem('the-beacon-v2');location.reload()}">START OVER</button>
|
|
</div>
|
|
|
|
<script src="js/data.js"></script>
|
|
<script src="js/utils.js"></script>
|
|
<script src="js/combat.js"></script>
|
|
<script src="js/strategy.js"></script>
|
|
<script src="js/sound.js"></script>
|
|
<script src="js/engine.js"></script>
|
|
<script src="js/render.js"></script>
|
|
<script src="js/tutorial.js"></script>
|
|
<script src="js/dismantle.js"></script>
|
|
<script src="js/emergent-mechanics.js"></script>
|
|
<script src="js/main.js"></script>
|
|
|
|
|
|
<div id="offline-popup" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(8,8,16,0.92);z-index:90;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:40px">
|
|
<div style="background:#0e0e1a;border:1px solid #1a3a5a;border-radius:8px;padding:24px 32px;max-width:400px;width:100%">
|
|
<h3 style="color:#4a9eff;font-size:14px;letter-spacing:2px;margin-bottom:16px">WELCOME BACK</h3>
|
|
<p style="color:#888;font-size:10px;margin-bottom:12px" id="offline-time-label">You were away for 0 minutes.</p>
|
|
<div id="offline-gains-list" style="text-align:left;font-size:11px;line-height:1.8;margin-bottom:16px"></div>
|
|
<button onclick="dismissOfflinePopup()" aria-label="Continue playing" style="background:#1a2a3a;border:1px solid #4a9eff;color:#4a9eff;padding:8px 20px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:11px">Continue</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="phase-transition">
|
|
<div class="pt-phase" style="font-size:12px;color:var(--dim);letter-spacing:4px;margin-bottom:12px">PHASE</div>
|
|
<div class="pt-name" style="font-size:28px;font-weight:300;color:var(--gold);letter-spacing:4px;text-shadow:0 0 40px #ffd70044;margin-bottom:8px"></div>
|
|
<div class="pt-desc" style="font-size:12px;color:var(--dim);font-style:italic;max-width:400px"></div>
|
|
</div>
|
|
|
|
<div id="toast-container"></div>
|
|
<div id="custom-tooltip"></div>
|
|
</body>
|
|
</html>
|