1 files changed, 66 insertions, 11 deletions
diff --git a/src/index.js b/src/index.js
index 5c20a8e..d4c74e9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,7 +8,6 @@ globalThis.svgns = "http://www.w3.org/2000/svg";
 const mapPlaceholder = document.querySelector('.map-placeholder'),
   distanceOutput = document.getElementById('status'),
   proneToggle = document.getElementById('toggle-prone-counter'),
-  object = document.querySelector('object'),
   contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
 
   toggleContentVis = (function () {
@@ -90,17 +89,17 @@ document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click'
   gameboard.endMove();
 }));
 
-object.addEventListener('load', function () {
-  mapPlaceholder.remove();
-  this.style.opacity = 1;
+// object.addEventListener('load', function () {
+//   mapPlaceholder.remove();
+//   this.style.opacity = 1;
 
-  const svg = this.contentDocument.querySelector('svg'),
-    startLocs = svg.querySelector('.start-locations');
+//   const svg = this.contentDocument.querySelector('svg'),
+//     startLocs = svg.querySelector('.start-locations');
 
-  panzoom.start(svg);
-  gameboard.start(svg);
-  recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
-});
+//   panzoom.start(svg);
+//   gameboard.start(svg);
+//   recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
+// });
 
 contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
 toggleContentVis();
@@ -112,4 +111,60 @@ mapSelectDialog
   .updateValueOnSelection()
   .changeMapOnConfirm();
 
-object.data = `${localStorage.getItem('map') || 'map1'}.svg`;
+// const xhr = new XMLHttpRequest();
+
+// xhr.onload = () => {
+//   console.log(xhr);
+//   const oldObj = document.querySelector('object');
+//   const object = document.createElement('object');
+//   object.setAttribute('type', 'image/svg+xml');
+//   object.style.opacity = 0;
+//   mapPlaceholder.after(object);
+
+//   object.addEventListener('load', function () {
+//     oldObj.remove();
+//     mapPlaceholder.remove();
+//     this.style.opacity = 1;
+
+//     const svg = this.contentDocument.querySelector('svg'),
+//       startLocs = svg.querySelector('.start-locations');
+
+//     panzoom.start(svg);
+//     gameboard.start(svg);
+//     recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
+//   });
+
+//   object.data = fileName;
+// };
+
+// xhr.open('GET', fileName);
+// xhr.responseType = 'document';
+// xhr.send();
+
+const fileName = `${localStorage.getItem('map') || 'map1'}.svg`;
+const oldObj = document.querySelector('object');
+
+console.log('old data', oldObj.getAttribute('data'), 'new data', fileName);
+
+const object = document.createElement('object');
+object.setAttribute('type', 'image/svg+xml');
+object.style.opacity = 0;
+mapPlaceholder.after(object);
+
+object.addEventListener('load', function () {
+  oldObj.remove();
+  mapPlaceholder.remove();
+  this.style.opacity = 1;
+
+  const svg = this.contentDocument.querySelector('svg'),
+    startLocs = svg.querySelector('.start-locations');
+
+  panzoom.start(svg);
+  gameboard.start(svg);
+  recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
+});
+
+if (oldObj.getAttribute('data') !== fileName) {
+  console.log('object data changed');
+  object.data = fileName;
+}