Remove calling the gme module with 'new'

src/index.js

@@ -41,7 +41,7 @@ document.querySelector('object').addEventListener('load', function () {
 
 window.addEventListener('load', () => {
   const svg = document.querySelector('object').contentDocument.querySelector('svg'),
-    game = new Game(svg);
+    game = Game(svg);
 
   window.game = game;
 

src/modules/game.js

@@ -4,76 +4,58 @@ import Counter from './game/counter.js';
 
 const svgns = "http://www.w3.org/2000/svg";
 
-export default class Game {
+function getCellContents(cell) {
-  info;
-  placing = [];
-
-  constructor(svg) {
-    this.svg = svg;
-
-    const board = this.getBoard();
-
-    this.firingArc = FiringArc(svg, board);
-    this.sightLine = SightLine(board);
-    this.counter = Counter(svg, board);
-
-    this.setUpCells();
-
-    // debug
-    const counter = this.counter.getCounter({ dataset: { allegiance: 'davion', number: '1' }});
-    this.counter.place(counter, this.getCell(17, 25));
-    this.select(counter);
-  }
-
-  getCells() {
-    return this.svg.querySelectorAll('g[data-y] > g[data-x]');
-  }
-
-  getCell(x, y) {
-    return this.svg.querySelector(`g[data-y="${y}"] > g[data-x="${x}"]`);
-  }
-
-  getCellOccupant(cell) {
-    return cell.querySelector('.counter');
-  }
-
-  getCellContents(cell) {
   return cell.querySelectorAll('*:not(use[href="#hex"])');
-  }
+}
 
-  getHex(cell) {
+function getGridIndex({ parentElement: { dataset: { x }, parentElement: { dataset: { y }}}}) {
-    return cell.querySelector('use[href="#hex"]');
-  }
-
-  getSelected() {
-    return this.svg.querySelector(`.counter.selected[data-allegiance][data-number]`);
-  }
-
-  getSightLine() {
-    return this.svg.querySelector('line.sight-line');
-  }
-
-  getActiveSightLine() {
-    return this.svg.querySelector('line.sight-line.active');
-  }
-
-  getLockedSightLine() {
-    return this.svg.querySelector('line.sight-line:not(.active)');
-  }
-
-  getGridIndex({ parentElement: { dataset: { x }, parentElement: { dataset: { y }}}}) {
   return { x: +x, y: +y };
-  }
+}
 
-  getCounterAtGridIndex(x, y) {
+function getCounterAtGridIndex(x, y) {
-    return this.getCell(x, y).querySelector('.counter');
+  return getCell(x, y).querySelector('.counter');
-  }
+}
 
-  getBoard() {
+function getHex(cell) {
-    return this.svg.querySelector('.board');
+  return cell.querySelector('use[href="#hex"]');
-  }
+}
 
-  getCellPosition(cell) {
+function getCellOccupant(cell) {
+  return cell.querySelector('.counter');
+}
+
+function getCells(svg) {
+  return svg.querySelectorAll('g[data-y] > g[data-x]');
+}
+
+function getLockedSightLine(svg) {
+  return svg.querySelector('line.sight-line:not(.active)');
+}
+
+function getSightLine(svg) {
+  return svg.querySelector('line.sight-line');
+}
+
+function getActiveSightLine(svg) {
+  return svg.querySelector('line.sight-line.active');
+}
+
+function isGrenade(el) {
+  return el && el.getAttribute('href') === '#counter-grenade';
+}
+
+function isClone(counter) {
+  const isClone = counter.classList.contains('clone'),
+    { allegiance: clAl, number: clNum } = counter.dataset;
+
+  return {
+    of: function ({ dataset: { allegiance, number }}) {
+      return isClone && clAl == allegiance && clNum == number;
+    }
+  };
+}
+
+function getCellPosition(cell) {
   let pt = new DOMPoint(0, 0),
     transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g),
     mtx = new DOMMatrix(transform);
@@ -84,104 +66,48 @@ export default class Game {
   pt = pt.matrixTransform(mtx);
 
   return pt;
-  }
+}
 
-  endMove() {
+export default function (svg) {
-    const selected = this.getSelected();
+  let distanceCallback, proneFlagCallback, selectCallback,
+    placing = [];
 
-    if (selected) {
+  const board = svg.querySelector('.board'),
-      this.counter.endMove(selected);
+    firingArc = FiringArc(svg, board),
-      this.unSelect();
+    sightLine = SightLine(board),
-    }
+    counterMod = Counter(svg, board);
-  }
 
-  select(selected) {
+  getCells(svg).forEach(cell => {
-    const counter = this.counter.getCounter(selected);
-
-    if (counter) {
-      this.unSelect();
-      this.placing.push(counter);
-      counter.classList.add(this.counter.selectedClass);
-      this.firingArc.get(counter).forEach(el => el.removeAttribute('clip-path'));
-      this.selectCallback && this.selectCallback({ prone: this.counter.hasProne(counter), ...counter.dataset });
-    }
-  }
-
-  unSelect() {
-    const selected = this.getSelected();
-
-    if (selected) {
-      this.placing = [];
-      this.getSelected().classList.remove(this.counter.selectedClass);
-      this.clearSightLine();
-      this.firingArc.clipAll();
-    }
-  }
-
-  endTurn(allegiance) {
-    this.firingArc.clear(allegiance);
-  }
-
-  toggleProne() {
-    const selected = this.getSelected(),
-      isOnBoard = selected && selected.parentElement.hasAttribute('data-x');
-
-    if (selected && isOnBoard) {
-      this.counter.toggleProne(selected);
-    }
-  }
-
-  toggleFiringArcVisibility(allegiance) {
-    this.firingArc.toggleVisibility(allegiance);
-  }
-
-  setUpCells() {
-    function isGrenade(el) {
-      return el && el.getAttribute('href') === '#counter-grenade';
-    }
-
-    function isClone(counter) {
-      const isClone = counter.classList.contains('clone'),
-        { allegiance: clAl, number: clNum } = counter.dataset;
-
-      return {
-        of: function ({ dataset: { allegiance, number }}) {
-          return isClone && clAl == allegiance && clNum == number;
-        }
-      };
-    }
-
-    this.getCells().forEach(cell => {
     cell.addEventListener('click', e => {
       const state = {
-          placing: this.placing,
+        placing: placing,
-          hex: this.getHex(cell),
+        hex: getHex(cell),
-          occupant: this.getCellOccupant(cell),
+        occupant: getCellOccupant(cell),
-          contents: this.getCellContents(cell)
+        contents: getCellContents(cell)
       };
 
-        let toPlace = this.placing.pop();
+      let toPlace = placing.pop();
 
       if (isGrenade(toPlace)) {
         state.hex.after(toPlace);
       } else if (toPlace && !state.occupant) {
-          this.counter.place(toPlace, cell);
+        counterMod.place(toPlace, cell);
-          this.placing.push(toPlace);
+        placing.push(toPlace);
-          const lockedSl = this.getLockedSightLine();
+        const lockedSl = getLockedSightLine(svg);
 
         if (!lockedSl) {
-            this.clearSightLine();
+          clearSightLine();
         } else {
-            this.updateSightLine(cell);
+          updateSightLine(cell);
         }
       } else if (toPlace && state.occupant) {
         if (toPlace === state.occupant) {
           if ('previous' in toPlace.dataset) {
-              const trace = this.counter.getTrace(toPlace);
+            const trace = counterMod.getTrace(toPlace);
             toPlace.remove();
-              toPlace = this.getCounterAtGridIndex(...toPlace.dataset.previous.split(','));
+            toPlace = getCounterAtGridIndex(...toPlace.dataset.previous.split(','));
             toPlace.classList.remove('clone');
-              toPlace.classList.add(this.counter.selectedClass);
+            toPlace.classList.add(counterMod.selectedClass);
             if (!('previous' in toPlace.dataset)) {
               trace.remove();
             } else {
@@ -189,39 +115,39 @@ export default class Game {
               points.pop();
               trace.setAttributeNS(null, 'points', points.join(' '));
             }
-              this.placing.push(toPlace);
+            placing.push(toPlace);
-              const lockedSl = this.getLockedSightLine();
+            const lockedSl = getLockedSightLine(svg);
 
             if (!lockedSl) {
-                this.clearSightLine();
+              clearSightLine();
             } else {
-                this.updateSightLine(toPlace.parentElement);
+              updateSightLine(toPlace.parentElement);
             }
           } else {
-              this.unSelect();
+            unSelect();
           }
         } else if (!state.occupant.classList.contains('clone')) {
-            this.select(state.occupant);
+          select(state.occupant);
         } else {
           if (isClone(state.occupant).of(toPlace)) {
             if (!('previous' in state.occupant.dataset)) {
               state.occupant.classList.remove('clone');
-                state.occupant.classList.add(this.counter.selectedClass);
+              state.occupant.classList.add(counterMod.selectedClass);
               toPlace.remove();
               toPlace = state.occupant;
-                this.counter.removeClones(toPlace);
+              counterMod.removeClones(toPlace);
-                this.counter.getTrace(toPlace).remove();
+              counterMod.getTrace(toPlace).remove();
-                const lockedSl = this.getLockedSightLine();
+              const lockedSl = getLockedSightLine(svg);
 
               if (!lockedSl) {
-                  this.clearSightLine();
+                clearSightLine();
               } else {
-                  this.updateSightLine(cell);
+                updateSightLine(cell);
               }
             } else {
-                const index = this.getGridIndex(state.occupant),
+              const index = getGridIndex(state.occupant),
-                  trace = this.counter.getTrace(toPlace),
+                trace = counterMod.getTrace(toPlace),
-                  pos = this.getCellPosition(cell),
+                pos = getCellPosition(cell),
                 points = trace.getAttribute('points').split(' ').filter(p => p != `${pos.x},${pos.y}`).join(' ');;
 
               let current = toPlace;
@@ -229,17 +155,17 @@ export default class Game {
               trace.setAttributeNS(null, 'points', points);
 
               while (current.dataset.previous != `${index.x},${index.y}`) {
-                  current = this.getCounterAtGridIndex(...current.dataset.previous.split(','));
+                current = getCounterAtGridIndex(...current.dataset.previous.split(','));
               }
 
               current.dataset.previous = state.occupant.dataset.previous;
               state.occupant.remove();
             }
           }
-            this.placing.push(toPlace);
+          placing.push(toPlace);
         }
       } else if (!toPlace && state.occupant) {
-          this.select(state.occupant);
+        select(state.occupant);
       } else {
         console.log('removing cell contents');
         state.contents.forEach(el => el.remove());
@@ -247,107 +173,191 @@ export default class Game {
     });
 
     cell.addEventListener('dblclick', e => {
-        const toPlace = this.placing.pop(),
+      const toPlace = placing.pop(),
-          occupant = this.getCellOccupant(cell);
+        occupant = getCellOccupant(cell);
 
       if (toPlace && occupant && toPlace == occupant) {
         const { number, allegiance } = toPlace.dataset,
           selector = `[data-allegiance="${allegiance}"][data-number="${number}"]`;
 
-          this.svg.querySelectorAll(selector).forEach(el => el.remove());
+        svg.querySelectorAll(selector).forEach(el => el.remove());
       }
     });
 
     cell.addEventListener('contextmenu', e => {
       e.preventDefault();
 
-        this.sightLine.toggleLock(cell);
+      sightLine.toggleLock(cell);
       cell.dispatchEvent(new MouseEvent('pointerover'));
     });
 
     cell.addEventListener('pointerover', e => {
-        let selected = this.getSelected();
+      let selected = getSelected();
 
       if (selected) {
-          let sl = this.getSightLine(),
+        let sl = getSightLine(svg),
           isOnBoard = selected.parentElement.hasAttribute('data-x'),
           sourceCell = selected.parentElement;
 
         if (isOnBoard && (!sl || sl.classList.contains('active')) && sourceCell != cell) {
-            this.drawSightLine(sourceCell, cell);
+          drawSightLine(sourceCell, cell);
         }
       }
 
-        let occupant = this.getCellOccupant(cell);
+      let occupant = getCellOccupant(cell);
 
       if (occupant) {
-          this.firingArc.toggleCounterVisibility(occupant, true);
+        firingArc.toggleCounterVisibility(occupant, true);
       }
     });
 
     cell.addEventListener('pointerout', e => {
-        let sl = this.getActiveSightLine();
+      let sl = getActiveSightLine(svg);
 
       if (sl) {
-          this.clearSightLine();
+        clearSightLine();
       }
 
-        let occupant = this.getCellOccupant(cell);
+      let occupant = getCellOccupant(cell);
 
       if (occupant) {
-          this.firingArc.toggleCounterVisibility(occupant, false);
+        firingArc.toggleCounterVisibility(occupant, false);
       }
     });
   });
+
+  // debug
+  const c = counterMod.getCounter({ dataset: { allegiance: 'davion', number: '1' }});
+  counterMod.place(c, getCell(17, 25));
+  select(c);
+
+  function getCell(x, y) {
+    return svg.querySelector(`g[data-y="${y}"] > g[data-x="${x}"]`);
   }
 
-  setFiringArc(size) {
+  function getSelected() {
-    const counter = this.getSelected(),
+    return svg.querySelector(`.counter.selected[data-allegiance][data-number]`);
-      isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
-
-    if (isOnBoard(counter)) {
-      this.firingArc.set(size, counter, this.getCellPosition(counter.parentElement));
-    }
   }
 
-  setGrenade() {
+  function clearSightLine() {
-    let counter = document.createElementNS(svgns, 'use');
+    sightLine.hexes = [];
-    counter.setAttributeNS(null, 'href', '#counter-grenade');
+    sightLine.clear();
-
+    distanceCallback && distanceCallback();
-    this.placing.push(counter);
   }
 
-  updateSightLine(cell) {
+  function updateSightLine(cell) {
     const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = cell,
-      { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = this.sightLine.lockTarget;
+      { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = sightLine.lockTarget;
 
-    const selector = this.sightLine.calcIndexes(+sX, +sY, +tX, +tY)
+    const selector = sightLine.calcIndexes(+sX, +sY, +tX, +tY)
       .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
       .join(', ');
 
-    const hexes = this.svg.querySelectorAll(selector);
+    const hexes = svg.querySelectorAll(selector);
-    this.sightLine.hexes = hexes;
+    sightLine.hexes = hexes;
-    this.sightLine.update(this.getCellPosition(cell));
+    sightLine.update(getCellPosition(cell));
-    this.distanceCallback && this.distanceCallback(hexes.length - 1);
+    distanceCallback && distanceCallback(hexes.length - 1);
   }
 
-  drawSightLine(sourceCell, targetCell) {
+  function drawSightLine(sourceCell, targetCell) {
     const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = sourceCell,
       { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = targetCell;
 
-    const selector = this.sightLine.calcIndexes(+sX, +sY, +tX, +tY)
+    const selector = sightLine.calcIndexes(+sX, +sY, +tX, +tY)
       .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
       .join(', ');
 
-    const hexes = this.svg.querySelectorAll(selector);
+    const hexes = svg.querySelectorAll(selector);
-    this.sightLine.hexes = hexes;
+    sightLine.hexes = hexes;
-    this.sightLine.drawLine(this.getCellPosition(sourceCell), this.getCellPosition(targetCell));
+    sightLine.drawLine(getCellPosition(sourceCell), getCellPosition(targetCell));
-    this.distanceCallback && this.distanceCallback(hexes.length - 1);
+    distanceCallback && distanceCallback(hexes.length - 1);
   }
 
-  clearSightLine() {
+  function select(selected) {
-    this.sightLine.hexes = [];
+    const counter = counterMod.getCounter(selected);
-    this.sightLine.clear();
+
-    this.distanceCallback && this.distanceCallback();
+    if (counter) {
+      unSelect();
+      placing.push(counter);
+      counter.classList.add(counterMod.selectedClass);
+      firingArc.get(counter).forEach(el => el.removeAttribute('clip-path'));
+      selectCallback && selectCallback({ prone: counterMod.hasProne(counter), ...counter.dataset });
     }
+  }
+
+  function unSelect() {
+    const selected = getSelected();
+
+    if (selected) {
+      placing = [];
+      getSelected().classList.remove(counterMod.selectedClass);
+      clearSightLine();
+      firingArc.clipAll();
+    }
+  }
+
+  function endMove() {
+    const selected = getSelected();
+
+    if (selected) {
+      counterMod.endMove(selected);
+      unSelect();
+    }
+  }
+
+  function endTurn(allegiance) {
+    firingArc.clear(allegiance);
+  }
+
+  function toggleProne() {
+    const selected = getSelected(),
+      isOnBoard = selected && selected.parentElement.hasAttribute('data-x');
+
+    if (selected && isOnBoard) {
+      counterMod.toggleProne(selected);
+    }
+  }
+
+  function toggleFiringArcVisibility(allegiance) {
+    firingArc.toggleVisibility(allegiance);
+  }
+
+  function setFiringArc(size) {
+    const counter = getSelected(),
+      isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
+
+    if (isOnBoard(counter)) {
+      firingArc.set(size, counter, getCellPosition(counter.parentElement));
+    }
+  }
+
+  function setGrenade() {
+    let counter = document.createElementNS(svgns, 'use');
+    counter.setAttributeNS(null, 'href', '#counter-grenade');
+
+    placing.push(counter);
+  }
+
+  return {
+    set distanceCallback(callback) {
+      distanceCallback = callback;
+    },
+
+    set proneFlagCallback(callback) {
+      proneFlagCallback = callback;
+    },
+
+    set selectCallback(callback) {
+      selectCallback = callback;
+    },
+
+    select,
+    unSelect,
+    endMove,
+    endTurn,
+    setFiringArc,
+    setGrenade,
+    toggleFiringArcVisibility,
+    toggleProne
+  };
 }