Web Dev Solutions

Catalin Mititiuc

From 624991870df0e804d64cf4d9359c63435513d61b Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Tue, 2 Jul 2024 13:12:21 -0700 Subject: Allow selecting elevation level with up/down buttons --- public/assets/css/style.css | 3 ++- public/index.html | 4 ++-- src/index.js | 16 ++++++++++++++++ 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/public/assets/css/style.css b/public/assets/css/style.css index de66f44..9d29894 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -380,7 +380,7 @@ div#content { #edge-inputs { position: absolute; right: 0; - /* height: 100%; */ + height: 100%; pointer-events: none; display: flex; flex-direction: column; @@ -393,6 +393,7 @@ div#content { #content-visibility { margin-top: 2px; + flex-grow: 2; } label[for="content-visibility-toggle"] { diff --git a/public/index.html b/public/index.html index 4e0e456..570123e 100644 --- a/public/index.html +++ b/public/index.html @@ -137,7 +137,7 @@
- + @@ -148,7 +148,7 @@ - +
diff --git a/src/index.js b/src/index.js index efc6784..f1bc918 100644 --- a/src/index.js +++ b/src/index.js @@ -208,6 +208,22 @@ document.querySelector('#roll-dice').addEventListener('click', () => { }); }); +document.querySelectorAll('.select-elevation button').forEach(el => el.addEventListener('click', () => { + const current = document.querySelector('.select-elevation input:checked'); + const siblingMethod = `${el.classList.contains('up') ? 'previous' : 'next'}ElementSibling`; + let next = current; + + do { + next = next[siblingMethod]; + } while (next !== null && !next.matches('input')); + + if (next) { + next.checked = true; + const event = new Event('change', { value: next.value }); + next.dispatchEvent(event); + } +})); + document.querySelectorAll('[name="select-elevation"]').forEach(el => { el.addEventListener('change', function (e) { document.querySelector('object').contentDocument.querySelector('.gameboard').dataset.viewElevation = this.value; -- cgit v1.2.3