WIP: counters

public/assets/css/map.css

@@ -82,10 +82,6 @@ g.troop-counter-template text {
   transform: translate(-5px, 6px);
 }
 
-[href="#counter-grenade"] {
-  transform: translate(-5px, -5px);
-}
-
 g.clone {
   stroke: white;
   stroke-width: 0.5px;
@@ -173,10 +169,35 @@ polygon.firing-arc[data-allegiance="attacker"] {
   stroke-opacity: inherit;
 }
 
-g.counter use {
+/*g.counter use {*/
+/* r: 5px;*/
+/*}*/
+
+g.counter {
   r: 5px;
 }
 
+[data-q][data-r][data-s][data-t]:hover g.counter {
+  /*transform: scale(3);*/
+}
+
+g.counter:hover {
+  /*transform: scale(3);*/
+  /*r: 20px;*/
+}
+
+/*g.counter:hover * {*/
+/*  r: 20px;*/
+/*}*/
+
+g.counter.selected {
+  r: 6px;
+}
+
+g.counter use.primary-weapon {
+  r: inherit;
+}
+
 g.counter use.troop-number, g.counter use.squad-number {
   --scale: 0.25;
 }
@@ -197,7 +218,8 @@ g.selected use.primary-weapon {
   animation: 1s selected 0.25s linear infinite;
   stroke-width: 2px;
   stroke: yellow;
-  r: 6px;
+  /*r: 6px;*/
+  r: inherit;
 }
 
 pattern use {
@@ -247,23 +269,42 @@ g[data-y]:nth-child(odd) {
   fill: orange;
   stroke: black;
 }
+/**/
+/*[data-q][data-r][data-s][data-t] g.counter,*/
+/*[data-q][data-r][data-s][data-t] g.counter .troop-number,*/
+/*[data-q][data-r][data-s][data-t] g.counter .squad-number {*/
+/*  transition: transform 0.25s;*/
+/*}*/
 
-[data-x]:hover g.counter,
-[data-q][data-r][data-s][data-t]:hover g.counter {
-  transform: scale(1.5);
-}
+/*[data-q][data-r][data-s][data-t]:hover g.counter {*/
+/*  transform: scale(2);*/
+/*}*/
 
-[data-x]:hover g.counter .troop-number,
-[data-q][data-r][data-s][data-t]:hover g.counter .troop-number {
-  --translateX: -5px;
-  --scale: 0.5;
-}
+/*[data-q][data-r][data-s][data-t]:hover use[href="#hex"] {*/
+/*  scale: 0.5;*/
+/*}*/
 
-[data-x]:hover g.counter .squad-number,
-[data-q][data-r][data-s][data-t]:hover g.counter .squad-number  {
-  --translateX: 5px;
-  --scale: 0.5;
-}
+
+
+/*[data-x]:hover g.counter,*/
+/*[data-q][data-r][data-s][data-t]:hover g.counter {*/
+/*  transform: scale(1.5);*/
+/*  transition: transform 0.25s;*/
+/*}*/
+/**/
+/*[data-x]:hover g.counter .troop-number,*/
+/*[data-q][data-r][data-s][data-t]:hover g.counter .troop-number {*/
+/*  --translateX: -5px;*/
+/*  --scale: 0.5;*/
+/*  transition: transform 0.25s;*/
+/*}*/
+/**/
+/*[data-x]:hover g.counter .squad-number,*/
+/*[data-q][data-r][data-s][data-t]:hover g.counter .squad-number  {*/
+/*  --translateX: 5px;*/
+/*  --scale: 0.5;*/
+/*  transition: transform 0.25s;*/
+/*}*/
 
 [data-x] {
   --scale: 1;
@@ -462,10 +503,43 @@ text.elevation {
 
 [data-q][data-r][data-s][data-t] .radial-icon {
   cx: calc(var(--cx) / 20);
-  cy: calc(var(--cy) / 20)
+  cy: calc(var(--cy) / 20);
 }
 
 [data-q][data-r][data-s][data-t]:hover .radial-icon {
   cx: var(--cx);
   cy: var(--cy);
 }
+
+use[class^="counter-"] {
+  --scale: 1;
+  --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;*/
+  --translateY: -5px;
+}

public/assets/css/style.css

@@ -576,6 +576,21 @@ div#status {
   pointer-events: none;
 }
 
+.counters-list {
+  user-select: none;
+}
+
+.counters-list > img {
+  vertical-align: middle;
+  height: 20px;
+  border: 1px solid lightgray;
+  border-radius: 2px;
+}
+
+.counters-list > img:hover {
+  border: 1px solid gray;
+}
+
 @keyframes roll-out {
   0% {
     transform: scaleX(1);

public/assets/images/scenario_template.svg

@@ -3,13 +3,6 @@
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/radial.css" type="text/css" />
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
 
-  <!--<style>-->
-  <!--  .grid .building use {-->
-  <!--    opacity: 1;-->
-  <!--    fill: teal;-->
-  <!--  }-->
-  <!--</style>-->
-
   <defs>
     <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
 
@@ -33,8 +26,12 @@
       <use x="8.66" y="15" transform="rotate(60 8.66 15)" href="#ast-line"/>
     </pattern>
 
-    <image id="counter-prone" href="counter_prone.jpg" width="10"/>
-    <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
+    <image id="counter-grenade" href="counter_grenade.png" width="10"/>
+    <image id="counter-prone" href="counter_prone.png" width="10"/>
+    <image id="counter-basement" href="counter_basement.png" width="10"/>
+    <image id="counter-1st-floor" href="counter_1st_floor.png" width="10"/>
+    <image id="counter-2nd-floor" href="counter_2nd_floor.png" width="10"/>
+    <image id="counter-3rd-floor" href="counter_3rd_floor.png" width="10"/>
   </defs>
 
   <g class="gameboard" data-view-elevation="0">
@@ -48,5 +45,6 @@
     </g>
 
     <g class="grid"/>
+    <g class="pieces"/>
   </g>
 </svg>

public/index.html

@@ -231,11 +231,24 @@
         <button type="button" class="set-firing-arc" data-size="large">
           <img src="assets/images/firing_arc_large.png" height="12" /> 6 MP
         </button>
-        <button type="button" class="set-grenade">
+        <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>
-        <button type="button" class="set-mech-template">M</button>
-      </span>
+        <button type="button" class="prone">Prone</button>
+        <button type="button" class="basement">Bsmnt</button>
+        <button type="button" class="1st-floor">1st Flr</button>
+        <button type="button" class="2nd-floor">2nd Flr</button>
+        <button type="button" class="3rd-floor">3rd Flr</button>
+      </div>
     </div>
 
     <div id="record-sheet">