2 files changed, 68 insertions, 71 deletions
diff --git a/src/modules/game.js b/src/modules/game.js
index 6b59659..1faad8d 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -1,4 +1,4 @@
-import FiringArc from './game/firingArc.js';
+import * as firingArc from './game/firingArc.js';
 import SightLine from './game/sightLine.js';
 import Counter from './game/counter.js';
 
@@ -112,7 +112,7 @@ function drawSightLine(sourceCell, targetCell) {
 
 let svg, distanceCallback, proneFlagCallback, selectCallback;
 
-let board, firingArc, sightLine, counterMod,
+let board, sightLine, counterMod,
   placing = [];
 
 export function setDistanceCallback(callback) {
@@ -130,7 +130,6 @@ export function setSelectCallback(callback) {
 export function start(el) {
   svg = el;
   board = svg.querySelector('.board');
-  firingArc = FiringArc(svg, board);
   sightLine = SightLine(board);
   counterMod = Counter(svg, board);
 
@@ -264,7 +263,7 @@ export function start(el) {
       let occupant = getCellOccupant(cell);
 
       if (occupant) {
-        firingArc.toggleCounterVisibility(occupant, true);
+        firingArc.toggleCounterVisibility(svg, occupant, true);
       }
     });
 
@@ -278,7 +277,7 @@ export function start(el) {
       let occupant = getCellOccupant(cell);
 
       if (occupant) {
-        firingArc.toggleCounterVisibility(occupant, false);
+        firingArc.toggleCounterVisibility(svg, occupant, false);
       }
     });
   });
@@ -296,7 +295,7 @@ export function select(selected) {
     unSelect();
     placing.push(counter);
     counter.classList.add(counterMod.selectedClass);
-    firingArc.get(counter).forEach(el => el.removeAttribute('clip-path'));
+    firingArc.get(svg, counter).forEach(el => el.removeAttribute('clip-path'));
     selectCallback && selectCallback({ prone: counterMod.hasProne(counter), ...counter.dataset });
   }
 }
@@ -308,7 +307,7 @@ export function unSelect() {
     placing = [];
     getSelected().classList.remove(counterMod.selectedClass);
     clearSightLine();
-    firingArc.clipAll();
+    firingArc.clipAll(svg);
   }
 }
 
@@ -322,7 +321,7 @@ export function endMove() {
 }
 
 export function endTurn(allegiance) {
-  firingArc.clear(allegiance);
+  firingArc.clear(svg, allegiance);
 }
 
 export function toggleProne() {
@@ -335,7 +334,7 @@ export function toggleProne() {
 }
 
 export function toggleFiringArcVisibility(allegiance) {
-  firingArc.toggleVisibility(allegiance);
+  firingArc.toggleVisibility(svg, allegiance);
 }
 
 export function setFiringArc(size) {
@@ -343,7 +342,7 @@ export function setFiringArc(size) {
     isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
 
   if (isOnBoard(counter)) {
-    firingArc.set(size, counter, getCellPosition(counter.parentElement));
+    firingArc.set(svg, size, counter, getCellPosition(counter.parentElement));
   }
 }
 
diff --git a/src/modules/game/firingArc.js b/src/modules/game/firingArc.js
index ffb5c27..db122a0 100644
--- a/src/modules/game/firingArc.js
+++ b/src/modules/game/firingArc.js
@@ -270,82 +270,80 @@ function create(x, y, size, counter, { arcContainer, arcLayer, outlineLayer }) {
   return { aimLine, firingArc, firingArcOutline };
 }
 
-export default function (svg) {
-  function set(size, counter, { x, y }) {
-    get(counter).forEach(el => el.remove());
-
-    const { grid, containers } = queryContainers(svg),
-      { aimLine, firingArc, firingArcOutline } = create(x, y, size, counter, containers);
-
-    function positionListener(e) {
-      const { aimPt, outlinePoints, arcPoints } = calcPoints(e, aimLine, grid, size);
+function set(svg, size, counter, { x, y }) {
+  get(svg, counter).forEach(el => el.remove());
 
-      aimLine.setAttributeNS(null, 'x2', aimPt.x);
-      aimLine.setAttributeNS(null, 'y2', aimPt.y);
-      firingArcOutline.setAttributeNS(null, 'points', outlinePoints.join(' '));
-      firingArc.setAttributeNS(null, 'points', arcPoints.join(' '));
-    }
-
-    function placementListener() {
-      aimLine.remove();
-      firingArc.classList.remove('active');
-      grid.removeAttribute('style');
-      svg.removeEventListener('mousemove', positionListener);
-    }
+  const { grid, containers } = queryContainers(svg),
+    { aimLine, firingArc, firingArcOutline } = create(x, y, size, counter, containers);
 
-    function cancelPlacementListener(e) {
-      e.preventDefault();
+  function positionListener(e) {
+    const { aimPt, outlinePoints, arcPoints } = calcPoints(e, aimLine, grid, size);
 
-      get(counter).forEach(el => el.remove());
-      grid.removeAttribute('style');
-      svg.removeEventListener('mousemove', positionListener);
-    }
-
-    grid.style.pointerEvents = 'none';
-    firingArc.addEventListener('click', placementListener, { once: true });
-    firingArc.addEventListener('contextmenu', cancelPlacementListener, { once: true });
-    svg.addEventListener('mousemove', positionListener);
+    aimLine.setAttributeNS(null, 'x2', aimPt.x);
+    aimLine.setAttributeNS(null, 'y2', aimPt.y);
+    firingArcOutline.setAttributeNS(null, 'points', outlinePoints.join(' '));
+    firingArc.setAttributeNS(null, 'points', arcPoints.join(' '));
   }
 
-  function clear(allegiance) {
-    const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
-    svg.querySelectorAll(selector).forEach(el => el.remove());
+  function placementListener() {
+    aimLine.remove();
+    firingArc.classList.remove('active');
+    grid.removeAttribute('style');
+    svg.removeEventListener('mousemove', positionListener);
   }
 
-  function get({ dataset: { allegiance, number }}) {
-    return svg.querySelectorAll(`#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"], #firing-arcs line`);
+  function cancelPlacementListener(e) {
+    e.preventDefault();
+
+    get(counter).forEach(el => el.remove());
+    grid.removeAttribute('style');
+    svg.removeEventListener('mousemove', positionListener);
   }
 
-  function toggleVisibility(allegiance) {
-    const vis = firingArcVisibility[allegiance],
-      clipPaths = svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
+  grid.style.pointerEvents = 'none';
+  firingArc.addEventListener('click', placementListener, { once: true });
+  firingArc.addEventListener('contextmenu', cancelPlacementListener, { once: true });
+  svg.addEventListener('mousemove', positionListener);
+}
 
-    clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
-    firingArcVisibility[allegiance] = !vis;
-  }
+function clear(svg, allegiance) {
+  const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
+  svg.querySelectorAll(selector).forEach(el => el.remove());
+}
 
-  function toggleCounterVisibility({ dataset: { number, allegiance }}, vis) {
-    const cp = svg.querySelector(`#clip-path-${allegiance}-${number}`),
-      display = vis ? 'none' : '';
+function get(svg, { dataset: { allegiance, number }}) {
+  return svg.querySelectorAll(`#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"], #firing-arcs line`);
+}
 
-    if (cp) {
-      cp.style.display = firingArcVisibility[allegiance] ? 'none' : display;
-    }
-  }
+function toggleVisibility(svg, allegiance) {
+  const vis = firingArcVisibility[allegiance],
+    clipPaths = svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
 
-  function clipAll() {
-    getUnclipped(svg).forEach(el => {
-      const { number, allegiance } = el.dataset,
-        clipPathId = `clip-path-${allegiance}-${number}`,
-        isVisible = firingArcVisibility[allegiance];
+  clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
+  firingArcVisibility[allegiance] = !vis;
+}
 
-      if (isVisible) {
-        svg.querySelector(`#${clipPathId}`).style.display = 'none';
-      }
+function toggleCounterVisibility(svg, { dataset: { number, allegiance }}, vis) {
+  const cp = svg.querySelector(`#clip-path-${allegiance}-${number}`),
+    display = vis ? 'none' : '';
 
-      el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
-    });
+  if (cp) {
+    cp.style.display = firingArcVisibility[allegiance] ? 'none' : display;
   }
+}
+
+function clipAll(svg) {
+  getUnclipped(svg).forEach(el => {
+    const { number, allegiance } = el.dataset,
+      clipPathId = `clip-path-${allegiance}-${number}`,
+      isVisible = firingArcVisibility[allegiance];
 
-  return { set, clear, get, toggleVisibility, toggleCounterVisibility, clipAll };
+    if (isVisible) {
+      svg.querySelector(`#${clipPathId}`).style.display = 'none';
+    }
+
+    el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
+  });
 }
+
+export { set, clear, get, toggleVisibility, toggleCounterVisibility, clipAll };