Simplify loading scenarios

src/index.js

@@ -24,25 +24,22 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
     });
 
     localStorage.setItem('content-visibility', this.checked);
-  }).bind(contentVisToggleEl),
+  }).bind(contentVisToggleEl);
-
-  mapResourceObserver = new MutationObserver(function () {
-    const current = document.querySelector('object');
-    const resource = current.getAttribute('data');
-    const next = document.createElement('object');
-    next.setAttribute('type', 'image/svg+xml');
-    next.style.opacity = 0;
-    next.addEventListener('load', load);
-    mapPlaceholder.after(next);
-    mapPlaceholder.style.opacity = 1;
-    next.data = resource;
-    this.disconnect();
-    current.remove();
-    this.observe(next, { attributeFilter: ['data'] });
-  });
 
   let mapResourceEl = document.querySelector('object');
 
+function loadScenario(data) {
+  const current = document.querySelector('object');
+  const next = document.createElement('object');
+  next.setAttribute('type', 'image/svg+xml');
+  next.style.opacity = 0;
+  next.addEventListener('load', load);
+  mapPlaceholder.after(next);
+  mapPlaceholder.style.opacity = 1;
+  next.data = data;
+  current.remove();
+}
+
 function updateTurnCounter() {
   const turnCounter = document.getElementById('turn-count');
 
@@ -161,11 +158,10 @@ mapSelectDialog
   .selectCurrentOptionOnPageLoad()
   .showOnClick()
   .updateValueOnSelection()
-  .changeMapOnConfirm();
+  .changeMapOnConfirm(loadScenario);
 
 mapResourceEl.addEventListener('load', load);
 mapResourceEl.data = map;
-mapResourceObserver.observe(mapResourceEl, { attributeFilter: ['data'] });
 mapResourceEl = null;
 
 document.querySelector('#download-save').addEventListener('click', e => {
@@ -187,5 +183,5 @@ document.querySelector('#upload-save').addEventListener('click', () => {
 
 document.querySelector('input[type="file"]').addEventListener('change', e => {
   const [file] =  fileInputEl.files;
-  document.querySelector('object').data = URL.createObjectURL(file);
+  loadScenario(URL.createObjectURL(file))
 });

src/modules/map_select_dialog.js

@@ -29,12 +29,12 @@ export function init() {
       return this;
     },
 
-    changeMapOnConfirm() {
+    changeMapOnConfirm(loadFn) {
       confirmBtn.addEventListener('click', e => {
         e.preventDefault();
         localStorage.removeItem('pan-zoom');
         localStorage.setItem('map', selectEl.value);
-        document.querySelector('object').data = `assets/images/${selectEl.value}.svg`;
+        loadFn(`assets/images/${selectEl.value}.svg`);
         mapDialog.close();
       });
     }