Add callbacks for updating the UI

src/index.js

@@ -55,21 +55,19 @@ const RecordSheet = new function () {
 
     if (selected) {
       selected.classList.remove('selected');
-      document.getElementById('toggle-prone-counter').checked = false;
     }
+
+    document.getElementById('toggle-prone-counter').checked = false;
   };
 
   this.getSelected = function () {
     return document.querySelector('.soldier-record.selected');
   };
 
-  this.select = function (el) {
-    let { troopNumber, troopAllegiance } = el.dataset;
-      // proneStatus = svg.Counter.hasProne(troopNumber, troopAllegiance);
-
+  this.select = function (data) {
     this.unSelect();
-    document.querySelector(`#record-sheet .soldier-record[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`).classList.add('selected');
-    // document.getElementById('toggle-prone-counter').checked = proneStatus;
+    document.querySelector(`#record-sheet .soldier-record[data-troop-number="${data.number}"][data-troop-allegiance="${data.allegiance}"]`).classList.add('selected');
+    document.getElementById('toggle-prone-counter').checked = data.prone;
   };
 
   this.endMove = function() {
@@ -92,7 +90,27 @@ window.addEventListener('load', () => {
 
   PanZoom.start(svg);
 
-  game.info = document.getElementById('status');
+  const distanceOutput = document.getElementById('status');
+
+  game.distanceCallback = count => {
+    const output = {
+      count: '-',
+      display: 'none'
+    }
+
+    if (count) {
+      output.count = count;
+      output.display = 'block';
+    }
+
+    distanceOutput.querySelector('#hex-count').textContent = output.count;
+    distanceOutput.style.display = output.display;
+  };
+
+  const proneToggle = document.getElementById('toggle-prone-counter');
+
+  game.proneFlagCallback = checked => proneToggle.checked = checked;
+  game.selectCallback = data => RecordSheet.select(data);
 
   // Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
   //   const identityMtx = [1, 0, 0, 1, 0, 0];
@@ -142,18 +160,18 @@ window.addEventListener('load', () => {
     el.addEventListener('click', e => {
       if (el.classList.contains('selected')) {
         el.classList.remove('selected');
+        game.unSelect();
         RecordSheet.unSelect();
-        // Counter.unSelect();
       } else {
-        RecordSheet.select(el);
-        // Counter.select(el);
+        game.select(el.dataset.troopAllegiance, el.dataset.troopNumber);
       }
-
-      // SightLine.clear();
     })
   );
 
-  document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => game.endMove()));
+  document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => {
+    RecordSheet.endMove();
+    game.endMove();
+  }));
 
   document.querySelectorAll('.end-turn').forEach(el =>
     el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => {
@@ -175,14 +193,12 @@ window.addEventListener('load', () => {
         turnCounter.dataset.update = '1';
       }
 
-      // qA(`#firing-arcs ${dataSelector}`).forEach(el => el.remove());
-
       records
         .sort((el1, el2) => el1.dataset.troopNumber > el2.dataset.troopNumber)
         .forEach(el => el.classList.remove('movement-ended'));
 
-      // RecordSheet.select(records.at(0));
-      // Counter.select(records.at(0));
+      game.endTurn(allegiance);
+      game.select(records.at(0).dataset.troopAllegiance, records.at(0).dataset.troopNumber);
     })
   );
 
@@ -210,15 +226,7 @@ window.addEventListener('load', () => {
     let selected = RecordSheet.getSelected();
 
     if (selected) {
-      let template = q(`g#${selected.dataset.troopAllegiance}-${selected.dataset.troopNumber}`);
-
-      if (this.checked) {
-        let counter = document.createElementNS(svgns, 'use');
-        counter.setAttributeNS(null, 'href', '#counter-prone');
-        template.appendChild(counter);
-      } else {
-        template.querySelector('[href="#counter-prone"]').remove();
-      }
+      game.toggleProne();
     }
   });
 });