From 333931c82cd3c9aee6d09319a273c9735a0fdca8 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Tue, 11 Jun 2024 18:32:13 -0700
Subject: Fix load scenario transition fade out
---
src/index.js | 70 +++++++++++++++++++++++++-----------------------
src/modules/gameboard.js | 2 --
2 files changed, 36 insertions(+), 36 deletions(-)
diff --git a/src/index.js b/src/index.js
index 28df43f..b562651 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,6 +15,8 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`,
fileInputEl = document.querySelector('input[type="file"]'),
dice = document.querySelectorAll('.die'),
+ mapResourceEl = document.querySelector('object'),
+ scenarioRequest = requestResource(map),
d6 = {
1: 'one',
@@ -39,7 +41,7 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
localStorage.setItem('content-visibility', this.checked);
}).bind(contentVisToggleEl);
-let mapResourceEl = document.querySelector('object');
+let scenarioTemplate;
async function requestResource(url) {
return new Promise((resolve, reject) => {
@@ -63,7 +65,30 @@ async function requestResource(url) {
});
}
-const scenarioRequest = requestResource(map);
+async function loadScript(scenario, svg) {
+ return new Promise((resolve, reject) => {
+ const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script');
+
+ scriptEl.onload = () => {
+ console.log('map.js loaded');
+ resolve(scriptEl);
+ };
+
+ scriptEl.onerror = () => {
+ reject(Error('Script failed to load.'));
+ };
+
+ const oldScript = scenario.querySelector('script');
+
+ if ('cols' in oldScript.dataset && 'rows' in oldScript.dataset) {
+ scriptEl.dataset.rows = oldScript.dataset.rows;
+ scriptEl.dataset.cols = oldScript.dataset.cols;
+ }
+
+ scriptEl.setAttributeNS(null, 'href', '../../map.js');
+ svg.append(scriptEl);
+ });
+}
async function buildScenario(req) {
const svg = scenarioTemplate.querySelector('svg').cloneNode(true);
@@ -126,33 +151,7 @@ async function buildScenario(req) {
grid.replaceWith(svg.ownerDocument.importNode(scenarioGrid, true));
}
- async function loadScript() {
- return new Promise((resolve, reject) => {
- const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script');
-
- scriptEl.onload = () => {
- console.log('map.js loaded');
- resolve();
- };
-
- scriptEl.onerror = () => {
- reject(Error('Script failed to load.'));
- };
-
- const oldScript = scenario.querySelector('script');
-
- if ('cols' in oldScript.dataset && 'rows' in oldScript.dataset) {
- scriptEl.dataset.rows = oldScript.dataset.rows;
- scriptEl.dataset.cols = oldScript.dataset.cols;
- }
-
- scriptEl.setAttributeNS(null, 'href', '../../map.js');
- svg.append(scriptEl);
- });
- }
-
- await loadScript();
-
+ await loadScript(scenario, svg);
mapResourceEl.style.opacity = 1;
mapPlaceholder.style.opacity = 0;
@@ -200,8 +199,6 @@ function roll(die) {
return numsAsWords[getRandomIntInclusive(0, numsAsWords.length - 1)];
}
-let scenarioTemplate;
-
async function load() {
const svg = this.contentDocument.querySelector('svg'),
startLocs = svg.querySelector('.start-locations')
@@ -307,14 +304,19 @@ mapSelectDialog
.showOnClick()
.updateValueOnSelection()
.changeMapOnConfirm(data => {
+ const scenarioRequest = requestResource(data);
+
+ mapResourceEl.addEventListener(
+ 'transitionend',
+ () => buildScenario(scenarioRequest),
+ { once: true }
+ );
+
mapPlaceholder.style.opacity = 1;
mapResourceEl.style.opacity = 0;
- buildScenario(requestResource(data));
});
mapResourceEl.addEventListener('load', load);
-// mapResourceEl.data = map;
-// mapResourceEl = null;
dice.forEach(el => {
el.classList.add(roll(d6));
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 97538cd..d9919ec 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -205,8 +205,6 @@ export function start(el) {
startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard));
getCells(svg).forEach(cell => {
- if (cell.dataset.x === '0' && cell.parentElement.dataset.y === '0') console.log('cell', cell);
-
cell.addEventListener('click', e => {
const occupant = getCellOccupant(cell);
let toPlace = placing.pop();
--
cgit v1.2.3