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) {
+  if (next) Observable.notify('viewElevation', next.value);
-    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) {
+  el.addEventListener('change', e => Observable.notify('viewElevation', el.value));
-    document.querySelector('object').contentDocument.querySelector('.gameboard').dataset.viewElevation = this.value;
-  });
 });
 
 document.querySelector('#toggle-grid-vis').addEventListener('change', function () {
@@ -347,3 +351,4 @@ dice.forEach(el => {
 });
 
 Observable.subscribe('distance', distance);
+Observable.subscribe('viewElevation', viewElevation);

src/modules/gameboard.js

@@ -182,10 +182,16 @@ function selectOffBoard() {
   Observable.notify('select', this, { revealRecord: true });
 }
 
+function viewElevation(elevationLevel) {
+  const gb = svg.querySelector('.gameboard');
+  gb.dataset.viewElevation = elevationLevel;
+}
+
 function panMapToCounter(counter) {
   const gb = svg.querySelector('.gameboard');
 
   if (gb.contains(counter)) {
+    Observable.notify('viewElevation', counter.parentElement.dataset.t);
     const counterRect = counter.getBoundingClientRect();
     const mapRect = svg.parentNode.defaultView.frameElement.getBoundingClientRect();
 
@@ -400,8 +406,6 @@ export function start(el) {
   //
 
   const trooper1 = soldier.createCounter({ dataset: { allegiance: 'attacker', number: 1, squad: 1 }}, 'blazer');
-
-
   soldier.place(svg, trooper1, getCell(-3, 9, -6, 0));
 
   soldier.place(
@@ -410,14 +414,6 @@ export function start(el) {
     getCell(1, -8, 7, 0)
   );
 
-  const t1Rect = trooper1.getBoundingClientRect();
-
-  setTimeout(() => {
-    const t1Rect = trooper1.getBoundingClientRect();
-    console.log('trooper', trooper1, trooper1.getBoundingClientRect());
-
-  }, 10);
-
   // Add some counters in an unoccupied cell
   //const countersCell = getCell(-1, 1, 0, 0);
 
@@ -447,6 +443,7 @@ export function start(el) {
 
   Observable.subscribe('select', select);
   Observable.subscribe('endmove', endMove);
+  Observable.subscribe('viewElevation', viewElevation);
 
   console.log('gameboard.js loaded');
 }
@@ -454,6 +451,7 @@ export function start(el) {
 export function stop() {
   Observable.unsubscribe('select', select);
   Observable.unsubscribe('endmove', endMove);
+  Observable.unsubscribe('viewElevation', viewElevation);
 }
 
 export function getUnits() {