From d2521fcb32972e98170bc703984fc5a91f14ccb2 Mon Sep 17 00:00:00 2001 From: Freya Murphy Date: Mon, 17 Nov 2025 15:08:59 -0500 Subject: wasm: add options for logs, debug, and seed --- game/www/index.html | 111 +++++++++++++++++++++++++++++++++++------------ game/www/style.css | 121 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 205 insertions(+), 27 deletions(-) create mode 100644 game/www/style.css (limited to 'game/www') 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 @@ Dungeon Crawl - - - - - + 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); + } +} -- cgit v1.2.3-freya