Add all scenario maps

public/index.html

@@ -112,7 +112,7 @@
     </div>
 
     <div id="content">
-      <input type="checkbox" class="visible" checked />
+      <input type="checkbox" class="visible"/>
       <div>
         Set firing arc:
         <button type="button" class="set-firing-arc" data-size="small">
@@ -143,6 +143,7 @@
                 <select>
                   <option value="map1">Map1</option>
                   <option value="map2">Map2</option>
+                  <option value="map3">Map3</option>
                 </select>
               </label>
             </p>

public/map.css

@@ -199,7 +199,7 @@ g.selected use {
   fill: red;
 }
 
-.board {
+.board, .gameboard {
   transform: translate(19px, 31px) scale(4);
 }
 
@@ -301,6 +301,32 @@ g[data-y="47"] { --i: 47; }
 g[data-y="48"] { --i: 48; }
 g[data-y="49"] { --i: 49; }
 g[data-y="50"] { --i: 50; }
+g[data-y="51"] { --i: 51; }
+g[data-y="52"] { --i: 52; }
+g[data-y="53"] { --i: 53; }
+g[data-y="54"] { --i: 54; }
+g[data-y="55"] { --i: 55; }
+g[data-y="56"] { --i: 56; }
+g[data-y="57"] { --i: 57; }
+g[data-y="58"] { --i: 58; }
+g[data-y="59"] { --i: 59; }
+g[data-y="60"] { --i: 60; }
+g[data-y="61"] { --i: 61; }
+g[data-y="62"] { --i: 62; }
+g[data-y="63"] { --i: 63; }
+g[data-y="64"] { --i: 64; }
+g[data-y="65"] { --i: 65; }
+g[data-y="66"] { --i: 66; }
+g[data-y="67"] { --i: 67; }
+g[data-y="68"] { --i: 68; }
+g[data-y="69"] { --i: 69; }
+g[data-y="70"] { --i: 70; }
+g[data-y="71"] { --i: 71; }
+g[data-y="72"] { --i: 72; }
+g[data-y="73"] { --i: 73; }
+g[data-y="74"] { --i: 74; }
+g[data-y="75"] { --i: 75; }
+g[data-y="76"] { --i: 76; }
 
 [data-x="0"] { --i: 0; }
 [data-x="1"] { --i: 1; }

public/map1.svg

@@ -1857,9 +1857,5 @@
         <g data-x="32"><use href="#hex"/></g>
       </g>
     </g>
-    <g class="buildings">
-      <rect x="205" y="305" width="170" height="140"/>
-    </g>
-    <!-- <line class="sight-line" x1="0" y1="0" x2="0" y2="0"/> -->
   </g>
 </svg>

public/map2.svg

@@ -1,8 +1,17 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg viewBox="-25 -150 400 570" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="map.css" type="text/css"/>
+  <style>
+    use[href="#hex"] {
+      opacity: 0.2;
+    }
+
+    #image-maps image {
+      transform: none;
+    }
+  </style>
   <defs>
     <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
 
@@ -20,14 +29,22 @@
     <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
   </defs>
 
-  <rect id="background" x="-18" y="-10" width="386" height="322"/>
+  <rect id="background"/>
 
-  <g class="board">
+  <g id="image-maps">
+    <image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518"/>
+    <image class="map-scans" href="row.jpg" width="2284" height="55" y="1505" />
+    <image id="map1" class="map-scans" href="scans/map1.jpg" width="2284" height="1518" y="1565"/>
+    <image class="map-scans" href="row.jpg" width="2284" height="55" y="3065" />
+    <image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518" y="3125"/>
+  </g>
+
+  <g class="gameboard">
     <g id="firing-arcs">
       <g id="shapes"/>
       <g id="lines"/>
     </g>
-    <g class="start-locations">
+    <!-- <g class="start-locations">
       <g data-y="-2">
         <g data-x="4" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g>
         <g data-x="3" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g>
@@ -42,43 +59,8 @@
         <g data-x="3" class="counter" data-allegiance="davion" data-number="4"><use href="#t-4"/></g>
         <g data-x="4" class="counter" data-allegiance="davion" data-number="5"><use href="#t-5"/></g>
       </g>
+    </g> -->
+    <g class="grid"/>
   </g>
-    <g class="grid">
+  <script href="map.js" data-cols="33" data-rows="77"></script>
-      <g data-y="0">
-        <g data-x="0"><use href="#hex"/></g>
-        <g data-x="1"><use href="#hex"/></g>
-        <g data-x="2"><use href="#hex"/></g>
-        <g data-x="3"><use href="#hex"/></g>
-        <g data-x="4"><use href="#hex"/></g>
-      </g>
-      <g data-y="1">
-        <g data-x="0"><use href="#hex"/></g>
-        <g data-x="1"><use href="#hex"/></g>
-        <g data-x="2"><use href="#hex"/></g>
-        <g data-x="3"><use href="#hex"/></g>
-        <g data-x="4"><use href="#hex"/></g>
-      </g>
-      <g data-y="2">
-        <g data-x="0"><use href="#hex"/></g>
-        <g data-x="1"><use href="#hex"/></g>
-        <g data-x="2"><use href="#hex"/></g>
-        <g data-x="3"><use href="#hex"/></g>
-        <g data-x="4"><use href="#hex"/></g>
-      </g>
-      <g data-y="3">
-        <g data-x="0"><use href="#hex"/></g>
-        <g data-x="1"><use href="#hex"/></g>
-        <g data-x="2"><use href="#hex"/></g>
-        <g data-x="3"><use href="#hex"/></g>
-        <g data-x="4"><use href="#hex"/></g>
-      </g>
-      <g data-y="4">
-        <g data-x="0"><use href="#hex"/></g>
-        <g data-x="1"><use href="#hex"/></g>
-        <g data-x="2"><use href="#hex"/></g>
-        <g data-x="3"><use href="#hex"/></g>
-        <g data-x="4"><use href="#hex"/></g>
-      </g>
-    </g>
-  </g>
 </svg>

public/map3.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">
+  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="map.css" type="text/css"/>
+  <style>
+    use[href="#hex"] {
+      opacity: 0.2;
+    }
+
+    #image-maps image {
+      transform: translate(-10px, 0px);
+    }
+  </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"/>
+
+    <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>
+
+    <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 id="image-maps">
+    <image id="map4" class="map-scans" href="scans/map4.jpg" width="2284" height="1518"/>
+  </g>
+
+  <g class="gameboard">
+    <g id="firing-arcs">
+      <g id="shapes"/>
+      <g id="lines"/>
+    </g>
+    <!-- <g class="start-locations">
+      <g data-y="-2">
+        <g data-x="4" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g>
+        <g data-x="3" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g>
+        <g data-x="2" class="counter" data-allegiance="liao" data-number="3"><use href="#t-3"/></g>
+        <g data-x="1" class="counter" data-allegiance="liao" data-number="4"><use href="#t-4"/></g>
+        <g data-x="0" class="counter" data-allegiance="liao" data-number="5"><use href="#t-5"/></g>
+      </g>
+      <g data-y="6">
+        <g data-x="0" class="counter" data-allegiance="davion" data-number="1"><use href="#t-1"/></g>
+        <g data-x="1" class="counter" data-allegiance="davion" data-number="2"><use href="#t-2"/></g>
+        <g data-x="2" class="counter" data-allegiance="davion" data-number="3"><use href="#t-3"/></g>
+        <g data-x="3" class="counter" data-allegiance="davion" data-number="4"><use href="#t-4"/></g>
+        <g data-x="4" class="counter" data-allegiance="davion" data-number="5"><use href="#t-5"/></g>
+      </g>
+    </g> -->
+    <g class="grid"/>
+  </g>
+  <script href="map.js" data-cols="33" data-rows="25"></script>
+</svg>

src/modules/gameboard.js

@@ -241,7 +241,7 @@ export function start(el) {
       cell.dispatchEvent(new MouseEvent('pointerover'));
     });
 
-    cell.addEventListener('pointerover', e => {
+    cell.addEventListener('pointerover', () => {
       let selected = getSelected();
 
       if (selected) {
@@ -261,7 +261,7 @@ export function start(el) {
       }
     });
 
-    cell.addEventListener('pointerout', e => {
+    cell.addEventListener('pointerout', () => {
       let sl = getActiveSightLine(svg);
 
       if (sl) {