WIP: mock selenium response

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>