| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-11 18:32:13 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-11 18:52:19 -0700 |
| commit | 333931c82cd3c9aee6d09319a273c9735a0fdca8 (patch) | |
| tree | 8f2852575598c1fb3cd0aad5831112bc76ba56ab /src/index.js | |
| parent | f079181a2c274b243c74e66e5c516b789e39c29e (diff) | |
Fix load scenario transition fade out
Diffstat (limited to 'src/index.js')
| -rw-r--r-- | src/index.js | 70 |
1 files changed, 36 insertions, 34 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)); |