Fix corner finding algo for firing arc cone coverage

author: Catalin Mititiuc <Catalin.Mititiuc@gmail.com> 2024-03-22 21:52:02 -0700
committer: Catalin Mititiuc <Catalin.Mititiuc@gmail.com> 2024-03-22 21:52:02 -0700
commit: 17e6864d69d62e6a5bd2c9a6408b3af77543dad7 (patch)
tree: 6d610439eace3e7112d84de07fb358c518306bcf
parent: 9f8c563c9844c3f6cc1a14614b1debdad6ec2051 (diff)
2 files changed, 76 insertions, 53 deletions
diff --git a/index.js b/index.js
index ef7cdef..38ddc63 100644
--- a/index.js
+++ b/index.js
@@ -46,7 +46,7 @@ let getPointCoords = (x, y) => {
 
 let svgns = "http://www.w3.org/2000/svg",
     svg = document.querySelector('svg'),
-    rect = document.querySelector('rect#map');
+    map = document.querySelector('rect#map');
 
 const COLUMN_COUNT = 33,
       ROW_COUNT = 25,
@@ -108,24 +108,24 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
   svg.appendChild(point);
 }));
 
-rect.addEventListener('mousemove', e => {
-  var rect = e.target.getBoundingClientRect();
-  var pointerX = e.clientX - rect.left;
-  var pointerY = e.clientY - rect.top;
+map.addEventListener('mousemove', e => {
+  let boundingRect = e.target.getBoundingClientRect();
+  let pointerX = e.clientX - boundingRect.left;
+  let pointerY = e.clientY - boundingRect.top;
   let [maxXpx, maxYpx] = [e.target.width, e.target.height].map(v => v.baseVal.value);
 
-  // console.log('x', `${toFixed(x / rect.width * maxX)}"`, 'y', `${toFixed(y / rect.height * maxY)}"`);
+  // console.log('x', `${toFixed(x / boundingRect.width * maxX)}"`, 'y', `${toFixed(y / boundingRect.height * maxY)}"`);
 
-  let p = document.querySelector('polygon.firing-arc.active');
+  let activeFiringArc = document.querySelector('polygon.firing-arc.active');
 
   // TODO: handle exactly horizontal and vertical lines
 
-  if (p) {
-    let {x: x1px, y: y1px} = p.points[1];
+  if (activeFiringArc) {
+    let {x: x1px, y: y1px} = activeFiringArc.points[0];
 
     let [x2px, y2px] = [
-      pointerX / rect.width * maxXpx,
-      pointerY / rect.height * maxYpx
+      pointerX / boundingRect.width * maxXpx,
+      pointerY / boundingRect.height * maxYpx
     ];
 
     let xDiff = x2px - x1px;
@@ -142,7 +142,7 @@ rect.addEventListener('mousemove', e => {
 
     console.log('angle:', `${toFixed(radToDeg(angle))}\u00B0`, `${angle}rad`);
 
-    let arcAngle = FIRING_ARC_SIZE[p.dataset.size];
+    let arcAngle = FIRING_ARC_SIZE[activeFiringArc.dataset.size];
     let distance = Math.sqrt((x2px - x1px)**2 + (y2px - y1px)**2);
     let yDelta = distance * Math.cos(angle) * Math.tan(arcAngle);
     let xDelta = distance * Math.sin(angle) * Math.tan(arcAngle);
@@ -179,8 +179,6 @@ rect.addEventListener('mousemove', e => {
         } else {
           cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];
         }
-
-        points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
       } else if (xDiff > 0 && yDiff < 0) {
         if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
           cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]];
@@ -188,7 +186,7 @@ rect.addEventListener('mousemove', e => {
           cornerPoints = [[0, 0], [maxXpx, 0]];
         }
 
-        points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
+        // points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
       } else if (xDiff < 0 && yDiff > 0) {
         if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
           cornerPoints = [[0, maxYpx], [0, 0]];
@@ -196,7 +194,7 @@ rect.addEventListener('mousemove', e => {
           cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];
         }
 
-        points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
+        // points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
       } else {
         if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
           cornerPoints = [[0, maxYpx], [0, 0]];
@@ -204,10 +202,15 @@ rect.addEventListener('mousemove', e => {
           cornerPoints = [[0, 0], [maxXpx, 0]];
         }
 
-        points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
+        // points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
       }
+      points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints[1]} ${cornerPoints[0]} ${newX2},${newY2}`;
     } else if (orthogonalEdgeConditions.some(e => e)) {
       let cornerPoint;
+      let cornerPoints = [];
+
+      // console.log('x1px', x1px, 'y1px', y1px, 'x2px', x2px, 'y2px', y2px);
+      console.log('xDiff', xDiff, 'yDiff', yDiff);
 
       if (newX1 == 0 || newX1 == maxXpx) {
         cornerPoint = [newX1, newY2];
@@ -215,12 +218,57 @@ rect.addEventListener('mousemove', e => {
         cornerPoint = [newX2, newY1];
       }
 
-      points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoint}`;
+      if (newX1 == 0 || newX1 == maxXpx) {
+        console.log(newX1, newY1, 'nearest corner point', newX1, yDiff > 0 ? maxYpx : 0);
+      } else {
+        console.log(newX1, newY1, 'nearest corner point', xDiff > 0 ? maxXpx : 0, newY1);
+      }
+      
+      if (newX2 == 0 || newX2 == maxXpx) {
+        console.log(newX2, newY2, 'nearest corner point', newX2, yDiff > 0 ? maxYpx : 0);
+      } else {
+        console.log(newX2, newY2, 'nearest corner point', xDiff > 0 ? maxXpx : 0, newY2);
+      }
+
+      let cp1, cp2;
+
+      console.log('x1px, y1px', x1px, y1px);
+      console.log('newX1, newY1', newX1, newY1);
+      console.log('newX2, newY2', newX2, newY2);
+
+      if (newX1 == 0 || newX1 == maxXpx) {
+        cp1 = [newX1, yDiff > 0 ? maxYpx : 0];
+      } else {
+        cp1 = [xDiff > 0 ? maxXpx : 0, newY1];
+      }
+
+      if (newX2 == 0 || newX2 == maxXpx) {
+        cp2 = [newX2, yDiff > 0 ? maxYpx : 0];
+      } else {
+        cp2 = [xDiff > 0 ? maxXpx : 0, newY2];
+      }
+
+      console.log('cp1', cp1, 'cp2', cp2);
+
+      if (cp1[0] == cp2[0] && cp1[1] == cp2[1]) {
+        cornerPoints.push(cp1);
+      } else {
+        cornerPoints.push(cp1);
+        cornerPoints.push([xDiff > 0 ? maxXpx : 0, yDiff > 0 ? maxYpx : 0])
+        cornerPoints.push(cp2);
+      }
+
+      console.log(`${cornerPoints.join(' ')}`);
+
+      // points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2}`;
+      points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints.join(' ')} ${newX2},${newY2}`;
+      console.log('points', points);
     } else {
       points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2}`;
+      points = `${x1px},${y1px} ${newX1},${newY1} ${newX2},${newY2}`;
     }
 
-    p.setAttributeNS(null, 'points', points);
+    activeFiringArc.setAttributeNS(null, 'points', points);
   }
 });
 
@@ -247,9 +295,7 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
       `.firing-arc[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
     );
 
-    if (existingArcs.length > 0) {
-      existingArcs.forEach(el => el.remove());
-    }
+    existingArcs.forEach(el => el.remove());
 
     let counter = document.querySelector(
       `circle.counter[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
@@ -258,13 +304,13 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
     if (counter) {
       let arcLayer = document.getElementById('firing-arcs');
 
-      let placeFiringArcListener = e => {
+      let firingArcPlacementListener = e => {
         document.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active'));
-        document.querySelector('circle#point').style.display = '';
-        rect.removeEventListener('click', placeFiringArcListener);
+        document.querySelector('circle#point').style.pointerEvents = 'auto';
+        map.removeEventListener('click', firingArcPlacementListener);
       };
 
-      rect.addEventListener('click', placeFiringArcListener);
+      map.addEventListener('click', firingArcPlacementListener);
 
       let pivotPoint = [counter.cx.baseVal.value, counter.cy.baseVal.value];
       let firingArc = document.createElementNS(svgns, 'polygon');
@@ -277,7 +323,7 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
 
       arcLayer.prepend(firingArc);
 
-      document.querySelector('circle#point').style.display = 'none';
+      document.querySelector('circle#point').style.pointerEvents = 'none';
     }
   }
 }));
 \ No newline at end of file
diff --git a/style.css b/style.css
index 549bd61..14e831b 100644
--- a/style.css
+++ b/style.css
@@ -7,8 +7,7 @@ body {
 }
 
 circle#point {
-  fill: black;
-  opacity: 0.1;
+  fill: transparent;
 }
 
 circle.counter[data-troop-allegiance="liao"] {
@@ -33,8 +32,8 @@ rect#map {
   opacity: 0;
 }
 
-polygon {
-  opacity: 0.33;
+polygon.firing-arc {
+  opacity: 0.1;
 }
 
 button.set-firing-arc img {
@@ -47,24 +46,6 @@ line.firing-arc {
   opacity: 0.1;
 }
 
-polyline.firing-arc {
-  stroke: black;
-  stroke-width: 5px;
-  fill: none;
-}
-
-polygon#sml-arc {
-  fill: red;
-}
-
-polygon#med-arc {
-  fill: blue;
-}
-
-polygon#lrg-arc {
-  fill: green;
-}
-
 image#img1 {
   transform: scale(3.41) rotate(-0.15deg);
   /* opacity: 0.33; */
@@ -89,10 +70,6 @@ image#img2 {
   transform: scale(0.26) translate(-2in, -2in);
 }
 
-/* use[href="#point"] {
-  pointer-events: none;
-} */
-
 #asterisk {
   font-size: 30;
 }
author	Catalin Mititiuc <Catalin.Mititiuc@gmail.com>	2024-03-22 21:52:02 -0700
committer	Catalin Mititiuc <Catalin.Mititiuc@gmail.com>	2024-03-22 21:52:02 -0700
commit	17e6864d69d62e6a5bd2c9a6408b3af77543dad7 (patch)
tree	6d610439eace3e7112d84de07fb358c518306bcf
parent	9f8c563c9844c3f6cc1a14614b1debdad6ec2051 (diff)