WIP: more refactor

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,17 +454,12 @@ 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(troopNumber, troopAllegiance));
-          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 = {
@@ -449,7 +480,6 @@ const Counter = new function() {
       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');
 
@@ -485,65 +515,35 @@ const Counter = new function() {
       counter.dataset.x = point.dataset.x;
       counter.dataset.y = point.dataset.y;
 
-      //   counter.addEventListener('dblclick', e => {
+      counter.addEventListener('click', click);
-      //     let selectedSoldier = document.querySelector('.soldier-record.selected');
+      counter.addEventListener('dblclick', dblClick);
-
-      //     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();
-      //         }
-      //       }
-      //     }
-      //   });
     }
 
     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;
+    Counter.endMove(selectedSoldier);
-    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());
 
     selectedSoldier.classList.toggle('selected');
     selectedSoldier.classList.toggle('movement-ended');