WIP

package-lock.json

@@ -76,7 +76,7 @@
       }
     },
     "node_modules/svg-pan-zoom": {
-      "resolved": "git+ssh://git@github.com/webdevcat-me/svg-pan-zoom.git#119a1e207f0902becbf67caf30e564efb72b0b2a"
+      "resolved": "git+ssh://git@github.com/webdevcat-me/svg-pan-zoom.git#8ea4e018b475eac05eb7ae8a067850c9bef7c2b5"
     }
   }
 }

public/index.html

@@ -267,7 +267,7 @@
             <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
             17th Kestral Mechanized Infantry -->
           </p>
-          <div is="soldier-record-block" class="soldier-record selected" data-troop-number="1" data-troop-allegiance="davion">
+          <div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="davion">
             <span slot="troop-number">1</span>
             <span slot="primary-weapon-type">Rifle</span>
             <span slot="primary-weapon-damage">4L</span>

public/map.css

@@ -11,23 +11,24 @@ text {
 }
 
 use[href="#hex"] {
-  opacity: 1;
+  opacity: 0;
   fill: transparent;
   fill-opacity: 0.5;
   stroke-width: 0.5px;
-  stroke: darkgray;
+  stroke: black;
-  /* stroke-opacity: 0.2; */
 }
 
-use[href="#hex"]:hover, use[href="#hex"].hover
+/* use[href="#hex"]:hover, use[href="#hex"].hover
  {
   opacity: 1;
   fill: orange;
   stroke: orangered;
-}
+} */
 
 use[href="#hex"].active {
   opacity: 0.2;
+  fill: teal;
+  stroke: black;
 }
 
 use[href="#hex"].sight-line-target {
@@ -37,7 +38,7 @@ use[href="#hex"].sight-line-target {
 }
 
 polyline.move-trace {
-  stroke: gray;
+  stroke: white;
   stroke-dasharray: 2;
   fill: none;
 }
@@ -106,17 +107,17 @@ g#points use.counter[data-troop-allegiance="liao"] {
   fill: green;
 }
 
-g#points use.clone {
+use.clone {
   stroke: white;
   stroke-width: 0.5px;
   stroke-dasharray: 1;
 }
 
-g#points use[data-troop-allegiance="davion"].clone {
+use[data-allegiance="davion"].clone {
   fill: rgb(255, 126, 126);
 }
 
-g#points use[data-troop-allegiance="liao"].clone {
+use[data-allegiance="liao"].clone {
   fill: rgb(130, 190, 130);
 }
 
@@ -171,8 +172,23 @@ use[href*="#t-"] {
   r: 5px;
 }
 
+use.selected {
+  animation: 1s selected 0.25s linear infinite;
+  stroke-width: 2px;
+  stroke: yellow;
+  r: 6px;
+}
+
+@keyframes selected {
+  50% {
+    /* stroke: yellow; */
+    stroke-width: 0px;
+    r: 5px;
+  }
+}
+
 use[data-allegiance="liao"] {
-  fill: green;
+  fill: #008000;
 }
 
 use[data-allegiance="davion"] {
@@ -184,6 +200,10 @@ use[href*="#t-"][data-x]:hover {
   --scale: 1.5;
 }
 
+.board {
+  transform: translate(19px, 31px) scale(4);
+}
+
 g.start-locations g:first-child {
   --i: -2;
 }
@@ -198,7 +218,6 @@ g.start-locations g:last-child {
   --circumradius: 10px;
   --x-step: calc(var(--inradius) * 2);
   --y-step: calc((3 / 2) * var(--circumradius));
-  transform: translate(19px, 31px) scale(4);
 }
 
 g[data-y], g.start-locations > g {
@@ -216,7 +235,8 @@ g[data-y]:nth-child(even) {
 }
 
 [data-x]:hover use[href="#hex"] {
-  --scale: 0.95;
+  /* --scale: 0.95; */
+  opacity: 1;
   fill: orange;
   stroke: black;
 }
@@ -315,3 +335,7 @@ g[data-y="50"] { --i: 50; }
 [data-x="30"] { --i: 30; }
 [data-x="31"] { --i: 31; }
 [data-x="32"] { --i: 32; }
+
+.buildings {
+  display: none;
+}

public/map.svg

@@ -4,6 +4,11 @@
 <svg viewBox="-10 -10 2390 3163" xmlns="http://www.w3.org/2000/svg">
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="map.css" type="text/css"/>
   <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="1" fill="black"/>
+    </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"/>
@@ -33,7 +38,7 @@
 
   <rect id="background" x="-18" y="-10" width="2326" height="3087"/>
 
-  <g style="display: none;" id="image-maps">
+  <g id="image-maps">
     <image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518"/>
     <image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518"/>
   </g>
@@ -43,10 +48,11 @@
     <g id="lines"/>
   </g>
 
+  <g class="board">
     <g class="grid">
       <g class="start-locations">
         <g>
-        <!-- <use data-x="13" href="#t-1" href="#t-1" data-allegiance="liao" data-number="1"/> -->
+          <!-- <use data-x="13" href="#t-1" data-allegiance="liao" data-number="1"/> -->
           <use data-x="14" href="#t-2" data-allegiance="liao" data-number="2"/>
           <use data-x="15" href="#t-3" data-allegiance="liao" data-number="3"/>
           <use data-x="16" href="#t-4" data-allegiance="liao" data-number="4"/>
@@ -55,7 +61,7 @@
           <use data-x="19" href="#t-7" data-allegiance="liao" data-number="7"/>
         </g>
         <g>
-        <!-- <use data-x="13" href="#t-1" href="#t-1" data-allegiance="davion" data-number="1"/> -->
+          <use data-x="13" href="#t-1" data-allegiance="davion" data-number="1"/>
           <use data-x="14" href="#t-2" data-allegiance="davion" data-number="2"/>
           <use data-x="15" href="#t-3" data-allegiance="davion" data-number="3"/>
           <use data-x="16" href="#t-4" data-allegiance="davion" data-number="4"/>
@@ -65,8 +71,8 @@
         </g>
       </g>
       <g data-y="0">
-      <g data-x="0"><use href="#hex"/><use href="#t-1" data-allegiance="liao" data-number="1"/></g>
+        <g data-x="0"><use href="#hex"/><use class="counter" href="#t-1" data-allegiance="liao" data-number="1"/></g>
-      <g data-x="1"><use href="#hex"/><use href="#t-1" data-allegiance="davion" data-number="1"/></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>
@@ -1850,4 +1856,9 @@
         <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>