Add a counter module

author: Catalin Mititiuc <webdevcat@proton.me> 2024-04-23 13:33:15 -0700
committer: Catalin Mititiuc <webdevcat@proton.me> 2024-04-23 13:33:15 -0700
commit: 1a75bf469aa72f9845fe86ac2ebb34424c262f33 (patch)
tree: 9491632e63f011b8eeb85e227350790054790cb0 /src/modules
parent: ec023057b9a02036d28da3fad86c0f5ae5796f59 (diff)
2 files changed, 361 insertions, 341 deletions
diff --git a/src/modules/counter.js b/src/modules/counter.js
new file mode 100644
index 0000000..de393a0
--- /dev/null
+++ b/src/modules/counter.js
@@ -0,0 +1,353 @@
+const svgns = "http://www.w3.org/2000/svg",
+  selectedClass = 'selected';
+
+
+export default class Counter {
+  constructor(svg, container) {
+    this.svg = svg;
+    this.container = container;
+
+    this.getCounters().forEach(c => this.addEventListeners(c));
+  }
+
+  dataSelector(troopNumber, allegiance) {
+    return `[data-number="${troopNumber}"][data-allegiance="${allegiance}"]`;
+  }
+
+  selector(troopNumber, allegiance) {
+    return `use.counter${this.dataSelector(troopNumber, allegiance)}`;
+  }
+
+  position(x, y) {
+    return `g[data-x="${x}"][data-y="${y}"]`;
+  }
+
+  counterPosition(x, y) {
+    return `use.counter[data-x="${x}"][data-x="${y}"]`;
+  }
+
+  traceSelector(troopNumber, allegiance) {
+    return `polyline.move-trace${this.dataSelector(troopNumber, allegiance)}`;
+  }
+
+  getCounters() {
+    return this.svg.querySelectorAll(`use[data-allegiance][data-number]:not(.clone)`);
+  }
+
+  getClones(al, n) {
+    return this.svg.querySelectorAll(`use[data-allegiance="${al}"][data-number="${n}"].clone`);
+  }
+
+  getCounter(al, n) {
+    return this.svg.querySelector(`use[data-allegiance="${al}"][data-number="${n}"]:not(.clone)`);
+  }
+
+  getCounterAndClones(al, n) {
+    return this.svg.querySelectorAll(`use[data-allegiance="${al}"][data-number="${n}"]`);
+  }
+
+
+  getCellPosition(cell) {
+    let pt = new DOMPoint(0, 0),
+      transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g),
+      mtx = new DOMMatrix(transform);
+      pt = pt.matrixTransform(mtx);
+
+    transform = getComputedStyle(cell.parentElement).transform.match(/-?\d+\.?\d*/g);
+    mtx = new DOMMatrix(transform);
+    pt = pt.matrixTransform(mtx);
+
+    return pt;
+  }
+
+  addEventListeners(counter) {
+    counter.addEventListener('pointerover', this.pointerOver.bind(this));
+    counter.addEventListener('pointerout', this.pointerOut.bind(this));
+    counter.addEventListener('click', this.click.bind(this));
+    // counter.addEventListener('dblclick', dblClick);
+  }
+
+  pointerOver(e) {
+    const { number: troopNumber, allegiance: troopAllegiance } = e.target.dataset,
+      cp = this.svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`);
+
+    if (cp) {
+      cp.style.display = 'none';
+    }
+  }
+
+  pointerOut(e) {
+    let { number: troopNumber, allegiance: troopAllegiance } = e.target.dataset,
+      cp = this.svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`);
+
+    if (cp) {
+      let isVisible =
+        document
+          .getElementById('toggle-firing-arc-vis')
+          .querySelector(`input[data-allegiance="${troopAllegiance}"]`)
+          .checked;
+
+      cp.style.display = isVisible ? 'none' : '';
+    }
+  }
+
+  click(e) {
+    if (e.target.classList.contains(selectedClass)) {
+      e.stopPropagation();
+      let { number: troopNumber, allegiance: troopAllegiance } = e.target.dataset,
+        trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance));
+
+      if (trace) {
+        let points = trace.getAttribute('points').split(' '),
+          [clonePosX, clonePosY] = points.at(-2).split(',').map(p => parseFloat(p)),
+
+          { clone } = Array
+            .from(this.getClones(troopAllegiance, troopNumber))
+            .map(c => { return { clone: c, pos: this.getCellPosition(c.parentElement) }})
+            .find(({ pos: { x, y }}) => x == clonePosX && y == clonePosY);
+
+        points.pop();
+
+        if (points.length >= 2) {
+          trace.setAttributeNS(null, 'points', points.join(' '));
+        } else {
+          trace.remove();
+        }
+
+        let sl = this.svg.querySelector('.sight-line');
+
+        if (sl) {
+          this.container.sightLine.update(clone, this.getCellPosition(clone.parentElement));
+        } else {
+          this.container.sightLine.draw(e.target.parentElement, clone.parentElement);
+        }
+
+        const proneCounter = e.target.parentElement.querySelector('[href="#counter-prone"]');
+
+        if (proneCounter) {
+          proneCounter.remove();
+        }
+
+        this.container.proneFlagCallback(!!clone.parentElement.querySelector('[href="#counter-prone"]'));
+
+        clone.parentElement.appendChild(e.target);
+        clone.remove();
+      }
+    } else {
+      e.stopPropagation();
+      this.select(e.target);
+    }
+  }
+
+  clickClone(e) {
+    e.stopPropagation();
+
+    let { number: troopNumber, allegiance: troopAllegiance } = e.target.dataset,
+      pos = this.getCellPosition(e.target.parentElement);
+
+    if (this.isSelected(troopNumber, troopAllegiance)) {
+      let trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance)),
+        points = trace.getAttribute('points').split(' ');
+
+      if (`${pos.x},${pos.y}` == points.at(0)) {
+        const counter = this.getCounter(troopAllegiance, troopNumber),
+          lockedSl = this.svg.querySelector('.sight-line:not(.active)');
+
+        counter.setAttributeNS(null, 'x', 0);
+        counter.setAttributeNS(null, 'y', 0);
+
+        if (!lockedSl) {
+          this.container.sightLine.clear();
+        } else {
+          this.container.sightLine.update(e.target, this.container.getCellPosition(e.target.parentElement));
+        }
+
+        this.container.proneFlagCallback(!!e.target.parentElement.querySelector('[href="#counter-prone"]'));
+
+        e.target.parentElement.appendChild(counter);
+        e.target.remove();
+        this.removeClones(counter);
+        trace.remove();
+      } else {
+        const proneCounter = e.target.parentElement.querySelector('[href="#counter-prone"]');
+
+        if (proneCounter) {
+          proneCounter.remove();
+        }
+
+        points = points.filter(p => p != `${pos.x},${pos.y}`).join(' ');
+        trace.setAttributeNS(null, 'points', points);
+        e.target.remove();
+      }
+    }
+  }
+
+  dblClick(e) {
+    if (e.target.classList.contains(selectedClass)) {
+      let { troopNumber, troopAllegiance } = e.target.dataset,
+        trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance));
+
+      if (!trace) {
+        e.target.remove();
+        this.svg.querySelectorAll(`#firing-arcs ${this.dataSelector(troopNumber, troopAllegiance)}`).forEach(el => el.remove());
+      }
+    }
+  }
+
+  select({ dataset: { allegiance, number }}) {
+    this.unSelect();
+
+    let counter = this.getCounter(allegiance, number);
+
+    if (counter) {
+      this.container.placing.push(counter);
+      counter.classList.add(selectedClass);
+      let existingArcs = this.container.getExistingArcs(allegiance, number);
+      existingArcs.forEach(el => el.removeAttribute('clip-path'));
+      this.container.selectCallback({ prone: this.hasProne(counter), ...counter.dataset });
+    }
+  }
+
+  unSelect() {
+    let selected = this.container.getSelected();
+    this.container.placing = [];
+
+    if (selected) {
+      let { troopNumber, troopAllegiance } = selected.dataset;
+
+      selected.classList.remove(selectedClass);
+      selected.removeAttribute('style');
+      this.container.sightLine.clear();
+
+      this
+        .svg
+        .querySelectorAll(`${this.selector(troopNumber, troopAllegiance)}.clone`)
+        .forEach(el => el.removeAttribute('style'));
+    }
+
+    this.container.clipFiringArcs();
+  }
+
+  get(troopNumber, allegiance) {
+    return this.container.getCounter(allegiance, troopNumber);
+  }
+
+  getAt(x, y) {
+    return this.container.querySelector(`${counterPosition(x, y)}:not(.clone)`);
+  }
+
+  isSelected(troopNumber, allegiance) {
+    return this.container.svg.querySelector(`${this.selector(troopNumber, allegiance)}.${selectedClass}`) !== null;
+  }
+
+  place(point) {
+    const selected = this.container.getSelected(),
+      troopAllegiance = selected.dataset.allegiance,
+      troopNumber = selected.dataset.number;
+
+    let counter, points,
+      counterNodeList = this.getCounterAndClones(troopAllegiance, troopNumber);
+
+    if (counterNodeList.length > 0 && selected.parentElement.hasAttribute('data-x')) {
+      let counters = Array.from(counterNodeList),
+        original = counters.find(el => !el.classList.contains('clone')),
+        trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance));
+
+      counter = original.cloneNode();
+      counter.setAttributeNS(null, 'x', 0);
+      counter.setAttributeNS(null, 'y', 0);
+      counter.classList.remove(selectedClass);
+      counter.classList.add('clone');
+
+      original.setAttributeNS(null, 'x', 0);
+      original.setAttributeNS(null, 'y', 0);
+
+      original.parentElement.appendChild(counter);
+      point.parentElement.appendChild(original);
+
+      if (counter.parentElement.querySelector('[href="#counter-prone"]')) {
+        this.toggleProne();
+      }
+
+      let previous = this.getCellPosition(counter.parentElement),
+        current = this.getCellPosition(original.parentElement);
+
+      if (!trace) {
+        trace = document.createElementNS(svgns, 'polyline');
+
+        points = `${previous.x},${previous.y} ${current.x},${current.y}`;
+
+        trace.dataset.number = troopNumber;
+        trace.dataset.allegiance = troopAllegiance;
+        trace.classList.add('move-trace');
+
+        this.container.getBoard().prepend(trace);
+      } else {
+        points = `${trace.getAttribute('points')} ${current.x},${current.y}`;
+      }
+
+      trace.setAttributeNS(null, 'points', points);
+      counter.addEventListener('click', this.clickClone.bind(this));
+    } else {
+      selected.removeAttribute('data-x');
+      point.parentElement.appendChild(selected);
+    }
+  }
+
+  remove({ dataset: { troopNumber, troopAllegiance }}) {
+    this.container
+      .querySelectorAll(dataSelector(troopNumber, troopAllegiance))
+      .forEach(el => el.remove());
+  }
+
+  removeClones({ dataset: { allegiance, number }}) {
+    this.getClones(allegiance, number).forEach(el => {
+      const proneCounter = el.parentElement.querySelector('[href="#counter-prone"]');
+
+      if (proneCounter) {
+        proneCounter.remove();
+      }
+
+      el.remove()
+    });
+  }
+
+  endMove(el) {
+    let { number: troopNumber, allegiance: troopAllegiance } = el.dataset;
+    let trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance));
+
+    if (trace) {
+      trace.remove();
+    }
+
+    this.removeClones(el);
+    this.unSelect();
+  }
+
+  hasProne(counter) {
+    const isOnBoard = counter.parentElement.hasAttribute('data-x');
+
+    if (isOnBoard) {
+      return !!counter.parentElement.querySelector('[href="#counter-prone"]');
+    }
+
+    return false;
+  }
+
+  toggleProne() {
+    const selected = this.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);
+      }
+    }
+  }
+}
diff --git a/src/modules/game.js b/src/modules/game.js
index c398da8..b3f1797 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -1,5 +1,6 @@
 import FiringArc from './firingArc.js';
 import SightLine from './sightLine.js';
+import Counter from './counter.js';
 
 const svgns = "http://www.w3.org/2000/svg";
 
@@ -24,8 +25,9 @@ export default class Game {
     this.svg = svg;
     this.firingArc = new FiringArc(svg);
     this.sightLine = new SightLine(svg);
+    this.counter = new Counter(svg, this);
 
-    this.setUpCounter(this);
+    // this.setUpCounter(this);
     this.setUpCells();
   }
 
@@ -41,22 +43,6 @@ export default class Game {
     return cell.querySelector('use[href="#hex"]');
   }
 
-  getCounters() {
-    return this.svg.querySelectorAll(`use[data-allegiance][data-number]:not(.clone)`);
-  }
-
-  getCounter(al, n) {
-    return this.svg.querySelector(`use[data-allegiance="${al}"][data-number="${n}"]:not(.clone)`);
-  }
-
-  getCounterAndClones(al, n) {
-    return this.svg.querySelectorAll(`use[data-allegiance="${al}"][data-number="${n}"]`);
-  }
-
-  getClones(al, n) {
-    return this.svg.querySelectorAll(`use[data-allegiance="${al}"][data-number="${n}"].clone`);
-  }
-
   getSelected() {
     return this.svg.querySelector(`use[data-allegiance][data-number].selected`);
   }
@@ -105,16 +91,16 @@ export default class Game {
     const selected = this.getSelected();
 
     if (selected) {
-      this.Counter.endMove(selected);
+      this.counter.endMove(selected);
     }
   }
 
   select(allegiance, number) {
-    this.Counter.select({ dataset: { allegiance, number } });
+    this.counter.select({ dataset: { allegiance, number } });
   }
 
   unSelect() {
-    this.Counter.unSelect();
+    this.counter.unSelect();
   }
 
   endTurn(allegiance) {
@@ -123,7 +109,7 @@ export default class Game {
   }
 
   toggleProne() {
-    this.Counter.toggleProne();
+    this.counter.toggleProne();
   }
 
   toggleFiringArcVisibility(allegiance) {
@@ -170,7 +156,7 @@ export default class Game {
         if (this.getSelected() && !existingOccupant) {
           let sl = this.svg.querySelector('.sight-line');
           this.placing.push(toPlace);
-          this.Counter.place(point);
+          this.counter.place(point);
 
           if (sl) {
             if (sl.classList.contains('active')) {
@@ -233,325 +219,6 @@ export default class Game {
     });
   }
 
-  setUpCounter(container) {
-    this.Counter = new function () {
-      let selectedClass = 'selected',
-
-        dataSelector = function (troopNumber, allegiance) {
-          return `[data-number="${troopNumber}"][data-allegiance="${allegiance}"]`;
-        },
-
-        selector = function (troopNumber, allegiance) {
-          return `use.counter${dataSelector(troopNumber, allegiance)}`;
-        },
-
-        position = function (x, y) {
-          return `g[data-x="${x}"][data-y="${y}"]`;
-        },
-
-        counterPosition = function (x, y) {
-          return `use.counter[data-x="${x}"][data-x="${y}"]`;
-        },
-
-        traceSelector = function (troopNumber, allegiance) {
-          return `polyline.move-trace${dataSelector(troopNumber, allegiance)}`;
-        },
-
-        clickClone = function (e) {
-          e.stopPropagation();
-
-          let { number: troopNumber, allegiance: troopAllegiance } = this.dataset,
-            pos = container.getCellPosition(this.parentElement);
-
-          if (container.Counter.isSelected(troopNumber, troopAllegiance)) {
-            let trace = container.svg.querySelector(traceSelector(troopNumber, troopAllegiance)),
-              points = trace.getAttribute('points').split(' ');
-
-            if (`${pos.x},${pos.y}` == points.at(0)) {
-              const counter = container.getCounter(troopAllegiance, troopNumber),
-                lockedSl = container.svg.querySelector('.sight-line:not(.active)');
-
-              counter.setAttributeNS(null, 'x', 0);
-              counter.setAttributeNS(null, 'y', 0);
-
-              if (!lockedSl) {
-                container.sightLine.clear();
-              } else {
-                container.sightLine.update(this, container.getCellPosition(this.parentElement));
-              }
-
-              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();
-            }
-          }
-        },
-
-        pointerOver = function () {
-          let { number: troopNumber, allegiance: troopAllegiance } = this.dataset,
-            cp = container.svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`);
-
-          if (cp) {
-            cp.style.display = 'none';
-          }
-        },
-
-        pointerOut = function () {
-          let { number: troopNumber, allegiance: troopAllegiance } = this.dataset,
-            cp = container.svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`);
-
-          if (cp) {
-            let isVisible =
-              document
-                .getElementById('toggle-firing-arc-vis')
-                .querySelector(`input[data-allegiance="${troopAllegiance}"]`)
-                .checked;
-
-            cp.style.display = isVisible ? 'none' : '';
-          }
-        },
-
-        click = function (e) {
-          if (this.classList.contains(selectedClass)) {
-            e.stopPropagation();
-            let { number: troopNumber, allegiance: troopAllegiance } = this.dataset,
-              trace = container.svg.querySelector(traceSelector(troopNumber, troopAllegiance));
-
-            if (trace) {
-              let points = trace.getAttribute('points').split(' '),
-                [clonePosX, clonePosY] = points.at(-2).split(',').map(p => parseFloat(p)),
-
-                { clone } = Array
-                  .from(container.getClones(troopAllegiance, troopNumber))
-                  .map(c => { return { clone: c, pos: container.getCellPosition(c.parentElement) }})
-                  .find(({ pos: { x, y }}) => x == clonePosX && y == clonePosY);
-
-              points.pop();
-
-              if (points.length >= 2) {
-                trace.setAttributeNS(null, 'points', points.join(' '));
-              } else {
-                trace.remove();
-              }
-
-              let sl = container.svg.querySelector('.sight-line');
-
-              if (sl) {
-                container.sightLine.update(clone, this.getCellPosition(clone.parentElement));
-              } else {
-                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();
-            }
-          } else {
-            e.stopPropagation();
-            container.Counter.select(e.target);
-          }
-        },
-
-        dblClick = function () {
-          if (this.classList.contains(selectedClass)) {
-            let { troopNumber, troopAllegiance } = this.dataset,
-              trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));
-
-            if (!trace) {
-              container.Counter.remove(this);
-              container.svg.querySelectorAll(`#firing-arcs ${dataSelector(troopNumber, troopAllegiance)}`).forEach(el => el.remove());
-            }
-          }
-        };
-
-      this.get = function (troopNumber, allegiance) {
-        return container.getCounter(allegiance, troopNumber);
-      };
-
-      this.getAt = function (x, y) {
-        return container.querySelector(`${counterPosition(x, y)}:not(.clone)`);
-      };
-
-      this.select = function ({ dataset: { allegiance, number }}) {
-        this.unSelect();
-
-        let counter = container.getCounter(allegiance, number);
-
-        if (counter) {
-          container.placing.push(counter);
-          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 });
-        }
-      };
-
-      this.unSelect = function () {
-        let selected = container.getSelected();
-        container.place = [];
-
-        if (selected) {
-          let { troopNumber, troopAllegiance } = selected.dataset;
-
-          selected.classList.remove(selectedClass);
-          selected.removeAttribute('style');
-          container.sightLine.clear();
-
-          container
-            .svg
-            .querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`)
-            .forEach(el => el.removeAttribute('style'));
-        }
-
-        container.clipFiringArcs();
-      };
-
-      this.isSelected = function (troopNumber, allegiance) {
-        return container.svg.querySelector(`${selector(troopNumber, allegiance)}.${selectedClass}`) !== null;
-      };
-
-      this.place = function (point) {
-        const selected = container.getSelected(),
-          troopAllegiance = selected.dataset.allegiance,
-          troopNumber = selected.dataset.number;
-
-        let counter, points,
-          counterNodeList = container.getCounterAndClones(troopAllegiance, troopNumber);
-
-        if (counterNodeList.length > 0 && selected.parentElement.hasAttribute('data-x')) {
-          let counters = Array.from(counterNodeList),
-            original = counters.find(el => !el.classList.contains('clone')),
-            trace = container.svg.querySelector(traceSelector(troopNumber, troopAllegiance));
-
-          counter = original.cloneNode();
-          counter.setAttributeNS(null, 'x', 0);
-          counter.setAttributeNS(null, 'y', 0);
-          counter.classList.remove(selectedClass);
-          counter.classList.add('clone');
-
-          original.setAttributeNS(null, 'x', 0);
-          original.setAttributeNS(null, 'y', 0);
-
-          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);
-
-          if (!trace) {
-            trace = document.createElementNS(svgns, 'polyline');
-
-            points = `${previous.x},${previous.y} ${current.x},${current.y}`;
-
-            trace.dataset.number = troopNumber;
-            trace.dataset.allegiance = troopAllegiance;
-            trace.classList.add('move-trace');
-
-            container.getBoard().prepend(trace);
-          } else {
-            points = `${trace.getAttribute('points')} ${current.x},${current.y}`;
-          }
-
-          trace.setAttributeNS(null, 'points', points);
-          counter.addEventListener('click', clickClone);
-        } else {
-          selected.removeAttribute('data-x');
-          point.parentElement.appendChild(selected);
-        }
-      };
-
-      this.remove = function ({ dataset: { troopNumber, troopAllegiance }}) {
-        container
-          .querySelectorAll(dataSelector(troopNumber, troopAllegiance))
-          .forEach(el => el.remove());
-      };
-
-      this.removeClones = function ({ dataset: { allegiance, number }}) {
-        container.getClones(allegiance, number).forEach(el => {
-          const proneCounter = el.parentElement.querySelector('[href="#counter-prone"]');
-
-          if (proneCounter) {
-            proneCounter.remove();
-          }
-
-          el.remove()
-        });
-      };
-
-      this.endMove = function (el) {
-        let { number: troopNumber, allegiance: troopAllegiance } = el.dataset;
-        let trace = container.svg.querySelector(traceSelector(troopNumber, troopAllegiance));
-
-        if (trace) {
-          trace.remove();
-        }
-
-        this.removeClones(el);
-        this.unSelect();
-      };
-
-      this.hasProne = function (counter) {
-        const isOnBoard = counter.parentElement.hasAttribute('data-x');
-
-        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);
-        counter.addEventListener('click', click);
-        // counter.addEventListener('dblclick', dblClick);
-      };
-    };
-
-    this.getCounters().forEach(c => this.Counter.addEventListeners(c));
-  }
-
   setFiringArc(size) {
     const counter = this.getSelected();
author	Catalin Mititiuc <webdevcat@proton.me>	2024-04-23 13:33:15 -0700
committer	Catalin Mititiuc <webdevcat@proton.me>	2024-04-23 13:33:15 -0700
commit	1a75bf469aa72f9845fe86ac2ebb34424c262f33 (patch)
tree	9491632e63f011b8eeb85e227350790054790cb0 /src/modules
parent	ec023057b9a02036d28da3fad86c0f5ae5796f59 (diff)