1 files changed, 8 insertions, 341 deletions
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();