import * as panzoom from './modules/panzoom.js';
import * as game from './modules/game.js';
const RecordSheet = {
unSelect: function () {
let selected = this.getSelected();
if (selected) {
selected.classList.remove('selected');
}
document.getElementById('toggle-prone-counter').checked = false;
},
getSelected: function () {
return document.querySelector('.soldier-record.selected');
},
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;
},
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.start(svg);
panzoom.start(svg);
const svgns = "http://www.w3.org/2000/svg",
recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible');
const distanceOutput = document.getElementById('status');
game.setDistanceCallback(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.setProneFlagCallback(checked => proneToggle.checked = checked);
game.setSelectCallback(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();
}
});
});