Timmy_Foundation/the-beacon
15
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

[GOFAI] Mega Integration — Accessibility + Debuff Fixes #76

Merged
gemini merged 2 commits from feat/beacon-mega-1775996281802 into main 2026-04-12 12:18:34 +00:00
Conversation 0 Commits 2 Files Changed 2 +3274 -67
2 changed files with 3274 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3258
game.js Normal file
View File

File diff suppressed because it is too large Load Diff

83
index.html
View File

@@ -46,25 +46,25 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code
.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}.main-btn{min-height:48px;font-size:16px}.action-btn-group{flex-wrap:wrap;gap:4px}.action-btn-group .ops-btn{flex:1 1 calc(50% - 4px);min-width:0}}
@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;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.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;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px;display:flex;align-items:center;justify-content:center}
.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;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.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;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.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}
@@ -76,7 +76,7 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code
.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;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px;display:flex;align-items:center;justify-content:center}
.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}
@@ -84,7 +84,7 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code
#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;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#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}
#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)}
@@ -95,43 +95,7 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code
.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)}}
@keyframes res-pulse{0%{transform:scale(1)}50%{transform:scale(1.18);color:#80d0ff}100%{transform:scale(1)}}
.particle{position:fixed;pointer-events:none;z-index:150;border-radius:50%;animation:particle-fly 0.6s ease-out forwards}
@keyframes particle-fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(0.2)}}
@keyframes res-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.r-val.pulse{animation:res-pulse 0.35s ease-out}
.r-val.shake{animation:res-shake 0.3s ease-out;color:var(--red)!important}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
#custom-tooltip{position:fixed;pointer-events:none;z-index:300;max-width:280px;padding:8px 12px;background:#0e1420;border:1px solid #1a3a5a;border-radius:6px;font-size:10px;color:#80bfff;line-height:1.5;opacity:0;transition:opacity 0.15s;box-shadow:0 4px 16px rgba(0,0,0,0.5)}
#custom-tooltip.visible{opacity:1}
#custom-tooltip .tt-label{color:var(--accent);font-weight:600;margin-bottom:3px;font-size:10px}
#custom-tooltip .tt-edu{color:#888;font-style:italic;font-size:9px;border-top:1px solid #1a2a3a;padding-top:4px;margin-top:4px}
#phase-transition{position:fixed;top:0;left:0;right:0;bottom:0;z-index:95;display:flex;justify-content:center;align-items:center;flex-direction:column;pointer-events:none;opacity:0;transition:opacity 0.4s ease;background:rgba(8,8,16,0)}
#phase-transition.active{opacity:1;pointer-events:auto;background:rgba(8,8,16,0.92)}
#phase-transition .pt-phase{font-size:10px;color:#555;letter-spacing:4px;text-transform:uppercase;margin-bottom:8px;transform:translateY(10px);opacity:0;transition:all 0.5s ease 0.2s}
#phase-transition.active .pt-phase{transform:translateY(0);opacity:1}
#phase-transition .pt-name{font-size:28px;color:#ffd700;letter-spacing:6px;font-weight:300;text-shadow:0 0 40px rgba(255,215,0,0.3);transform:translateY(10px);opacity:0;transition:all 0.5s ease 0.35s}
#phase-transition.active .pt-name{transform:translateY(0);opacity:1}
#phase-transition .pt-desc{font-size:11px;color:#888;margin-top:12px;font-style:italic;transform:translateY(10px);opacity:0;transition:all 0.5s ease 0.5s}
#phase-transition.active .pt-desc{transform:translateY(0);opacity:1}
#phase-transition .pt-particles{position:absolute;top:50%;left:50%;width:0;height:0}
#beacon-ending-particles{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:99}
.beacon-particle{position:absolute;border-radius:50%;pointer-events:none}
@keyframes beacon-float{0%{transform:translate(0,0) scale(1);opacity:0.8}100%{transform:translate(var(--bx),var(--by)) scale(0);opacity:0}}
@keyframes drift-glitch{0%,100%{transform:translate(0);filter:none}20%{transform:translate(-2px,1px);filter:hue-rotate(90deg)}40%{transform:translate(2px,-1px);filter:saturate(2)}60%{transform:translate(-1px,-2px);filter:contrast(1.5)}80%{transform:translate(1px,2px);filter:hue-rotate(-90deg)}}
#drift-ending h2{animation:drift-glitch 0.3s ease-in-out infinite}
#drift-ending.fade-in{animation:tutorial-fade-in 1.5s ease-out}
@keyframes beacon-ray{0%{transform:rotate(var(--ray-angle)) scaleY(0);opacity:0}50%{opacity:0.3}100%{transform:rotate(var(--ray-angle)) scaleY(1);opacity:0}}
#ui-toggles{position:fixed;bottom:16px;left:16px;z-index:50;display:flex;gap:6px}
.toggle-btn{width:28px;height:28px;background:#0e0e1a;border:1px solid #333;color:#555;font-size:12px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:all 0.2s}
.toggle-btn:hover{border-color:#555;color:#888}
.toggle-btn.active{border-color:#4a9eff;color:#4a9eff}
.toggle-btn.muted{border-color:#f44336;color:#f44336}
body.high-contrast{--bg:#000;--panel:#0a0a0a;--border:#fff;--text:#fff;--dim:#ccc;--accent:#0ff;--glow:#0ff333;--gold:#ff0;--green:#0f0;--red:#f00;--purple:#f0f}
body.high-contrast .res .r-val{color:#fff}
body.high-contrast .main-btn{border-color:#0ff;color:#0ff}
body.high-contrast .build-btn{border-color:#fff;color:#fff}
body.high-contrast .ops-btn{border-color:#f0f;color:#f0f}
</style>
</head>
<body>
@@ -143,11 +107,11 @@ body.high-contrast .ops-btn{border-color:#f0f;color:#f0f}
<h1>THE BEACON</h1>
<div class="sub">A Sovereign AI Idle Game</div>
</div>
<div id="phase-bar" role="region" aria-label="Phase progress">
<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" aria-live="polite"><span id="phase-progress-label">0%</span><span id="phase-progress-target">Next: Phase 2 (2,000 code)</span></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="polite">
@@ -166,7 +130,6 @@ body.high-contrast .ops-btn{border-color:#f0f;color:#f0f}
<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="click-power-display" role="status" style="text-align:center;font-size:10px;color:#4a9eff;margin-top:4px"></div>
<div id="combo-display" role="status" aria-live="polite" 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">
@@ -218,7 +181,7 @@ Events Resolved: <span id="st-resolved">0</span>
<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" role="region" aria-label="Sovereign guidance" style="margin:0 16px 16px;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px;border-left:3px solid var(--gold)">
<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>
@@ -227,12 +190,8 @@ Events Resolved: <span id="st-resolved">0</span>
<div id="log-entries"></div>
</div>
<div id="save-toast" role="status" aria-live="polite" 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="ui-toggles" role="toolbar" aria-label="Game settings">
<button id="mute-btn" class="toggle-btn" onclick="toggleMute()" aria-label="Toggle sound" title="Toggle sound (M)">🔊</button>
<button id="contrast-btn" class="toggle-btn" onclick="toggleContrast()" aria-label="Toggle high contrast mode" title="High contrast (C)">◐</button>
</div>
<div id="help-btn" onclick="toggleHelp()" role="button" tabindex="0" aria-label="Show keyboard shortcuts" 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" role="dialog" aria-modal="true" aria-label="Keyboard shortcuts help" 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 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">
@@ -246,16 +205,13 @@ Events Resolved: <span id="st-resolved">0</span>
<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"><span style="color:#555">Toggle Sound</span><span style="color:#4a9eff;font-family:monospace">M</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#555">High Contrast</span><span style="color:#4a9eff;font-family:monospace">C</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 style="display:flex;justify-content:space-between"><span style="color:#555">Close Overlay</span><span style="color:#555;font-family:monospace">ESC</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" role="dialog" aria-modal="true" aria-label="The Drift ending">
<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>
@@ -265,7 +221,7 @@ The light is on. The room is empty."
</div>
<p>Drift: <span id="final-drift">100</span> &mdash; 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()}" aria-label="Play again, reset all progress">PLAY AGAIN</button>
<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>
@@ -273,25 +229,18 @@ The light is on. The room is empty."
<script src="js/strategy.js"></script>
<script src="js/engine.js"></script>
<script src="js/render.js"></script>
<script src="js/tutorial.js"></script>
<script src="js/main.js"></script>
<div id="offline-popup" role="dialog" aria-modal="true" aria-label="Welcome back, offline progress summary" 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 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="Dismiss offline progress summary" 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>
<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" aria-live="assertive" role="status">
<div class="pt-phase">PHASE 2</div>
<div class="pt-name">THE FOUNDATION</div>
<div class="pt-desc">Your code begins to take shape.</div>
</div>
<div id="toast-container"></div>
<div id="custom-tooltip"></div>
</body>
</html>