Import mapsheets.svg

src/index.js

@@ -45,9 +45,9 @@ function loadScenario(data) {
   next.setAttribute('type', 'image/svg+xml');
   next.style.opacity = 0;
   next.addEventListener('load', load);
-  mapPlaceholder.after(next);
   mapPlaceholder.style.opacity = 1;
   next.data = data;
+  mapPlaceholder.after(next);
   current.remove();
 }
 
@@ -93,28 +93,39 @@ function roll(die) {
 function load() {
   const svg = this.contentDocument.querySelector('svg'),
     startLocs = svg.querySelector('.start-locations')
-    , scriptEl = this.contentDocument.querySelector('script')
+    // , scriptEl = this.contentDocument.querySelector('script')
     ;
 
-  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');
+  // const useEls = svg.querySelectorAll('use[href*=".svg"]');
 
-    if (scriptEl) {
-      scriptEl.onload = function () {
-        console.log('map.js loaded');
+  // console.log(useEls);
 
-      };
-      scriptEl.setAttribute('href', '../../map.js');
-    }
-  };
+  // [...new Set([...useEls].map(el => el.getAttributeNS(null, 'href').match(/^(.*?)\.svg/g).at(0)))].forEach(f => {
+  //   const name = `../assets/images/${f}`;
+  //   import(name);
+    // console.log(f);
+  // });
 
-  svg.prepend(linkEl);
+  // 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');
+
+  //   if (scriptEl) {
+  //     scriptEl.onload = function () {
+  //       console.log('map.js loaded');
+
+  //     };
+  //     scriptEl.setAttribute('href', '../../map.js');
+  //   }
+  // };
+
+  // svg.prepend(linkEl);
 
   this.style.opacity = 1;
   mapPlaceholder.style.opacity = 0;