WIP: polyline firing arc

index.js

@@ -30,20 +30,77 @@ rect.addEventListener('mousemove', e => {
   var x = e.clientX - rect.left;
   var y = e.clientY - rect.top;
   let [maxX, maxY] = [e.target.width, e.target.height].map(v => v.baseVal.valueInSpecifiedUnits);
+  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)}"`);
 
   let aim = document.querySelector('.firing-arc.active');
+  let p = document.querySelector('polyline.firing-arc.active');
 
-  if (aim) {
+  console.log(p);
+
+  // TODO: handle horizontal and vertical lines
+
+  if (aim || p) {
     let xIntercept = y => (y - y1) * (x2 - x1) / (y2 - y1) + x1;
     let yIntercept = x => (x - x1) * (y2 - y1) / (x2 - x1) + y1;
+    let xInterceptPx = y => (y - y1px) * (x2px - x1px) / (y2px - y1px) + x1px;
+    let yInterceptPx = x => (x - x1px) * (y2px - y1px) / (x2px - x1px) + y1px;
     let newX, newY;
 
     let [x1, y1] = [aim.x1, aim.y1].map(v => v.baseVal.valueInSpecifiedUnits);
     let [x2, y2] = [x / rect.width * maxX, y / rect.height * maxY];
 
-    // TODO: handle horizontal and vertical lines
+    let {x: x1px, y: y1px} = p.points[1];
+    let [x2px, y2px] = [x / rect.width * maxXpx, y / rect.height * maxYpx];
+
+    if (x2px - x1px > 0 && y2px - y1px > 0) {
+      let yWhenXisMax = yInterceptPx(maxXpx);
+      let xWhenYisMax = xInterceptPx(maxYpx);
+
+      if (xWhenYisMax <= maxXpx) {
+        newX = xWhenYisMax;
+        newY = maxYpx;
+      } else {
+        newX = maxXpx;
+        newY = yWhenXisMax;
+      }
+    } else if (x2px - x1px > 0 && y2px - y1px < 0) {
+      let yWhenXisMax = yInterceptPx(maxXpx);
+      let xWhenYisZero = xInterceptPx(0);
+
+      if (xWhenYisZero <= maxXpx) {
+        newX = xWhenYisZero;
+        newY = 0;
+      } else {
+        newX = maxXpx;
+        newY = yWhenXisMax;
+      }
+    } else if (x2px - x1px < 0 && y2px - y1px < 0) {
+      let yWhenXisZero = yInterceptPx(0);
+      let xWhenYisZero = xInterceptPx(0);
+
+      if (yWhenXisZero >= 0) {
+        newX = 0;
+        newY = yWhenXisZero;
+      } else {
+        newX = xWhenYisZero;
+        newY = 0;
+      }
+    } else {
+      let yWhenXisZero = yInterceptPx(0);
+      let xWhenYisMax = xInterceptPx(maxYpx);
+
+      if (yWhenXisZero <= maxYpx) {
+        newX = 0;
+        newY = yWhenXisZero;
+      } else {
+        newX = xWhenYisMax;
+        newY = maxYpx;
+      }
+    }
+
+    p.setAttributeNS(null, 'points', `${newX},${newY} ${x1px},${y1px} ${newX},${newY}`);
 
     if (x2 - x1 > 0 && y2 - y1 > 0) {
       let yWhenXisMax = yIntercept(maxX);
@@ -129,11 +186,11 @@ document.querySelector('#set-firing-arc').addEventListener('click', e => {
   if (selectedSoldier) {
     let {troopNumber, troopAllegiance} = selectedSoldier.dataset;
 
-    let firingArc = document.querySelector(
+    let existingArc = document.querySelector(
       `.firing-arc[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
     );
 
-    if (firingArc) { firingArc.remove() }
+    if (existingArc) { existingArc.remove() }
 
     let counter = document.querySelector(
       `circle.counter[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
@@ -157,6 +214,15 @@ document.querySelector('#set-firing-arc').addEventListener('click', e => {
       document.querySelector('circle#point').style.display = '';
     });
 
+    let pivotPoint = [counter.cx.baseVal.value, counter.cy.baseVal.value];
+    let firingArc = document.createElementNS(svgns, 'polyline');
+    firingArc.classList.add('firing-arc', 'active');
+    firingArc.dataset.troopNumber = troopNumber;
+    firingArc.dataset.troopAllegiance = troopAllegiance;
+    firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
+
+    svg.appendChild(firingArc);
+
     document.querySelector('circle#point').style.display = 'none';
   }
 });

style.css

@@ -38,10 +38,15 @@ polygon {
 }
 
 line.firing-arc {
-  stroke: black;
+  stroke: none;
   /* transform: scale(2); */
 }
 
+polyline.firing-arc {
+  stroke: black;
+  stroke-width: 5px;
+}
+
 image#img1 {
   transform: scale(3.41) rotate(-0.15deg);
   /* opacity: 0.33; */