From 5fc598cdd15be3d8dd856997af2b1f68f774162c Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Tue, 23 Jul 2024 15:05:58 -0700
Subject: WIP: counters
---
public/assets/css/map.css | 122 +++++++++++++++++++++++++++++++++++++---------
1 file changed, 98 insertions(+), 24 deletions(-)
(limited to 'public/assets/css/map.css')
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
index cd7ea6a..e6a25aa 100644
--- a/public/assets/css/map.css
+++ b/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-x]:hover g.counter,
-[data-q][data-r][data-s][data-t]:hover g.counter {
- transform: scale(1.5);
-}
-
-[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-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-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-q][data-r][data-s][data-t]:hover g.counter {*/
+/* transform: scale(2);*/
+/*}*/
+
+/*[data-q][data-r][data-s][data-t]:hover use[href="#hex"] {*/
+/* 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;
+}
--
cgit v1.2.3