Change elevation level when revealing counter on map

src/index.js

@@ -58,6 +58,7 @@ let scenarioTemplate;
 async function buildScenario(req) {
   gameboard.stop();
   recordSheet.stop();
+  Observable.notify('viewElevation', 0);
 
   const map = document.querySelector('object').contentDocument.querySelector('svg');
   const template = scenarioTemplate.querySelector('svg').cloneNode(true);
@@ -146,6 +147,12 @@ function roll(die) {
   return numsAsWords[getRandomIntInclusive(0, numsAsWords.length - 1)];
 }
 
+function viewElevation(elevationLevel) {
+  const id = elevationLevel >= 0 ? elevationLevel : 'basement';
+  document.querySelector(`#select-elevation-${id}`).checked = true;
+  document.querySelector('object').contentDocument.querySelector('.gameboard').dataset.viewElevation = elevationLevel;
+}
+
 async function load() {
   const svg = this.contentDocument.querySelector('svg'),
     startLocs = svg.querySelector('.start-locations')
@@ -172,7 +179,10 @@ document.querySelectorAll('.end-turn').forEach(el =>
     gameboard.clearFiringArcs(opponent);
 
     if (opponentRecords.length > 0) {
-      Observable.notify('select', opponentRecords.at(0), { revealCounter: true, revealRecord: true });
+      Observable.notify('select', opponentRecords.at(0), {
+        revealCounter: true,
+        revealRecord: true
+      });
     }
   })
 );
@@ -256,17 +266,11 @@ document.querySelectorAll('.select-elevation button').forEach(el => el.addEventL
     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);
-  }
+  if (next) Observable.notify('viewElevation', next.value);
 }));
 
 document.querySelectorAll('[name="select-elevation"]').forEach(el => {
-  el.addEventListener('change', function (e) {
-    document.querySelector('object').contentDocument.querySelector('.gameboard').dataset.viewElevation = this.value;
-  });
+  el.addEventListener('change', e => Observable.notify('viewElevation', el.value));
 });
 
 document.querySelector('#toggle-grid-vis').addEventListener('change', function () {
@@ -347,3 +351,4 @@ dice.forEach(el => {
 });
 
 Observable.subscribe('distance', distance);
+Observable.subscribe('viewElevation', viewElevation);