ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Organize index.js a bit better

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:29 -07:00
parent ae91897ead
commit 49d77d249d
1 changed files with 30 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/index.js
View File

@ -9,6 +9,8 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
distanceOutput = document.getElementById('status'), distanceOutput = document.getElementById('status'),
proneToggle = document.getElementById('toggle-prone-counter'), proneToggle = document.getElementById('toggle-prone-counter'),
contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'), contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
object = document.querySelector('object'),
fileName = `${localStorage.getItem('map') || 'map1'}.svg`,
toggleContentVis = (function () { toggleContentVis = (function () {
document.querySelectorAll('#content div').forEach(div => { document.querySelectorAll('#content div').forEach(div => {
@ -20,7 +22,22 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
}); });
localStorage.setItem('content-visibility', this.checked); localStorage.setItem('content-visibility', this.checked);
}).bind(contentVisToggleEl); }).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() { function updateTurnCounter() {
const turnCounter = document.getElementById('turn-count'); const turnCounter = document.getElementById('turn-count');
@ -43,6 +60,18 @@ function clearMoveEndedIndicators(records) {
records.forEach(el => el.classList.remove('movement-ended')); 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 => document.querySelectorAll('.end-turn').forEach(el =>
el.addEventListener('click', ({ target: { dataset: { allegiance: opponent }}}) => { el.addEventListener('click', ({ target: { dataset: { allegiance: opponent }}}) => {
const dataSelector = `[data-allegiance="${opponent}"]`, const dataSelector = `[data-allegiance="${opponent}"]`,
@ -99,41 +128,9 @@ mapSelectDialog
.updateValueOnSelection() .updateValueOnSelection()
.changeMapOnConfirm(); .changeMapOnConfirm();
const object = document.querySelector('object');
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);
}
object.addEventListener('load', load); object.addEventListener('load', load);
const 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'] });
});
objectDataObserver.observe(object, { attributeFilter: ['data'] }); objectDataObserver.observe(object, { attributeFilter: ['data'] });
const fileName = `${localStorage.getItem('map') || 'map1'}.svg`;
if (object.getAttribute('data') !== fileName) { if (object.getAttribute('data') !== fileName) {
object.data = fileName; object.data = fileName;
} }