Generate weapon data dynamically from counters

public/assets/css/map.css

@@ -173,11 +173,38 @@ polygon.firing-arc[data-allegiance="attacker"] {
   stroke-opacity: inherit;
 }
 
-g.counter use, use[href*="#t-"] {
+g.counter use {
   r: 5px;
 }
 
-g.selected use {
+g.counter text.troop-number, g.counter text.squad-number {
+  fill: black;
+  font-size: 6px;
+  font-family: monospace;
+  font-weight: bold;
+  cursor: default;
+  text-anchor: middle;
+  pointer-events: none;
+  user-select: none;
+}
+
+g.counter use.troop-number, g.counter use.squad-number {
+  --scale: 0.4;
+}
+
+g.counter .troop-number {
+  --translateX: -4px;
+}
+
+g.counter .squad-number {
+  --translateX: 4px;
+}
+
+g.counter .troop-number, g.counter .squad-number {
+  transform: translate(var(--translateX), 0) scale(var(--scale));
+}
+
+g.selected use[href="#counter-base"] {
   animation: 1s selected 0.25s linear infinite;
   stroke-width: 2px;
   stroke: yellow;
@@ -186,7 +213,6 @@ g.selected use {
 
 @keyframes selected {
   50% {
-    /* stroke: yellow; */
     stroke-width: 0px;
     r: 5px;
   }
@@ -227,16 +253,23 @@ g[data-y]:nth-child(odd) {
 }
 
 [data-x]:hover use[href="#hex"] {
-  /* --scale: 0.95; */
   opacity: 1;
   fill: orange;
   stroke: black;
 }
 
-[data-x]:hover use[href*="#t-"] {
+[data-x]:hover g.counter {
   transform: scale(1.5);
 }
 
+[data-x]:hover g.counter .troop-number {
+  --translateX: -6px;
+}
+
+[data-x]:hover g.counter .squad-number {
+  --translateX: 6px;
+}
+
 [data-x] {
   --scale: 1;
   transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale));