WIP: sight line, distance

index.html

@@ -140,6 +140,7 @@
       </fieldset>
     </div>
 
+    <div id="map-container">
       <svg viewbox="-49 -40 2390 3163" xmlns="http://www.w3.org/2000/svg">
         <defs>
           <!-- <circle id="point" cx="0" cy="0" r="0.07in" /> -->
@@ -158,6 +159,11 @@
         <!-- <rect id="debug-view-box" x="-100" y="-100" width="3400" height="4500" /> -->
       </svg>
 
+      <div id="status">
+        <span id="hex-counter">Hex count: <span id="hex-count">-</span></span>
+      </div>
+    </div>
+
     <div id="content">
       <input type="checkbox" class="visible" checked />
       <div>

index.js

@@ -99,6 +99,8 @@ if (recVis == 'false') {
   recordSheetVisibility.checked = false;
 }
 
+let info = document.getElementById('status');
+
 // Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
 [].forEach(fieldset => {
   const target = document.getElementById(fieldset.name);
@@ -166,8 +168,10 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
 
   point.addEventListener('click', e => {
     let selectedSoldier = document.querySelector('.soldier-record.selected');
+    let existingOccupant =
+      svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`);
 
-    if (selectedSoldier) {
+    if (selectedSoldier && !existingOccupant) {
       let counter = document.createElementNS(svgns, 'circle'),
           text = document.createElementNS(svgns, 'text'),
           {troopNumber, troopAllegiance} = selectedSoldier.dataset,
@@ -178,6 +182,11 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
           pt = new DOMPoint(point.x.baseVal.value, point.y.baseVal.value),
           svgP = pt.matrixTransform(mtx);
 
+      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());
+
       counter.setAttributeNS(null, 'cx', svgP.x);
       counter.setAttributeNS(null, 'cy', svgP.y);
       counter.setAttributeNS(null, 'r', '0.25in');
@@ -264,6 +273,8 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
         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];
+
+        if (x1 !== x2 || y1 !== y2) {
           let { x: svgX1, y: svgY1 } = ptGrpToSvgPt(x1, y1);
           let { x: svgX2, y: svgY2 } = ptGrpToSvgPt(x2, y2);
 
@@ -275,7 +286,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
           sightLine.setAttributeNS(null, 'x2', svgX2);
           sightLine.setAttributeNS(null, 'y2', svgY2);
 
-        svg.appendChild(sightLine);
+          svg.insertBefore(sightLine, ptGrp);
 
           let coords = [
             counter.dataset.x,
@@ -284,7 +295,8 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
             e.target.dataset.y
           ].map(n => parseInt(n));
 
-        console.log(offset_distance(...coords))
+          info.querySelector('#hex-count').textContent = offset_distance(...coords);
+          info.style.display = 'block';
 
           let lineCoords = linedraw(...coords);
           lineCoords.shift();
@@ -292,9 +304,12 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
           ptGrp.querySelectorAll(s).forEach(p => p.classList.add('active'));
         }
       }
+    }
   });
 
   point.addEventListener('mouseout', e => {
+    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

@@ -5,9 +5,14 @@ body {
   overflow: hidden;
 }
 
+#map-container {
+  flex-basis: 100%;
+  position: relative;
+}
+
 svg {
   background-color: darkgray;
-  flex-basis: 100%;
+  /* flex-basis: 100%; */
   /* max-height: 50vh; */
   /* max-height: 100vw; */
 }
@@ -25,6 +30,24 @@ svg text {
   /* display: none; */
 }
 
+div#status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 3px;
+  display: none;
+}
+
+#hex-counter {
+  padding: 2px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 2px;
+}
+
+#hex-count {
+  font-family: monospace;
+}
+
 div#content {
   display: flex;
   /* display: none; */