Remove calling firing arc module with 'new'

src/modules/game.js

@@ -13,11 +13,8 @@ export default class Game {
 
     const board = this.getBoard();
 
-    this.firingArc = new FiringArc(svg, board);
+    this.firingArc = FiringArc(svg, board);
     this.sightLine = SightLine(svg, board);
-
-    console.log(this.sightLine);
-
     this.counter = new Counter(svg);
 
     this.setUpCells();

src/modules/game/firingArc.js

@@ -1,5 +1,4 @@
-// https://www.redblobgames.com/grids/hexagons/
+// source: https://www.redblobgames.com/grids/hexagons/
-
 // Horizontal distance between hex centers is sqrt(3) * size. The vertical
 // distance is 3 / 2 * size. When we calculate horzDist / vertDist, the size
 // cancels out, leaving us with a unitless ratio of sqrt(3) / (3 / 2), or
@@ -21,8 +20,6 @@ const svgns = "http://www.w3.org/2000/svg",
 
   clippedFiringArcRadius = 25;
 
-let svg;
-
 class Point {
   constructor(x = 0, y = 0) {
     this.x = +x;
@@ -156,16 +153,16 @@ function selectCornerPoints(aimPt, arcPt1, arcPt2, bounds) {
   return points;
 }
 
-function orderPoints(arcPoints, cornerPoints) {
+function orderPoints(arcPoints, cornerPts) {
-  if (cornerPoints.length === 0) {
+  if (cornerPts.length === 0) {
     return arcPoints;
   }
 
-  const index = cornerPoints.findIndex(cp => shareValue(cp, arcPoints.at(0)));
+  const index = cornerPts.findIndex(cp => shareValue(cp, arcPoints.at(0)));
-  return cornerPoints.slice(0, index + 1).concat(arcPoints).concat(cornerPoints.slice(index + 1));
+  return cornerPts.slice(0, index + 1).concat(arcPoints).concat(cornerPts.slice(index + 1));
 }
 
-function calcArcLinePtDeltas(aimPt, pivotPt, { dataset: { size }}) {
+function calcArcLinePtDeltas(aimPt, pivotPt, size) {
   const angle = calculateAngle(aimPt.x - pivotPt.x, aimPt.y - pivotPt.y),
     arcAngle = arcSize[size],
     distance = Math.sqrt((aimPt.x - pivotPt.x) ** 2 + (aimPt.y - pivotPt.y) ** 2),
@@ -175,9 +172,7 @@ function calcArcLinePtDeltas(aimPt, pivotPt, { dataset: { size }}) {
   return { xDelta, yDelta };
 }
 
-function position(e, firingArc, firingArcOutline, aimLine, grid) {
+function calcPoints(e, aimLine, grid, size) {
-  // TODO: handle exactly horizontal and vertical lines?
-
   const pointer = new DOMPoint(e.clientX, e.clientY),
     pointerPt = pointer.matrixTransform(grid.getScreenCTM().inverse()),
     pivotPt = new Point(aimLine.getAttribute('x1'), aimLine.getAttribute('y1')),
@@ -185,7 +180,7 @@ function position(e, firingArc, firingArcOutline, aimLine, grid) {
     bounds = getBounds(grid.getBBox()),
     aimPt = calcEdgePt(pivotPt, pointerPt, bounds),
 
-    { xDelta, yDelta } = calcArcLinePtDeltas(aimPt, pivotPt, firingArc),
+    { xDelta, yDelta } = calcArcLinePtDeltas(aimPt, pivotPt, size),
     arcPt1 = calcEdgePt(pivotPt, new Point(aimPt.x - xDelta, aimPt.y - yDelta), bounds),
     arcPt2 = calcEdgePt(pivotPt, new Point(aimPt.x + xDelta, aimPt.y + yDelta), bounds),
 
@@ -193,11 +188,7 @@ function position(e, firingArc, firingArcOutline, aimLine, grid) {
     cornerPoints = selectCornerPoints(aimPt, arcPt1, arcPt2, bounds),
     arcPoints = orderPoints(outlinePoints, cornerPoints);
 
-  aimLine.setAttributeNS(null, 'x2', aimPt.x);
+  return { aimPt, outlinePoints, arcPoints };
-  aimLine.setAttributeNS(null, 'y2', aimPt.y);
-
-  firingArcOutline.setAttributeNS(null, 'points', outlinePoints.join(' '));
-  firingArc.setAttributeNS(null, 'points', arcPoints.join(' '));
 }
 
 function setDataAttrs({ dataset: { allegiance, number }}, el) {
@@ -209,7 +200,7 @@ function getClipPathId({ dataset: { allegiance, number }}) {
   return `clip-path-${allegiance}-${number}`;
 }
 
-function getUnclipped() {
+function getUnclipped(svg) {
   return svg.querySelectorAll('#firing-arcs #shapes polygon:not([clip-path]), #firing-arcs #lines polyline:not([clip-path])');
 };
 
@@ -225,15 +216,15 @@ function createAimLine(x, y, container) {
 }
 
 function createClipPath(x, y, id, container) {
-  const clipShape = document.createElementNS(svgns, 'circle');
+  const clipShape = document.createElementNS(svgns, 'circle'),
+    clipPath = document.createElementNS(svgns, 'clipPath');
+
   clipShape.setAttributeNS(null, 'cx', x);
   clipShape.setAttributeNS(null, 'cy', y);
   clipShape.setAttributeNS(null, 'r', clippedFiringArcRadius);
 
-  const clipPath = document.createElementNS(svgns, 'clipPath');
   clipPath.setAttributeNS(null, 'id', id);
   clipPath.appendChild(clipShape);
-
   container.appendChild(clipPath);
 
   return clipPath;
@@ -257,28 +248,42 @@ function createFiringArcOutline(x, y, container) {
   return firingArcOutline;
 }
 
-export default function (el) {
+function queryContainers(svg) {
-  svg = el;
+  const grid = svg.querySelector('.grid'),
+    arcContainer = svg.querySelector('#firing-arcs'),
+    arcLayer = arcContainer.querySelector('#shapes'),
+    outlineLayer = arcContainer.querySelector('#lines');
 
-  this.set = function (size, counter, { x, y }) {
+  return { grid, containers: { arcContainer, arcLayer, outlineLayer }};
-    this.get(counter).forEach(fa => fa.remove());
+}
 
-    const grid = svg.querySelector('.grid'),
+function create(x, y, size, counter, { arcContainer, arcLayer, outlineLayer }) {
-      arcContainer = svg.querySelector('#firing-arcs'),
+  const aimLine = createAimLine(x, y, outlineLayer),
-      arcLayer = arcContainer.querySelector('#shapes'),
+    firingArc = createFiringArc(x, y, size, arcLayer),
-      outlineLayer = arcContainer.querySelector('#lines'),
+    firingArcOutline = createFiringArcOutline(x, y, outlineLayer),
+    clipPath = createClipPath(x, y, getClipPathId(counter), arcContainer);
 
-      aimLine = createAimLine(x, y, outlineLayer),
+  setDataAttrs(counter, firingArc);
-      firingArc = createFiringArc(x, y, size, arcLayer),
+  setDataAttrs(counter, firingArcOutline);
-      firingArcOutline = createFiringArcOutline(x, y, outlineLayer),
+  setDataAttrs(counter, clipPath);
-      clipPath = createClipPath(x, y, getClipPathId(counter), arcContainer);
 
-    setDataAttrs(counter, firingArc);
+  return { aimLine, firingArc, firingArcOutline };
-    setDataAttrs(counter, firingArcOutline);
+}
-    setDataAttrs(counter, clipPath);
+
+export default function (svg) {
+  function set(size, counter, { x, y }) {
+    get(counter).forEach(fa => fa.remove());
+
+    const { grid, containers } = queryContainers(svg),
+      { aimLine, firingArc, firingArcOutline } = create(x, y, size, counter, containers);
 
     function positionListener(e) {
-      position(e, firingArc, firingArcOutline, aimLine, grid);
+      const { aimPt, outlinePoints, arcPoints } = calcPoints(e, aimLine, grid, size);
+
+      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() {
@@ -288,13 +293,13 @@ export default function (el) {
       svg.removeEventListener('mousemove', positionListener);
     }
 
-    let cancelPlacementListener = e => {
+    function cancelPlacementListener(e) {
       e.preventDefault();
 
-      this.get(counter).forEach(fa => fa.remove());
+      get(counter).forEach(fa => fa.remove());
       grid.removeAttribute('style');
       svg.removeEventListener('mousemove', positionListener);
-    };
+    }
 
     grid.style.pointerEvents = 'none';
     firingArc.addEventListener('click', placementListener, { once: true });
@@ -302,16 +307,16 @@ export default function (el) {
     svg.addEventListener('mousemove', positionListener);
   };
 
-  this.clear = function (allegiance) {
+  function clear(allegiance) {
     const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
     svg.querySelectorAll(selector).forEach(el => el.remove());
   };
 
-  this.get = function ({ dataset: { allegiance, number }}) {
+  function get({ dataset: { allegiance, number }}) {
     return svg.querySelectorAll(`#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"], #firing-arcs line`);
   };
 
-  this.toggleVisibility = function (allegiance) {
+  function toggleVisibility(allegiance) {
     const vis = firingArcVisibility[allegiance],
       clipPaths = svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
 
@@ -319,7 +324,7 @@ export default function (el) {
     firingArcVisibility[allegiance] = !vis;
   };
 
-  this.toggleCounterVisibility = function ({ dataset: { number, allegiance }}, vis) {
+  function toggleCounterVisibility({ dataset: { number, allegiance }}, vis) {
     const cp = svg.querySelector(`#clip-path-${allegiance}-${number}`),
       display = vis ? 'none' : '';
 
@@ -328,8 +333,8 @@ export default function (el) {
     }
   };
 
-  this.clipAll = function () {
+  function clipAll() {
-    let unclipped = getUnclipped();
+    const unclipped = getUnclipped(svg);
 
     unclipped.forEach(el => {
       const { number, allegiance } = el.dataset,
@@ -343,4 +348,6 @@ export default function (el) {
       el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
     });
   };
+
+  return { set, clear, get, toggleVisibility, toggleCounterVisibility, clipAll };
 }

src/modules/game/sightLine.js

@@ -167,10 +167,10 @@ export default function(svg, board) {
   }
 
   return {
-    draw: draw,
+    draw,
-    clear: clear,
+    clear,
-    update: update,
+    update,
-    toggleLock: toggleLock,
+    toggleLock,
 
     get sightLine() {
       return sightLine;