1 files changed, 27 insertions, 58 deletions
diff --git a/src/index.js b/src/index.js
index d4c74e9..bb42084 100644
--- a/src/index.js
+++ b/src/index.js
@@ -89,18 +89,6 @@ document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click'
   gameboard.endMove();
 }));
 
-// object.addEventListener('load', function () {
-//   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);
-// });
-
 contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
 toggleContentVis();
 
@@ -111,60 +99,41 @@ mapSelectDialog
   .updateValueOnSelection()
   .changeMapOnConfirm();
 
-// 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 object = document.querySelector('object');
 
+function load() {
   const svg = this.contentDocument.querySelector('svg'),
     startLocs = svg.querySelector('.start-locations');
 
+  this.style.opacity = 1;
+  mapPlaceholder.style.opacity = 0;
+
   panzoom.start(svg);
   gameboard.start(svg);
   recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
+}
+
+object.addEventListener('load', load);
+
+const objectDataObserver = new MutationObserver(function () {
+  const currentObj = document.querySelector('object');
+  const currentData = currentObj.getAttribute('data');
+  const nextObj = document.createElement('object');
+  nextObj.setAttribute('type', 'image/svg+xml');
+  nextObj.style.opacity = 0;
+  nextObj.addEventListener('load', load);
+  mapPlaceholder.after(nextObj);
+  mapPlaceholder.style.opacity = 1;
+  nextObj.data = currentData;
+  this.disconnect();
+  currentObj.remove();
+  this.observe(nextObj, { attributeFilter: ['data'] });
 });
 
-if (oldObj.getAttribute('data') !== fileName) {
-  console.log('object data changed');
+objectDataObserver.observe(object, { attributeFilter: ['data'] });
+
+const fileName = `${localStorage.getItem('map') || 'map1'}.svg`;
+
+if (object.getAttribute('data') !== fileName) {
   object.data = fileName;
 }