3 files changed, 31 insertions, 10 deletions
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();