Make sight-line stationary on click

index.html

@@ -160,7 +160,7 @@
       </svg>
 
       <div id="status">
-        <span id="hex-counter">Hex count: <span id="hex-count">-</span></span>
+        <span id="hex-counter">Distance: <span id="hex-count">-</span></span>
       </div>
     </div>
 

index.js

@@ -166,7 +166,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
   point.dataset.x = x;
   point.dataset.y = y;
 
-  point.addEventListener('click', e => {
+  point.addEventListener('dblclick', e => {
     let selectedSoldier = document.querySelector('.soldier-record.selected');
     let existingOccupant =
       svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`);
@@ -264,12 +264,13 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
     let selectedSoldier = document.querySelector('.soldier-record.selected');
 
     if (selectedSoldier) {
-      e.target.classList.add('active');
+      // e.target.classList.add('active');
       let { troopNumber: tn, troopAllegiance: ta } = selectedSoldier.dataset;
 
       let counter = svg.querySelector(`circle.counter[data-troop-number="${tn}"][data-troop-allegiance="${ta}"]`);
+      let sl = svg.querySelector('.sight-line');
 
-      if (counter) {
+      if (counter && (!sl || sl.classList.contains('active'))) {
         let source = ptGrp.querySelector(`use[data-x="${counter.dataset.x}"][data-y="${counter.dataset.y}"]`);
         let [x1, y1] = [source.x.baseVal.value, source.y.baseVal.value];
         let [x2, y2] = [e.target.x.baseVal.value, e.target.y.baseVal.value];
@@ -281,6 +282,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
           let sightLine = document.createElementNS(svgns, 'line');
 
           sightLine.classList.add('sight-line');
+          sightLine.classList.add('active');
           sightLine.setAttributeNS(null, 'x1', svgX1);
           sightLine.setAttributeNS(null, 'y1', svgY1);
           sightLine.setAttributeNS(null, 'x2', svgX2);
@@ -308,10 +310,27 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
   });
 
   point.addEventListener('mouseout', e => {
-    info.querySelector('#hex-count').textContent = '-';
+    let sl = svg.querySelector('.sight-line.active');
-    info.style.display = 'none';
+
-    ptGrp.querySelectorAll('.active').forEach(el => el.removeAttribute('class'));
+    if (sl) {
-    svg.querySelectorAll('.sight-line').forEach(el => el.remove());
+      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());
+    }
+  });
+
+  point.addEventListener('click', e => {
+    let sl = svg.querySelector('.sight-line');
+
+    if (sl) {
+      sl.classList.toggle('active');
+
+      if (sl.classList.contains('active')) {
+        point.dispatchEvent(new MouseEvent('mouseout'));
+        point.dispatchEvent(new MouseEvent('mouseover'));
+      }
+    }
   });
 
   ptGrp.appendChild(point);
@@ -589,6 +608,15 @@ document.querySelectorAll('.soldier-record').forEach(el =>
 
       el.classList.add('selected');
     }
+
+    let sl = svg.querySelector('.sight-line');
+
+    if (sl) {
+      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());
+    }
   })
 );
 

style.css

@@ -36,6 +36,7 @@ div#status {
   right: 0;
   margin: 3px;
   display: none;
+  user-select: none;
 }
 
 #hex-counter {
@@ -131,6 +132,10 @@ use[href="#point"] {
   opacity: 0;
 }
 
+use[href="#point"]:hover {
+  opacity: 1;
+}
+
 use[href="#point"].active {
   opacity: 1;
 }