17 files changed, 467 insertions, 186 deletions
diff --git a/jest.config.integ.cjs b/jest.config.integ.cjs
index 0b50bae..7a8028a 100644
--- a/jest.config.integ.cjs
+++ b/jest.config.integ.cjs
@@ -4,5 +4,5 @@ module.exports = {
   globalSetup: './test/integration/setup.cjs',
   globalTeardown: './test/integration/teardown.cjs',
   testPathIgnorePatterns: ['/node_modules/', 'test/unit'],
-  testTimeout: 5000
+  testTimeout: 5000,
 };
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
index ed2b7ce..8f45936 100644
--- a/public/assets/css/map.css
+++ b/public/assets/css/map.css
@@ -395,6 +395,7 @@ g[data-y="76"] { --i: 76; }
 
 .floor {
   fill: white;
+  /* fill: inherit; */
 }
 
 .building path {
@@ -416,9 +417,6 @@ g[data-y="76"] { --i: 76; }
 
 .building .windows, .building .door-edges {
   stroke-width: 2.5px;
-}
-
-.building .windows, .building .door-edges {
   stroke: orange;
 }
 
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index f3b1736..cde2c33 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -181,6 +181,11 @@ polygon.firing-arc[data-allegiance="attacker"] {
   fill: blue;
 }
 
+.weapon-icon {
+  stroke: white;
+  stroke-width: 0.5px;
+}
+
 .soldier-record svg {
   width: 20px;
   height: 20px;
diff --git a/public/assets/images/counters-test.svg b/public/assets/images/counters-test.svg
new file mode 100644
index 0000000..b7d5cd9
--- /dev/null
+++ b/public/assets/images/counters-test.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" standalone="no"?>
+<svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <circle id="counter-base" cx="0" cy="0" r="5"/>
+
+    <g id="semi-auto">
+      <line x1="-2" y1="1" x2="2" y2="1"/>
+      <line x1="-2" y1="2" x2="2" y2="2"/>
+    </g>
+
+    <g id="auto">
+      <line x1="-2" y1="0" x2="2" y2="0"/>
+      <line x1="-2" y1="1" x2="2" y2="1"/>
+      <line x1="-2" y1="2" x2="2" y2="2"/>
+    </g>
+  </defs>
+
+  <g id="rifle" class="weapon-symbol">
+
+  </g>
+
+  <g id="smg" class="weapon-symbol">
+  </g>
+
+  <g id="blazer" class="weapon-symbol">
+    <use href="#counter-base"/>
+    <use href="#auto"/>
+    <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
+    <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+  </g>
+</svg>
diff --git a/public/assets/images/counters.svg b/public/assets/images/counters.svg
index aab06a8..2254d3d 100644
--- a/public/assets/images/counters.svg
+++ b/public/assets/images/counters.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <circle id="counter-base" cx="0" cy="0" r="6"/>
+    <circle id="counter-base" style="stroke: none;" cx="0" cy="0" r="6"/>
 
     <g id="semi-auto">
       <line x1="-2" y1="1" x2="2" y2="1"/>
@@ -19,7 +19,7 @@
     <use href="#counter-base"/>
     <use href="#semi-auto"/>
     <line x1="0" y1="-5" x2="0" y2="5"/>
-    <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+    <polyline style="fill: none;" points="-2,-3.5 0,-5 2,-3.5"/>
   </g>
 
   <g id="smg" class="weapon-symbol">
diff --git a/public/assets/images/map4.svg b/public/assets/images/map4.svg
index d5c3326..53a2b71 100644
--- a/public/assets/images/map4.svg
+++ b/public/assets/images/map4.svg
@@ -5,50 +5,46 @@
     g[data-edge="north"] { --i: -2; }
     g[data-edge="south"] { --i: 52; }
 
-    g#hex line {
-      opacity: 1;
+    #background {
+      stroke: #304b75;
+      fill: #bacae3;
     }
 
-    g#hex path {
-      opacity: 1;
+    pattern use {
       stroke: black;
-      stroke-width: 0.25px;
+      stroke-width: 0.3px;
     }
 
-    use[href="#hex"] {
-      opacity: 1;
+    .cw-60-deg {
+      transform: rotate(60deg);
     }
 
-    g#hex line {
-      stroke-width: 0.2px;
-      transform: scale(1.2);
-    }
-
-    g#hex line:nth-child(2) {
-      transform: rotate(60deg) scale(1.2);
-    }
-
-    g#hex line:nth-child(3) {
-      transform: rotate(-60deg) scale(1.2);
+    .ccw-60-deg {
+      transform: rotate(-60deg);
     }
   </style>
   <defs>
-    <g id="hex">
-      <polygon points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
-      <!-- <circle cx="0" cy="0" r="2"/> -->
-      <!-- <line x1="-1" y1="0" x2="1" y2="0" />
-      <line x1="-1" y1="0" x2="1" y2="0" />
-      <line x1="-1" y1="0" x2="1" y2="0" /> -->
-
-      <path d="
-        M -1.2 0 L 1.2 0
-        M -.6 -1 L .6 1
-        M -.6 1 L .6 -1
-      "/>
-    </g>
-
+    <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
     <circle id="counter-base" cx="0" cy="0" r="5"/>
 
+    <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
+
+    <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
+      <use y="-15" href="#ast-line"/>
+      <use y="-15" style="transform-origin: 0 -15px;" class="cw-60-deg" href="#ast-line"/>
+      <use y="-15" style="transform-origin: 0 -15px;" class="ccw-60-deg" href="#ast-line"/>
+      <use y="15" href="#ast-line"/>
+      <use y="15" style="transform-origin: 0 15px;" class="cw-60-deg" href="#ast-line"/>
+      <use y="15" style="transform-origin: 0 15px;" class="ccw-60-deg" href="#ast-line"/>
+
+      <use x="8.66" href="#ast-line"/>
+      <use x="8.66" style="transform-origin: 8.66px 0;" class="cw-60-deg" href="#ast-line"/>
+      <use x="8.66" style="transform-origin: 8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
+      <use x="-8.66" href="#ast-line"/>
+      <use x="-8.66" style="transform-origin: -8.66px 0;" class="cw-60-deg" href="#ast-line"/>
+      <use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
+    </pattern>
+
     <g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
     <g id="t-2" class="troop-counter-template"><use href="#counter-base"/><text>2</text></g>
     <g id="t-3" class="troop-counter-template"><use href="#counter-base"/><text>3</text></g>
@@ -57,28 +53,44 @@
     <g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
     <g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g>
 
+    <g id="semi-auto">
+      <line x1="-2" y1="1" x2="2" y2="1"/>
+      <line x1="-2" y1="2" x2="2" y2="2"/>
+    </g>
+
+    <g id="auto">
+      <line x1="-2" y1="0" x2="2" y2="0"/>
+      <line x1="-2" y1="1" x2="2" y2="1"/>
+      <line x1="-2" y1="2" x2="2" y2="2"/>
+    </g>
+
+    <g id="rifle" class="weapon-symbol">
+      <use href="#semi-auto"/>
+      <line x1="0" y1="-5" x2="0" y2="5"/>
+      <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+    </g>
+
+    <g id="smg" class="weapon-symbol">
+      <use href="#auto"/>
+      <line x1="0" y1="-5" x2="0" y2="4.5"/>
+      <line x1="-2" y1="4.5" x2="2" y2="4.5"/>
+    </g>
+
+    <g id="blazer" class="weapon-symbol">
+      <use href="#auto"/>
+      <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
+      <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+    </g>
+
     <image id="counter-prone" href="counter_prone.jpg" width="10"/>
     <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
   </defs>
 
   <rect id="background"/>
 
-  <!-- <foreignObject width="100%" height="100%"> -->
-    <!--
-      In the context of SVG embedded in an HTML document, the XHTML
-      namespace could be omitted, but it is mandatory in the
-      context of an SVG document
-    -->
-
-    <!-- <div style="background-color: orange" xmlns="http://www.w3.org/1999/xhtml">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis
-      mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum
-      imperdiet eros. Aliquam erat volutpat.
-      <img src="test.svg" width="10" height="10"/>
-    </div>
-  </foreignObject> -->
-
   <g class="gameboard">
+    <rect id="dots" fill="url(#asterisk)"/>
+
     <g id="firing-arcs">
       <g id="shapes"/>
       <g id="lines"/>
@@ -86,5 +98,5 @@
     <g class="grid"/>
   </g>
 
-  <script data-cols="33" data-rows="50"></script>
+  <script data-cols="10" data-rows="10"></script>
 </svg>
diff --git a/public/assets/images/mapsheets.svg b/public/assets/images/mapsheets.svg
index 46a2fe1..44b5c2f 100644
--- a/public/assets/images/mapsheets.svg
+++ b/public/assets/images/mapsheets.svg
@@ -2,34 +2,34 @@
 <svg viewBox="0 0 571 379.5" width="571" height="379.5" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <g id="building1" class="building">
-      <rect class="floor" x="-33.25" y="-62.25" width="66.5" height="124.5"/>
-      <path style="stroke-width: 2;" class="walls" d="
+      <rect class="floor" style="fill: white;" x="-33.25" y="-62.25" width="66.5" height="124.5"/>
+      <path class="walls" style="stroke-width: 2; fill: none; stroke: black; stroke-linecap: square;" d="
         M -33.25 -62.25 V 62.25 H 33.25 V -62.25 Z
         M -6.75 -37.75 V 6.25 H 2.25 V 62.25
         M -33.25 16.25 H -7.75 V 62.25
         M 2.25 39.25 H 33.25
         M 13.75 6.25 V -1.25 H 33.25
       "/>
-      <path style="stroke: white;" class="walls" d="
+      <path class="walls" style="stroke: white; fill: none; stroke-linecap: square;" d="
         M -33.25 -62.25 V 62.25 H 33.25 V -62.25 Z
         M -6.75 -37.75 V 6.25 H 2.25 V 62.25
         M -33.25 16.25 H -7.75 V 62.25
         M 2.25 39.25 H 33.25
         M 13.75 6.25 V -1.25 H 33.25
       "/>
-      <path class="windows" d="
+      <path class="windows" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M -33.25 -45.74 V -33.25
         M -33.25 40.75 V 53.75
         M 11.75 62.25 H 31.25
       "/>
-      <path class="door-edges" d="
+      <path class="door-edges" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M -33.25 -16.25 V -13.75 M -33.25 -5.75 V -3.25
         M -7.75 26.25 V 29.25 M -7.75 36.25 V 39.25
         M 2.25 13.75 V 16.25 M 2.25 24.25 V 26.75
         M 2.25 40.25 V 42.75 M 2.25 50.75 V 53.25
         M -3.25 -62.25 H -0.75 M 11.25 -62.25 H 13.25
       "/>
-      <path class="doors" d="
+      <path class="doors" style="stroke: white; stroke-width: 2.25; stroke-linecap: square;" d="
         M -33.25 -13.75 V -5.75
         M -7.75 29.25 V 36.25
         M 2.25 16.25 V 24.25
@@ -39,8 +39,8 @@
     </g>
 
     <g id="building2" class="building">
-      <polygon class="floor" points="-33.5,-60.5 33.5,-60.5 33.5,-34 52,-3.5 52,30.5 35.5,60.5 -34,60.5 -52,34.5 -52,-3.5 -33.5,-34"/>
-      <path style="stroke-width: 2;" class="walls" d="
+      <polygon class="floor" style="fill: white;" points="-33.5,-60.5 33.5,-60.5 33.5,-34 52,-3.5 52,30.5 35.5,60.5 -34,60.5 -52,34.5 -52,-3.5 -33.5,-34"/>
+      <path class="walls" style="stroke-width: 2; fill: none; stroke: black; stroke-linecap: square;" d="
         M -33.5 -60.5 V -34 L -52 -3 V 31 L -35 60.5 H 34.5
         L 52 31.5 V -3.5 L 34.5 -34 V -60.5 Z
         M -33.5 -34 H 34.5 M 1 -34 V -60.5
@@ -48,7 +48,7 @@
         M -18 5.5 V 60.5
         M 9.5 5.5 L 20 12 M 35.5 21 L 51 30.5
       "/>
-      <path style="stroke: white;" class="walls" d="
+      <path class="walls" style="stroke: white; fill: none; stroke-linecap: square;" d="
         M -33.5 -60.5 V -34 L -52 -3 V 31 L -35 60.5 H 34.5
         L 52 31.5 V -3.5 L 34.5 -34 V -60.5 Z
         M -33.5 -34 H 34.5 M 1 -34 V -60.5
@@ -56,14 +56,14 @@
         M -18 5.5 V 60.5
         M 9.5 5.5 L 20 12 M 35.5 21 L 51 30.5
       "/>
-      <path class="windows" d="
+      <path class="windows" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M -27 -60.5 H -17
         M 42 -21 L 47 -12.2
         M 52 10 V 20.5
         M 38.7 53.5 L 44.1 44.5
         M -37.7 55.8 L -43 46.6
       "/>
-      <path class="door-edges" d="
+      <path class="door-edges" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M 7 -60.5 H 17.5
         M -19 -34 H -9
         M 15.5 -34 H 25.5
@@ -71,7 +71,7 @@
         M -12 5.5 H -1.5
         M -6 60.5 H 10.5
       "/>
-      <path class="doors" d="
+      <path class="doors" style="stroke: white; stroke-width: 2.25; stroke-linecap: square;" d="
         M 9.5 -60.5 H 15
         M -16.5 -34 H -11.5
         M 18 -34 H 23
@@ -82,8 +82,8 @@
     </g>
 
     <g id="building3" class="building">
-      <rect class="floor" x="-32.25" y="-44" width="64.5" height="88"/>
-      <path style="stroke-width: 2;" class="walls" d="
+      <rect class="floor" style="fill: white;" x="-32.25" y="-44" width="64.5" height="88"/>
+      <path class="walls" style="stroke-width: 2; fill: none; stroke: black; stroke-linecap: square;" d="
         M -32.25 -44 h 64.5 v 88 h -64 z
         m 37.5 0 v 18
         m -37.5 0 h 64.5
@@ -91,7 +91,7 @@
         m 0 21 V 44
         m 24.5 -34.5 h 12
       "/>
-      <path style="stroke: white;" class="walls" d="
+      <path class="walls" style="stroke: white; fill: none; stroke-linecap: square;" d="
         M -32.25 -44 h 64.5 v 88 h -64 z
         m 37.5 0 v 18
         m -37.5 0 h 64.5
@@ -99,20 +99,20 @@
         m 0 21 V 44
         m 24.5 -34.5 h 12
       "/>
-      <path class="windows" d="
+      <path class="windows" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M -13.75 -44 h 10.5
         M 32.25 -10 v 10
         M 23 44 h -10.5
         M -32.25 29 v -10.5
         m 0 -21 v -10
       "/>
-      <path class="door-edges" d="
+      <path class="door-edges" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M 12 -44 h 10.5
         m -45 18 h 10.5
         m 24.5 0 h 10.5
         M -22 44 h 10.5
       "/>
-      <path class="doors" d="
+      <path class="doors" style="stroke: white; stroke-width: 2.25; stroke-linecap: square;" d="
         M 15 -44 h 5
         m -40 18 h 5.5
         m 29 0 h 5.5
@@ -121,8 +121,8 @@
     </g>
 
     <g id="building4" class="building">
-      <rect class="floor" x="-35.25" y="-62.25" width="70.5" height="124.5"/>
-      <path style="stroke-width: 2;" class="walls" d="
+      <rect class="floor" style="fill: white;" x="-35.25" y="-62.25" width="70.5" height="124.5"/>
+      <path class="walls" style="stroke-width: 2; fill: none; stroke: black; stroke-linecap: square;" d="
         M -35.25 -62.25 h 70.5 v 124.5 h -70.5 z
         m 35.5 0 v 50 h -35.5
         m 35.5 -14 h 35
@@ -131,7 +131,7 @@
         m 34.5 -22.25 h -34
         m -16 1.5 h -20
       "/>
-      <path style="stroke: white;" class="walls" d="
+      <path class="walls" style="stroke: white; fill: none; stroke-linecap: square;" d="
         M -35.25 -62.25 h 70.5 v 124.5 h -70.5 z
         m 35.5 0 v 50 h -35.5
         m 35.5 -14 h 35
@@ -140,14 +140,14 @@
         m 34.5 -22.25 h -34
         m -16 1.5 h -20
       "/>
-      <path class="windows" d="
+      <path class="windows" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M 35.25 -44 v 10.5
         m 0 51 v 10
         m -14.5 34.75 h -15.5
         m -40.5 -50 v -10
         m 0 -18 v -10
       "/>
-      <path class="door-edges" d="
+      <path class="door-edges" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M -27 -62.25 h 10
         m 20 36 h 10
         m -31 14 h 10
@@ -156,7 +156,7 @@
         m -12.25 40 v 10
         m -31 8.5 h 16
       "/>
-      <path class="doors" d="
+      <path class="doors" style="stroke: white; stroke-width: 2.25; stroke-linecap: square;" d="
         M -24.5 -62.25 h 5
         m 25 36 h 5
         m -26 14 h 5
@@ -168,8 +168,8 @@
     </g>
 
     <g id="building5" class="building">
-      <rect class="floor" x="-75" y="-32.75" width="150" height="65.5"/>
-      <path style="stroke-width: 2;" class="walls" d="
+      <rect class="floor" style="fill: white;" x="-75" y="-32.75" width="150" height="65.5"/>
+      <path class="walls" style="stroke-width: 2; fill: none; stroke: black; stroke-linecap: square;" d="
         M -75 -32.75 h 150 v 65.5 h -150 z
         m 0 13 h 8 m 13 0 h 7
         m 0 -13 v 26.5
@@ -183,7 +183,7 @@
         m 36.5 0 v -13.5
         m 4.5 -19 v -6
       "/>
-      <path style="stroke: white;" class="walls" d="
+      <path class="walls" style="stroke: white; fill: none; stroke-linecap: square;" d="
         M -75 -32.75 h 150 v 65.5 h -150 z
         m 0 13 h 8 m 13 0 h 7
         m 0 -13 v 26.5
@@ -197,7 +197,7 @@
         m 36.5 0 v -13.5
         m 4.5 -19 v -6
       "/>
-      <path class="windows" d="
+      <path class="windows" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M -21 -32.75 h 10
         m 33 0 h 10
         m 6.5 0 h 10
@@ -207,7 +207,7 @@
         M -75 2 v 10
         m 0 7 v 10
       "/>
-      <path class="door-edges" d="
+      <path class="door-edges" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M -75 -17.75 v 9.5
         m 150 -22 v 10
         m -17.5 21 v 10
@@ -215,7 +215,7 @@
         m -38 0 h -10
         m -10.5 0 h -10
       "/>
-      <path class="doors" d="
+      <path class="doors" style="stroke: white; stroke-width: 2.25; stroke-linecap: square;" d="
         M -75 -15.75 v 5.5
         m 150 -18 v 6
         m -17.5 25 v 6
@@ -226,33 +226,33 @@
     </g>
 
     <g id="building6" class="building">
-      <rect class="floor" x="-23" y="-58.75" width="46" height="117.5"/>
-      <path style="stroke-width: 2;" class="walls" d="
+      <rect class="floor" style="fill: white;" x="-23" y="-58.75" width="46" height="117.5"/>
+      <path class="walls" style="stroke-width: 2; fill: none; stroke: black; stroke-linecap: square;" d="
         M -23 -58.75 h 46 v 117.5 h -46 z
         m 19.5 0 v 44 h 26.5
         M -23 26.25 h 46
         m -18.5 0 v -16
       "/>
-      <path style="stroke: white;" class="walls" d="
+      <path class="walls" style="stroke: white; fill: none; stroke-linecap: square;" d="
         M -23 -58.75 h 46 v 117.5 h -46 z
         m 19.5 0 v 44 h 26.5
         M -23 26.25 h 46
         m -18.5 0 v -16
       "/>
-      <path class="windows" d="
+      <path class="windows" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M 3.5 -58.75 h 10
         m 9.5 56 v 10.5
         m 0 20.5 v 10.5
         M -23 -31 v 10.5
         m 0 18 v 10.5
       "/>
-      <path class="door-edges" d="
+      <path class="door-edges" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M -23 -46.5 v 10
         m 23.5 21.75 h 16.5
         m -30.75 41 h 10
         m -10 32.5 h 10
       "/>
-      <path class="doors" d="
+      <path class="doors" style="stroke: white; stroke-width: 2.25; stroke-linecap: square;" d="
         M -23 -44 v 5
         m 26 24.25 h 11.5
         m -26 41 h 5.5
@@ -261,11 +261,11 @@
     </g>
 
     <g id="building7" class="building">
-      <polygon class="floor" points="
-      -113.25,-56.5 -73.25,-56.5 -50.75,-69.5 113.25,-69.5 113.25,43.5 10.75,43.5
-      5.75,32 -80.25,32 -87.25,44.5 -113.25,44.5
+      <polygon class="floor" style="fill: white;" points="
+        -113.25,-56.5 -73.25,-56.5 -50.75,-69.5 113.25,-69.5 113.25,43.5 10.75,43.5
+        5.75,32 -80.25,32 -87.25,44.5 -113.25,44.5
       "/>
-      <path style="stroke-width: 2;" class="walls" d="
+      <path class="walls" style="stroke-width: 2; fill: none; stroke: black; stroke-linecap: square;" d="
         M -113.25 -56.5 h 40 l 22.5 -13 h 164 v 113
         h -102.5 l -5 -11.5 h -86 l -7 12.5 h -26 z
         m 0 38 h 13 m 19.5 1.5 h 46.5 v -52.5
@@ -280,7 +280,7 @@
         m 26.5 17.5 v -19.5
         m -18.5 1.5 v 18
       "/>
-      <path style="stroke: white;" class="walls" d="
+      <path class="walls" style="stroke: white; fill: none; stroke-linecap: square;" d="
         M -113.25 -56.5 h 40 l 22.5 -13 h 164 v 113
         h -102.5 l -5 -11.5 h -86 l -7 12.5 h -26 z
         m 0 38 h 13 m 19.5 1.5 h 46.5 v -52.5
@@ -295,7 +295,7 @@
         m 26.5 17.5 v -19.5
         m -18.5 1.5 v 18
       "/>
-      <path class="windows" d="
+      <path class="windows" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M -94.75 -56.5 h 10.25
         m 19 -4.5 l 9 -5.25
         m 32 -3.25 h 10
@@ -310,7 +310,7 @@
         m -27 -.5 v -10
         m 0 -63.5 v -10
       "/>
-      <path class="door-edges" d="
+      <path class="door-edges" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M 12 -69.5 h 10
         m -3 30.5 h 10
         m 24.25 0 h 10
@@ -323,7 +323,7 @@
         m 25 -45 h 16
         M -113.25 -9.5 v 10
       "/>
-      <path class="doors" d="
+      <path class="doors" style="stroke: white; stroke-width: 2.25; stroke-linecap: square;" d="
         M 14.5 -69.5 h 5
         m 2 30.5 h 5
         m 29.25 0 h 5
@@ -339,12 +339,12 @@
     </g>
 
     <g id="building8" class="building">
-      <polygon class="floor" points="
+      <polygon class="floor" style="fill: white;" points="
         -95.625,-108.625 -47.625,-108.625 -38.625,-93.625 70,-93.625 78.4,-108.625 113,-108.625
         113,-89 89.625,-40 89.625,8.625 122.2,8.625 122.2,94 78.75,94 78.75,59.75 7.75,59.75
         -17.25,108.75 -122.25,108.75 -122.25,9 -95.625,9
       "/>
-      <path style="stroke-width: 2;" class="walls" d="
+      <path class="walls" style="stroke-width: 2; fill: none; stroke: black; stroke-linecap: square;" d="
         M -95.625 -108.625 h 48 l 9 15 h 108.5 l 8.5 -15 h 34.5
         v 19.5 l -23.25 49 v 48.75 h 32.5 v 85.25
         h -43.25 v -34.25 h -71 l -25 49 h -105
@@ -354,7 +354,7 @@
         m -26 31.75 h 60.5 m -60.5 35 h 60.5 m 0 33 v -99.75
         m 69 0 v 50.75 m 0 -19.25 h -42.5 v 68 m 113.5 -40 v -28.75 h 43
       "/>
-      <path style="stroke: white;" class="walls" d="
+      <path class="walls" style="stroke: white; fill: none; stroke-linecap: square;" d="
         M -95.625 -108.625 h 48 l 9 15 h 108.5 l 8.5 -15 h 34.5
         v 19.5 l -23.25 49 v 48.75 h 32.5 v 85.25
         h -43.25 v -34.25 h -71 l -25 49 h -105
@@ -364,17 +364,17 @@
         m -26 31.75 h 60.5 m -60.5 35 h 60.5 m 0 33 v -99.75
         m 69 0 v 50.75 m 0 -19.25 h -42.5 v 68 m 113.5 -40 v -28.75 h 43
       "/>
-      <path class="windows" d="
+      <path class="windows" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M -78.25 -108.625 h 10 m 50 15 h 14 m 39 0 h 10 m 35 -15 h 10
         m 23.1 4.5 v 10 m -23.2 81.5 v 10 m 12 11.2 h 16.5 m 4 19 v 10 m 0 24 v 10
         m -21.25 22.25 h -17 m -19.5 -34.25 h -14.5 m -51 17.5 l -4.5 9
         m -116.5 3 v -10 m 0 -24 v -10 m 0 -23 v -10 m 26.5 -14.5 v -10 m 0 -35 v -10 m 0 -20 v -10
       "/>
-      <path class="door-edges" d="
+      <path class="door-edges" style="stroke-width: 2.5px; stroke: orange; stroke-linecap: square;" d="
         M 89.6 -27.5 v 10 m 6.75 57 h 10 m -57.75 -30.75 h -16.5 m -24.25 36.25 v 10
         m -42.5 20.75 v 10 m -26.5 1.75 v -10 m -24 -2 h -10 m 0 -35 h 10 m 100 -70 h 15.5
       "/>
-      <path class="doors" d="
+      <path class="doors" style="stroke: white; stroke-width: 2.25; stroke-linecap: square;" d="
         M 89.6 -25 v 5 m 9 59.5 h 5.5 m -57.75 -30.75 h -12 m -26.5 38.75 v 5.25
         m -42.5 25.5 v 5 m -26.5 1.75 v -5 m -26 -4.5 h -6 m .25 -35 h 5.5 m 104.5 -70 h 11
       "/>
@@ -396,16 +396,16 @@
         <circle r="6.5" fill="white" />
         <circle r="2.5" fill="black" />
       </mask>
-      <circle class="branches" r="6.5" mask="url(#trunk-outline)" />
-      <circle class="trunk" r="2" />
+      <circle class="branches" style="fill: rgb(141, 202, 141); stroke: green; mask: url(#trunk-outline)" r="6.5" mask="url(#trunk-outline)" />
+      <circle class="trunk" style="fill: brown;" r="2" />
     </g>
 
-    <path id="bush" d="m -4.8419646,1.6815712 c -0.2224,-0.58797 0.0373,-1.22438 -0.11465,-1.82718 -0.13335,-0.57348 -0.0486,-1.19322 0.31662,-1.6677 0.37485,-0.58981 0.9292504,-1.02199 1.5203804,-1.37775 0.37791,-0.29058 0.8322,-0.69438 1.3447,-0.48093 0.52883,0.22124 1.11777002,0.36526 1.69168002,0.27538 0.45164,-0.13122 0.78493,-0.50193 1.10890998,-0.82213 0.23823,-0.4706 0.79876,-0.76529 1.26021,-0.37753 0.75174,0.33698 1.53457,0.94104 1.60186,1.82553 0.009,0.47845 0.33305,0.83858 0.6865,1.11902 0.3949,0.43049 0.5194497,1.08616 0.39622,1.64816 -0.12486,0.51765 -0.59592,0.79391 -1.00538,1.0662 -0.3993,0.35161 -0.92629,0.72761 -0.88679,1.32791 0.0351,0.43819 -0.044,0.93411 -0.4491,1.18369 -0.75886,0.59794 -1.65352998,1.04869 -2.62829997769,1.12983 C -0.59642418,4.8046512 -1.2461242,4.8453312 -1.7811342,4.5051412 c -0.38949,-0.19045 -0.66499,-0.546 -0.75306,-0.96928 -0.19955,-0.51044 -0.67924,-0.93234 -1.24126,-0.95844 -0.4601204,-0.10269 -0.8649404,-0.47575 -1.0665104,-0.89585 z"/>
+    <path id="bush" style="  fill: rgb(141, 202, 141); stroke: green; stroke-width: 0.5px; transform: scale(0.9);" d="m -4.8419646,1.6815712 c -0.2224,-0.58797 0.0373,-1.22438 -0.11465,-1.82718 -0.13335,-0.57348 -0.0486,-1.19322 0.31662,-1.6677 0.37485,-0.58981 0.9292504,-1.02199 1.5203804,-1.37775 0.37791,-0.29058 0.8322,-0.69438 1.3447,-0.48093 0.52883,0.22124 1.11777002,0.36526 1.69168002,0.27538 0.45164,-0.13122 0.78493,-0.50193 1.10890998,-0.82213 0.23823,-0.4706 0.79876,-0.76529 1.26021,-0.37753 0.75174,0.33698 1.53457,0.94104 1.60186,1.82553 0.009,0.47845 0.33305,0.83858 0.6865,1.11902 0.3949,0.43049 0.5194497,1.08616 0.39622,1.64816 -0.12486,0.51765 -0.59592,0.79391 -1.00538,1.0662 -0.3993,0.35161 -0.92629,0.72761 -0.88679,1.32791 0.0351,0.43819 -0.044,0.93411 -0.4491,1.18369 -0.75886,0.59794 -1.65352998,1.04869 -2.62829997769,1.12983 C -0.59642418,4.8046512 -1.2461242,4.8453312 -1.7811342,4.5051412 c -0.38949,-0.19045 -0.66499,-0.546 -0.75306,-0.96928 -0.19955,-0.51044 -0.67924,-0.93234 -1.24126,-0.95844 -0.4601204,-0.10269 -0.8649404,-0.47575 -1.0665104,-0.89585 z"/>
   </defs>
 
   <g id="map1">
     <g id="terrain" style="transform: translate(0, -390px)">
-      <rect class="floor" x="225.25" y="501.25" width="105.5" height="136"/>
+      <rect class="floor" style="fill: white;" x="225.25" y="501.25" width="105.5" height="136"/>
       <use x="251" y="524" href="#tree"/>
       <use x="237.75" y="531.25" href="#tree"/>
       <use x="268.5" y="523.75" href="#tree"/>
@@ -453,7 +453,7 @@
     </g>
     <g class="building4" style="transform: translate(100.5px, 83px)">
       <use href="#building4"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(-21.5px, -39px)" href="#bed"/>
         <use style="transform: translate(22px, -51px)" href="#bed"/>
         <use style="transform: translate(21.25px, 33px) rotate(-90deg)" href="#desk"/>
@@ -471,7 +471,7 @@
     </g>
     <g class="building2" style="transform: translate(92px, 281px)">
       <use href="#building2"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(-28.25px, -19.75px) rotate(90deg)" href="#couch"/>
         <use style="transform: translate(-11.25px, 32.75px)" href="#couch"/>
 
@@ -491,7 +491,7 @@
     </g>
     <g class="building3" style="transform: translate(441.5px, 100.5px)">
       <use style="transform: rotate(180deg)" href="#building3"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(-1.75px, -26.5px)" href="#couch"/>
         <use style="transform: translate(-8px, 15.5px)" href="#couch"/>
         <use style="transform: translate(20.5px, 36.75px)" href="#cabinet"/>
@@ -513,7 +513,7 @@
     </g>
     <g class="building6" style="transform: translate(440.75px, 288.5px)">
       <use style="transform: rotate(180deg)" href="#building6"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(-8px, 40px)" href="#bed"/>
         <use style="transform: translate(-12px, -42px) rotate(90deg)" href="#couch"/>
         <use style="transform: translate(10px, 40.25px) rotate(180deg)" href="#desk"/>
@@ -528,7 +528,7 @@
   <g id="map2">
     <g class="building1" style="transform: translate(220px, 280px)">
       <use href="#building1"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(-22.5px, -49px) rotate(90deg)" href="#couch"/>
         <use style="transform: translate(-22.5px, 37px)" href="#bed"/>
         <use style="transform: translate(22.5px, 50.5px)" href="#bed"/>
@@ -540,11 +540,11 @@
         <use style="transform: translate(27px, 26px)" href="#cabinet"/>
         <use style="transform: translate(-26.75px, 58px) rotate(90deg)" href="#cabinet"/>
       </g>
-      <text class="elevation" x="14" y="59">1</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="14" y="59">1</text>
     </g>
     <g class="building2" style="transform: translate(108px, 282px)">
       <use href="#building2"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <rect class="couch" x="-46" y="11" width="8.5" height="16"/>
         <rect class="couch" x="-15.5" y="36" width="16" height="8.5"/>
         <rect class="coffee-table" x="3.5" y="-54.5" width="5" height="9.5"/>
@@ -558,11 +558,11 @@
         <use style="transform: translate(-30px, -21.5px)" href="#desk"/>
         <use style="transform: translate(-25px, -49px)" href="#desk"/>
       </g>
-      <text class="elevation" x="32" y="58">1</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="32" y="58">1</text>
     </g>
     <g class="building3" style="transform: translate(485.5px, 264.5px)">
       <use style="transform: rotate(180deg)" href="#building3"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(-2px, -28.5px)" href="#couch"/>
         <use style="transform: translate(-18px, 12.5px) rotate(90deg)" href="#couch"/>
         <use style="transform: translate(17.75px, 35.25px)" href="#cabinet"/>
@@ -572,11 +572,11 @@
         <use style="transform: translate(-24.5px, -18px) rotate(90deg)" href="#cabinet"/>
         <use style="transform: translate(17.5px, -17.5px) rotate(-90deg)" href="#desk"/>
       </g>
-      <text class="elevation" x="28" y="41">1</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="28" y="41">1</text>
     </g>
     <g class="building4" style="transform: translate(377.25px, 278.75px)">
       <use href="#building4"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(-13.5px, -39px)" href="#bed"/>
         <use style="transform: translate(12px, -51px)" href="#bed"/>
         <use style="transform: translate(23.5px, 48px) rotate(180deg)" href="#desk"/>
@@ -590,11 +590,11 @@
         <use style="transform: translate(7.5px, 29px) rotate(90deg)" href="#cabinet"/>
         <use style="transform: translate(-30.5px, 48.5px)" href="#cabinet"/>
       </g>
-      <text class="elevation" x="30" y="60">1</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="30" y="60">1</text>
     </g>
     <g class="building5" style="transform: translate(103px, 84.75px)">
       <use href="#building5"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(-36px, -17.25px) rotate(90deg)" href="#bed"/>
         <use style="transform: translate(23px, -17.25px) rotate(90deg)" href="#bed"/>
         <use style="transform: translate(-40.25px, -.5px) rotate(90deg)" href="#couch"/>
@@ -608,11 +608,11 @@
         <use style="transform: translate(49.75px, 13.75px) rotate(90deg)" href="#cabinet"/>
         <use style="transform: translate(65px, -5.5px)" href="#stairs"/>
       </g>
-      <text class="elevation" x="71" y="29">3</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="71" y="29">3</text>
     </g>
     <g class="building6" style="transform: translate(224px, 85.75px)">
       <use href="#building6"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(9.5px, -40.5px)" href="#bed"/>
         <use style="transform: translate(-8px, 11.5px) rotate(90deg)" href="#couch"/>
         <use style="transform: translate(8.75px, 48.75px) rotate(180deg)" href="#desk"/>
@@ -620,11 +620,11 @@
         <use style="transform: translate(12px, 12px) rotate(90deg)" href="#cabinet"/>
         <use style="transform: translate(-15px, 42.5px) rotate(90deg)" href="#cabinet"/>
       </g>
-      <text class="elevation" x="16" y="56">1</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="16" y="56">1</text>
     </g>
     <g class="building7" style="transform: translate(427.75px, 110px)">
       <use href="#building7"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(-99px, -46.5px)" href="#desk"/>
         <use style="transform: translate(-106px, 22px)" href="#desk"/>
         <use style="transform: translate(-46px, -58.75px) rotate(-90deg)" href="#desk"/>
@@ -660,14 +660,14 @@
           m 0 3.3 h 10.5 v 3 h -10.5 z
         "/>
       </g>
-      <text class="elevation" x="108" y="40">3</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="108" y="40">3</text>
     </g>
   </g>
 
   <g id="map3">
     <g class="building1" style="transform: translate(359px, 98.5px)">
       <use href="#building1"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <rect class="couch" x="-28.75" y="-51.75" width="16" height="8.5"/>
         <rect class="coffee-table" x="12.75" y="-48.75" width="9.5" height="5"/>
         <rect class="coffee-table" x="22.75" y="-34.75" width="9.5" height="5"/>
@@ -679,11 +679,11 @@
         <rect class="bed" x="-19.75" y="42.25" width="10" height="18"/>
         <rect class="bed" x="17.25" y="41.25" width="10" height="18"/>
       </g>
-      <text class="elevation" x="9" y="59">1</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="9" y="59">1</text>
     </g>
     <g class="building2" style="transform: translate(185px, 77.5px)">
       <use style="transform: rotate(180deg)" href="#building2"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(-39px, -2.75px)" href="#couch"/>
         <use style="transform: translate(5.25px, -41px) rotate(90deg)" href="#couch"/>
 
@@ -709,11 +709,11 @@
           m 0 2.75 h 14 v 2.3 h -14 z
         "/>
       </g>
-      <text class="elevation" x="14" y="57">3</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="14" y="57">3</text>
     </g>
     <g class="building3" style="transform: translate(51.25px, 65.75px)">
       <use href="#building3"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(2.25px, 23px)" href="#couch"/>
         <use style="transform: translate(6.5px, -14px) rotate(90deg)" href="#couch"/>
         <use style="transform: translate(-18.5px, -37px)" href="#cabinet"/>
@@ -722,11 +722,11 @@
         <use style="transform: translate(26px, 29.5px) rotate(90deg)" href="#cabinet"/>
         <use style="transform: translate(-13.75px, 16px) rotate(90deg)" href="#desk"/>
       </g>
-      <text class="elevation" x="26" y="41">1</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="26" y="41">1</text>
     </g>
     <g class="building4" style="transform: translate(499px, 96px)">
       <use style="transform: rotate(180deg)" href="#building4"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(13.5px, 42px)" href="#bed"/>
         <use style="transform: translate(-11.5px, 51px)" href="#bed"/>
         <use style="transform: translate(-23px, -51px)" href="#desk"/>
@@ -740,11 +740,11 @@
         <use style="transform: translate(28.75px, 31.75px) rotate(90deg)" href="#cabinet"/>
         <use style="transform: translate(-28px, 48.25px) rotate(90deg)" href="#cabinet"/>
       </g>
-      <text class="elevation" x="24" y="59">1</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="24" y="59">1</text>
     </g>
     <g class="building5" style="transform: translate(103px, 294.5px)">
       <use href="#building5"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(-37px, -17.25px) rotate(90deg)" href="#bed"/>
         <use style="transform: translate(22px, -17.25px) rotate(90deg)" href="#bed"/>
         <use style="transform: translate(-41.25px, -.5px) rotate(90deg)" href="#couch"/>
@@ -758,11 +758,11 @@
         <use style="transform: translate(48.5px, 14px) rotate(90deg)" href="#cabinet"/>
         <use style="transform: translate(65px, -5.5px)" href="#stairs"/>
       </g>
-      <text class="elevation" x="70" y="30">2</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="70" y="30">2</text>
     </g>
     <g class="building6" style="transform: translate(224.5px, 275px)">
       <use style="transform: rotate(180deg)" href="#building6"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(-9px, 39px)" href="#bed"/>
         <use style="transform: translate(.5px, 1px) rotate(90deg)" href="#couch"/>
         <use style="transform: translate(14px, 24.75px)" href="#couch"/>
@@ -772,11 +772,11 @@
         <use style="transform: translate(-11px, -13.5px) rotate(90deg)" href="#cabinet"/>
         <use style="transform: translate(8px, 42.5px)" href="#cabinet"/>
       </g>
-      <text class="elevation" x="18" y="55">1</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="18" y="55">1</text>
     </g>
     <g class="building7" style="transform: translate(419px, 305.75px)">
       <use href="#building7"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(-99px, -46.75px)" href="#desk"/>
         <use style="transform: translate(-106px, 21.25px)" href="#desk"/>
         <use style="transform: translate(-46.5px, -57.25px) rotate(-90deg)" href="#desk"/>
@@ -812,14 +812,14 @@
           m 0 3.3 h 10.5 v 3 h -10.5 z
         "/>
       </g>
-      <text class="elevation" x="108" y="40">2</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="108" y="40">2</text>
     </g>
   </g>
 
   <g id="map4">
     <g class="building8" style="transform: translate(263.125px, 188.625px)">
       <use href="#building8"/>
-      <g class="furniture">
+      <g class="furniture" style="fill: violet;">
         <use style="transform: translate(-82px, -84px)" href="#couch"/>
         <use style="transform: translate(6px, -83.5px)" href="#couch"/>
         <use style="transform: translate(23px, -84px)" href="#couch"/>
@@ -859,7 +859,7 @@
         <use style="transform: translate(31px, 51px) rotate(90deg)" href="#cabinet"/>
         <use style="transform: translate(87.5px, 58px)" href="#cabinet"/>
       </g>
-      <text class="elevation" x="115" y="90">2</text>
+      <text class="elevation" style="font-family: sans-serif; font-weight: bold; font-size: 6pt; text-anchor: middle; user-select: none; pointer-events: none;" x="115" y="90">2</text>
     </g>
   </g>
 </svg>
diff --git a/public/assets/images/scenario-dragon_hunting.svg b/public/assets/images/scenario-dragon_hunting.svg
index 27b0bdf..cb33581 100644
--- a/public/assets/images/scenario-dragon_hunting.svg
+++ b/public/assets/images/scenario-dragon_hunting.svg
@@ -60,9 +60,9 @@
   <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#map1" style="transform: translate(0, 390.25px);"/>
-    <use href="http://localhost:8080/assets/images/mapsheets.svg#map3" style="transform: translate(0, 780.5px);"/>
+    <use data-href="http://localhost:8080/assets/images/mapsheets.svg#map2"/>
+    <use data-href="http://localhost:8080/assets/images/mapsheets.svg#map1" style="transform: translate(0, 390.25px);"/>
+    <use data-href="http://localhost:8080/assets/images/mapsheets.svg#map3" style="transform: translate(0, 780.5px);"/>
 
     <rect id="dots" fill="url(#asterisk)"/>
 
@@ -122,5 +122,19 @@
 
     <g class="grid"/>
   </g>
+  <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 data-cols="33" data-rows="77" href="http://localhost:8080/map.js"/>
 </svg>
diff --git a/public/assets/images/scenario-side_show.svg b/public/assets/images/scenario-side_show.svg
index 7eebc83..4f0739d 100644
--- a/public/assets/images/scenario-side_show.svg
+++ b/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>
diff --git a/public/index.html.test b/public/index.html.test
new file mode 100644
index 0000000..e7cde7d
--- /dev/null
+++ b/public/index.html.test
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate, post-check=0, pre-check=0" />
+    <meta http-equiv="cache-control" content="max-age=0" />
+    <title>Losing my mind</title>
+  </head>
+  <body>
+    <svg viewBox="-6 -6 12 12" xmlns="http://www.w3.org/2000/svg" class="weapon-icon">
+      <use href="assets/images/counters.svg?v=2#smg"></use>
+    </svg>
+  </body>
+  <!-- <script src="index.js"></script> -->
+</html>
diff --git a/server.cjs b/server.cjs
index 27d578a..1910f2b 100644
--- a/server.cjs
+++ b/server.cjs
@@ -47,9 +47,13 @@ const server = createServer(
       'env': `"${process.env.NODE_ENV || 'dev'}"`,
     },
     entryPoints: ['src/index.js', 'src/map.js', 'src/soldier_record_block.js'],
+    // outdir: 'build',
     ...(process.env.NODE_ENV !== 'test') && {
       outdir: 'build'
-    }
+    },
+    // loader: {
+    //   '.svg': 'file'
+    // },
   },
   {
     // http: { IncomingMessage: Request },
diff --git a/src/index.js b/src/index.js
index 604f877..8b24625 100644
--- a/src/index.js
+++ b/src/index.js
@@ -93,28 +93,28 @@ function roll(die) {
 function load() {
   const svg = this.contentDocument.querySelector('svg'),
     startLocs = svg.querySelector('.start-locations')
-    // , scriptEl = this.contentDocument.querySelector('script')
+    , scriptEl = this.contentDocument.querySelector('script')
     ;
 
-  // const linkEl = document.createElement('link');
-  // linkEl.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
-  // linkEl.setAttribute('rel', 'stylesheet');
-  // linkEl.setAttribute('href', 'http://localhost:8080/assets/css/map.css');
-  // linkEl.setAttribute('type', 'text/css');
+  const linkEl = document.createElement('link');
+  linkEl.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+  linkEl.setAttribute('rel', 'stylesheet');
+  linkEl.setAttribute('href', '../../assets/css/map.css');
+  linkEl.setAttribute('type', 'text/css');
 
-  // linkEl.onload = function (e) {
-  //   console.log('map.css loaded');
+  linkEl.onload = function (e) {
+    console.log('map.css loaded');
 
-  //   if (scriptEl) {
-  //     scriptEl.onload = function () {
-  //       console.log('map.js loaded');
+    if (scriptEl) {
+      scriptEl.onload = function () {
+        console.log('map.js loaded');
 
-  //     };
-  //     scriptEl.setAttribute('href', 'http://localhost:8080/map.js');
-  //   }
-  // };
+      };
+      scriptEl.setAttribute('href', '../../map.js');
+    }
+  };
 
-  // svg.prepend(linkEl);
+  svg.prepend(linkEl);
 
   this.style.opacity = 1;
   mapPlaceholder.style.opacity = 0;
diff --git a/src/index.js.test b/src/index.js.test
new file mode 100644
index 0000000..f420f22
--- /dev/null
+++ b/src/index.js.test
@@ -0,0 +1,13 @@
+const svgns = 'http://www.w3.org/2000/svg';
+const [icon, use] = ['svg', 'use'].map(t => document.createElementNS(svgns, t));
+
+icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12');
+icon.setAttribute('xmlns', svgns);
+icon.classList.add('weapon-icon');
+
+// use.setAttributeNS(null, 'href', `assets/images/counters.svg#rifle`);
+use.setAttributeNS(null, 'href', `assets/images/counters2.svg#smg`);
+
+icon.appendChild(use);
+
+document.querySelector('body').appendChild(icon);
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 9fbca9d..185a96c 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -1,4 +1,15 @@
 import { Observable } from "./observable";
+// import counters from '../../public/assets/images/counters.svg';
+// import svg from '../../public/assets/images/counters.svg';
+
+// const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
+// const rifle = document.importNode(doc.querySelector('#rifle'), true);
+// const smg = document.importNode(doc.querySelector('#smg'), true);
+
+// console.log('svg', counters);
+// console.log('doc', doc);
+// console.log('imported svg', rifle);
+// console.log('imported svg', smg);
 
 const weapons = {
   rifle: {
@@ -21,13 +32,15 @@ const weapons = {
   }
 }
 
+const cacheBuster = Array(20).fill(null).map(() => getRandomIntInclusive(0, 9)).join('');
+
 function createIcon(number) {
   const [icon, use, text] = ['svg', 'use', 'text'].map(t => document.createElementNS(svgns, t));
 
   icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12');
   icon.setAttribute('xmlns', svgns);
 
-  use.setAttributeNS(null, 'href', `assets/images/counters.svg#counter-base`);
+  use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#counter-base`);
 
   text.textContent = number;
 
@@ -37,6 +50,13 @@ function createIcon(number) {
   return icon;
 }
 
+// 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
+}
+
 function createWeaponIcon(type) {
   const [icon, use] = ['svg', 'use'].map(t => document.createElementNS(svgns, t));
 
@@ -44,9 +64,11 @@ function createWeaponIcon(type) {
   icon.setAttribute('xmlns', svgns);
   icon.classList.add('weapon-icon');
 
-  use.setAttributeNS(null, 'href', `assets/images/counters.svg#${type}`);
+  use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#${type}`);
+  // use.setAttributeNS(null, 'href', `${counters}#${type}`);
 
   icon.appendChild(use);
+  // icon.appendChild(document.importNode(doc.querySelector(`#${type}`), true));
 
   return icon;
 }
diff --git a/test/integration/fixtures/index.html b/test/integration/fixtures/index.html
deleted file mode 100644
index 11e23c0..0000000
--- a/test/integration/fixtures/index.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Infantry Combat Solo Basic</title>
-  </head>
-  <body>
-  </body>
-</html>
diff --git a/test/integration/fixtures/scenario-test.svg b/test/integration/fixtures/scenario-test.svg
new file mode 100644
index 0000000..0e12afb
--- /dev/null
+++ b/test/integration/fixtures/scenario-test.svg
@@ -0,0 +1,102 @@
+<?xml version="1.0" standalone="no"?>
+<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">
+  <!-- <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; }
+
+    #background {
+      stroke: #304b75;
+      fill: #bacae3;
+    }
+
+    pattern use {
+      stroke: black;
+      stroke-width: 0.3px;
+    }
+
+    .cw-60-deg {
+      transform: rotate(60deg);
+    }
+
+    .ccw-60-deg {
+      transform: rotate(-60deg);
+    }
+  </style>
+  <defs>
+    <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
+    <circle id="counter-base" cx="0" cy="0" r="5"/>
+
+    <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
+
+    <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
+      <use y="-15" href="#ast-line"/>
+      <use y="-15" style="transform-origin: 0 -15px;" class="cw-60-deg" href="#ast-line"/>
+      <use y="-15" style="transform-origin: 0 -15px;" class="ccw-60-deg" href="#ast-line"/>
+      <use y="15" href="#ast-line"/>
+      <use y="15" style="transform-origin: 0 15px;" class="cw-60-deg" href="#ast-line"/>
+      <use y="15" style="transform-origin: 0 15px;" class="ccw-60-deg" href="#ast-line"/>
+
+      <use x="8.66" href="#ast-line"/>
+      <use x="8.66" style="transform-origin: 8.66px 0;" class="cw-60-deg" href="#ast-line"/>
+      <use x="8.66" style="transform-origin: 8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
+      <use x="-8.66" href="#ast-line"/>
+      <use x="-8.66" style="transform-origin: -8.66px 0;" class="cw-60-deg" href="#ast-line"/>
+      <use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
+    </pattern>
+
+    <g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
+    <g id="t-2" class="troop-counter-template"><use href="#counter-base"/><text>2</text></g>
+    <g id="t-3" class="troop-counter-template"><use href="#counter-base"/><text>3</text></g>
+    <g id="t-4" class="troop-counter-template"><use href="#counter-base"/><text>4</text></g>
+    <g id="t-5" class="troop-counter-template"><use href="#counter-base"/><text>5</text></g>
+    <g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
+    <g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g>
+
+    <g id="semi-auto">
+      <line x1="-2" y1="1" x2="2" y2="1"/>
+      <line x1="-2" y1="2" x2="2" y2="2"/>
+    </g>
+
+    <g id="auto">
+      <line x1="-2" y1="0" x2="2" y2="0"/>
+      <line x1="-2" y1="1" x2="2" y2="1"/>
+      <line x1="-2" y1="2" x2="2" y2="2"/>
+    </g>
+
+    <g id="rifle" class="weapon-symbol">
+      <use href="#semi-auto"/>
+      <line x1="0" y1="-5" x2="0" y2="5"/>
+      <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+    </g>
+
+    <g id="smg" class="weapon-symbol">
+      <use href="#auto"/>
+      <line x1="0" y1="-5" x2="0" y2="4.5"/>
+      <line x1="-2" y1="4.5" x2="2" y2="4.5"/>
+    </g>
+
+    <g id="blazer" class="weapon-symbol">
+      <use href="#auto"/>
+      <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
+      <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+    </g>
+
+    <image id="counter-prone" href="counter_prone.jpg" width="10"/>
+    <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
+  </defs>
+
+  <rect id="background"/>
+
+  <g class="gameboard">
+    <rect id="dots" fill="url(#asterisk)"/>
+
+    <g id="firing-arcs">
+      <g id="shapes"/>
+      <g id="lines"/>
+    </g>
+    <g class="grid"/>
+  </g>
+
+  <script data-cols="10" data-rows="10"></script>
+</svg>
diff --git a/test/integration/page.test.js b/test/integration/page.test.js
index e4739b0..f708c4f 100644
--- a/test/integration/page.test.js
+++ b/test/integration/page.test.js
@@ -1,4 +1,6 @@
-const { Builder, By } = require('selenium-webdriver'),
+const { ProvideResponseParameters } = require('selenium-webdriver/bidi/provideResponseParameters');
+
+const { Builder, By, until } = require('selenium-webdriver'),
   chrome = require('selenium-webdriver/chrome.js'),
   getNetworkInstance = require('selenium-webdriver/bidi/network.js'),
   { AddInterceptParameters } = require('selenium-webdriver/bidi/addInterceptParameters'),
@@ -10,8 +12,10 @@ const { Builder, By } = require('selenium-webdriver'),
   { tmpdir } = require('os'),
   puppeteer = require('puppeteer');
 
-const DIR = path.resolve(tmpdir(), 'test-dir');
+const { HttpResponse } = require('selenium-webdriver/devtools/networkinterceptor');
 
+const fs = require('node:fs/promises');
+const DIR = path.resolve(tmpdir(), 'test-dir');
 
 chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');
 chromeOptions.enableBidi();
@@ -53,17 +57,66 @@ it('loads the page', async () => {
 it.only('selects an off-board soldier', async () => {
 // it.only.each(Array(10).fill(null))('selects an off-board soldier', async () => {
 
-  const id = await driver.getWindowHandle();
-  const network = await getNetworkInstance(driver, id);
-  await network.beforeRequestSent(function (event) {
-    console.log('request url', event.request.url);
-  });
+  // const id = await driver.getWindowHandle();
+  // const network = await getNetworkInstance(driver, id);
 
   // const intercept = await network.addIntercept(new AddInterceptParameters(InterceptPhase.BEFORE_REQUEST_SENT));
 
+  // await network.beforeRequestSent(async event => {
+  //   console.log('request url', event.request.url);
+    // await network.provideResponse(new ProvideResponseParameters(event.request));
+  // });
+
+  // await network.responseStarted(async event => {
+  //   if (event.response.url.includes('scenario'))
+  //     console.log('response', event.response);
+  // });
+
+  // await network.responseStarted(async (event) => {
+  //   if (event.response.url.includes('scenario')) {
+  //     console.log('event', event);
+  //     console.log('request', event.request);
+  //     console.log('response', event.response.result);
+  //   }
+  // });
+
+  // await network.beforeRequestSent(async (event) => {
+  //   if (event.request.url.includes('scenario')) {
+  //     console.log('event', event);
+  //     console.log('request', event.request.request);
+  //     await network.provideResponse(new ProvideResponseParameters(event.request.request));
+  //     // await network.failRequest(event.request.request);
+  //   }
+  // });
+
+  const connection = await driver.createCDPConnection('page')
+  const url = 'http://localhost:3005/assets/images/scenario-side_show.svg';
+  const httpResponse = new HttpResponse(url);
+
+  // httpResponse.body = `<?xml version="1.0" standalone="no"?>
+  //   <svg viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg">
+  //     <circle cx="0" cy="0" r="50" fill="violet" />
+  //   </svg>`;
+
+  httpResponse.body = await fs.readFile('./test/integration/fixtures/scenario-test.svg', 'utf8');
+  httpResponse.addHeaders('Content-Type', 'image/svg+xml');
+
+  await driver.onIntercept(connection, httpResponse, async function () {
+    console.log('intercepted');
+    // await driver.switchTo().frame(await driver.findElement(By.css('object')));
+    // console.log(await driver.getPageSource());
+  });
+
   await driver.get('http://localhost:3005');
+  // expect(await driver.getTitle()).toEqual('Infantry Combat Solo Basic');
+
+  await driver.wait(until.elementIsVisible(driver.findElement(By.css('object'))), 1000);
+  // await driver.wait(until.elementLocated(By.css('#dice')), 1000);
+  takeScreenshot(driver);
   // await driver.switchTo().frame(await driver.findElement(By.css('object')));
 
+  // console.log(await driver.getPageSource());
+
   // const testDir = path.dirname(expect.getState().testPath);
   // await writeFile(path.join(testDir, `scenario.svg`), `
   //   <?xml version="1.0" standalone="no"?>
@@ -91,18 +144,18 @@ it.only('selects an off-board soldier', async () => {
   // await browser.close();
 
 
-
   // console.log('test dir', testDir);
 
   // const selector = '.counter[data-allegiance="attacker"][data-number="1"]',
   //   svg = await driver.findElement(By.css('svg')),
   //   counter = await driver.findElement(By.css(selector), svg);
 
-  // takeScreenshot(driver);
+  // await driver.findElement(By.css('#dice'));
 
   // await counter.click();
 
   // expect(await counter.getAttribute('class')).toEqual(expect.stringContaining('selected'));
+  // await takeScreenshot(driver);
 });
 
 afterEach(async () => {