Clone template instead of modifying original

src/index.js

@@ -35,6 +35,12 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
     6: 'six'
   },
 
+  attrNames = {
+    'primary-weapon': 'weapon',
+    'troop-number': 'number',
+    'squad-number': 'squad'
+  },
+
   toggleContentVis = (function () {
     document.querySelector('#content').style.minWidth = this.checked ? '' : 0;
 
@@ -55,19 +61,12 @@ async function buildScenario(req) {
   gameboard.stop();
   recordSheet.stop();
 
-  // const svg = scenarioTemplate.querySelector('svg').cloneNode(true);
+  const map = document.querySelector('object').contentDocument.querySelector('svg');
+  const template = scenarioTemplate.querySelector('svg').cloneNode(true);
+  map.replaceWith(template);
 
-  const svg = document.querySelector('object').contentDocument.querySelector('svg');
-
-  await build(svg, req);
+  await build(template, req);
   const scenario = await req;
-
-  const attrNames = {
-    'primary-weapon': 'weapon',
-    'troop-number': 'number',
-    'squad-number': 'squad'
-  };
-
   const scenarioUnits = scenario.querySelectorAll('svg g.counter');
 
   scenarioUnits.forEach(cntr => {
@@ -81,8 +80,8 @@ async function buildScenario(req) {
   mapResourceEl.style.opacity = 1;
   mapPlaceholder.style.opacity = 0;
 
-  panzoom.start(svg);
-  gameboard.start(svg);
+  panzoom.start(template);
+  gameboard.start(template);
 
   // recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
   recordSheet.start(null, scenarioUnits);