2 files changed, 269 insertions, 249 deletions
diff --git a/src/modules/firingArc.js b/src/modules/firingArc.js
new file mode 100644
index 0000000..b319427
--- /dev/null
+++ b/src/modules/firingArc.js
@@ -0,0 +1,249 @@
+const HORZ_POINT_DISTANCE = 1.005,
+  VERT_POINT_DISTANCE = Math.sqrt(3) * HORZ_POINT_DISTANCE / 2,
+
+  FIRING_ARC_SIZE = {
+  'small': Math.atan(HORZ_POINT_DISTANCE / (6 * VERT_POINT_DISTANCE)),
+  'medium': Math.atan((HORZ_POINT_DISTANCE / 2) / VERT_POINT_DISTANCE),
+  'large': Math.atan((21 * HORZ_POINT_DISTANCE) / (6 * VERT_POINT_DISTANCE))
+};
+
+function calculateAngle(xDiff, yDiff) {
+  yDiff = -yDiff;
+  let angle = Math.abs(Math.atan(yDiff / xDiff));
+
+  if (xDiff < 0 && yDiff > 0) {
+    angle = Math.PI - angle;
+  } else if (xDiff < 0 && yDiff < 0) {
+    angle = Math.PI + angle;
+  } else if (xDiff > 0 && yDiff < 0) {
+    angle = 2 * Math.PI - angle;
+  }
+
+  return angle;
+}
+
+function edgePoint(x1, y1, x2, y2, maxX, maxY) {
+  let pointCoords,
+    xDiff = x2 - x1,
+    yDiff = y2 - y1,
+    xIntercept = y => (y - y1) * xDiff / yDiff + x1,
+    yIntercept = x => (x - x1) * yDiff / xDiff + y1;
+
+  if (xDiff > 0 && yDiff > 0) {
+    let x = xIntercept(maxY);
+
+    pointCoords = x <= maxX ? [x, maxY] : [maxX, yIntercept(maxX)];
+  } else if (xDiff > 0 && yDiff < 0) {
+    let y = yIntercept(maxX);
+
+    pointCoords = y >= 0 ? [maxX, y] : [xIntercept(0), 0];
+  } else if (xDiff < 0 && yDiff < 0) {
+    let x = xIntercept(0);
+
+    pointCoords = x >= 0 ? [x, 0] : [0, yIntercept(0)];
+  } else {
+    let y = yIntercept(0);
+
+    pointCoords = y <= maxY ? [0, y] : [xIntercept(maxY), maxY];
+  }
+
+  return pointCoords;
+}
+
+function position(e) {
+  let activeFiringArc = this.querySelector('polygon.firing-arc.active');
+
+  // TODO: handle exactly horizontal and vertical lines
+
+  if (activeFiringArc) {
+    let activeFiringArcOutline = this.querySelector(`#lines polygon[data-troop-number="${activeFiringArc.dataset.troopNumber}"][data-troop-allegiance="${activeFiringArc.dataset.troopAllegiance}"]`),
+      board = this.querySelector('#image-maps'),
+      { width, height } = board.getBBox(),
+      pt = new DOMPoint(e.clientX, e.clientY),
+      { x: pointerX, y: pointerY } = pt.matrixTransform(board.getScreenCTM().inverse()),
+      [maxXpx, maxYpx] = [width, height],
+      { x: x1px, y: y1px } = activeFiringArc.points[0];
+
+    let [x2px, y2px] = [
+      pointerX / width * maxXpx,
+      pointerY / height * maxYpx
+    ];
+
+    let xDiff = x2px - x1px;
+    let yDiff = y2px - y1px;
+    let angle = calculateAngle(xDiff, yDiff);
+
+    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);
+
+    let [newY1, newX1] = [y2px + yDelta, x2px + xDelta];
+    let [newY2, newX2] = [y2px - yDelta, x2px - xDelta];
+
+    [newX1, newY1] = edgePoint(x1px, y1px, newX1, newY1, maxXpx, maxYpx);
+    [newX2, newY2] = edgePoint(x1px, y1px, newX2, newY2, maxXpx, maxYpx);
+
+    let oppositeEdgeConditions = [
+      newX1 == 0 && newX2 == maxXpx,
+      newX2 == 0 && newX1 == maxXpx,
+      newY1 == 0 && newY2 == maxYpx,
+      newY2 == 0 && newY1 == maxYpx
+    ]
+
+    let orthogonalEdgeConditions = [
+      (newX1 == 0 || newX1 == maxXpx) && (newY2 == 0 || newY2 == maxYpx),
+      (newX2 == 0 || newX2 == maxXpx) && (newY1 == 0 || newY1 == maxYpx),
+    ]
+
+    let points;
+
+    if (oppositeEdgeConditions.some(e => e)) {
+      let cornerPoints;
+
+      if (xDiff > 0 && yDiff > 0) {
+        if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+          cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]];
+        } else {
+          cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];
+        }
+      } else if (xDiff > 0 && yDiff < 0) {
+        if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+          cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]];
+        } else {
+          cornerPoints = [[0, 0], [maxXpx, 0]];
+        }
+
+      } else if (xDiff < 0 && yDiff > 0) {
+        if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+          cornerPoints = [[0, maxYpx], [0, 0]];
+        } else {
+          cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];
+        }
+
+      } else {
+        if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+          cornerPoints = [[0, maxYpx], [0, 0]];
+        } else {
+          cornerPoints = [[0, 0], [maxXpx, 0]];
+        }
+
+      }
+      points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints[1]} ${cornerPoints[0]} ${newX2},${newY2}`;
+    } else if (orthogonalEdgeConditions.some(e => e)) {
+      let cornerPoints = [];
+      let cp1, cp2;
+
+      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];
+      }
+
+      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);
+      }
+
+      points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints.join(' ')} ${newX2},${newY2}`;
+    } else {
+      points = `${x1px},${y1px} ${newX1},${newY1} ${newX2},${newY2}`;
+    }
+
+    activeFiringArcOutline.setAttributeNS(null, 'points', points);
+    activeFiringArc.setAttributeNS(null, 'points', points);
+  }
+}
+
+export default class FiringArc {
+  constructor(svg) {
+    this.svg = svg;
+  }
+
+  set(size, troopAllegiance, troopNumber, { x, y }) {
+    const svgns = "http://www.w3.org/2000/svg";
+
+    let existingArcs = this.svg.querySelectorAll(
+      `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
+    );
+
+    existingArcs.forEach(el => el.remove());
+
+    let arcLayer = this.svg.querySelector('#shapes');
+    let outlineLayer = this.svg.querySelector('#lines');
+    let arcContainer = this.svg.querySelector('#firing-arcs');
+
+    let grid = this.svg.querySelector('.board');
+    const transform = getComputedStyle(grid).transform.match(/-?\d+\.?\d*/g);
+    const pt = new DOMPoint(x, y);
+    const mtx = new DOMMatrix(transform);
+    let tPt = pt.matrixTransform(mtx);
+
+    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;
+    firingArc.dataset.troopAllegiance = troopAllegiance;
+    firingArc.dataset.size = size;
+    firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
+
+    firingArcOutline.dataset.troopNumber = troopNumber;
+    firingArcOutline.dataset.troopAllegiance = troopAllegiance;
+    firingArcOutline.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
+
+    let clipShape = document.createElementNS(svgns, 'circle');
+    clipShape.setAttributeNS(null, 'cx', tPt.x);
+    clipShape.setAttributeNS(null, 'cy', tPt.y);
+    clipShape.setAttributeNS(null, 'r', 100);
+
+    let clipPath = document.createElementNS(svgns, 'clipPath');
+    clipPath.setAttributeNS(null, 'id', `clip-path-${troopAllegiance}-${troopNumber}`);
+    clipPath.dataset.troopNumber = troopNumber;
+    clipPath.dataset.troopAllegiance = troopAllegiance;
+    clipPath.appendChild(clipShape);
+
+    arcContainer.appendChild(clipPath);
+    arcLayer.appendChild(firingArc);
+    outlineLayer.appendChild(firingArcOutline);
+
+    let firingArcPlacementListener = e => {
+      this.svg.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active'));
+      grid.removeAttribute('style');
+      this.svg.removeEventListener('mousemove', position);
+      firingArc.removeEventListener('click', firingArcPlacementListener);
+      firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement);
+    };
+
+    let cancelFiringArcPlacement = e => {
+      e.preventDefault();
+
+      firingArc.removeEventListener('click', firingArcPlacementListener);
+      firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement);
+
+      let existingArcs = this.svg.querySelectorAll(
+        `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
+      );
+
+      existingArcs.forEach(el => el.remove());
+
+      grid.removeAttribute('style');
+      this.svg.removeEventListener('mousemove', position);
+    };
+
+    grid.style.pointerEvents = 'none';
+    this.svg.addEventListener('mousemove', position);
+    firingArc.addEventListener('click', firingArcPlacementListener);
+    firingArc.addEventListener('contextmenu', cancelFiringArcPlacement);
+  }
+}
diff --git a/src/modules/game.js b/src/modules/game.js
index a7bb05e..33f872b 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -1,3 +1,7 @@
+import FiringArc from './firingArc.js';
+
+const svgns = "http://www.w3.org/2000/svg";
+
 function isEven(n) {
   return n % 2 === 0;
 }
@@ -6,49 +10,6 @@ function radToDeg(radians) {
   return radians * 180 / Math.PI;
 }
 
-function calculateAngle(xDiff, yDiff) {
-  yDiff = -yDiff;
-  let angle = Math.abs(Math.atan(yDiff / xDiff));
-
-  if (xDiff < 0 && yDiff > 0) {
-    angle = Math.PI - angle;
-  } else if (xDiff < 0 && yDiff < 0) {
-    angle = Math.PI + angle;
-  } else if (xDiff > 0 && yDiff < 0) {
-    angle = 2 * Math.PI - angle;
-  }
-
-  return angle;
-}
-
-function edgePoint(x1, y1, x2, y2, maxX, maxY) {
-  let pointCoords,
-    xDiff = x2 - x1,
-    yDiff = y2 - y1,
-    xIntercept = y => (y - y1) * xDiff / yDiff + x1,
-    yIntercept = x => (x - x1) * yDiff / xDiff + y1;
-
-  if (xDiff > 0 && yDiff > 0) {
-    let x = xIntercept(maxY);
-
-    pointCoords = x <= maxX ? [x, maxY] : [maxX, yIntercept(maxX)];
-  } else if (xDiff > 0 && yDiff < 0) {
-    let y = yIntercept(maxX);
-
-    pointCoords = y >= 0 ? [maxX, y] : [xIntercept(0), 0];
-  } else if (xDiff < 0 && yDiff < 0) {
-    let x = xIntercept(0);
-
-    pointCoords = x >= 0 ? [x, 0] : [0, yIntercept(0)];
-  } else {
-    let y = yIntercept(0);
-
-    pointCoords = y <= maxY ? [0, y] : [xIntercept(maxY), maxY];
-  }
-
-  return pointCoords;
-}
-
 function evenr_to_axial(x, y) {
   return { q: x - (y + (y & 1)) / 2, r: y };
 }
@@ -140,135 +101,13 @@ export default class Game {
 
   constructor(svg) {
     this.svg = svg;
+    this.firingArc = new FiringArc(svg);
 
     this.setUpSightLine(this);
     this.setUpCounter(this);
     this.setUpCells();
   }
 
-  static HORZ_POINT_DISTANCE = 1.005;
-  static VERT_POINT_DISTANCE = Math.sqrt(3) * Game.HORZ_POINT_DISTANCE / 2;
-
-  static FIRING_ARC_SIZE = {
-    'small': Math.atan(Game.HORZ_POINT_DISTANCE / (6 * Game.VERT_POINT_DISTANCE)),
-    'medium': Math.atan((Game.HORZ_POINT_DISTANCE / 2) / Game.VERT_POINT_DISTANCE),
-    'large': Math.atan((21 * Game.HORZ_POINT_DISTANCE) / (6 * Game.VERT_POINT_DISTANCE))
-  };
-
-  #positionFiringArc(e) {
-    let activeFiringArc = this.querySelector('polygon.firing-arc.active');
-
-    // TODO: handle exactly horizontal and vertical lines
-
-    if (activeFiringArc) {
-      let activeFiringArcOutline = this.querySelector(`#lines polygon[data-troop-number="${activeFiringArc.dataset.troopNumber}"][data-troop-allegiance="${activeFiringArc.dataset.troopAllegiance}"]`),
-        board = this.querySelector('#image-maps'),
-        { width, height } = board.getBBox(),
-        pt = new DOMPoint(e.clientX, e.clientY),
-        { x: pointerX, y: pointerY } = pt.matrixTransform(board.getScreenCTM().inverse()),
-        [maxXpx, maxYpx] = [width, height],
-        { x: x1px, y: y1px } = activeFiringArc.points[0];
-
-      let [x2px, y2px] = [
-        pointerX / width * maxXpx,
-        pointerY / height * maxYpx
-      ];
-
-      let xDiff = x2px - x1px;
-      let yDiff = y2px - y1px;
-      let angle = calculateAngle(xDiff, yDiff);
-
-      let arcAngle = Game.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);
-
-      let [newY1, newX1] = [y2px + yDelta, x2px + xDelta];
-      let [newY2, newX2] = [y2px - yDelta, x2px - xDelta];
-
-      [newX1, newY1] = edgePoint(x1px, y1px, newX1, newY1, maxXpx, maxYpx);
-      [newX2, newY2] = edgePoint(x1px, y1px, newX2, newY2, maxXpx, maxYpx);
-
-      let oppositeEdgeConditions = [
-        newX1 == 0 && newX2 == maxXpx,
-        newX2 == 0 && newX1 == maxXpx,
-        newY1 == 0 && newY2 == maxYpx,
-        newY2 == 0 && newY1 == maxYpx
-      ]
-
-      let orthogonalEdgeConditions = [
-        (newX1 == 0 || newX1 == maxXpx) && (newY2 == 0 || newY2 == maxYpx),
-        (newX2 == 0 || newX2 == maxXpx) && (newY1 == 0 || newY1 == maxYpx),
-      ]
-
-      let points;
-
-      if (oppositeEdgeConditions.some(e => e)) {
-        let cornerPoints;
-
-        if (xDiff > 0 && yDiff > 0) {
-          if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
-            cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]];
-          } else {
-            cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];
-          }
-        } else if (xDiff > 0 && yDiff < 0) {
-          if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
-            cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]];
-          } else {
-            cornerPoints = [[0, 0], [maxXpx, 0]];
-          }
-
-        } else if (xDiff < 0 && yDiff > 0) {
-          if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
-            cornerPoints = [[0, maxYpx], [0, 0]];
-          } else {
-            cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];
-          }
-
-        } else {
-          if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
-            cornerPoints = [[0, maxYpx], [0, 0]];
-          } else {
-            cornerPoints = [[0, 0], [maxXpx, 0]];
-          }
-
-        }
-        points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints[1]} ${cornerPoints[0]} ${newX2},${newY2}`;
-      } else if (orthogonalEdgeConditions.some(e => e)) {
-        let cornerPoints = [];
-        let cp1, cp2;
-
-        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];
-        }
-
-        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);
-        }
-
-        points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints.join(' ')} ${newX2},${newY2}`;
-      } else {
-        points = `${x1px},${y1px} ${newX1},${newY1} ${newX2},${newY2}`;
-      }
-
-      activeFiringArcOutline.setAttributeNS(null, 'points', points);
-      activeFiringArc.setAttributeNS(null, 'points', points);
-    }
-  }
-
   getCells() {
     return this.svg.querySelectorAll('g[data-x]');
   }
@@ -419,6 +258,16 @@ export default class Game {
         }
       });
 
+      // Logic for this event:
+      // If there's a locked sightline, unlock it. Otherwise, if there's an
+      // active sightline, lock it.
+
+      // There is an active sightline when there is a selected soldier, its
+      // counter is on the board, and the pointer is over a cell other than the
+      // one that counter occupies.
+
+      // There is a locked sightline when there is a selected soldier, its
+      // counter is on the board, and one cell has the 'sight-line-target' class.
       group.addEventListener('contextmenu', e => {
         e.preventDefault();
         let sl = this.svg.querySelector('.sight-line');
@@ -463,7 +312,6 @@ export default class Game {
   setUpCounter(container) {
     this.Counter = new function () {
       let selectedClass = 'selected',
-        svgns = "http://www.w3.org/2000/svg",
 
         dataSelector = function (troopNumber, allegiance) {
           return `[data-number="${troopNumber}"][data-allegiance="${allegiance}"]`;
@@ -781,8 +629,7 @@ export default class Game {
   }
 
   setUpSightLine(ptGrp) {
-    const svgns = "http://www.w3.org/2000/svg",
-      grid = this.svg.querySelector('.board');
+    const grid = this.svg.querySelector('.board');
 
     this.SightLine = new function() {
       this.clear = function() {
@@ -892,93 +739,17 @@ export default class Game {
   }
 
   setFiringArc(size) {
-    const svgns = "http://www.w3.org/2000/svg",
-      counter = this.getSelected();
+    const counter = this.getSelected();
 
     if (counter) {
-      const { allegiance: troopAllegiance, number: troopNumber } = counter.dataset;
-
-      let existingArcs = this.svg.querySelectorAll(
-        `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
-      );
-
-      existingArcs.forEach(el => el.remove());
-
-      let arcLayer = this.svg.querySelector('#shapes');
-      let outlineLayer = this.svg.querySelector('#lines');
-      let arcContainer = this.svg.querySelector('#firing-arcs');
-
-      let { x, y } = this.getCellPosition(counter.parentElement);
-
-      let grid = this.svg.querySelector('.board');
-      const transform = getComputedStyle(grid).transform.match(/-?\d+\.?\d*/g);
-      const pt = new DOMPoint(x, y);
-      const mtx = new DOMMatrix(transform);
-      let tPt = pt.matrixTransform(mtx);
-
-      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;
-      firingArc.dataset.troopAllegiance = troopAllegiance;
-      firingArc.dataset.size = size;
-      firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
-
-      firingArcOutline.dataset.troopNumber = troopNumber;
-      firingArcOutline.dataset.troopAllegiance = troopAllegiance;
-      firingArcOutline.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
-
-      let clipShape = document.createElementNS(svgns, 'circle');
-      clipShape.setAttributeNS(null, 'cx', tPt.x);
-      clipShape.setAttributeNS(null, 'cy', tPt.y);
-      clipShape.setAttributeNS(null, 'r', 100);
-
-      let clipPath = document.createElementNS(svgns, 'clipPath');
-      clipPath.setAttributeNS(null, 'id', `clip-path-${troopAllegiance}-${troopNumber}`);
-      clipPath.dataset.troopNumber = troopNumber;
-      clipPath.dataset.troopAllegiance = troopAllegiance;
-      clipPath.appendChild(clipShape);
-
-      arcContainer.appendChild(clipPath);
-      arcLayer.appendChild(firingArc);
-      outlineLayer.appendChild(firingArcOutline);
-
-      let firingArcPlacementListener = e => {
-        this.svg.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active'));
-        grid.removeAttribute('style');
-        this.svg.removeEventListener('mousemove', this.#positionFiringArc);
-        firingArc.removeEventListener('click', firingArcPlacementListener);
-        firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement);
-      };
+      const { allegiance, number } = counter.dataset,
+        cellPosition = this.getCellPosition(counter.parentElement);
 
-      let cancelFiringArcPlacement = e => {
-        e.preventDefault();
-
-        firingArc.removeEventListener('click', firingArcPlacementListener);
-        firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement);
-
-        let existingArcs = this.svg.querySelectorAll(
-          `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
-        );
-
-        existingArcs.forEach(el => el.remove());
-
-        grid.removeAttribute('style');
-        this.svg.removeEventListener('mousemove', this.#positionFiringArc);
-      };
-
-      grid.style.pointerEvents = 'none';
-      this.svg.addEventListener('mousemove', this.#positionFiringArc);
-      firingArc.addEventListener('click', firingArcPlacementListener);
-      firingArc.addEventListener('contextmenu', cancelFiringArcPlacement);
+      this.firingArc.set(size, allegiance, number, cellPosition);
     }
   }
 
   setGrenade() {
-    const svgns = "http://www.w3.org/2000/svg";
-
     let counter = document.createElementNS(svgns, 'use');
     counter.setAttributeNS(null, 'href', '#counter-grenade');
     counter.addEventListener('click', () => counter.remove());