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;
+}