Allow selecting elevation level with up/down buttons

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"] {

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">

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;