WIP: add multiple counters to troopers and cells

public/assets/css/map.css

@@ -516,30 +516,39 @@ use[class^="counter-"] {
   --translateX: -5px;
   --translateY: -5px;
   transform: scale(var(--scale)) translate(var(--translateX), var(--translateY));
-  /*transform: translate(var(--translateX), var(--translateY)) scale(var(--scale));*/
 }
 
 use[class^="counter-"] {
   transition: x 0.25s, y 0.25s;
   --scale: 0.5;
-  /*--translateY: 0px;*/
-}
-
-.counter use[href^="#counter"] {
-  /*transform: scale(0.5);*/
 }
 
 g.counter use[class^="counter-"] {
   x: calc(var(--x) * 1.25);
   y: calc(var(--y) * 1.25);
-  /*y: 10px;*/
-  /*x: var(--x);*/
-  /*y: var(--y);*/
 }
 
-[data-q][data-r][data-s][data-t]:hover use[class^="counter-"],
-  x: calc(var(--x) * 1.5);
-  y: calc(var(--y) * 1.5);
-  /*--scale: 1;*/
+[data-q][data-r][data-s][data-t] > use[class^="counter-"] {
+  x: calc(var(--x) / 6);
+  y: calc(var(--y) / 6);
+}
+
+/* Counters carried by a trooper */
+[data-q][data-r][data-s][data-t]:hover g.counter use[class^="counter-"] {
+  /*x: calc(var(--x) * 1.5);*/
+  /*y: calc(var(--y) * 1.5);*/
+  /*--translateY: -5px;*/
+}
+
+/* Counters placed on a hex */
+[data-q][data-r][data-s][data-t]:hover > g.counter ~ use[class^="counter-"] {
+  x: calc(var(--x) * 2);
+  y: calc(var(--y) * 2);
+  --translateY: -5px;
+}
+
+[data-q][data-r][data-s][data-t]:hover > use[class^="counter-"] {
+  x: calc(var(--x) * 1.5);
+  y: calc(var(--y) * 1.5);
   --translateY: -5px;
 }

public/assets/images/counter-prone.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="71"
+   height="71"
+   viewBox="0 0 71 71"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><g
+     id="layer1"><circle
+       style="fill:#000000;stroke:none;stroke-width:0.32991;stroke-dasharray:none;stroke-dashoffset:0"
+       id="path2"
+       cx="29.117487"
+       cy="32.638958"
+       r="3.7584312" /><path
+       style="color:#000000;fill:#000000;-inkscape-stroke:none"
+       d="m 31.271484,34.935547 -6.664062,4.232422 -5.97461,-3.947266 -2.089843,4.261719 8.039062,4.958984 7.128906,-4.455078 7.513672,2.103516 1.279297,-4.570313 z"
+       id="path7" /><path
+       style="color:#000000;fill:#000000;-inkscape-stroke:none"
+       d="m 37.242187,37.804687 0.521485,7.400391 1.986328,1.75 h 13.289062 v -4 H 42.800781 l -0.314453,-1.150391 h 8.075195 8.075196 v -4 H 47.939453 Z"
+       id="path3" /><path
+       style="color:#000000;fill:#000000;-inkscape-stroke:none"
+       d="M 12.447266,34.826172 V 37.96875 H 29.117187 V 34.826172 Z"
+       id="path5" /><path
+       style="color:#000000;fill:#000000;-inkscape-stroke:none"
+       d="m 31.765625,36.871094 -2.080078,3.416015 8.078125,4.917969 2.082031,-3.416016 z"
+       id="path8" /></g></svg>

public/assets/images/scenario_template.svg

@@ -28,11 +28,11 @@
 
     <g id="counter-grenade">
       <rect x="0" y="0" width="10" height="10" fill="beige" stroke="black" stroke-width="0.5"/>
-      <image href="counter_grenade.png" width="10"/>
+      <image href="counter_grenade2.svg" width="10"/>
     </g>
     <g id="counter-prone">
       <rect x="0" y="0" width="10" height="10" fill="beige" stroke="black" stroke-width="0.5"/>
-      <image href="counter_prone.png" width="10"/>
+      <image href="counter_prone2.svg" width="10"/>
     </g>
     <g id="counter-basement">
       <rect x="0" y="0" width="10" height="10" fill="beige" stroke="black" stroke-width="0.5"/>
@@ -63,6 +63,6 @@
     </g>
 
     <g class="grid"/>
-    <g class="pieces"/>
+    <g class="grid-top"/>
   </g>
 </svg>

public/index.html

@@ -234,12 +234,6 @@
         <button type="button" class="set-mech-template">Mech</button>
       </span>
       <div class="counters-list">
-        <!--<img src="assets/images/counter_grenade.png" />-->
-        <!--<img src="assets/images/counter_prone.png" />-->
-        <!--<img src="assets/images/counter_basement.png" />-->
-        <!--<img src="assets/images/counter_1st_floor.png" />-->
-        <!--<img src="assets/images/counter_2nd_floor.png" />-->
-        <!--<img src="assets/images/counter_3rd_floor.png" />-->
         <button type="button" class="grenade">
           <img src="assets/images/icon_grenade.png" height="12" />
         </button>