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';
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'),
  contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
  // fileName = localStorage.getItem('map') || (env === 'test' ? 'test_map' : 'map1'),
  fileName = localStorage.getItem('map') || 'map1',
  map = `assets/images/${fileName}.svg`,
  fileInputEl = document.querySelector('input[type="file"]'),

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

  mapResourceObserver = new MutationObserver(function () {
    const current = document.querySelector('object');
    const resource = current.getAttribute('data');
    const next = document.createElement('object');
    next.setAttribute('type', 'image/svg+xml');
    next.style.opacity = 0;
    next.addEventListener('load', load);
    mapPlaceholder.after(next);
    mapPlaceholder.style.opacity = 1;
    next.data = resource;
    this.disconnect();
    current.remove();
    this.observe(next, { attributeFilter: ['data'] });
  });

  let mapResourceEl = document.querySelector('object');

function updateTurnCounter() {
  const turnCounter = document.getElementById('turn-count');

  if (turnCounter.dataset.update === '1') {
    turnCounter.children.namedItem('count').textContent++;
    turnCounter.dataset.update = '0';
  } else {
    turnCounter.dataset.update = '1';
  }
}

function enableEndTurnButton(allegiance) {
  document
    .querySelector(`button.end-turn:not([data-allegiance="${allegiance}"])`)
    .removeAttribute('disabled');
}

function clearMoveEndedIndicators(records) {
  records.forEach(el => el.classList.remove('movement-ended'));
}

function load() {
  const svg = this.contentDocument.querySelector('svg'),
    startLocs = svg.querySelector('.start-locations')
    // , scriptEl = this.contentDocument.querySelector('script')
    ;

  // const linkEl = document.createElement('link');
  // linkEl.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
  // linkEl.setAttribute('rel', 'stylesheet');
  // linkEl.setAttribute('href', 'http://localhost:8080/assets/css/map.css');
  // linkEl.setAttribute('type', 'text/css');

  // linkEl.onload = function (e) {
  //   console.log('map.css loaded');

  //   if (scriptEl) {
  //     scriptEl.onload = function () {
  //       console.log('map.js loaded');

  //     };
  //     scriptEl.setAttribute('href', 'http://localhost:8080/map.js');
  //   }
  // };

  // svg.prepend(linkEl);

  this.style.opacity = 1;
  mapPlaceholder.style.opacity = 0;
  URL.revokeObjectURL(this.data);

  panzoom.start(svg);
  gameboard.start(svg);
  recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
}

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

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

contentVisToggleEl.addEventListener('input', toggleContentVis);

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.querySelector('#fullscreen').addEventListener('click', e => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
});

contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
toggleContentVis();

mapSelectDialog
  .init()
  .selectCurrentOptionOnPageLoad()
  .showOnClick()
  .updateValueOnSelection()
  .changeMapOnConfirm();

mapResourceEl.addEventListener('load', load);
mapResourceEl.data = map;
mapResourceObserver.observe(mapResourceEl, { attributeFilter: ['data'] });
mapResourceEl = null;

document.querySelector('#download-save').addEventListener('click', e => {
  const data = document.querySelector('object').contentDocument.documentElement.outerHTML;
  const element = document.createElement('a');

  element.setAttribute('download', 'save.svg');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data));
  // element.style.display = 'none';

  // document.body.appendChild(element);
  element.click();
  // document.body.removeChild(element);
});

document.querySelector('#upload-save').addEventListener('click', () => {
  fileInputEl.click();
});

document.querySelector('input[type="file"]').addEventListener('change', e => {
  const [file] =  fileInputEl.files;
  document.querySelector('object').data = URL.createObjectURL(file);
});