btroops/src/index.js

import * as panzoom from './modules/pan-zoom.js';
import * as gameboard from './modules/gameboard.js';
import * as recordSheet from './modules/record_sheet.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.addEventListener('load', function (e) {
  mapPlaceholder.remove();
  this.style.opacity = 1;

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

  window.game = gameboard;
});

gameboard.setDistanceCallback((count = '-') => {
  distanceOutput.querySelector('#hex-count').textContent = count;
  distanceOutput.style.display = count === '-' ? 'none' : 'block';
});

gameboard.setProneFlagCallback(checked => proneToggle.checked = checked);
gameboard.setSelectCallback(data => recordSheet.select(data));

document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', () => {
  recordSheet.endMove();
  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
      .sort((el1, el2) => el1.dataset.number > el2.dataset.number)
      .forEach(el => el.classList.remove('movement-ended'));

    gameboard.endTurn(allegiance);
    gameboard.select(records.at(0));
  })
);

document.querySelectorAll('.set-firing-arc').forEach(el =>
  el.addEventListener('click', gameboard.setFiringArc)
);

document.querySelector('.set-grenade').addEventListener('click', gameboard.setGrenade);

document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el =>
  el.addEventListener('input', gameboard.toggleFiringArcVisibility)
);

document.getElementById('toggle-prone-counter').addEventListener('input', function () {
  const selected = recordSheet.getSelected();
  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'),
  mapDialog = document.getElementById('map-dialog'),
  selectEl = mapDialog.querySelector('select'),
  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', () => {
  confirmBtn.value = selectEl.value;
});

confirmBtn.addEventListener('click', e => {
  e.preventDefault();
  localStorage.removeItem('pan-zoom');
  localStorage.setItem('map', selectEl.value);
  document.querySelector('object').data = `${selectEl.value}.svg`;
  mapDialog.close();
});