Add callbacks for updating the UI

src/modules/game.js

@@ -345,6 +345,23 @@ export default class Game {
     }
   }
 
+  select(allegiance, number) {
+    this.Counter.select({ dataset: { allegiance, number } });
+  }
+
+  unSelect() {
+    this.Counter.unSelect();
+  }
+
+  endTurn(allegiance) {
+    const selector = `#firing-arcs [data-troop-allegiance="${allegiance}"]`;
+    this.svg.querySelectorAll(selector).forEach(el => el.remove());
+  }
+
+  toggleProne() {
+    this.Counter.toggleProne();
+  }
+
   toggleFiringArcVisibility(allegiance) {
     const vis = this.#firingArcVisibility[allegiance],
       clipPaths = this.svg.querySelectorAll(`clipPath[data-troop-allegiance="${allegiance}"]`);
@@ -483,15 +500,23 @@ export default class Game {
                 container.SightLine.update(this);
               }
 
+              container.proneFlagCallback(!!this.parentElement.querySelector('[href="#counter-prone"]'));
+
               this.parentElement.appendChild(counter);
+              this.remove();
               container.Counter.removeClones(counter);
               trace.remove();
             } else {
+              const proneCounter = this.parentElement.querySelector('[href="#counter-prone"]');
+
+              if (proneCounter) {
+                proneCounter.remove();
+              }
+
               points = points.filter(p => p != `${pos.x},${pos.y}`).join(' ');
               trace.setAttributeNS(null, 'points', points);
+              this.remove();
             }
-
-            this.remove();
           }
         },
 
@@ -550,6 +575,14 @@ export default class Game {
                 container.SightLine.draw(this.parentElement, clone.parentElement);
               }
 
+              const proneCounter = this.parentElement.querySelector('[href="#counter-prone"]');
+
+              if (proneCounter) {
+                proneCounter.remove();
+              }
+
+              container.proneFlagCallback(!!clone.parentElement.querySelector('[href="#counter-prone"]'));
+
               clone.parentElement.appendChild(this);
               clone.remove();
             }
@@ -588,6 +621,7 @@ export default class Game {
           counter.classList.add(selectedClass);
           let existingArcs = container.getExistingArcs(allegiance, number);
           existingArcs.forEach(el => el.removeAttribute('clip-path'));
+          container.selectCallback({ prone: this.hasProne(counter), ...counter.dataset });
         }
       };
 
@@ -639,6 +673,10 @@ export default class Game {
           original.parentElement.appendChild(counter);
           point.parentElement.appendChild(original);
 
+          if (counter.parentElement.querySelector('[href="#counter-prone"]')) {
+            container.Counter.toggleProne();
+          }
+
           let previous = container.getCellPosition(counter.parentElement),
             current = container.getCellPosition(original.parentElement);
 
@@ -671,7 +709,15 @@ export default class Game {
       };
 
       this.removeClones = function ({ dataset: { allegiance, number }}) {
-        container.getClones(allegiance, number).forEach(el => el.remove());
+        container.getClones(allegiance, number).forEach(el => {
+          const proneCounter = el.parentElement.querySelector('[href="#counter-prone"]');
+
+          if (proneCounter) {
+            proneCounter.remove();
+          }
+
+          el.remove()
+        });
       };
 
       this.endMove = function (el) {
@@ -686,12 +732,33 @@ export default class Game {
         this.unSelect();
       };
 
-      this.hasProne = function (troopNumber, troopAllegiance) {
-        let selector = `g#${troopAllegiance}-${troopNumber} use[href="#counter-prone"]`;
+      this.hasProne = function (counter) {
+        const isOnBoard = counter.parentElement.hasAttribute('data-x');
 
-        return !!container.svg.querySelector(selector);
+        if (isOnBoard) {
+          return !!counter.parentElement.querySelector('[href="#counter-prone"]');
+        }
+
+        return false;
       };
 
+      this.toggleProne = function() {
+        const selected = container.getSelected(),
+          isOnBoard = selected && selected.parentElement.hasAttribute('data-x');
+
+          if (selected && isOnBoard) {
+            const proneCounter = selected.parentElement.querySelector('[href="#counter-prone"]');
+
+          if (proneCounter) {
+            proneCounter.remove();
+          } else {
+            const counter = document.createElementNS(svgns, 'use');
+            counter.setAttributeNS(null, 'href', '#counter-prone');
+            selected.parentElement.appendChild(counter);
+          }
+        }
+      }
+
       this.addEventListeners = function (counter) {
         counter.addEventListener('pointerover', pointerOver);
         counter.addEventListener('pointerout', pointerOut);
@@ -724,9 +791,8 @@ export default class Game {
       };
 
       this.clearHexes = function() {
-        if (ptGrp.info) {
-          ptGrp.info.querySelector('#hex-count').textContent = '-';
-          ptGrp.info.style.display = 'none';
+        if (ptGrp.distanceCallback) {
+          ptGrp.distanceCallback();
         }
 
         ptGrp.getActiveHexes().forEach(el => el.classList.remove('active'));
@@ -800,9 +866,8 @@ export default class Game {
       this.drawHexes = function (...coords) {
         this.clearHexes()
 
-        if (ptGrp.info) {
-          ptGrp.info.querySelector('#hex-count').textContent = offset_distance(...coords);
-          ptGrp.info.style.display = 'block';
+        if (ptGrp.distanceCallback) {
+          ptGrp.distanceCallback(offset_distance(...coords));
         }
 
         let lineCoords = linedraw(...coords);