Fix toggle content vis

public/assets/images/scenario-side_show.svg

@@ -7,7 +7,7 @@
     <g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
       <g data-edge="north" style="--i: -2">
         <g data-x="13">
-          <g class="counter selected" data-allegiance="attacker" data-number="1">
+          <g class="counter" data-allegiance="attacker" data-number="1">
             <use class="primary-weapon" href="counters.svg#blazer"/>
             <use class="troop-number" href="counters.svg#number-1"/>
             <use class="squad-number" href="counters.svg#number-1"/>

src/index.js

@@ -26,6 +26,8 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
   },
 
   toggleContentVis = (function () {
+    document.querySelector('#content').style.minWidth = this.checked ? '' : 0;
+
     document.querySelectorAll('#content > div').forEach(div => {
       if (this.checked) {
         div.style.display = div.id == 'record-sheet' ? 'flex' : 'block';
@@ -39,52 +41,33 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
 
 let mapResourceEl = document.querySelector('object');
 
-async function requestScenario(url) {
+async function requestResource(url) {
-  return new Promise((res, rej) => {
+  return new Promise((resolve, reject) => {
     const request = new XMLHttpRequest();
     request.open('GET', url, true);
     request.responseType = 'document';
 
     request.onload = function() {
       if (request.status === 200) {
-        res(request.response);
+        resolve(request.response);
       } else {
-        rej(Error('Image didn\'t load successfully; error code:' + request.statusText));
+        reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
       }
     };
+
     request.onerror = function() {
-        rej(Error('There was a network error.'));
+      reject(Error('There was a network error.'));
     };
 
     request.send();
   });
 }
 
-const scenarioRequest = requestScenario(map);
+const scenarioRequest = requestResource(map);
-
-function loadScenario(data) {
-  // const current = document.querySelector('object');
-  // const next = document.createElement('object');
-  // next.setAttribute('type', 'image/svg+xml');
-  // next.style.opacity = 0;
-  // next.addEventListener('load', load);
-  // mapPlaceholder.style.opacity = 1;
-  // next.data = data;
-  // mapPlaceholder.after(next);
-  // current.remove();
-
-  buildScenario(requestScenario(data));
-}
 
 async function buildScenario(req) {
-  console.log('req', req);
-
-  console.log('fresh template', scenarioTemplate.querySelector('svg'));
-
   const svg = scenarioTemplate.querySelector('svg').cloneNode(true);
 
-  // console.log('document', document.querySelector('object').contentDocument);
-
   document.querySelector('object').contentDocument.querySelector('svg').remove();
   document.querySelector('object').contentDocument.append(svg);
 
@@ -93,9 +76,6 @@ async function buildScenario(req) {
 
   const scenario = await req;
   const startLocs = scenario.querySelector('.start-locations');
-
-  console.log(scenario);
-
   const gb = svg.querySelector('.gameboard');
   const grid = svg.querySelector('.grid');
 
@@ -113,7 +93,7 @@ async function buildScenario(req) {
   }, {});
 
   await Promise.all(
-    Object.keys(refs).map(filename => requestScenario(`assets/images/${filename}`))
+    Object.keys(refs).map(filename => requestResource(`assets/images/${filename}`))
   ).then(result => {
     const defs = svg.querySelector('defs');
 
@@ -127,11 +107,17 @@ async function buildScenario(req) {
       });
 
       const refsQuery = [...refs[filename]].join(', ');
-      external.querySelectorAll(refsQuery).forEach(node => defs.append(svg.ownerDocument.importNode(node, true)));
+
+      external.querySelectorAll(refsQuery).forEach(node =>
+        defs.append(svg.ownerDocument.importNode(node, true))
+      );
     });
   });
 
-  scenario.querySelectorAll('use.mapsheet').forEach(el => gb.querySelector('#background').after(svg.ownerDocument.importNode(el, true)));
+  scenario.querySelectorAll('use.mapsheet').forEach(el =>
+    gb.querySelector('#background').after(svg.ownerDocument.importNode(el, true))
+  );
+
   if (startLocs) grid.before(svg.ownerDocument.importNode(startLocs, true));
 
   const scenarioGrid = scenario.querySelector('.grid');
@@ -143,7 +129,6 @@ async function buildScenario(req) {
   async function loadScript() {
     return new Promise((resolve, reject) => {
       const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script');
-      // const scriptEl = svg.ownerDocument.importNode(scenario.querySelector('script'));
 
       scriptEl.onload = () => {
         console.log('map.js loaded');
@@ -168,18 +153,12 @@ async function buildScenario(req) {
 
   await loadScript();
 
-  // this.style.opacity = 1;
+  mapResourceEl.style.opacity = 1;
-  // mapPlaceholder.style.opacity = 0;
+  mapPlaceholder.style.opacity = 0;
 
   panzoom.start(svg);
   gameboard.start(svg);
   recordSheet.start(startLocs, gameboard.getUnits());
-
-  const mapContainer = document.querySelector('#map-container');
-  const mapContainerRect = mapContainer.getBoundingClientRect();
-
-  console.log('mapContainer', mapContainer);
-  console.log('mapContainerRect', mapContainerRect);
 }
 
 function updateTurnCounter() {
@@ -230,88 +209,10 @@ async function load() {
     ;
 
   scenarioTemplate = this.contentDocument.cloneNode(svg);
-  buildScenario(scenarioRequest);
+  await buildScenario(scenarioRequest);
-  // const scenario = await scenarioRequest;
-  // const gb = svg.querySelector('.gameboard');
-  // const grid = svg.querySelector('.grid');
-
-  // const externalResourceEls = Array.from(scenario.querySelectorAll('use[href*=".svg"'));
-
-  // const refs = externalResourceEls.reduce((acc, el) => {
-  //   const href = el.getAttributeNS(null, 'href');
-  //   const [filename] = href.match(/.+\.svg/);
-  //   const fragmentIdentifier = href.split('.svg').pop();
-
-  //   (acc[filename] ??= new Set()).add(fragmentIdentifier);
-  //   el.setAttributeNS(null, 'href', fragmentIdentifier);
-
-  //   return acc;
-  // }, {});
-
-  // await Promise.all(
-  //   Object.keys(refs).map(filename => requestScenario(`assets/images/${filename}`))
-  // ).then(result => {
-  //   const defs = svg.querySelector('defs');
-
-  //   Object.keys(refs).forEach((filename, index) => {
-  //     const external = result[index];
-
-  //     refs[filename].forEach(fragmentIdentifier => {
-  //       external
-  //         .querySelectorAll(`${fragmentIdentifier} use`)
-  //         .forEach(el => refs[filename].add(el.getAttributeNS(null, 'href')));
-  //     });
-
-  //     const refsQuery = [...refs[filename]].join(', ');
-  //     external.querySelectorAll(refsQuery).forEach(node => defs.append(node));
-  //   });
-  // });
-
-  // scenario.querySelectorAll('use.mapsheet').forEach(el => gb.prepend(el));
-  // grid.before(scenario.querySelector('.start-locations'));
-
-  // async function loadScript() {
-  //   return new Promise((resolve, reject) => {
-  //     const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script');
-  //     // const scriptEl = svg.ownerDocument.importNode(scenario.querySelector('script'));
-
-  //     scriptEl.onload = () => {
-  //       console.log('map.js loaded');
-  //       resolve();
-  //     };
-
-  //     scriptEl.onerror = () => {
-  //       reject(Error('Script failed to load.'));
-  //     };
-
-  //     scriptEl.dataset.rows = scenario.querySelector('script').dataset.rows;
-  //     scriptEl.dataset.cols = scenario.querySelector('script').dataset.cols;
-  //     scriptEl.setAttributeNS(null, 'href', '../../map.js');
-  //     svg.append(scriptEl);
-  //   });
-  // }
-
-  // await loadScript();
 
   this.style.opacity = 1;
   mapPlaceholder.style.opacity = 0;
-  // URL.revokeObjectURL(this.data);
-
-  // const linkEl = document.createElement('link');
-  // linkEl.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
-  // linkEl.setAttribute('rel', 'stylesheet');
-  // linkEl.setAttribute('href', '../../assets/css/map.css');
-  // linkEl.setAttribute('type', 'text/css');
-
-  // linkEl.onload = function (e) {
-  //   console.log('map.css loaded');
-  // };
-
-  // svg.prepend(linkEl);
-
-  // panzoom.start(svg);
-  // gameboard.start(svg);
-  // recordSheet.start(startLocs, gameboard.getUnits());
 }
 
 document.querySelectorAll('.end-turn').forEach(el =>
@@ -387,8 +288,6 @@ document.querySelector('input[type="file"]').addEventListener('change', e => {
   };
 
   reader.readAsText(file);
-
-  // loadScenario(URL.createObjectURL(file));
 });
 
 document.querySelector('#roll-dice').addEventListener('click', () => {
@@ -407,13 +306,16 @@ mapSelectDialog
   .selectCurrentOptionOnPageLoad()
   .showOnClick()
   .updateValueOnSelection()
-  .changeMapOnConfirm(loadScenario);
+  .changeMapOnConfirm(data => {
+    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));