From 9ac571cc244ef02a32679f3fb47ffee5f7e0fd7c Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Thu, 2 May 2024 10:14:35 -0700
Subject: Organize index.js a bit better
---
src/index.js | 63 +++++++++++++++++++++++++++++-------------------------------
1 file changed, 30 insertions(+), 33 deletions(-)
(limited to 'src')
diff --git a/src/index.js b/src/index.js
index bb42084..4c7db30 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,6 +9,8 @@ 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 = `${localStorage.getItem('map') || 'map1'}.svg`,
toggleContentVis = (function () {
document.querySelectorAll('#content div').forEach(div => {
@@ -20,7 +22,22 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
});
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() {
const turnCounter = document.getElementById('turn-count');
@@ -43,6 +60,18 @@ 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}"]`,
@@ -99,41 +128,9 @@ mapSelectDialog
.updateValueOnSelection()
.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);
-
-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'] });
-const fileName = `${localStorage.getItem('map') || 'map1'}.svg`;
-
if (object.getAttribute('data') !== fileName) {
object.data = fileName;
}
--
cgit v1.2.3