From 0aef8a6401230976e567bfd9b0bef56a51d88d34 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Sun, 14 Apr 2024 13:12:21 -0700
Subject: WIP
---
public/map.css | 110 +++++++++++++++++++++++++++++++++------------------------
public/map.svg | 40 +++++++++++----------
2 files changed, 86 insertions(+), 64 deletions(-)
(limited to 'public')
diff --git a/public/map.css b/public/map.css
index b672ad9..ec5983b 100644
--- a/public/map.css
+++ b/public/map.css
@@ -12,7 +12,7 @@ text {
use[href="#hex"] {
opacity: 1;
- fill: teal;
+ fill: transparent;
fill-opacity: 0.2;
stroke-width: 0.5px;
}
@@ -58,11 +58,11 @@ polyline.move-trace {
r: inherit;
}
-g.troop-counter-template, g.troop-counter-template use {
+g.troop-counter, g.troop-counter use {
r: inherit;
}
-g.troop-counter, g.troop-counter use {
+g.troop-counter-template, g.troop-counter-template use {
r: inherit;
}
@@ -165,13 +165,29 @@ polygon.firing-arc[data-troop-allegiance="liao"] {
stroke-opacity: inherit;
}
-use[href="#davion-1"] {
+use[href*="#t-"] {
r: 5px;
+}
+
+use[data-allegiance="liao"] {
+ fill: green;
+}
+
+use[data-allegiance="davion"] {
fill: red;
}
-use[href="#davion-1"]:hover {
- transform: scale(2);
+/* Counter is off the grid */
+use[href*="#t-"][data-x]:hover {
+ --scale: 1.5;
+}
+
+g.start-locations g:first-child {
+ --i: -2;
+}
+
+g.start-locations g:last-child {
+ --i: 52;
}
/* Inradius and circumradius values come from the hexagon */
@@ -183,29 +199,31 @@ use[href="#davion-1"]:hover {
transform: translate(19px, 31px) scale(4);
}
-g[data-y] {
+g[data-y], g.start-locations > g {
--translateX: 0;
transform: translate(var(--translateX), calc(var(--y-step) * var(--i)));
}
-g[data-y]:nth-child(odd) {
+g[data-y]:nth-child(even) {
--translateX: calc(var(--inradius));
}
-g[data-x]:hover {
- --scale: 0.97;
+[data-x] use[href="#hex"] {
+ --scale: 1;
+ transform: scale(var(--scale));
}
-g[data-x]:hover use[href="#hex"] {
+[data-x]:hover use[href="#hex"] {
+ --scale: 0.97;
fill: orange;
stroke: orangered;
}
-g[data-x]:hover use[href="#davion-1"] {
+[data-x]:hover use[href*="#t-"] {
transform: scale(1.5);
}
-g[data-x] {
+[data-x] {
--scale: 1;
transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale));
}
@@ -262,36 +280,36 @@ g[data-y="48"] { --i: 48; }
g[data-y="49"] { --i: 49; }
g[data-y="50"] { --i: 50; }
-g[data-x="0"] { --i: 0; }
-g[data-x="1"] { --i: 1; }
-g[data-x="2"] { --i: 2; }
-g[data-x="3"] { --i: 3; }
-g[data-x="4"] { --i: 4; }
-g[data-x="5"] { --i: 5; }
-g[data-x="6"] { --i: 6; }
-g[data-x="7"] { --i: 7; }
-g[data-x="8"] { --i: 8; }
-g[data-x="9"] { --i: 9; }
-g[data-x="10"] { --i: 10; }
-g[data-x="11"] { --i: 11; }
-g[data-x="12"] { --i: 12; }
-g[data-x="13"] { --i: 13; }
-g[data-x="14"] { --i: 14; }
-g[data-x="15"] { --i: 15; }
-g[data-x="16"] { --i: 16; }
-g[data-x="17"] { --i: 17; }
-g[data-x="18"] { --i: 18; }
-g[data-x="19"] { --i: 19; }
-g[data-x="20"] { --i: 20; }
-g[data-x="21"] { --i: 21; }
-g[data-x="22"] { --i: 22; }
-g[data-x="23"] { --i: 23; }
-g[data-x="24"] { --i: 24; }
-g[data-x="25"] { --i: 25; }
-g[data-x="26"] { --i: 26; }
-g[data-x="27"] { --i: 27; }
-g[data-x="28"] { --i: 28; }
-g[data-x="29"] { --i: 29; }
-g[data-x="30"] { --i: 30; }
-g[data-x="31"] { --i: 31; }
-g[data-x="32"] { --i: 32; }
+[data-x="0"] { --i: 0; }
+[data-x="1"] { --i: 1; }
+[data-x="2"] { --i: 2; }
+[data-x="3"] { --i: 3; }
+[data-x="4"] { --i: 4; }
+[data-x="5"] { --i: 5; }
+[data-x="6"] { --i: 6; }
+[data-x="7"] { --i: 7; }
+[data-x="8"] { --i: 8; }
+[data-x="9"] { --i: 9; }
+[data-x="10"] { --i: 10; }
+[data-x="11"] { --i: 11; }
+[data-x="12"] { --i: 12; }
+[data-x="13"] { --i: 13; }
+[data-x="14"] { --i: 14; }
+[data-x="15"] { --i: 15; }
+[data-x="16"] { --i: 16; }
+[data-x="17"] { --i: 17; }
+[data-x="18"] { --i: 18; }
+[data-x="19"] { --i: 19; }
+[data-x="20"] { --i: 20; }
+[data-x="21"] { --i: 21; }
+[data-x="22"] { --i: 22; }
+[data-x="23"] { --i: 23; }
+[data-x="24"] { --i: 24; }
+[data-x="25"] { --i: 25; }
+[data-x="26"] { --i: 26; }
+[data-x="27"] { --i: 27; }
+[data-x="28"] { --i: 28; }
+[data-x="29"] { --i: 29; }
+[data-x="30"] { --i: 30; }
+[data-x="31"] { --i: 31; }
+[data-x="32"] { --i: 32; }
diff --git a/public/map.svg b/public/map.svg
index 3023271..990e554 100644
--- a/public/map.svg
+++ b/public/map.svg
@@ -16,22 +16,6 @@
6
7
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -60,9 +44,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
--
cgit v1.2.3