1 files changed, 48 insertions, 59 deletions
diff --git a/index.js b/index.js
index 38ddc63..fc3d4d5 100644
--- a/index.js
+++ b/index.js
@@ -10,6 +10,21 @@ function radToDeg(radians) {
   return radians * 180 / Math.PI;
 }
 
+function calculateAngle(xDiff, yDiff) {
+  yDiff = -yDiff;
+  let angle = Math.abs(Math.atan(yDiff / xDiff));
+
+  if (xDiff < 0 && yDiff > 0) {
+    angle = Math.PI - angle;
+  } else if (xDiff < 0 && yDiff < 0) {
+    angle = Math.PI + angle;
+  } else if (xDiff > 0 && yDiff < 0) {
+    angle = 2 * Math.PI - angle;
+  }
+
+  return angle;
+}
+
 function edgePoint(x1, y1, x2, y2, maxX, maxY) {
   let pointCoords,
       xDiff = x2 - x1,
@@ -100,11 +115,31 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
         `.counter[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
       ).forEach(el => el.remove());
 
+      counter.addEventListener('click', e => {
+        document.querySelectorAll(
+          `.counter[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
+        ).forEach(el => el.remove());
+
+        document.querySelectorAll(
+          `.firing-arc[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
+        ).forEach(el => el.remove());
+      });
+
       svg.appendChild(counter);
       svg.appendChild(text);
     }
   });
 
+  point.addEventListener('mouseover', e => {
+    let selectedSoldier = document.querySelector('.soldier-record.selected');
+
+    if (selectedSoldier) {
+      e.target.classList.add('active');
+    }
+  });
+
+  point.addEventListener('mouseout', e => e.target.removeAttribute('class'));
+
   svg.appendChild(point);
 }));
 
@@ -129,16 +164,8 @@ map.addEventListener('mousemove', e => {
     ];
 
     let xDiff = x2px - x1px;
-    let yDiff = -(y2px - y1px);
-    let angle = Math.abs(Math.atan(yDiff / xDiff));
-
-    if (xDiff < 0 && yDiff > 0) {
-      angle = Math.PI - angle;
-    } else if (xDiff < 0 && yDiff < 0) {
-      angle = Math.PI + angle;
-    } else if (xDiff > 0 && yDiff < 0) {
-      angle = 2 * Math.PI - angle;
-    }
+    let yDiff = y2px - y1px;
+    let angle = calculateAngle(xDiff, yDiff);
 
     console.log('angle:', `${toFixed(radToDeg(angle))}\u00B0`, `${angle}rad`);
 
@@ -167,9 +194,6 @@ map.addEventListener('mousemove', e => {
 
     let points;
 
-    xDiff = x2px - x1px;
-    yDiff = y2px - y1px;
-
     if (oppositeEdgeConditions.some(e => e)) {
       let cornerPoints;
 
@@ -186,7 +210,6 @@ map.addEventListener('mousemove', e => {
           cornerPoints = [[0, 0], [maxXpx, 0]];
         }
 
-        // points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
       } else if (xDiff < 0 && yDiff > 0) {
         if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
           cornerPoints = [[0, maxYpx], [0, 0]];
@@ -194,7 +217,6 @@ map.addEventListener('mousemove', e => {
           cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];
         }
 
-        // points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
       } else {
         if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
           cornerPoints = [[0, maxYpx], [0, 0]];
@@ -202,40 +224,12 @@ map.addEventListener('mousemove', e => {
           cornerPoints = [[0, 0], [maxXpx, 0]];
         }
 
-        // points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
       }
       points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints[1]} ${cornerPoints[0]} ${newX2},${newY2}`;
     } else if (orthogonalEdgeConditions.some(e => e)) {
-      let cornerPoint;
       let cornerPoints = [];
-
-      // console.log('x1px', x1px, 'y1px', y1px, 'x2px', x2px, 'y2px', y2px);
-      console.log('xDiff', xDiff, 'yDiff', yDiff);
-
-      if (newX1 == 0 || newX1 == maxXpx) {
-        cornerPoint = [newX1, newY2];
-      } else {
-        cornerPoint = [newX2, newY1];
-      }
-
-      if (newX1 == 0 || newX1 == maxXpx) {
-        console.log(newX1, newY1, 'nearest corner point', newX1, yDiff > 0 ? maxYpx : 0);
-      } else {
-        console.log(newX1, newY1, 'nearest corner point', xDiff > 0 ? maxXpx : 0, newY1);
-      }
-      
-      if (newX2 == 0 || newX2 == maxXpx) {
-        console.log(newX2, newY2, 'nearest corner point', newX2, yDiff > 0 ? maxYpx : 0);
-      } else {
-        console.log(newX2, newY2, 'nearest corner point', xDiff > 0 ? maxXpx : 0, newY2);
-      }
-
       let cp1, cp2;
 
-      console.log('x1px, y1px', x1px, y1px);
-      console.log('newX1, newY1', newX1, newY1);
-      console.log('newX2, newY2', newX2, newY2);
-
       if (newX1 == 0 || newX1 == maxXpx) {
         cp1 = [newX1, yDiff > 0 ? maxYpx : 0];
       } else {
@@ -248,8 +242,6 @@ map.addEventListener('mousemove', e => {
         cp2 = [xDiff > 0 ? maxXpx : 0, newY2];
       }
 
-      console.log('cp1', cp1, 'cp2', cp2);
-
       if (cp1[0] == cp2[0] && cp1[1] == cp2[1]) {
         cornerPoints.push(cp1);
       } else {
@@ -258,13 +250,8 @@ map.addEventListener('mousemove', e => {
         cornerPoints.push(cp2);
       }
 
-      console.log(`${cornerPoints.join(' ')}`);
-
-      // points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2}`;
       points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints.join(' ')} ${newX2},${newY2}`;
-      console.log('points', points);
     } else {
-      points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2}`;
       points = `${x1px},${y1px} ${newX1},${newY1} ${newX2},${newY2}`;
     }
 
@@ -274,13 +261,15 @@ map.addEventListener('mousemove', e => {
 
 document.querySelectorAll('.soldier-record').forEach(el =>
   el.addEventListener('click', e => {
-    if (e.target.classList.contains('selected')) {
-      e.target.classList.remove('selected');
-    } else {
-      document.querySelectorAll('.soldier-record.selected').forEach(el =>
-        el.classList.remove('selected')
-      );
-      e.target.classList.add('selected');
+    if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'LABEL') {
+      if (el.classList.contains('selected')) {
+        el.classList.remove('selected');
+      } else {
+        document.querySelectorAll('.soldier-record.selected').forEach(el =>
+          el.classList.remove('selected')
+        );
+        el.classList.add('selected');
+      }
     }
   })
 );
@@ -306,7 +295,7 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
 
       let firingArcPlacementListener = e => {
         document.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active'));
-        document.querySelector('circle#point').style.pointerEvents = 'auto';
+        document.querySelector('circle#point').style.display = '';
         map.removeEventListener('click', firingArcPlacementListener);
       };
 
@@ -323,7 +312,7 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
 
       arcLayer.prepend(firingArc);
 
-      document.querySelector('circle#point').style.pointerEvents = 'none';
+      document.querySelector('circle#point').style.display = 'none';
     }
   }
 }));
 \ No newline at end of file