Remove 'reveal pattern' from game, as it's not necessary

src/index.js

@@ -1,5 +1,5 @@
-import PanZoom from './modules/panzoom.js';
+import * as panzoom from './modules/panzoom.js';
-import Game from './modules/game.js';
+import * as game from './modules/game.js';
 
 const RecordSheet = {
   unSelect: function () {
@@ -40,19 +40,18 @@ document.querySelector('object').addEventListener('load', function () {
 });
 
 window.addEventListener('load', () => {
-  const svg = document.querySelector('object').contentDocument.querySelector('svg'),
+  const svg = document.querySelector('object').contentDocument.querySelector('svg');
-    game = Game(svg);
 
-  window.game = game;
+  game.start(svg);
+  panzoom.start(svg);
 
   const svgns = "http://www.w3.org/2000/svg",
     recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible');
 
-  PanZoom(svg);
 
   const distanceOutput = document.getElementById('status');
 
-  game.distanceCallback = count => {
+  game.setDistanceCallback(count => {
     const output = {
       count: '-',
       display: 'none'
@@ -65,12 +64,12 @@ window.addEventListener('load', () => {
 
     distanceOutput.querySelector('#hex-count').textContent = output.count;
     distanceOutput.style.display = output.display;
-  };
+  });
 
   const proneToggle = document.getElementById('toggle-prone-counter');
 
-  game.proneFlagCallback = checked => proneToggle.checked = checked;
+  game.setProneFlagCallback(checked => proneToggle.checked = checked);
-  game.selectCallback = data => RecordSheet.select(data);
+  game.setSelectCallback(data => RecordSheet.select(data));
 
   // Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
   //   const identityMtx = [1, 0, 0, 1, 0, 0];

src/modules/game.js

@@ -64,13 +64,74 @@ function getCellPosition(cell) {
   return pt;
 }
 
-export default function (svg) {
+function getCell(x, y) {
-  let distanceCallback, proneFlagCallback, selectCallback,
+  return svg.querySelector(`g[data-y="${y}"] > g[data-x="${x}"]`);
+}
+
+function getCounterAtGridIndex(x, y) {
+  return getCell(x, y).querySelector('.counter');
+}
+
+function getSelected() {
+  return svg.querySelector(`.counter.selected[data-allegiance][data-number]`);
+}
+
+function clearSightLine() {
+  sightLine.hexes = [];
+  sightLine.clear();
+  distanceCallback && distanceCallback();
+}
+
+function updateSightLine(cell) {
+  const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = cell,
+    { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = sightLine.lockTarget;
+
+  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 = svg.querySelectorAll(selector);
+  sightLine.hexes = hexes;
+  sightLine.update(getCellPosition(cell));
+  distanceCallback && distanceCallback(hexes.length - 1);
+}
+
+function drawSightLine(sourceCell, targetCell) {
+  const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = sourceCell,
+    { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = targetCell;
+
+  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 = svg.querySelectorAll(selector);
+  sightLine.hexes = hexes;
+  sightLine.drawLine(getCellPosition(sourceCell), getCellPosition(targetCell));
+  distanceCallback && distanceCallback(hexes.length - 1);
+}
+
+let svg, distanceCallback, proneFlagCallback, selectCallback;
+
+let board, firingArc, sightLine, counterMod,
   placing = [];
 
-  const board = svg.querySelector('.board'),
+export function setDistanceCallback(callback) {
-    firingArc = FiringArc(svg, board),
+  distanceCallback = callback;
-    sightLine = SightLine(board),
+}
+
+export function setProneFlagCallback(callback) {
+  proneFlagCallback = callback;
+}
+
+export function setSelectCallback(callback) {
+  selectCallback = callback;
+}
+
+export function start(el) {
+  svg = el;
+  board = svg.querySelector('.board');
+  firingArc = FiringArc(svg, board);
+  sightLine = SightLine(board);
   counterMod = Counter(svg, board);
 
   getCells(svg).forEach(cell => {
@@ -226,54 +287,9 @@ export default function (svg) {
   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}"]`);
 }
 
-  function getCounterAtGridIndex(x, y) {
+export function select(selected) {
-    return getCell(x, y).querySelector('.counter');
-  }
-
-  function getSelected() {
-    return svg.querySelector(`.counter.selected[data-allegiance][data-number]`);
-  }
-
-  function clearSightLine() {
-    sightLine.hexes = [];
-    sightLine.clear();
-    distanceCallback && distanceCallback();
-  }
-
-  function updateSightLine(cell) {
-    const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = cell,
-      { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = sightLine.lockTarget;
-
-    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 = svg.querySelectorAll(selector);
-    sightLine.hexes = hexes;
-    sightLine.update(getCellPosition(cell));
-    distanceCallback && distanceCallback(hexes.length - 1);
-  }
-
-  function drawSightLine(sourceCell, targetCell) {
-    const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = sourceCell,
-      { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = targetCell;
-
-    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 = svg.querySelectorAll(selector);
-    sightLine.hexes = hexes;
-    sightLine.drawLine(getCellPosition(sourceCell), getCellPosition(targetCell));
-    distanceCallback && distanceCallback(hexes.length - 1);
-  }
-
-  function select(selected) {
   const counter = counterMod.getCounter(selected);
 
   if (counter) {
@@ -285,7 +301,7 @@ export default function (svg) {
   }
 }
 
-  function unSelect() {
+export function unSelect() {
   const selected = getSelected();
 
   if (selected) {
@@ -296,7 +312,7 @@ export default function (svg) {
   }
 }
 
-  function endMove() {
+export function endMove() {
   const selected = getSelected();
 
   if (selected) {
@@ -305,11 +321,11 @@ export default function (svg) {
   }
 }
 
-  function endTurn(allegiance) {
+export function endTurn(allegiance) {
   firingArc.clear(allegiance);
 }
 
-  function toggleProne() {
+export function toggleProne() {
   const selected = getSelected(),
     isOnBoard = selected && selected.parentElement.hasAttribute('data-x');
 
@@ -318,11 +334,11 @@ export default function (svg) {
   }
 }
 
-  function toggleFiringArcVisibility(allegiance) {
+export function toggleFiringArcVisibility(allegiance) {
   firingArc.toggleVisibility(allegiance);
 }
 
-  function setFiringArc(size) {
+export function setFiringArc(size) {
   const counter = getSelected(),
     isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
 
@@ -331,33 +347,9 @@ export default function (svg) {
   }
 }
 
-  function setGrenade() {
+export 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
-  };
-}

src/modules/panzoom.js

@@ -26,7 +26,7 @@ function observePanZoomChanges(svg) {
   observer.observe(svg, { attributeFilter: ['style'] });
 }
 
-export default function (svg) {
+export function start(svg) {
   restorePanZoomVal(svg);
   addEventListeners(svg);
   observePanZoomChanges(svg);