WIP: mock selenium response

public/assets/images/scenario-side_show.svg

@@ -1,6 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-15.639999389648438 -109 2320.879638671875 3280" xmlns="http://www.w3.org/2000/svg">
-  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="http://localhost:8080/assets/css/map.css" type="text/css" />
+  <!-- <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="http://localhost:8080/assets/css/map.css" type="text/css" /> -->
+  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
   <style>
     g[data-edge="north"] { --i: -2; }
     g[data-edge="south"] { --i: 52; }
@@ -101,8 +102,10 @@
   <rect id="background"/>
 
   <g class="gameboard">
-    <use href="http://localhost:8080/assets/images/mapsheets.svg#map2"/>
-    <use href="http://localhost:8080/assets/images/mapsheets.svg#map3" style="transform: translate(0, 390.25px);"/>
+    <!-- <use href="http://localhost:8080/assets/images/mapsheets.svg#map2"/>
+    <use href="http://localhost:8080/assets/images/mapsheets.svg#map3" style="transform: translate(0, 390.25px);"/> -->
+    <use data-href="mapsheets.svg#map2"/>
+    <use data-href="mapsheets.svg#map3" style="transform: translate(0, 390.25px);"/>
 
     <rect id="dots" fill="url(#asterisk)"/>
 
@@ -114,7 +117,10 @@
     <g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
       <g data-edge="north">
         <g data-x="13">
-          <g class="counter" data-allegiance="attacker" data-number="1"><use href="#counter-base"/><use class="troop-number" href="#t-1"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
+          <g class="counter" data-allegiance="attacker" data-number="1">
+            <use href="#counter-base"/><use class="troop-number" href="#t-1"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/>
+            <!-- <use data-href="counters.svg#rifle"/><use class="troop-number" href="#t-1"/><use class="squad-number" href="#t-1"/> -->
+          </g>
         </g>
         <g data-x="14">
           <g class="counter" data-allegiance="attacker" data-number="2"><use href="#counter-base"/><use class="troop-number" href="#t-2"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
@@ -1948,5 +1954,20 @@
       </g>
     </g>
   </g>
-  <script href="http://localhost:8080/map.js"/>
+  <script>//<![CDATA[
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
+    function getRandomIntInclusive(min, max) {
+      const minCeiled = Math.ceil(min);
+      const maxFloored = Math.floor(max);
+      return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // The maximum is inclusive and the minimum is inclusive
+    }
+
+    const cacheBuster = Array(20).fill(null).map(() => getRandomIntInclusive(0, 9)).join('');
+
+    document.querySelectorAll('[data-href]').forEach(el => {
+      el.setAttributeNS(null, 'href', el.dataset.href.split('#').join(`?v=${cacheBuster}#`));
+    });
+  //]]></script>
+  <!-- <script href="http://localhost:8080/map.js"/> -->
+  <script href="../../map.js"/>
 </svg>