btroops/src/index.js

import PanZoom from './modules/panzoom.js';
import Game from './modules/game.js';

const RecordSheet = new function () {
  this.unSelect = function () {
    let selected = this.getSelected();

    if (selected) {
      selected.classList.remove('selected');
    }

    document.getElementById('toggle-prone-counter').checked = false;
  };

  this.getSelected = function () {
    return document.querySelector('.soldier-record.selected');
  };

  this.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;
  };

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

window.addEventListener('load', () => {
  const svg = document.querySelector('object').contentDocument.querySelector('svg'),
    game = new Game(svg);

  window.game = game;

  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 => {
    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;
  };

  const proneToggle = document.getElementById('toggle-prone-counter');

  game.proneFlagCallback = checked => proneToggle.checked = checked;
  game.selectCallback = 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());
  //   });
  // });

  document.querySelectorAll('.soldier-record').forEach(el =>
    el.addEventListener('click', e => {
      if (el.classList.contains('selected')) {
        el.classList.remove('selected');
        game.unSelect();
        RecordSheet.unSelect();
      } else {
        game.select(el);
      }
    })
  );

  document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => {
    RecordSheet.endMove();
    game.endMove();
  }));

  document.querySelectorAll('.end-turn').forEach(el =>
    el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => {
      let dataSelector = `[data-allegiance="${allegiance}"]`,
        records = Array.from(document.querySelectorAll(`.soldier-record${dataSelector}`)),
        turnCounter = document.getElementById('turn-count'),
        { textContent: 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'));

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

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

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

    if (selected) {
      game.toggleProne();
    }
  });
});