6 files changed, 78 insertions, 143 deletions
diff --git a/src/index.js b/src/index.js
index b16e00b..fa99fec 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,143 +1,69 @@
 import * as panzoom from './modules/panzoom.js';
 import * as game from './modules/game.js';
+import * as recordSheet from './modules/recordSheet.js';
 
-const RecordSheet = {
-  unSelect: function () {
-    let selected = this.getSelected();
+globalThis.svgns = "http://www.w3.org/2000/svg";
 
-    if (selected) {
-      selected.classList.remove('selected');
-    }
+const mapPlaceholder = document.querySelector('.map-placeholder'),
+  distanceOutput = document.getElementById('status'),
+  proneToggle = document.getElementById('toggle-prone-counter');
 
-    document.getElementById('toggle-prone-counter').checked = false;
-  },
-
-  getSelected: function () {
-    return document.querySelector('.soldier-record.selected');
-  },
-
-  select: function (data) {
-    this.unSelect();
-    document.querySelector(`#record-sheet .soldier-record[data-number="${data.number}"][data-allegiance="${data.allegiance}"]`).classList.add('selected');
-    document.getElementById('toggle-prone-counter').checked = data.prone;
-  },
-
-  endMove: function() {
-    const selected = this.getSelected();
-
-    if (selected) {
-      selected.classList.toggle('movement-ended');
-    }
-
-    this.unSelect();
-  }
-};
-
-const mapPlaceholder = document.querySelector('.map-placeholder');
 document.querySelector('object').addEventListener('load', function () {
   mapPlaceholder.remove();
   this.style.opacity = 1;
 });
 
+document
+  .querySelector('#content input[type="checkbox"].visible')
+  .addEventListener('input', function () {
+    let divs = document.querySelectorAll('#content div');
+
+    divs.forEach(d => {
+      if (this.checked) {
+        d.style.display = d.id == 'record-sheet' ? 'flex' : 'block';
+      } else {
+        d.style.display = 'none';
+      }
+    });
+  });
+
 window.addEventListener('load', () => {
   const svg = document.querySelector('object').contentDocument.querySelector('svg');
 
   game.start(svg);
   panzoom.start(svg);
 
-  const svgns = "http://www.w3.org/2000/svg",
-    recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible');
-
-
-  const distanceOutput = document.getElementById('status');
-
-  game.setDistanceCallback(count => {
-    const output = {
-      count: '-',
-      display: 'none'
-    }
-
-    if (count) {
-      output.count = count;
-      output.display = 'block';
-    }
-
-    distanceOutput.querySelector('#hex-count').textContent = output.count;
-    distanceOutput.style.display = output.display;
+  game.setDistanceCallback((count = '-') => {
+    distanceOutput.querySelector('#hex-count').textContent = count;
+    distanceOutput.style.display = count === '-' ? 'none' : 'block';
   });
 
-  const proneToggle = document.getElementById('toggle-prone-counter');
-
   game.setProneFlagCallback(checked => proneToggle.checked = checked);
-  game.setSelectCallback(data => RecordSheet.select(data));
-
-  // Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
-  //   const identityMtx = [1, 0, 0, 1, 0, 0];
-  //   const target = document.getElementById(fieldset.name);
-  //   const transform = getComputedStyle(target).transform.match(/-?\d+\.?\d*/g) || identityMtx;
-  //   const inputs = fieldset.querySelectorAll('input');
-
-  //   if (transform) {
-  //     const [a, b, c, d, e, f] = transform.map(n => parseFloat(n));
-
-  //     // a c e
-  //     // b d f
-
-  //     const scaleX = Math.sqrt(a**2 + c**2);
-  //     const scaleY = Math.sqrt(b**2 + d**2);
-
-  //     let values = {
-  //       scaleX: Math.round(scaleX * 1000) / 1000,
-  //       scaleY: Math.round(scaleY * 1000) / 1000,
-  //       translateX: e,
-  //       translateY: f,
-  //       rotate: Math.round(radToDeg((Math.acos(a / scaleX) + Math.asin(b / scaleY)) / 2) * 10) / 10
-  //     }
-
-  //     inputs.forEach(input => input.value = values[input.name]);
-  //   }
-
-  //   inputs.forEach(input => {
-  //     input.addEventListener('pointerenter', e => e.target.focus());
-
-  //     input.addEventListener('input', e => {
-  //       let { translateX, translateY, rotate, scaleX, scaleY } =
-  //         Object.values(inputs).reduce((acc, input) => {
-  //           acc[input.name] = input.value;
-  //           return acc;
-  //         }, {});
-
-  //       let transform = `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) scale(${scaleX}, ${scaleY})`;
-  //       target.style.transform = transform;
-  //     });
-
-  //     input.addEventListener('pointerleave', () => document.activeElement.blur());
-  //   });
-  // });
+  game.setSelectCallback(data => recordSheet.select(data));
 
   document.querySelectorAll('.soldier-record').forEach(el =>
-    el.addEventListener('click', e => {
+    el.addEventListener('click', () => {
       if (el.classList.contains('selected')) {
         el.classList.remove('selected');
         game.unSelect();
-        RecordSheet.unSelect();
+        recordSheet.unSelect();
       } else {
         game.select(el);
       }
     })
   );
 
-  document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => {
-    RecordSheet.endMove();
+  document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', () => {
+    recordSheet.endMove();
     game.endMove();
   }));
 
   document.querySelectorAll('.end-turn').forEach(el =>
     el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => {
-      let dataSelector = `[data-allegiance="${allegiance}"]`,
+      const dataSelector = `[data-allegiance="${allegiance}"]`,
         records = Array.from(document.querySelectorAll(`.soldier-record${dataSelector}`)),
         turnCounter = document.getElementById('turn-count'),
-        { textContent: count, dataset: { update }} = turnCounter;
+        { dataset: { update }} = turnCounter;
 
       el.setAttribute('disabled', '');
 
@@ -145,7 +71,7 @@ window.addEventListener('load', () => {
         .querySelector(`button.end-turn:not([data-allegiance="${allegiance}"])`)
         .removeAttribute('disabled');
 
-      if (update == '1') {
+      if (update === '1') {
         turnCounter.children.namedItem('count').textContent++
         turnCounter.dataset.update = '0';
       } else {
@@ -162,32 +88,17 @@ window.addEventListener('load', () => {
   );
 
   document.querySelectorAll('.set-firing-arc').forEach(el =>
-    el.addEventListener('click', () => game.setFiringArc(el.dataset.size))
+    el.addEventListener('click', game.setFiringArc)
   );
 
-  document.querySelector('.set-grenade').addEventListener('click', () => game.setGrenade());
-
-  recordSheetVisibility.addEventListener('input', e => {
-    let divs = document.querySelectorAll('#content div');
-
-    divs.forEach(d => {
-      if (recordSheetVisibility.checked) {
-        d.style.display = d.id == 'record-sheet' ? 'flex' : 'block';
-      } else {
-        d.style.display = 'none';
-      }
-    });
-  });
+  document.querySelector('.set-grenade').addEventListener('click', game.setGrenade);
 
-  document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEventListener('input', e => {
-    game.toggleFiringArcVisibility(el.dataset.allegiance);
-  }));
-
-  document.getElementById('toggle-prone-counter').addEventListener('input', function (e) {
-    let selected = RecordSheet.getSelected();
+  document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el =>
+    el.addEventListener('input', game.toggleFiringArcVisibility)
+  );
 
-    if (selected) {
-      game.toggleProne();
-    }
+  document.getElementById('toggle-prone-counter').addEventListener('input', function () {
+    const selected = recordSheet.getSelected();
+    selected && game.toggleProne();
   });
 });
diff --git a/src/modules/game.js b/src/modules/game.js
index 5bc1fe3..e66f126 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -2,8 +2,6 @@ import * as firingArc from './game/firingArc.js';
 import * as sightLine from './game/sightLine.js';
 import * as counterMod from './game/counter.js';
 
-const svgns = "http://www.w3.org/2000/svg";
-
 function getCellContents(cell) {
   return cell.querySelectorAll('*:not(use[href="#hex"])');
 }
@@ -111,9 +109,7 @@ function drawSightLine(sourceCell, targetCell) {
   distanceCallback && distanceCallback(hexes.length - 1);
 }
 
-let svg, distanceCallback, proneFlagCallback, selectCallback;
-
-let board,
+let svg, distanceCallback, proneFlagCallback, selectCallback,
   placing = [];
 
 export function setDistanceCallback(callback) {
@@ -130,7 +126,6 @@ export function setSelectCallback(callback) {
 
 export function start(el) {
   svg = el;
-  board = svg.querySelector('.board');
 
   getCells(svg).forEach(cell => {
     cell.addEventListener('click', e => {
@@ -332,16 +327,16 @@ export function toggleProne() {
   }
 }
 
-export function toggleFiringArcVisibility(allegiance) {
-  firingArc.toggleVisibility(svg, allegiance);
+export function toggleFiringArcVisibility() {
+  firingArc.toggleVisibility(svg, this.dataset.allegiance);
 }
 
-export function setFiringArc(size) {
+export function setFiringArc() {
   const counter = getSelected(),
     isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
 
   if (isOnBoard(counter)) {
-    firingArc.set(svg, size, counter, getCellPosition(counter.parentElement));
+    firingArc.set(svg, this.dataset.size, counter, getCellPosition(counter.parentElement));
   }
 }
 
diff --git a/src/modules/game/counter.js b/src/modules/game/counter.js
index ff9b0f4..0d75fc6 100644
--- a/src/modules/game/counter.js
+++ b/src/modules/game/counter.js
@@ -1,5 +1,4 @@
-const svgns = "http://www.w3.org/2000/svg",
-  selectedClass = 'selected';
+const selectedClass = 'selected';
 
 function dataSelector({ dataset: { allegiance, number }}) {
   return `[data-number="${number}"][data-allegiance="${allegiance}"]`;
diff --git a/src/modules/game/firingArc.js b/src/modules/game/firingArc.js
index db122a0..817bc44 100644
--- a/src/modules/game/firingArc.js
+++ b/src/modules/game/firingArc.js
@@ -4,8 +4,7 @@
 // cancels out, leaving us with a unitless ratio of sqrt(3) / (3 / 2), or
 // 2 * sqrt(3) / 3.
 
-const svgns = "http://www.w3.org/2000/svg",
-  horzToVertDistRatio = 2 * Math.sqrt(3) / 3,
+const horzToVertDistRatio = 2 * Math.sqrt(3) / 3,
 
   arcSize = {
     'small': Math.atan(horzToVertDistRatio / 6),
diff --git a/src/modules/game/sightLine.js b/src/modules/game/sightLine.js
index 2da99d4..6b94514 100644
--- a/src/modules/game/sightLine.js
+++ b/src/modules/game/sightLine.js
@@ -1,5 +1,4 @@
-const svgns = "http://www.w3.org/2000/svg",
-  targetClassName = 'sight-line-target',
+const targetClassName = 'sight-line-target',
   activeClassName = 'active';
 
 function evenr_to_axial(x, y) {
diff --git a/src/modules/recordSheet.js b/src/modules/recordSheet.js
new file mode 100644
index 0000000..99af18f
--- /dev/null
+++ b/src/modules/recordSheet.js
@@ -0,0 +1,32 @@
+export function unSelect() {
+  const selected = getSelected();
+
+  if (selected) {
+    selected.classList.remove('selected');
+  }
+
+  document.getElementById('toggle-prone-counter').checked = false;
+}
+
+export function getSelected() {
+  return document.querySelector('.soldier-record.selected');
+}
+
+export function select(data) {
+  const selector =
+    `#record-sheet .soldier-record[data-number="${data.number}"][data-allegiance="${data.allegiance}"]`
+
+    unSelect();
+  document.querySelector(selector).classList.add('selected');
+  document.getElementById('toggle-prone-counter').checked = data.prone;
+}
+
+export function endMove() {
+  const selected = getSelected();
+
+  if (selected) {
+    selected.classList.toggle('movement-ended');
+  }
+
+  unSelect();
+}