Remove calling the counter module with 'new'

src/modules/game.js

@@ -15,7 +15,7 @@ export default class Game {
 
     this.firingArc = FiringArc(svg, board);
     this.sightLine = SightLine(board);
-    this.counter = new Counter(svg);
+    this.counter = Counter(svg, board);
 
     this.setUpCells();
 

src/modules/game/counter.js

@@ -1,47 +1,15 @@
-const svgns = "http://www.w3.org/2000/svg";
+const svgns = "http://www.w3.org/2000/svg",
+  selectedClass = 'selected';
 
-export default class Counter {
+function dataSelector({ dataset: { allegiance, number }}) {
-  #board;
-
-  constructor(svg, board) {
-    this.svg = svg;
-    this.#board = board;
-    this.selectedClass = 'selected';
-  }
-
-  dataSelector({ dataset: { allegiance, number }}) {
   return `[data-number="${number}"][data-allegiance="${allegiance}"]`;
-  }
+}
 
-  position(x, y) {
+function traceSelector(counter) {
-    return `g[data-x="${x}"][data-y="${y}"]`;
+  return `polyline.move-trace${dataSelector(counter)}`;
-  }
+}
 
-  counterPosition(x, y) {
+function getCellPosition(cell) {
-    return `.counter[data-x="${x}"][data-x="${y}"]`;
-  }
-
-  traceSelector(counter) {
-    return `polyline.move-trace${this.dataSelector(counter)}`;
-  }
-
-  getClones(counter) {
-    return this.svg.querySelectorAll(`.counter.clone${this.dataSelector(counter)}`);
-  }
-
-  getCounter(selected) {
-    return this.svg.querySelector(`.counter${this.dataSelector(selected)}:not(.clone)`);
-  }
-
-  getCounterAndClones(counter) {
-    return this.svg.querySelectorAll(`.counter${this.dataSelector(counter)}`);
-  }
-
-  getTrace(counter) {
-    return this.svg.querySelector(this.traceSelector(counter));
-  }
-
-  getCellPosition(cell) {
   let pt = new DOMPoint(0, 0),
     transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g),
     mtx = new DOMMatrix(transform);
@@ -52,18 +20,31 @@ export default class Counter {
   pt = pt.matrixTransform(mtx);
 
   return pt;
+}
+
+function getClones(svg, counter) {
+  return svg.querySelectorAll(`.counter.clone${dataSelector(counter)}`);
+}
+
+function getCounterAndClones(svg, counter) {
+  return svg.querySelectorAll(`.counter${dataSelector(counter)}`);
+}
+
+export default function (svg, board) {
+  function getCounter(selected) {
+    return svg.querySelector(`.counter${dataSelector(selected)}:not(.clone)`);
   }
 
-  getBoard() {
+  function getTrace(counter) {
-    return this.svg.querySelector('.board');
+    return svg.querySelector(traceSelector(counter));
   }
 
-  place(selected, cell) {
+  function place(selected, cell) {
     let points,
-      counterNodeList = this.getCounterAndClones(selected);
+      counterNodeList = getCounterAndClones(svg, selected);
 
     if (counterNodeList.length > 0 && selected.parentElement.hasAttribute('data-x')) {
-      let trace = this.svg.querySelector(this.traceSelector(selected));
+      let trace = svg.querySelector(traceSelector(selected));
 
       let prevCoords = [
         selected.parentElement.dataset.x,
@@ -71,7 +52,7 @@ export default class Counter {
       ]
 
       let clone = selected.cloneNode(true);
-      clone.classList.remove(this.selectedClass);
+      clone.classList.remove(selectedClass);
       clone.classList.add('clone');
 
       selected.dataset.previous = prevCoords;
@@ -86,8 +67,8 @@ export default class Counter {
         }
       });
 
-      let previous = this.getCellPosition(clone.parentElement),
+      let previous = getCellPosition(clone.parentElement),
-        current = this.getCellPosition(selected.parentElement);
+        current = getCellPosition(selected.parentElement);
 
       if (!trace) {
         trace = document.createElementNS(svgns, 'polyline');
@@ -98,7 +79,7 @@ export default class Counter {
         trace.dataset.allegiance = selected.dataset.allegiance;
         trace.classList.add('move-trace');
 
-        this.getBoard().prepend(trace);
+        board.prepend(trace);
       } else {
         points = `${trace.getAttribute('points')} ${current.x},${current.y}`;
       }
@@ -110,12 +91,12 @@ export default class Counter {
     }
   }
 
-  removeClones(counter) {
+  function removeClones(counter) {
-    this.getClones(counter).forEach(c => c.remove());
+    getClones(svg, counter).forEach(c => c.remove());
   }
 
-  endMove(counter) {
+  function endMove(counter) {
-    const trace = this.svg.querySelector(this.traceSelector(counter)),
+    const trace = svg.querySelector(traceSelector(counter)),
       proneCounter = counter.querySelector('[href="#counter-prone"]');
 
     if (trace) {
@@ -128,14 +109,14 @@ export default class Counter {
       proneCounter.dataset.preexisting = '';
     }
 
-    this.removeClones(counter);
+    removeClones(counter);
   }
 
-  hasProne(counter) {
+  function hasProne(counter) {
     return !!counter.querySelector('[href="#counter-prone"]');
   }
 
-  toggleProne(counter) {
+  function toggleProne(counter) {
     let proneCounter = counter.querySelector('[href="#counter-prone"]');
 
     if (!proneCounter) {
@@ -148,4 +129,17 @@ export default class Counter {
       proneCounter.remove();
     }
   }
+
+  return {
+    get selectedClass() {
+      return selectedClass;
+    },
+    endMove,
+    getCounter,
+    hasProne,
+    toggleProne,
+    place,
+    getTrace,
+    removeClones
+  };
 }