import { pan, zoom } from 'svg-pan-zoom';
import Game from './modules/game.js';
const PanZoom = new function () {
const vb = 'viewBox';
let svg;
function storeViewBoxVal() {
localStorage.setItem(vb, svg.getAttribute(vb));
}
function observeViewBoxChanges() {
const observer = new MutationObserver(mutations => {
if (mutations.find(m => m.target == svg && m.attributeName == vb)) {
storeViewBoxVal(svg);
}
});
observer.observe(svg, { attributes: true });
}
function restoreViewBoxVal() {
const storedVbVal = localStorage.getItem(vb);
if (storedVbVal) {
svg.setAttributeNS(null, vb, storedVbVal);
}
}
function addEventListeners() {
svg.addEventListener('wheel', e => {
e.preventDefault();
svg.setAttributeNS(null, vb, zoom(svg, e));
}, { passive: false });
svg.addEventListener('pointerdown', e => {
e.preventDefault();
pan(svg, e);
}, { passive: false });
}
this.start = function (el) {
svg = el;
restoreViewBoxVal();
addEventListeners();
observeViewBoxChanges();
};
};
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-troop-number="${data.number}"][data-troop-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();
};
};
window.addEventListener('load', () => {
const svg = document.querySelector('object').contentDocument.querySelector('svg'),
game = new Game(svg);
const svgns = "http://www.w3.org/2000/svg",
recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible');
PanZoom.start(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.dataset.troopAllegiance, el.dataset.troopNumber);
}
})
);
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-troop-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.troopNumber > el2.dataset.troopNumber)
.forEach(el => el.classList.remove('movement-ended'));
game.endTurn(allegiance);
game.select(records.at(0).dataset.troopAllegiance, records.at(0).dataset.troopNumber);
})
);
document.querySelectorAll('.set-firing-arc').forEach(el =>
el.addEventListener('click', () => game.setFiringArc(el.dataset.size))
);
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();
}
});
});