Fix load scenario transition fade out

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() {
+  await 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.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();
-
   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));

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();