1 files changed, 141 insertions, 304 deletions
diff --git a/index.js b/index.js
index 23b2464..77b81f0 100644
--- a/index.js
+++ b/index.js
@@ -21,10 +21,6 @@ function calculateAngle(xDiff, yDiff) {
   return angle;
 }
 
-function troopSelector(number, allegiance) {
-  return `[data-troop-number="${number}"][data-troop-allegiance="${allegiance}"]`;
-}
-
 function edgePoint(x1, y1, x2, y2, maxX, maxY) {
   let pointCoords,
       xDiff = x2 - x1,
@@ -381,7 +377,7 @@ const Counter = new function() {
             counter.dataset.x = x;
             counter.dataset.y = y;
 
-            container.querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`).forEach(el => el.remove());
+            Counter.removeClones(this);
             trace.remove();
           } else {
             points = points.filter(p => p != `${xAttr},${yAttr}`).join(' ');
@@ -391,6 +387,46 @@ const Counter = new function() {
 
           this.remove();
         }
+      },
+
+      click = function() {
+        if (this.classList.contains(selectedClass)) {
+          let { troopNumber, troopAllegiance } = this.dataset,
+              trace = container.querySelector(traceSelector(troopNumber, troopAllegiance));
+
+          if (trace) {
+            let points = trace.getAttribute('points').split(' '),
+                [xAttr, yAttr] = points.at(-2).split(','),
+                clone = container.querySelector(`${dataSelector(troopNumber, troopAllegiance)}[x="${xAttr}"][y="${yAttr}"].clone`);
+
+            points.pop();
+
+            if (points.length >= 2) {
+              trace.setAttributeNS(null, 'points', points.join(' '));
+            } else {
+              trace.remove();
+            }
+
+            this.setAttributeNS(null, 'x', clone.getAttribute('x'));
+            this.setAttributeNS(null, 'y', clone.getAttribute('y'));
+            this.dataset.x = clone.dataset.x;
+            this.dataset.y = clone.dataset.y;
+
+            clone.remove();
+          }
+        }
+      },
+
+      dblClick = function() {
+        if (this.classList.contains(selectedClass)) {
+          let { troopNumber, troopAllegiance } = this.dataset,
+              trace = container.querySelector(traceSelector(troopNumber, troopAllegiance));
+
+          if (!trace) {
+            Counter.remove(troopNumber, troopAllegiance);
+            document.querySelectorAll(`#firing-arcs ${dataSelector(troopNumber, troopAllegiance)}`).forEach(el => el.remove());
+          }
+        }
       };
 
   this.get = function(troopNumber, allegiance) {
@@ -418,132 +454,96 @@ const Counter = new function() {
   };
 
   this.place = function({ dataset: { troopNumber, troopAllegiance }}, point) {
-    let tempSelector = selector(troopNumber, troopAllegiance);
-
-    new function() {
-      let counter, points,
-          selector = tempSelector,
-          counterNodeList = container.querySelectorAll(`${selector}`);
-
-      if (counterNodeList.length > 0) {
-        let counters = Array.from(counterNodeList),
-            original = counters.find(el => !el.classList.contains('clone')),
-            count = counters.filter(el => el.classList.contains('clone')).length,
-            trace = container.querySelector(traceSelector(troopNumber, troopAllegiance));
-
-        let current = {
-              x: point.dataset.x,
-              y: point.dataset.y,
-              xAttr: point.getAttribute('x'),
-              yAttr: point.getAttribute('y')
-            },
-            previous = {
-              x: original.dataset.x,
-              y: original.dataset.y,
-              xAttr: original.getAttribute('x'),
-              yAttr: original.getAttribute('y')
-            }
+    let counter, points,
+        counterNodeList = container.querySelectorAll(selector(troopNumber, troopAllegiance));
+
+    if (counterNodeList.length > 0) {
+      let counters = Array.from(counterNodeList),
+          original = counters.find(el => !el.classList.contains('clone')),
+          trace = container.querySelector(traceSelector(troopNumber, troopAllegiance));
+
+      let current = {
+            x: point.dataset.x,
+            y: point.dataset.y,
+            xAttr: point.getAttribute('x'),
+            yAttr: point.getAttribute('y')
+          },
+          previous = {
+            x: original.dataset.x,
+            y: original.dataset.y,
+            xAttr: original.getAttribute('x'),
+            yAttr: original.getAttribute('y')
+          }
 
-        counter = original.cloneNode();
-        counter.setAttributeNS(null, 'x', previous.xAttr);
-        counter.setAttributeNS(null, 'y', previous.yAttr);
-        counter.dataset.x = previous.x;
-        counter.dataset.y = previous.y;
-        counter.dataset.cloneOrder = count + 1;
-        counter.classList.remove(selectedClass);
-        counter.classList.add('clone');
-
-        original.setAttributeNS(null, 'x', current.xAttr);
-        original.setAttributeNS(null, 'y', current.yAttr);
-        original.dataset.x = current.x;
-        original.dataset.y = current.y;
-
-        if (!trace) {
-          trace = document.createElementNS(svgns, 'polyline');
-          points = `${previous.xAttr},${previous.yAttr} ${current.xAttr},${current.yAttr}`;
-
-          trace.dataset.troopNumber = troopNumber;
-          trace.dataset.troopAllegiance = troopAllegiance;
-          trace.classList.add('move-trace');
-
-          container.prepend(trace);
-        } else {
-          points = `${trace.getAttribute('points')} ${current.xAttr},${current.yAttr}`;
-        }
+      counter = original.cloneNode();
+      counter.setAttributeNS(null, 'x', previous.xAttr);
+      counter.setAttributeNS(null, 'y', previous.yAttr);
+      counter.dataset.x = previous.x;
+      counter.dataset.y = previous.y;
+      counter.classList.remove(selectedClass);
+      counter.classList.add('clone');
+
+      original.setAttributeNS(null, 'x', current.xAttr);
+      original.setAttributeNS(null, 'y', current.yAttr);
+      original.dataset.x = current.x;
+      original.dataset.y = current.y;
+
+      if (!trace) {
+        trace = document.createElementNS(svgns, 'polyline');
+        points = `${previous.xAttr},${previous.yAttr} ${current.xAttr},${current.yAttr}`;
 
-        trace.setAttributeNS(null, 'points', points);
-        counter.addEventListener('click', clickClone);
+        trace.dataset.troopNumber = troopNumber;
+        trace.dataset.troopAllegiance = troopAllegiance;
+        trace.classList.add('move-trace');
+
+        container.prepend(trace);
       } else {
-        counter = document.createElementNS(svgns, 'use'),
-
-        counter.setAttributeNS(null, 'href', `#t-${troopNumber}`);
-        counter.classList.add('counter', 'selected');
-        counter.setAttributeNS(null, 'x', point.getAttribute('x'));
-        counter.setAttributeNS(null, 'y', point.getAttribute('y'));
-        counter.dataset.troopNumber = troopNumber;
-        counter.dataset.troopAllegiance = troopAllegiance;
-        counter.dataset.x = point.dataset.x;
-        counter.dataset.y = point.dataset.y;
-
-      //   counter.addEventListener('dblclick', e => {
-      //     let selectedSoldier = document.querySelector('.soldier-record.selected');
-
-      //     if (selectedSoldier) {
-      //       let trace = container.querySelector(`polyline.move-trace${selector}`);
-      //       if (!trace) {
-      //         let {troopNumber, troopAllegiance} = selectedSoldier.dataset,
-      //             selector = troopSelector(troopNumber, troopAllegiance),
-      //             targetIsSelectedSoldier = [
-      //               e.target.dataset.troopNumber == troopNumber,
-      //               e.target.dataset.troopAllegiance == troopAllegiance
-      //             ].every(el => el);
-
-      //         if (targetIsSelectedSoldier) {
-      //           container.querySelectorAll(`${selector}`).forEach(el => el.remove());
-      //           document.querySelectorAll(`#firing-arcs ${selector}`).forEach(el => el.remove());
-      //         }
-      //       }
-      //     }
-      //   });
-
-      //   counter.addEventListener('click', e => {
-      //     let selectedSoldier = document.querySelector('.soldier-record.selected');
-
-      //     if (selectedSoldier) {
-      //       let { troopNumber, troopAllegiance } = selectedSoldier.dataset,
-      //           selector = troopSelector(troopNumber, troopAllegiance);
-
-      //       if (counter.dataset.troopAllegiance == troopAllegiance && counter.dataset.troopNumber == troopNumber) {
-      //         let trace = container.querySelector(`polyline.move-trace${selector}`);
-
-      //         if (trace) {
-      //           let points = trace.getAttribute('points').split(' ');
-      //           let [xAttr, yAttr] = points.at(-2).split(',');
-      //           let clone = container.querySelector(`${selector}[x="${xAttr}"][y="${yAttr}"].clone`);
-
-      //           points.pop()
-
-      //           if (points.length >= 2) {
-      //             trace.setAttributeNS(null, 'points', points.join(' '));
-      //           } else {
-      //             trace.remove();
-      //           }
-
-      //           counter.setAttributeNS(null, 'x', clone.getAttribute('x'));
-      //           counter.setAttributeNS(null, 'y', clone.getAttribute('y'));
-      //           counter.dataset.x = clone.dataset.x;
-      //           counter.dataset.y = clone.dataset.y;
-
-      //           clone.remove();
-      //         }
-      //       }
-      //     }
-      //   });
+        points = `${trace.getAttribute('points')} ${current.xAttr},${current.yAttr}`;
       }
 
-      container.appendChild(counter);
+      trace.setAttributeNS(null, 'points', points);
+      counter.addEventListener('click', clickClone);
+    } else {
+      counter = document.createElementNS(svgns, 'use'),
+
+      counter.setAttributeNS(null, 'href', `#t-${troopNumber}`);
+      counter.classList.add('counter', 'selected');
+      counter.setAttributeNS(null, 'x', point.getAttribute('x'));
+      counter.setAttributeNS(null, 'y', point.getAttribute('y'));
+      counter.dataset.troopNumber = troopNumber;
+      counter.dataset.troopAllegiance = troopAllegiance;
+      counter.dataset.x = point.dataset.x;
+      counter.dataset.y = point.dataset.y;
+
+      counter.addEventListener('click', click);
+      counter.addEventListener('dblclick', dblClick);
     }
-  }
+
+    container.appendChild(counter);
+  };
+
+  this.remove = function(troopNumber, troopAllegiance) {
+    container
+      .querySelectorAll(dataSelector(troopNumber, troopAllegiance))
+      .forEach(el => el.remove());
+  };
+
+  this.removeClones = function({ dataset: { troopNumber, troopAllegiance }}) {
+    container
+      .querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`)
+      .forEach(el => el.remove());
+  };
+
+  this.endMove = function(el) {
+    let { troopNumber, troopAllegiance } = el.dataset;
+    let trace = container.querySelector(traceSelector(troopNumber, troopAllegiance));
+
+    if (trace) {
+      trace.remove();
+    }
+
+    Counter.removeClones(el);
+  };
 };
 
 POINTS.forEach((row, index) => row.forEach(([x, y]) => {
@@ -567,158 +567,6 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
 
     if (selectedSoldier && !existingOccupant) {
       Counter.place(selectedSoldier, point);
-
-      // let counter, points,
-      //     { troopNumber, troopAllegiance } = selectedSoldier.dataset,
-      //     selector = troopSelector(troopNumber, troopAllegiance),
-      //     counterNodeList = cntrGrp.querySelectorAll(`use${selector}`);
-
-      // if (counterNodeList.length > 0) {
-      //   let counters = Array.from(counterNodeList),
-      //       original = counters.find(el => !el.classList.contains('clone')),
-      //       count = counters.filter(el => el.classList.contains('clone')).length,
-      //       trace = cntrGrp.querySelector(`polyline.move-trace${selector}`);
-
-      //   let current = {
-      //         x: point.dataset.x,
-      //         y: point.dataset.y,
-      //         xAttr: point.getAttribute('x'),
-      //         yAttr: point.getAttribute('y')
-      //       },
-      //       previous = {
-      //         x: original.dataset.x,
-      //         y: original.dataset.y,
-      //         xAttr: original.getAttribute('x'),
-      //         yAttr: original.getAttribute('y')
-      //       }
-
-      //   counter = original.cloneNode();
-      //   counter.setAttributeNS(null, 'x', previous.xAttr);
-      //   counter.setAttributeNS(null, 'y', previous.yAttr);
-      //   counter.dataset.x = previous.x;
-      //   counter.dataset.y = previous.y;
-      //   counter.dataset.cloneOrder = count + 1;
-      //   counter.classList.add('clone');
-
-      //   original.setAttributeNS(null, 'x', current.xAttr);
-      //   original.setAttributeNS(null, 'y', current.yAttr);
-      //   original.dataset.x = current.x;
-      //   original.dataset.y = current.y;
-
-      //   if (!trace) {
-      //     trace = document.createElementNS(svgns, 'polyline');
-      //     points = `${previous.xAttr},${previous.yAttr} ${current.xAttr},${current.yAttr}`;
-
-      //     trace.dataset.troopNumber = troopNumber;
-      //     trace.dataset.troopAllegiance = troopAllegiance;
-      //     trace.classList.add('move-trace');
-
-      //     cntrGrp.prepend(trace);
-      //   } else {
-      //     points = `${trace.getAttribute('points')} ${current.xAttr},${current.yAttr}`;
-      //   }
-
-      //   trace.setAttributeNS(null, 'points', points);
-
-      //   counter.addEventListener('click', e => {
-      //     let selectedSoldier = document.querySelector('.soldier-record.selected');
-
-      //     if (selectedSoldier) {
-      //       let { troopNumber, troopAllegiance } = selectedSoldier.dataset,
-      //           selector = troopSelector(troopNumber, troopAllegiance);
-
-      //       if (counter.dataset.troopAllegiance == troopAllegiance && counter.dataset.troopNumber == troopNumber) {
-      //         let [xAttr, yAttr] = [counter.getAttribute('x'), counter.getAttribute('y')];
-      //         let points = trace.getAttribute('points').split(' ');
-
-      //         if (`${xAttr},${yAttr}` == points.at(0)) {
-      //           original.setAttributeNS(null, 'x', xAttr);
-      //           original.setAttributeNS(null, 'y', yAttr);
-      //           original.dataset.x = counter.dataset.x;
-      //           original.dataset.y = counter.dataset.y;
-
-      //           cntrGrp.querySelectorAll(`use${selector}.clone`).forEach(el => el.remove());
-      //           trace.remove();
-      //         } else {
-      //           let points = trace.getAttribute('points').split(' ').filter(p => p != `${xAttr},${yAttr}`);
-
-      //           trace.setAttributeNS(null, 'points', points.join(' '));
-      //         }
-
-      //         counter.remove();
-      //       }
-      //     }
-      //   });
-
-      // } else {
-      //   counter = document.createElementNS(svgns, 'use'),
-
-      //   counter.setAttributeNS(null, 'href', `#t-${troopNumber}`);
-      //   counter.classList.add('counter');
-      //   counter.setAttributeNS(null, 'x', cx);
-      //   counter.setAttributeNS(null, 'y', cy);
-      //   counter.dataset.troopNumber = troopNumber;
-      //   counter.dataset.troopAllegiance = troopAllegiance;
-      //   counter.dataset.x = point.dataset.x;
-      //   counter.dataset.y = point.dataset.y;
-
-      //   counter.addEventListener('dblclick', e => {
-      //     let selectedSoldier = document.querySelector('.soldier-record.selected');
-
-      //     if (selectedSoldier) {
-      //       let trace = cntrGrp.querySelector(`polyline.move-trace${selector}`);
-      //       if (!trace) {
-      //         let {troopNumber, troopAllegiance} = selectedSoldier.dataset,
-      //             selector = troopSelector(troopNumber, troopAllegiance),
-      //             targetIsSelectedSoldier = [
-      //               e.target.dataset.troopNumber == troopNumber,
-      //               e.target.dataset.troopAllegiance == troopAllegiance
-      //             ].every(el => el);
-
-      //         if (targetIsSelectedSoldier) {
-      //           cntrGrp.querySelectorAll(`${selector}`).forEach(el => el.remove());
-      //           document.querySelectorAll(`#firing-arcs ${selector}`).forEach(el => el.remove());
-      //         }
-      //       }
-      //     }
-      //   });
-
-      //   counter.addEventListener('click', e => {
-      //     let selectedSoldier = document.querySelector('.soldier-record.selected');
-
-      //     if (selectedSoldier) {
-      //       let { troopNumber, troopAllegiance } = selectedSoldier.dataset,
-      //           selector = troopSelector(troopNumber, troopAllegiance);
-
-      //       if (counter.dataset.troopAllegiance == troopAllegiance && counter.dataset.troopNumber == troopNumber) {
-      //         let trace = cntrGrp.querySelector(`polyline.move-trace${selector}`);
-
-      //         if (trace) {
-      //           let points = trace.getAttribute('points').split(' ');
-      //           let [xAttr, yAttr] = points.at(-2).split(',');
-      //           let clone = cntrGrp.querySelector(`${selector}[x="${xAttr}"][y="${yAttr}"].clone`);
-
-      //           points.pop()
-
-      //           if (points.length >= 2) {
-      //             trace.setAttributeNS(null, 'points', points.join(' '));
-      //           } else {
-      //             trace.remove();
-      //           }
-
-      //           counter.setAttributeNS(null, 'x', clone.getAttribute('x'));
-      //           counter.setAttributeNS(null, 'y', clone.getAttribute('y'));
-      //           counter.dataset.x = clone.dataset.x;
-      //           counter.dataset.y = clone.dataset.y;
-
-      //           clone.remove();
-      //         }
-      //       }
-      //     }
-      //   });
-      // }
-
-      // cntrGrp.appendChild(counter);
     }
   });
 
@@ -844,7 +692,8 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
   let selectedSoldier = document.querySelector('.soldier-record.selected');
 
   if (selectedSoldier) {
-    let {troopNumber, troopAllegiance} = selectedSoldier.dataset;
+    let {troopNumber, troopAllegiance} = selectedSoldier.dataset,
+        counter = Counter.get(troopNumber, troopAllegiance);
 
     let existingArcs = document.querySelectorAll(
       `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
@@ -852,17 +701,13 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
 
     existingArcs.forEach(el => el.remove());
 
-    let counter = document.querySelector(
-      `circle.counter[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
-    );
-
     if (counter) {
       let arcLayer = document.getElementById('shapes');
       let outlineLayer = document.getElementById('lines');
 
       let grid = document.getElementById('grid');
       const transform = getComputedStyle(grid).transform.match(/-?\d+\.?\d*/g);
-      const pt = new DOMPoint(counter.cx.baseVal.value, counter.cy.baseVal.value);
+      const pt = new DOMPoint(counter.getAttribute('x'), counter.getAttribute('y'));
       const mtx = new DOMMatrix(transform);
       let tPt = pt.matrixTransform(mtx);
 
@@ -924,17 +769,6 @@ svg.addEventListener('wheel', e => {
   svg.setAttributeNS(null, 'viewBox', vb);
 });
 
-ptGrp.addEventListener('mouseout', e => {
-  let sl = svg.querySelector('.sight-line');
-
-  if (sl && sl.classList.contains('active')) {
-    info.querySelector('#hex-count').textContent = '-';
-    info.style.display = 'none';
-    ptGrp.querySelectorAll('.active').forEach(el => el.removeAttribute('class'));
-    svg.querySelectorAll('.sight-line').forEach(el => el.remove());
-  }
-});
-
 svg.addEventListener('pointerdown', e => {
   const minPanDistanceThreshold = 5;
 
@@ -995,6 +829,18 @@ svg.addEventListener('pointerdown', e => {
 //   }
 // });
 
+
+ptGrp.addEventListener('mouseout', e => {
+  let sl = svg.querySelector('.sight-line');
+
+  if (sl && sl.classList.contains('active')) {
+    info.querySelector('#hex-count').textContent = '-';
+    info.style.display = 'none';
+    ptGrp.querySelectorAll('.active').forEach(el => el.removeAttribute('class'));
+    svg.querySelectorAll('.sight-line').forEach(el => el.remove());
+  }
+});
+
 recordSheetVisibility.addEventListener('input', e => {
   localStorage.setItem('recordsVisibility', recordSheetVisibility.checked);
 });
@@ -1003,16 +849,7 @@ document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click'
   let selectedSoldier = document.querySelector('.soldier-record.selected');
 
   if (selectedSoldier) {
-    let { troopNumber, troopAllegiance } = selectedSoldier.dataset;
-    let selector = troopSelector(troopNumber, troopAllegiance);
-    let trace = cntrGrp.querySelector(`polyline.move-trace${selector}`);
-
-    if (trace) {
-      trace.remove();
-    }
-
-    counterNodeList = cntrGrp.querySelectorAll(`use.counter.clone${selector}`);
-    counterNodeList.forEach(el => el.remove());
+    Counter.endMove(selectedSoldier);
 
     selectedSoldier.classList.toggle('selected');
     selectedSoldier.classList.toggle('movement-ended');