3 files changed, 43 insertions, 19 deletions
diff --git a/src/import_mapsheets.js b/src/import_mapsheets.js
new file mode 100644
index 0000000..2e1b0fc
--- /dev/null
+++ b/src/import_mapsheets.js
@@ -0,0 +1,8 @@
+import mapsheets from './assets/images/mapsheets.svg';
+
+const useEls = document.querySelectorAll('svg use[data-href*="mapsheets.svg"');
+
+useEls.forEach(el => {
+  const href = el.dataset.href.replace('mapsheets.svg', mapsheets.split('/').pop());
+  el.setAttributeNS(null, 'href', href);
+});
diff --git a/src/index.js b/src/index.js
index 8b24625..9ed2d90 100644
--- a/src/index.js
+++ b/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);
+  // });
+
+  // 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);
+  // svg.prepend(linkEl);
 
   this.style.opacity = 1;
   mapPlaceholder.style.opacity = 0;
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 185a96c..61cea98 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -1,5 +1,7 @@
 import { Observable } from "./observable";
 // import counters from '../../public/assets/images/counters.svg';
+// console.log('counters', counters);
+
 // import svg from '../../public/assets/images/counters.svg';
 
 // const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
@@ -40,7 +42,9 @@ function createIcon(number) {
   icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12');
   icon.setAttribute('xmlns', svgns);
 
-  use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#counter-base`);
+  // use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#counter-base`);
+  use.setAttributeNS(null, 'href', `assets/images/counters.svg#counter-base`);
+  // use.setAttributeNS(null, 'href', `${counters}#counter-base`);
 
   text.textContent = number;
 
@@ -64,8 +68,9 @@ function createWeaponIcon(type) {
   icon.setAttribute('xmlns', svgns);
   icon.classList.add('weapon-icon');
 
-  use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#${type}`);
+  // use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#${type}`);
   // use.setAttributeNS(null, 'href', `${counters}#${type}`);
+  use.setAttributeNS(null, 'href', `assets/images/counters.svg#${type}`);
 
   icon.appendChild(use);
   // icon.appendChild(document.importNode(doc.querySelector(`#${type}`), true));