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

burn: add export/import save and keyboard shortcut help overlay (#47)

Browse Source 
- Export button copies save JSON to clipboard
- Import button prompts for pasted save data, validates, and reloads
- Press ? to toggle hotkey overlay showing all keyboard shortcuts
- Press Escape to close the overlay
- Styling matches the existing cyber-monastic aesthetic
This commit is contained in:
Alexander Whitestone
2026-04-10 15:20:48 -04:00
parent f948ec9c5e
commit 41de4e024c
2 changed files with 91 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@@ -131,6 +131,11 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code
</div>
<div id="alignment-ui" style="display:none"></div>
<button class="save-btn" onclick="saveGame()">Save Game</button>
<div style="display:flex;gap:4px;margin-top:4px">
<button class="save-btn" onclick="exportSave()" style="flex:1" title="Copy save to clipboard">Export</button>
<button class="save-btn" onclick="importSave()" style="flex:1" title="Paste save data">Import</button>
</div>
<button class="save-btn" onclick="toggleHotkeyHelp()" style="margin-top:4px;border-color:#2a2a4a;color:#888">? Hotkeys</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>
@@ -189,5 +194,24 @@ The light is on. The room is empty."
</div>
</div>
<div id="hotkey-overlay" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(8,8,16,0.92);z-index:95;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:380px;width:100%;text-align:left">
<h3 style="color:#4a9eff;font-size:13px;letter-spacing:2px;margin-bottom:16px;text-align:center">KEYBOARD SHORTCUTS</h3>
<div style="font-size:11px;line-height:2.2;color:#aaa">
<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">Space</kbd> Write code</div>
<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">1</kbd> Ops → Code</div>
<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">2</kbd> Ops → Compute</div>
<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">3</kbd> Ops → Knowledge</div>
<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">4</kbd> Ops → Trust</div>
<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">B</kbd> Cycle buy amount (×1 / ×10 / MAX)</div>
<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">S</kbd> Activate Code Sprint</div>
<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">?</kbd> Toggle this help</div>
<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">Esc</kbd> Close overlay</div>
</div>
<div style="text-align:center;margin-top:16px">
<button onclick="toggleHotkeyHelp()" style="background:#1a2a3a;border:1px solid #4a9eff;color:#4a9eff;padding:6px 20px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:10px">Close</button>
</div>
</div>
</div>
</body>
</html>