From 143d61e49b2d835de560aa6239889ebd0ccfac6e Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Thu, 11 Apr 2024 17:04:28 -0700
Subject: Position hexes with CSS; move map styles into separate file
---
public/map.css | 226 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 226 insertions(+)
create mode 100644 public/map.css
(limited to 'public/map.css')
diff --git a/public/map.css b/public/map.css
new file mode 100644
index 0000000..7001821
--- /dev/null
+++ b/public/map.css
@@ -0,0 +1,226 @@
+image {
+ image-rendering: pixelated;
+}
+
+image.map-scans {
+ image-rendering: auto;
+}
+
+text {
+ user-select: none;
+}
+
+use[href="#point"], use[href="#hex"] {
+ opacity: 1;
+ fill: teal;
+ fill-opacity: 0.2;
+ stroke-width: 0.5px;
+}
+
+use[href="#point"]:hover,
+use[href="#point"].hover,
+use[href="#hex"]:hover,
+use[href="#hex"].hover {
+ opacity: 1;
+ fill: orange;
+ stroke: orangered;
+}
+
+use[href="#point"].active, use[href="#hex"].active {
+ opacity: 0.2;
+}
+
+use[href="#point"].sight-line-target, use[href="#hex"].sight-line-target {
+ opacity: 1;
+ stroke: orangered;
+ fill-opacity: 0.04;
+}
+
+polyline.move-trace {
+ stroke: gray;
+ stroke-dasharray: 2;
+ fill: none;
+}
+
+#background {
+ fill: #bacae3;
+}
+
+g#grid {
+ transform: translate(19px, 31px) scale(4);
+}
+
+#map2 {
+ transform-origin: 0px 0px;
+ transform: translate(-0.9px, -2.4px) scale(0.999, 1.007);
+}
+
+#map3 {
+ transform-origin: 0px 0px;
+ transform: translate(1.3px, 1564.1px) rotate(0.1deg) scale(0.999, 1.002);
+}
+
+#counter-base {
+ r: inherit;
+}
+
+g.troop-counter-template, g.troop-counter-template use {
+ r: inherit;
+}
+
+g.troop-counter, g.troop-counter use {
+ r: inherit;
+}
+
+g.troop-counter-template text {
+ fill: white;
+ font-size: 12px;
+ font-weight: bold;
+ font-family: monospace;
+ cursor: default;
+ text-anchor: middle;
+ pointer-events: none;
+ user-select: none;
+ transform: translateY(4px);
+ stroke: none;
+}
+
+g.troop-counter [href="#counter-prone"] {
+ transform: translate(-5px, 6px);
+}
+
+g#points g use.counter {
+ r: 5px;
+}
+
+g#points g.hover use[href="#point"] {
+ opacity: 1;
+ fill: orange;
+}
+
+g#points g.hover use.counter {
+ r: 7px;
+}
+
+g#points use.counter[data-troop-allegiance="davion"] {
+ fill: red;
+}
+
+g#points use.counter[data-troop-allegiance="liao"] {
+ fill: green;
+}
+
+g#points use.clone {
+ stroke: white;
+ stroke-width: 0.5px;
+ stroke-dasharray: 1;
+}
+
+g#points use[data-troop-allegiance="davion"].clone {
+ fill: rgb(255, 126, 126);
+}
+
+g#points use[data-troop-allegiance="liao"].clone {
+ fill: rgb(130, 190, 130);
+}
+
+text.counter, #troop-counter text {
+ font-size: 12px;
+ font-weight: bold;
+ fill: white;
+ font-family: sans-serif;
+ cursor: default;
+ text-anchor: middle;
+ transform: translateY(4px);
+ pointer-events: none;
+ user-select: none;
+}
+
+polygon.firing-arc[data-troop-allegiance="davion"] {
+ fill: red;
+}
+
+polygon.firing-arc[data-troop-allegiance="liao"] {
+ fill: green;
+}
+
+#shapes {
+ opacity: 0.1;
+}
+
+#shapes polygon {
+ stroke: none;
+}
+
+#lines polygon {
+ fill: none;
+ stroke: black;
+}
+
+.sight-line {
+ stroke: orangered;
+ stroke-width: 0.5px;
+ pointer-events: none;
+}
+
+defs #point, #hex {
+ fill: inherit;
+ fill-opacity: inherit;
+ stroke: inherit;
+ stroke-width: inherit;
+ stroke-opacity: inherit;
+}
+
+use[href="#davion-1"] {
+ r: 5px;
+ fill: red;
+}
+
+use[href="#davion-1"]:hover {
+ transform: scale(2);
+}
+
+g.col:hover {
+ --scale: 0.97;
+}
+
+g.col:hover use[href="#hex"] {
+ fill: orange;
+ stroke: orangered;
+}
+
+g.col:hover use[href="#davion-1"] {
+ transform: scale(1.5);
+}
+
+.grid {
+ --inradius: 8.66px;
+ --circumradius: 10px;
+ --x-step: calc(var(--inradius) * 2);
+ --y-step: calc((3 / 2) * var(--circumradius));
+ transform: translate(19px, 31px) scale(4);
+}
+
+g.row {
+ --translateX: 0;
+ transform: translate(var(--translateX), calc(var(--y-step) * (var(--n) - 1)));
+}
+
+g.row:nth-child(odd) {
+ --translateX: calc(var(--inradius));
+}
+
+g.row:nth-child(1) { --n: 1; }
+g.row:nth-child(2) { --n: 2; }
+g.row:nth-child(3) { --n: 3; }
+g.row:nth-child(4) { --n: 4; }
+
+g.col {
+ --scale: 1;
+ transform: translateX(calc(var(--x-step) * (var(--n) - 1))) scale(var(--scale));
+}
+
+g.col:nth-child(1) { --n: 1; }
+g.col:nth-child(2) { --n: 2; }
+g.col:nth-child(3) { --n: 3; }
+g.col:nth-child(4) { --n: 4; }
\ No newline at end of file
--
cgit v1.2.3