diff options
| author | Freya Murphy <freya@freyacat.org> | 2025-11-17 15:08:59 -0500 |
|---|---|---|
| committer | Freya Murphy <freya@freyacat.org> | 2025-11-17 15:08:59 -0500 |
| commit | d2521fcb32972e98170bc703984fc5a91f14ccb2 (patch) | |
| tree | 45fd561e3c558246b9dfcdf1bd56e1e7fd64dd44 /game/www | |
| parent | wasm: add a default emsdk sysroot for non nixos users (diff) | |
| download | DungeonCrawl-d2521fcb32972e98170bc703984fc5a91f14ccb2.tar.gz DungeonCrawl-d2521fcb32972e98170bc703984fc5a91f14ccb2.tar.bz2 DungeonCrawl-d2521fcb32972e98170bc703984fc5a91f14ccb2.zip | |
wasm: add options for logs, debug, and seed
Diffstat (limited to 'game/www')
| -rw-r--r-- | game/www/index.html | 111 | ||||
| -rw-r--r-- | game/www/style.css | 121 |
2 files changed, 205 insertions, 27 deletions
diff --git a/game/www/index.html b/game/www/index.html index 2181c25..123f6a3 100644 --- a/game/www/index.html +++ b/game/www/index.html @@ -7,38 +7,95 @@ <meta property="og:title" content="Dungeon Crawl"> <meta property="og:description" content="Dungeon Crawl game!"> <title>Dungeon Crawl</title> - <style> - * { - margin: 0; - padding: none; - border: none; + <link rel="stylesheet" href="/style.css"> + </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="sendKey(114)">Toggle Debug</button> + + <form onsubmit="play(event)" autocomplete="off"> + <input placeholder="Seed" id="seed" /><button type="submit">Play</button> + </form> + </div> + + <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas> + + <script type='text/javascript'> + var canvas = document.querySelector('#canvas'); + var logs = document.querySelector('#logs'); + var seed = document.querySelector('#seed'); + var loaded = false; + + function outputLog(...args) { + let text = args.join(' '); + let span = document.createElement('span'); + span.innerText = text; + logs.appendChild(span); + console.log(text) + } + + function errorLog(...args) { + let text = args.join(' '); + let span = document.createElement('span'); + span.innerText = text; + span.classList.add('error') + logs.appendChild(span); + console.error(text) + document.querySelector('#logs_details').open = true; + } + + function sendKey(keyCode) { + canvas.dispatchEvent(new KeyboardEvent("keydown", {keyCode})); + setTimeout(() => { + canvas.dispatchEvent(new KeyboardEvent("keyup", {keyCode})); + }, 100); + } + + function onRuntimeInitialized() { + loaded = true; + } + + function play(e) { + e.preventDefault(); + + let seed_text = seed.value.trim(); + let seed_num = Number(seed_text); + let args = []; + + 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") + } + + seed.parentElement.remove(); + + Module.callMain(args) } - canvas { - width: 100%; - height: 100%; - display: block; - background: black; - } - </style> - </head> - <body> - <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas> - <script type='text/javascript'> var Module = { - canvas: (function () { - var canvas = document.querySelector('#canvas'); - canvas.addEventListener("webglcontextlost", function (e) { - alert('WebGL context lost. You will need to reload the page.'); - e.preventDefault(); - }, false); - return canvas; - })(), - print: console.log, - printErr: console.error, - setStatus: console.debug, + canvas, + 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 new file mode 100644 index 0000000..3adf108 --- /dev/null +++ b/game/www/style.css @@ -0,0 +1,121 @@ +:root { + /* basic colors */ + --bg: #334; + --fg: #faf9f8; + --error: #f9a; + + /* button */ + --button-bg: #667; + --button-fg: var(--fg); + --button-border: #def; + --button-hover: #556; + + /* surface elements */ + --surface-bg: #445; + --surface-fg: var(--fg); +} + +* { + box-sizing: border-box; + font-family: monospace; + font-size: 16px; +} + +body, html { + height: 100%; + margin: 0; + padding: 0; + overflow: hidden; + background: black; +} + +#canvas { + width: 100%; +} + +#options { + background: var(--bg); + color: var(--fg); + position: relative; + width: 100%; + padding: 10px; + display: flex; + flex-direction: row; + + details, button { + background: var(--button-bg); + color: var(--button-fg); + border: 1px solid var(--button-bg); + width: fit-content; + margin-right: 10px; + + &:hover { + border: 1px solid var(--button-border); + background: var(--button-hover); + cursor: pointer; + } + } + + input { + margin: 0; + background: var(--surface-bg); + color: var(--surface-fg); + boder: none; + outline: none; + box-shadow: none; + } + + details summary, 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; + + label { + padding-bottom: 5px; + } + } +} + +#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; + border-radius: 5px; + + .error { + color: var(--error); + } +} |