Add line of sight

index.js

@@ -164,6 +164,37 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
         ).forEach(el => el.remove());
       });
 
+      counter.addEventListener('mouseenter', e => {
+        let selectedSoldier = document.querySelector('.soldier-record.selected');
+
+        if (selectedSoldier) {
+          let {troopNumber, troopAllegiance} = selectedSoldier.dataset,
+              source = document.querySelector(
+                `circle.counter[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
+              ),
+              sourceAndTargetAreNotTheSame = [
+                troopNumber != e.target.dataset.troopNumber,
+                troopAllegiance != e.target.dataset.troopAllegiance
+              ].some(el => el);
+
+          if (source && sourceAndTargetAreNotTheSame) {
+            let sightLine = document.createElementNS(svgns, 'line');
+
+            sightLine.classList.add('sight-line');
+            sightLine.setAttributeNS(null, 'x1', source.getAttribute('cx'));
+            sightLine.setAttributeNS(null, 'y1', source.getAttribute('cy'));
+            sightLine.setAttributeNS(null, 'x2', e.target.getAttribute('cx'));
+            sightLine.setAttributeNS(null, 'y2', e.target.getAttribute('cy'));
+
+            svg.appendChild(sightLine);
+          }
+        }
+      });
+
+      counter.addEventListener('mouseleave', e => {
+        document.querySelectorAll('.sight-line').forEach(el => el.remove());
+      });
+
       svg.appendChild(counter);
       svg.appendChild(text);
     }

style.css

@@ -20,6 +20,11 @@ use[href="#point"].active {
   opacity: 1;
 }
 
+circle.counter {
+  stroke: transparent;
+  stroke-width: 0.5in;
+}
+
 circle.counter[data-troop-allegiance="liao"] {
   fill: green;
 }
@@ -66,6 +71,11 @@ line.ruler {
   stroke-width: 0.25in;
 }
 
+.sight-line {
+  stroke: black;
+  stroke-width: 3px;
+}
+
 .soldier-record {
   display: inline-block;
 }