1 files changed, 30 insertions, 19 deletions
diff --git a/index.js b/index.js
index aabc692..93072c8 100644
--- a/index.js
+++ b/index.js
@@ -64,6 +64,10 @@ 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,
@@ -132,36 +136,44 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
     let selectedSoldier = document.querySelector('.soldier-record.selected');
 
     if (selectedSoldier) {
-      let counter = document.createElementNS(svgns, 'circle');
-      let text = document.createElementNS(svgns, 'text');
+      let counter = document.createElementNS(svgns, 'circle'),
+          text = document.createElementNS(svgns, 'text'),
+          {troopNumber, troopAllegiance} = selectedSoldier.dataset,
+          selector = troopSelector(troopNumber, troopAllegiance);
 
       counter.setAttributeNS(null, 'cx', `${cx}in`);
       counter.setAttributeNS(null, 'cy', `${cy}in`);
       counter.setAttributeNS(null, 'r', '0.25in');
-      counter.dataset.troopNumber = selectedSoldier.dataset.troopNumber;
-      counter.dataset.troopAllegiance = selectedSoldier.dataset.troopAllegiance;
+      counter.dataset.troopNumber = troopNumber;
+      counter.dataset.troopAllegiance = troopAllegiance;
       counter.classList.add('counter');
 
       text.setAttributeNS(null, 'text-anchor', 'middle');
       text.setAttributeNS(null, 'x', `${cx}in`);
       text.setAttributeNS(null, 'y', `${cy + 0.25}in`);
-      text.dataset.troopNumber = selectedSoldier.dataset.troopNumber;
-      text.dataset.troopAllegiance = selectedSoldier.dataset.troopAllegiance;
-      text.textContent = `${selectedSoldier.dataset.troopNumber}`;
+      text.dataset.troopNumber = troopNumber;
+      text.dataset.troopAllegiance = troopAllegiance;
+      text.textContent = troopNumber;
       text.classList.add('counter');
 
-      document.querySelectorAll(
-        `.counter[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
-      ).forEach(el => el.remove());
+      document.querySelectorAll(`.counter${selector}`).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());
+        let selectedSoldier = document.querySelector('.soldier-record.selected');
 
-        document.querySelectorAll(
-          `.firing-arc[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
-        ).forEach(el => el.remove());
+        if (selectedSoldier) {
+          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) {
+            document.querySelectorAll(`.counter${selector}`).forEach(el => el.remove());
+            document.querySelectorAll(`.firing-arc${selector}`).forEach(el => el.remove());
+          }
+        }
       });
 
       counter.addEventListener('mouseenter', e => {
@@ -169,9 +181,8 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
 
         if (selectedSoldier) {
           let {troopNumber, troopAllegiance} = selectedSoldier.dataset,
-              source = document.querySelector(
-                `circle.counter[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
-              ),
+              selector = troopSelector(troopNumber, troopAllegiance),
+              source = document.querySelector(`circle.counter${selector}`),
               sourceAndTargetAreNotTheSame = [
                 troopNumber != e.target.dataset.troopNumber,
                 troopAllegiance != e.target.dataset.troopAllegiance