| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-02 13:12:21 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-02 14:04:27 -0700 |
| commit | 624991870df0e804d64cf4d9359c63435513d61b (patch) | |
| tree | 5aeddf42b9c058127ec38bfd33d6c04dc3d2d0e0 | |
| parent | 23673cec8e05970f96681eac733285732cf09e1c (diff) | |
Allow selecting elevation level with up/down buttons
| -rw-r--r-- | public/assets/css/style.css | 3 | ||||
| -rw-r--r-- | public/index.html | 4 | ||||
| -rw-r--r-- | 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 @@ </div> <div class="select-elevation"> - <button>🡅</button> + <button class="up">🡅</button> <input type="radio" id="select-elevation-3" name="select-elevation" value="3" /> <label for="select-elevation-3">3</label> <input type="radio" id="select-elevation-2" name="select-elevation" value="2" /> @@ -148,7 +148,7 @@ <label for="select-elevation-0">0</label> <input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" /> <label for="select-elevation-basement">-1</label> - <button>🡇</button> + <button class="down">🡇</button> </div> <div id="dice"> 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; |