Apply styles and map script to manually loaded files

public/assets/css/style.css

@@ -378,6 +378,7 @@ img.logo {
 
 .map-placeholder {
   position: absolute;
+  user-select: none;
 }
 
 input[type="file"] {

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>

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>

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>

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>

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.clear();
-  recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
 }
 
 document.querySelectorAll('.end-turn').forEach(el =>

src/modules/gameboard.js

@@ -270,6 +270,8 @@ export function start(el) {
       }
     });
   });
+
+  console.log('gameboard.js loaded');
 }
 
 export function select(selected) {

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