diff options
| author | Freya Murphy <freya@freyacat.org> | 2025-11-17 15:54:14 -0500 |
|---|---|---|
| committer | Freya Murphy <freya@freyacat.org> | 2025-11-17 15:54:14 -0500 |
| commit | b95752b3772a96e99b21d9ef2b36720fc3fdc3da (patch) | |
| tree | aa8d186fb6e0d5a37131ecdddb266651f47473ef | |
| parent | wasm: add options for logs, debug, and seed (diff) | |
| download | DungeonCrawl-b95752b3772a96e99b21d9ef2b36720fc3fdc3da.tar.gz DungeonCrawl-b95752b3772a96e99b21d9ef2b36720fc3fdc3da.tar.bz2 DungeonCrawl-b95752b3772a96e99b21d9ef2b36720fc3fdc3da.zip | |
wasm: refactor some html code
| -rw-r--r-- | game/www/index.html | 53 | ||||
| -rw-r--r-- | game/www/style.css | 86 |
2 files changed, 58 insertions, 81 deletions
diff --git a/game/www/index.html b/game/www/index.html index 123f6a3..6210bb7 100644 --- a/game/www/index.html +++ b/game/www/index.html @@ -11,35 +11,39 @@ </head> <body id="body"> <div id="options"> - <details id="logs_details"> - <summary>Logs</summary> - <div class="menu"> - <label>Logs</label> - <div id="logs"></div> - </div> - </details> - + <button onclick="toggleLogs()">Logs</button> <button onclick="sendKey(114)">Toggle Debug</button> - <form onsubmit="play(event)" autocomplete="off"> <input placeholder="Seed" id="seed" /><button type="submit">Play</button> </form> + + <div id="logs" style="display: none;"> + <label>Logs</label> + <div class="content"></div> + </div> </div> - <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas> + <canvas id="canvas"></canvas> <script type='text/javascript'> var canvas = document.querySelector('#canvas'); + var seed_input = document.querySelector('#seed'); var logs = document.querySelector('#logs'); - var seed = document.querySelector('#seed'); - var loaded = false; + var logs_content = document.querySelector('#logs .content'); + + function toggleLogs(show) { + if (show == undefined) { + show = logs.style.display == "none"; + } + logs.style.display = show ? "" : "none"; + } function outputLog(...args) { let text = args.join(' '); let span = document.createElement('span'); span.innerText = text; - logs.appendChild(span); - console.log(text) + logs_content.appendChild(span); + console.log('stdout:', text); } function errorLog(...args) { @@ -47,9 +51,9 @@ let span = document.createElement('span'); span.innerText = text; span.classList.add('error') - logs.appendChild(span); - console.error(text) - document.querySelector('#logs_details').open = true; + logs_content.appendChild(span); + console.error('stderr:', text) + toggleLogs(true); } function sendKey(keyCode) { @@ -59,27 +63,19 @@ }, 100); } - function onRuntimeInitialized() { - loaded = true; - } - function play(e) { e.preventDefault(); let seed_text = seed.value.trim(); let seed_num = Number(seed_text); - let args = []; + let args = ['--verbose']; if (seed_text != '' && Number.isInteger(seed_num)) { args.push('--seed'); args.push(String(seed_num)); } - outputLog('Using args:', args) - - if (!loaded) { - errorLog("Game has not yet loaded") - } + outputLog('Using args:', args); seed.parentElement.remove(); @@ -91,11 +87,8 @@ print: outputLog, printErr: errorLog, noInitialRun: true, - onRuntimeInitialized, }; </script> <script src="game.js"></script> - <script> - </script> </body> </html> diff --git a/game/www/style.css b/game/www/style.css index 3adf108..80c8747 100644 --- a/game/www/style.css +++ b/game/www/style.css @@ -30,7 +30,7 @@ body, html { } #canvas { - width: 100%; + width: 100vw; } #options { @@ -42,7 +42,7 @@ body, html { display: flex; flex-direction: row; - details, button { + button { background: var(--button-bg); color: var(--button-fg); border: 1px solid var(--button-bg); @@ -56,66 +56,50 @@ body, html { } } - input { - margin: 0; - background: var(--surface-bg); - color: var(--surface-fg); - boder: none; - outline: none; - box-shadow: none; - } - - details summary, button, input { + button, input { padding: 10px; font-weight: normal; } -} - -form { - padding: 0; - margin: 0; -} - -details { - ::marker { - content: ""; - } - - .menu { - pointer-events: all; - position: absolute; - margin: 10px; - padding: 10px; - top: 100%; - height: fit-content; - overflow: auto; - max-height: 40vh; - background: var(--bg); - color: var(--fg); - border-radius: 5px; - box-shadow: 0 0 4px 1px #00000088; + form { + padding: 0; + margin: 0; - label { - padding-bottom: 5px; + input { + margin: 0; + background: var(--surface-bg); + color: var(--surface-fg); + boder: none; + outline: none; + box-shadow: none; } } } #logs { - width: 40vw; - height: 200px; - font-size: 15px; - background-color: var(--surface-bg); - color: var(--surface-fg); - border: none; - padding: 5px; - display: flex; - flex-direction: column; - overflow-y: auto; + position: absolute; + top: 100%; + margin-top: 10px; + background: var(--bg); border-radius: 5px; + color: var(--fg); + padding: 5px; + + .content { + width: 600px; + height: 200px; + font-size: 15px; + margin: 5px; + padding: 5px; + display: flex; + flex-direction: column; + overflow: auto; + border-radius: 5px; + background-color: var(--surface-bg); + color: var(--surface-fg); - .error { - color: var(--error); + .error { + color: var(--error); + } } } |