Overlaying firing arcs don't just keep getting darker and darker

index.html

@@ -172,7 +172,10 @@
           <image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518" x="4" y="1564" />
         </g>
 
-        <g id="firing-arcs"></g>
+        <g id="firing-arcs">
+          <g id="shapes"></g>
+          <g id="lines"></g>
+        </g>
 
         <g id="grid">
           <g id="points"></g>

index.js

@@ -216,7 +216,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
 
           if (targetIsSelectedSoldier) {
             document.querySelectorAll(`.counter${selector}`).forEach(el => el.remove());
-            document.querySelectorAll(`.firing-arc${selector}`).forEach(el => el.remove());
+            document.querySelectorAll(`#firing-arcs ${selector}`).forEach(el => el.remove());
           }
         }
       });
@@ -441,12 +441,13 @@ function linedraw(x1, y1, x2, y2) {
 }
 
 function positionFiringArc(e) {
-  activeFiringArc = document.querySelector('polygon.firing-arc.active');
+  let activeFiringArc = document.querySelector('polygon.firing-arc.active');
 
   // TODO: handle exactly horizontal and vertical lines
 
   if (activeFiringArc) {
-    let board = document.getElementById('image-maps'),
+    let activeFiringArcOutline = document.querySelector(`#lines polygon[data-troop-number="${activeFiringArc.dataset.troopNumber}"][data-troop-allegiance="${activeFiringArc.dataset.troopAllegiance}"]`);
+        board = document.getElementById('image-maps'),
         { width, height } = board.getBBox(),
         pt = new DOMPoint(e.clientX, e.clientY),
         { x: pointerX, y: pointerY }  = pt.matrixTransform(board.getScreenCTM().inverse()),
@@ -548,6 +549,7 @@ function positionFiringArc(e) {
       points = `${x1px},${y1px} ${newX1},${newY1} ${newX2},${newY2}`;
     }
 
+    activeFiringArcOutline.setAttributeNS(null, 'points', points);
     activeFiringArc.setAttributeNS(null, 'points', points);
   }
 }
@@ -582,7 +584,7 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
     let {troopNumber, troopAllegiance} = selectedSoldier.dataset;
 
     let existingArcs = document.querySelectorAll(
-      `.firing-arc[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
+      `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
     );
 
     existingArcs.forEach(el => el.remove());
@@ -592,7 +594,8 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
     );
 
     if (counter) {
-      let arcLayer = document.getElementById('firing-arcs');
+      let arcLayer = document.getElementById('shapes');
+      let outlineLayer = document.getElementById('lines');
 
       let grid = document.getElementById('grid');
       const transform = getComputedStyle(grid).transform.match(/-?\d+\.?\d*/g);
@@ -602,6 +605,7 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
 
       let pivotPoint = [tPt.x, tPt.y];
       let firingArc = document.createElementNS(svgns, 'polygon');
+      let firingArcOutline = document.createElementNS(svgns, 'polygon');
 
       firingArc.classList.add('firing-arc', 'active');
       firingArc.dataset.troopNumber = troopNumber;
@@ -609,18 +613,21 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
       firingArc.dataset.size = e.target.dataset.size;
       firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
 
+      firingArcOutline.dataset.troopNumber = troopNumber;
+      firingArcOutline.dataset.troopAllegiance = troopAllegiance;
+      firingArcOutline.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
+
       arcLayer.appendChild(firingArc);
+      outlineLayer.appendChild(firingArcOutline);
 
       let firingArcPlacementListener = e => {
         document.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active'));
-        document.querySelector('#point').style.display = '';
+        svg.removeEventListener('click', firingArcPlacementListener);
-        firingArc.removeEventListener('click', firingArcPlacementListener);
         svg.removeEventListener('mousemove', positionFiringArc);
       };
 
       svg.addEventListener('mousemove', positionFiringArc);
-      firingArc.addEventListener('click', firingArcPlacementListener);
+      svg.addEventListener('click', firingArcPlacementListener);
-      document.querySelector('#point').style.display = 'none';
     }
   }
 }));
@@ -745,7 +752,7 @@ endTurnButtons.forEach(el =>
   el.addEventListener('click', ({target: {dataset: {allegiance}}}) => {
     let al = allegiance == al1 ? al2 : al1;
 
-    qA(`.firing-arc[data-troop-allegiance="${al}"]`).forEach(el => el.remove());
+    qA(`#firing-arcs [data-troop-allegiance="${al}"]`).forEach(el => el.remove());
 
     qA(`.soldier-record[data-troop-allegiance="${al}"]`).forEach(el =>
       el.classList.remove('movement-ended')

style.css

@@ -224,12 +224,25 @@ rect#map {
   stroke-width: 4px; */
 }
 
-polygon.firing-arc {
+polygon.firing-arc[data-troop-allegiance="davion"] {
+  fill: red;
+}
+
+polygon.firing-arc[data-troop-allegiance="liao"] {
+  fill: green;
+}
+
+#shapes {
   opacity: 0.1;
-  fill: black;
+}
-  /* fill: transparent;
+
-  stroke-width: 2px;
+#shapes polygon {
-  stroke: black; */
+  stroke: none;
+}
+
+#lines polygon {
+  fill: none;
+  stroke: black;
 }
 
 button.set-firing-arc img {