1 files changed, 31 insertions, 0 deletions
diff --git a/index.js b/index.js
index deef03b..aabc692 100644
--- a/index.js
+++ b/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);
     }