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);