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;