8 files changed, 37 insertions, 15 deletions
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 91ef42c..2888841 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -378,6 +378,7 @@ img.logo {
 
 .map-placeholder {
   position: absolute;
+  user-select: none;
 }
 
 input[type="file"] {
diff --git a/public/assets/images/map1.svg b/public/assets/images/map1.svg
index fe2da24..04ca8a9 100644
--- a/public/assets/images/map1.svg
+++ b/public/assets/images/map1.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-18 -150 2320 3360" xmlns="http://www.w3.org/2000/svg">
-  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css"/>
+  <!-- <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="/assets/css/map.css" type="text/css"/> -->
   <style>
     g[data-edge="north"] { --i: -2; }
     g[data-edge="south"] { --i: 52; }
@@ -1935,5 +1935,5 @@
       </g>
     </g>
   </g>
-  <script href="../../map.js"></script>
+  <script></script>
 </svg>
diff --git a/public/assets/images/map2.svg b/public/assets/images/map2.svg
index 64be1d3..04f0a10 100644
--- a/public/assets/images/map2.svg
+++ b/public/assets/images/map2.svg
@@ -91,5 +91,5 @@
     </g>
     <g class="grid"/>
   </g>
-  <script href="../../map.js" data-cols="33" data-rows="77"></script>
+  <script data-cols="33" data-rows="77"></script>
 </svg>
diff --git a/public/assets/images/map3.svg b/public/assets/images/map3.svg
index e2a92a8..171e2c9 100644
--- a/public/assets/images/map3.svg
+++ b/public/assets/images/map3.svg
@@ -88,5 +88,5 @@
     </g>
     <g class="grid"/>
   </g>
-  <script href="../../map.js" data-cols="33" data-rows="25"></script>
+  <script data-cols="33" data-rows="25"></script>
 </svg>
diff --git a/public/assets/images/map4.svg b/public/assets/images/map4.svg
index 8911ca7..d5c3326 100644
--- a/public/assets/images/map4.svg
+++ b/public/assets/images/map4.svg
@@ -86,5 +86,5 @@
     <g class="grid"/>
   </g>
 
-  <script href="../../map.js" data-cols="33" data-rows="50"></script>
+  <script data-cols="33" data-rows="50"></script>
 </svg>
diff --git a/src/index.js b/src/index.js
index 1a7a6c7..3710843 100644
--- a/src/index.js
+++ b/src/index.js
@@ -65,16 +65,35 @@ function clearMoveEndedIndicators(records) {
 }
 
 function load() {
-  URL.revokeObjectURL(this.data);
   const svg = this.contentDocument.querySelector('svg'),
-    startLocs = svg.querySelector('.start-locations');
+    startLocs = svg.querySelector('.start-locations'),
+    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', 'http://localhost:8080/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');
+        gameboard.start(svg);
+        recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
+      };
+      scriptEl.setAttribute('href', 'http://localhost:8080/map.js');
+    }
+  };
+  svg.prepend(linkEl);
 
   this.style.opacity = 1;
   mapPlaceholder.style.opacity = 0;
+  URL.revokeObjectURL(this.data);
 
   panzoom.start(svg);
-  gameboard.start(svg);
-  recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
+  recordSheet.clear();
 }
 
 document.querySelectorAll('.end-turn').forEach(el =>
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index e20949a..abf37b0 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -270,6 +270,8 @@ export function start(el) {
       }
     });
   });
+
+  console.log('gameboard.js loaded');
 }
 
 export function select(selected) {
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 78dbace..4abccc6 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -83,12 +83,6 @@ function createRecords(units) {
   return grouped;
 }
 
-function clear() {
-  document.querySelectorAll('#attacker-record > div, #defender-record > div').forEach(el => el.remove());
-  document.querySelector('#attacker-record .name').textContent = 'attacker';
-  document.querySelector('#defender-record .name').textContent = 'defender';
-}
-
 function addEventListeners(unSelectCounter, selectCounter) {
   document.querySelectorAll('.soldier-record').forEach(el =>
     el.addEventListener('click', () => {
@@ -103,6 +97,12 @@ function addEventListeners(unSelectCounter, selectCounter) {
   );
 }
 
+export function clear() {
+  document.querySelectorAll('#attacker-record > div, #defender-record > div').forEach(el => el.remove());
+  document.querySelector('#attacker-record .name').textContent = 'attacker';
+  document.querySelector('#defender-record .name').textContent = 'defender';
+}
+
 export function unSelect() {
   const selected = getSelected();