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,14 +64,75 @@ 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}"]`);
-    placing = [];
+}
 
-  const board = svg.querySelector('.board'),
+function getCounterAtGridIndex(x, y) {
-    firingArc = FiringArc(svg, board),
+  return getCell(x, y).querySelector('.counter');
-    sightLine = SightLine(board),
+}
-    counterMod = Counter(svg, board);
+
+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 = [];
+
+export function setDistanceCallback(callback) {
+  distanceCallback = callback;
+}
+
+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 => {
     cell.addEventListener('click', e => {
@@ -226,138 +287,69 @@ 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}"]`);
+export function select(selected) {
-  }
+  const counter = counterMod.getCounter(selected);
-
+
-  function getCounterAtGridIndex(x, y) {
+  if (counter) {
-    return getCell(x, y).querySelector('.counter');
+    unSelect();
-  }
+    placing.push(counter);
-
+    counter.classList.add(counterMod.selectedClass);
-  function getSelected() {
+    firingArc.get(counter).forEach(el => el.removeAttribute('clip-path'));
-    return svg.querySelector(`.counter.selected[data-allegiance][data-number]`);
+    selectCallback && selectCallback({ prone: counterMod.hasProne(counter), ...counter.dataset });
-  }
+  }
-
+}
-  function clearSightLine() {
+
-    sightLine.hexes = [];
+export function unSelect() {
-    sightLine.clear();
+  const selected = getSelected();
-    distanceCallback && distanceCallback();
+
-  }
+  if (selected) {
-
+    placing = [];
-  function updateSightLine(cell) {
+    getSelected().classList.remove(counterMod.selectedClass);
-    const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = cell,
+    clearSightLine();
-      { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = sightLine.lockTarget;
+    firingArc.clipAll();
-
+  }
-    const selector = sightLine.calcIndexes(+sX, +sY, +tX, +tY)
+}
-      .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
+
-      .join(', ');
+export function endMove() {
-
+  const selected = getSelected();
-    const hexes = svg.querySelectorAll(selector);
+
-    sightLine.hexes = hexes;
+  if (selected) {
-    sightLine.update(getCellPosition(cell));
+    counterMod.endMove(selected);
-    distanceCallback && distanceCallback(hexes.length - 1);
+    unSelect();
-  }
+  }
-
+}
-  function drawSightLine(sourceCell, targetCell) {
+
-    const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = sourceCell,
+export function endTurn(allegiance) {
-      { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = targetCell;
+  firingArc.clear(allegiance);
-
+}
-    const selector = sightLine.calcIndexes(+sX, +sY, +tX, +tY)
+
-      .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
+export function toggleProne() {
-      .join(', ');
+  const selected = getSelected(),
-
+    isOnBoard = selected && selected.parentElement.hasAttribute('data-x');
-    const hexes = svg.querySelectorAll(selector);
+
-    sightLine.hexes = hexes;
+  if (selected && isOnBoard) {
-    sightLine.drawLine(getCellPosition(sourceCell), getCellPosition(targetCell));
+    counterMod.toggleProne(selected);
-    distanceCallback && distanceCallback(hexes.length - 1);
+  }
-  }
+}
-
+
-  function select(selected) {
+export function toggleFiringArcVisibility(allegiance) {
-    const counter = counterMod.getCounter(selected);
+  firingArc.toggleVisibility(allegiance);
-
+}
-    if (counter) {
+
-      unSelect();
+export function setFiringArc(size) {
-      placing.push(counter);
+  const counter = getSelected(),
-      counter.classList.add(counterMod.selectedClass);
+    isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
-      firingArc.get(counter).forEach(el => el.removeAttribute('clip-path'));
+
-      selectCallback && selectCallback({ prone: counterMod.hasProne(counter), ...counter.dataset });
+  if (isOnBoard(counter)) {
-    }
+    firingArc.set(size, counter, getCellPosition(counter.parentElement));
-  }
+  }
-
+}
-  function unSelect() {
+
-    const selected = getSelected();
+export function setGrenade() {
-
+  let counter = document.createElementNS(svgns, 'use');
-    if (selected) {
+  counter.setAttributeNS(null, 'href', '#counter-grenade');
-      placing = [];
+
-      getSelected().classList.remove(counterMod.selectedClass);
+  placing.push(counter);
-      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
-  };
 }

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);