Add some high-element maps to test performance

public/assets/css/style.css

@@ -14,6 +14,7 @@ svg, object {
   background-color: darkgray;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 
 object {

public/assets/images/map1.svg

@@ -4,9 +4,32 @@
   <style>
     g[data-edge="north"] { --i: -2; }
     g[data-edge="south"] { --i: 52; }
+
+    g#hex line {
+      opacity: 1;
+    }
+
+    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);
+    }
   </style>
   <defs>
-    <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
+    <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" /> -->
+    </g>
 
     <circle id="counter-base" cx="0" cy="0" r="5"/>
 

public/assets/images/map4.svg

@@ -1,8 +1,51 @@
 <?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; }
+
+    g#hex line {
+      opacity: 1;
+    }
+
+    g#hex path {
+      opacity: 1;
+      stroke: black;
+      stroke-width: 0.25px;
+    }
+
+    use[href="#hex"] {
+      opacity: 1;
+    }
+
+    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);
+    }
+  </style>
   <defs>
-    <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
+    <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>
 
     <circle id="counter-base" cx="0" cy="0" r="5"/>
 
@@ -20,20 +63,20 @@
 
   <rect id="background"/>
 
-  <foreignObject width="100%" height="100%">
+  <!-- <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">
+    <!-- <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>
+  </foreignObject> -->
 
   <g class="gameboard">
     <g id="firing-arcs">
@@ -43,5 +86,5 @@
     <g class="grid"/>
   </g>
 
-  <script href="../../map.js" data-cols="33" data-rows="25"></script>
+  <script href="../../map.js" data-cols="33" data-rows="50"></script>
 </svg>

public/index.html

@@ -184,6 +184,9 @@
               <option value="map2">BattleTroops Scenario 2: Dragon Hunting</option>
               <option value="map3">BattleTroops Scenario 3: Race Against Time</option>
               <option value="map4">Test</option>
+              <option value="contour-lines">Contour Lines</option>
+              <option value="pendle">Pendle</option>
+              <option value="10-simplex_t03">10-simplex family polytope graph, in A10 Coxeter plane</option>
             </select>
           </label>
         </p>