Refactor index.js

src/index.js

@@ -1,91 +1,62 @@
 import * as panzoom from './modules/pan-zoom.js';
 import * as gameboard from './modules/gameboard.js';
 import * as recordSheet from './modules/record_sheet.js';
+import * as mapSelectDialog from './modules/map_select_dialog.js';
 
 globalThis.svgns = "http://www.w3.org/2000/svg";
 
 const mapPlaceholder = document.querySelector('.map-placeholder'),
   distanceOutput = document.getElementById('status'),
   proneToggle = document.getElementById('toggle-prone-counter'),
-  object = document.querySelector('object');
+  object = document.querySelector('object'),
+  contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
 
-object.addEventListener('load', function (e) {
+  toggleContentVis = (function () {
-  mapPlaceholder.remove();
+    document.querySelectorAll('#content div').forEach(div => {
-  this.style.opacity = 1;
+      if (this.checked) {
-
+        div.style.display = div.id == 'record-sheet' ? 'flex' : 'block';
-  const svg = this.contentDocument.querySelector('svg');
-  panzoom.start(svg);
-  gameboard.start(svg);
-
-  recordSheet.clear();
-
-  const recordTemplate = document.querySelector('template#soldier-record-block');
-  const startLoc = svg.querySelector('.start-locations');
-  const forces = recordSheet.createRecords(gameboard.getUnits(), recordTemplate);
-
-  for (const affiliation in forces) {
-    const container = document.querySelector(`#${affiliation}-record`);
-    const name = startLoc.dataset[`${affiliation}Name`];
-    if (name) {
-      container.querySelector('.name').textContent = name;
-    }
-    forces[affiliation].forEach(r => container.appendChild(r));
-  }
-
-  document.querySelectorAll('.soldier-record').forEach(el =>
-    el.addEventListener('click', () => {
-      if (el.classList.contains('selected')) {
-        el.classList.remove('selected');
-        gameboard.unSelect();
-        recordSheet.unSelect();
       } else {
-        gameboard.select(el);
+        div.style.display = 'none';
       }
-    })
-  );
-
-  window.game = gameboard;
     });
 
-gameboard.setDistanceCallback((count = '-') => {
+    localStorage.setItem('content-visibility', this.checked);
-  distanceOutput.querySelector('#hex-count').textContent = count;
+  }).bind(contentVisToggleEl);
-  distanceOutput.style.display = count === '-' ? 'none' : 'block';
-});
 
-gameboard.setProneFlagCallback(checked => proneToggle.checked = checked);
+function updateTurnCounter() {
-gameboard.setSelectCallback(data => recordSheet.select(data));
+  const turnCounter = document.getElementById('turn-count');
 
-document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', () => {
+  if (turnCounter.dataset.update === '1') {
-  recordSheet.endMove();
+    turnCounter.children.namedItem('count').textContent++;
-  gameboard.endMove();
-}));
-
-document.querySelectorAll('.end-turn').forEach(el =>
-  el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => {
-    const dataSelector = `[data-allegiance="${allegiance}"]`,
-      records = Array.from(document.querySelectorAll(`.soldier-record${dataSelector}`)),
-      turnCounter = document.getElementById('turn-count'),
-      { dataset: { update }} = turnCounter;
-
-    el.setAttribute('disabled', '');
-
-    document
-      .querySelector(`button.end-turn:not([data-allegiance="${allegiance}"])`)
-      .removeAttribute('disabled');
-
-    if (update === '1') {
-      turnCounter.children.namedItem('count').textContent++
     turnCounter.dataset.update = '0';
   } else {
     turnCounter.dataset.update = '1';
   }
+}
 
-    records
+function enableEndTurnButton(allegiance) {
-      .sort((el1, el2) => el1.dataset.number > el2.dataset.number)
+  document
-      .forEach(el => el.classList.remove('movement-ended'));
+    .querySelector(`button.end-turn:not([data-allegiance="${allegiance}"])`)
+    .removeAttribute('disabled');
+}
 
-    gameboard.endTurn(allegiance);
+function clearMoveEndedIndicators(records) {
-    gameboard.select(records.at(0));
+  records.forEach(el => el.classList.remove('movement-ended'));
+}
+
+document.querySelectorAll('.end-turn').forEach(el =>
+  el.addEventListener('click', ({ target: { dataset: { allegiance: opponent }}}) => {
+    const dataSelector = `[data-allegiance="${opponent}"]`,
+      opponentRecords = Array.from(document.querySelectorAll(`.soldier-record${dataSelector}`)),
+      firstOpponentRecord = opponentRecords.sort((el1, el2) => el1.dataset.number > el2.dataset.number).at(0);
+
+    el.setAttribute('disabled', '');
+    updateTurnCounter();
+    enableEndTurnButton(opponent);
+    clearMoveEndedIndicators(opponentRecords);
+
+    gameboard.clearFiringArcs(opponent);
+    gameboard.select(firstOpponentRecord);
   })
 );
 
@@ -104,47 +75,41 @@ document.getElementById('toggle-prone-counter').addEventListener('input', functi
   selected && gameboard.toggleProne();
 });
 
-object.data = `${localStorage.getItem('map') || 'map1'}.svg`;
-
-const contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible');
-contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
-
-const toggleContentVis = (function () {
-  document.querySelectorAll('#content div').forEach(div => {
-    if (this.checked) {
-      div.style.display = div.id == 'record-sheet' ? 'flex' : 'block';
-    } else {
-      div.style.display = 'none';
-    }
-  });
-
-  localStorage.setItem('content-visibility', this.checked);
-}).bind(contentVisToggleEl);
-
-toggleContentVis();
 contentVisToggleEl.addEventListener('input', toggleContentVis);
 
-const showButton = document.getElementById('show-dialog'),
+gameboard.setDistanceCallback((count = '-') => {
-  mapDialog = document.getElementById('map-dialog'),
+  distanceOutput.querySelector('#hex-count').textContent = count;
-  selectEl = mapDialog.querySelector('select'),
+  distanceOutput.style.display = count === '-' ? 'none' : 'block';
-  confirmBtn = mapDialog.querySelector('#confirm-btn');
-
-mapDialog.querySelectorAll('option').forEach(option =>
-  option.value === localStorage.getItem('map') && (option.selected = true)
-);
-
-showButton.addEventListener('click', () => {
-  mapDialog.showModal();
 });
 
-selectEl.addEventListener('change', () => {
+gameboard.setProneFlagCallback(checked => proneToggle.checked = checked);
-  confirmBtn.value = selectEl.value;
+gameboard.setSelectCallback(data => recordSheet.select(data));
+
+document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', () => {
+  recordSheet.endMove();
+  gameboard.endMove();
+}));
+
+object.addEventListener('load', function () {
+  mapPlaceholder.remove();
+  this.style.opacity = 1;
+
+  const svg = this.contentDocument.querySelector('svg'),
+    startLocs = svg.querySelector('.start-locations');
+
+  panzoom.start(svg);
+  gameboard.start(svg);
+  recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
 });
 
-confirmBtn.addEventListener('click', e => {
+contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
-  e.preventDefault();
+toggleContentVis();
-  localStorage.removeItem('pan-zoom');
+
-  localStorage.setItem('map', selectEl.value);
+mapSelectDialog
-  document.querySelector('object').data = `${selectEl.value}.svg`;
+  .init()
-  mapDialog.close();
+  .selectCurrentOptionOnPageLoad()
-});
+  .showOnClick()
+  .updateValueOnSelection()
+  .changeMapOnConfirm();
+
+object.data = `${localStorage.getItem('map') || 'map1'}.svg`;

src/modules/gameboard.js

@@ -296,7 +296,7 @@ export function endMove() {
   }
 }
 
-export function endTurn(allegiance) {
+export function clearFiringArcs(allegiance) {
   firingArc.clear(svg, allegiance);
 }
 

src/modules/map_select_dialog.js

@@ -0,0 +1,42 @@
+export function init() {
+  const showButton = document.getElementById('show-dialog'),
+    mapDialog = document.getElementById('map-dialog'),
+    selectEl = mapDialog.querySelector('select'),
+    confirmBtn = mapDialog.querySelector('#confirm-btn');
+
+  return {
+    selectCurrentOptionOnPageLoad() {
+      mapDialog.querySelectorAll('option').forEach(option =>
+        option.value === localStorage.getItem('map') && (option.selected = true)
+      );
+
+      return this;
+    },
+
+    showOnClick() {
+      showButton.addEventListener('click', () => {
+        mapDialog.showModal();
+      });
+
+      return this;
+    },
+
+    updateValueOnSelection() {
+      selectEl.addEventListener('change', () => {
+        confirmBtn.value = selectEl.value;
+      });
+
+      return this;
+    },
+
+    changeMapOnConfirm() {
+      confirmBtn.addEventListener('click', e => {
+        e.preventDefault();
+        localStorage.removeItem('pan-zoom');
+        localStorage.setItem('map', selectEl.value);
+        document.querySelector('object').data = `${selectEl.value}.svg`;
+        mapDialog.close();
+      });
+    }
+  };
+}

src/modules/record_sheet.js

@@ -46,6 +46,39 @@ function createRecord({ dataset: { allegiance, number }}) {
   return div;
 }
 
+function createRecords(units) {
+  const grouped = Array.from(units).reduce((acc, unit) => {
+    acc[unit.dataset.allegiance]?.push(unit) || (acc[unit.dataset.allegiance] = [unit]);
+    return acc;
+  }, {});
+
+  for (const al in grouped) {
+    grouped[al] = grouped[al].map(createRecord);
+  }
+
+  return grouped;
+}
+
+function clear() {
+  document.querySelectorAll('#attacker-record > div, #defender-record > div').forEach(el => el.remove());
+  document.querySelector('#attacker-record .name').textContent = 'attacker';
+  document.querySelector('#defender-record .name').textContent = 'defender';
+}
+
+function addEventListeners(unSelectCounter, selectCounter) {
+  document.querySelectorAll('.soldier-record').forEach(el =>
+    el.addEventListener('click', () => {
+      if (el.classList.contains('selected')) {
+        el.classList.remove('selected');
+        unSelectCounter();
+        unSelect();
+      } else {
+        selectCounter(el);
+      }
+    })
+  );
+}
+
 export function unSelect() {
   const selected = getSelected();
 
@@ -79,21 +112,18 @@ export function endMove() {
   unSelect();
 }
 
-export function createRecords(units, { content }) {
+export function start(startLoc, units, gbUnSelect, gbSelect) {
-  const grouped = Array.from(units).reduce((acc, unit) => {
+  clear();
-    acc[unit.dataset.allegiance]?.push(unit) || (acc[unit.dataset.allegiance] = [unit]);
+  const forces = createRecords(units);
-    return acc;
-  }, {});
 
-  for (const al in grouped) {
+  for (const affiliation in forces) {
-    grouped[al] = grouped[al].map(createRecord);
+    const container = document.querySelector(`#${affiliation}-record`);
+    const name = startLoc.dataset[`${affiliation}Name`];
+    if (name) {
+      container.querySelector('.name').textContent = name;
+    }
+    forces[affiliation].forEach(r => container.appendChild(r));
   }
 
-  return grouped;
+  addEventListeners(gbUnSelect, gbSelect);
-}
-
-export function clear() {
-  document.querySelectorAll('#attacker-record > div, #defender-record > div').forEach(el => el.remove());
-  document.querySelector('#attacker-record .name').textContent = 'attacker';
-  document.querySelector('#defender-record .name').textContent = 'defender';
 }