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'),
object = document.querySelector('object'),
fileName = `assets/images/${localStorage.getItem('map') || 'map1'}.svg`,
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),
objectDataObserver = new MutationObserver(function () {
const currentObj = document.querySelector('object');
const currentData = currentObj.getAttribute('data');
const nextObj = document.createElement('object');
nextObj.setAttribute('type', 'image/svg+xml');
nextObj.style.opacity = 0;
nextObj.addEventListener('load', load);
mapPlaceholder.after(nextObj);
mapPlaceholder.style.opacity = 1;
nextObj.data = currentData;
this.disconnect();
currentObj.remove();
this.observe(nextObj, { attributeFilter: ['data'] });
});
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');
this.style.opacity = 1;
mapPlaceholder.style.opacity = 0;
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();
}));
contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
toggleContentVis();
mapSelectDialog
.init()
.selectCurrentOptionOnPageLoad()
.showOnClick()
.updateValueOnSelection()
.changeMapOnConfirm();
object.addEventListener('load', load);
objectDataObserver.observe(object, { attributeFilter: ['data'] });
if (object.getAttribute('data') !== fileName) {
object.data = `assets/images/${fileName}`;
}