Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/public/assets/css/map.css
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-05-02 11:02:10 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-05-02 11:04:09 -0700
commita69623b0ab6baff9f968e126c25d7e961e9dde53 (patch)
treed1f84b493cb3cbf1f2ba8df61f9ff8bd6099277f /public/assets/css/map.css
parent9ac571cc244ef02a32679f3fb47ffee5f7e0fd7c (diff)
Organize public directory contents into assets folders
Diffstat (limited to 'public/assets/css/map.css')
-rw-r--r--public/assets/css/map.css369
1 files changed, 369 insertions, 0 deletions
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
new file mode 100644
index 0000000..0c2fed9
--- /dev/null
+++ b/public/assets/css/map.css
@@ -0,0 +1,369 @@
+svg {
+ overflow: hidden;
+}
+
+image {
+ image-rendering: pixelated;
+}
+
+image.map-scans {
+ image-rendering: auto;
+}
+
+text {
+ user-select: none;
+}
+
+use[href="#hex"] {
+ opacity: 0;
+ fill: transparent;
+ fill-opacity: 0.5;
+ stroke-width: 0.5px;
+ stroke: black;
+}
+
+use[href="#hex"].active {
+ opacity: 0.2;
+ fill: teal;
+ stroke: black;
+}
+
+.sight-line-target use[href="#hex"] {
+ opacity: 1;
+ stroke: orangered;
+ fill-opacity: 0.04;
+}
+
+polyline {
+ fill: none;
+}
+
+polyline.move-trace {
+ stroke: white;
+ stroke-dasharray: 2;
+}
+
+#background {
+ fill: #bacae3;
+}
+
+#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, g.counter, g.troop-counter use {
+ r: inherit;
+}
+
+g.troop-counter-template, g.troop-counter-template use {
+ r: inherit;
+}
+
+g.weapon-symbol {
+ stroke: white;
+ stroke-width: 0.5px;
+}
+
+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;
+}
+
+[href="#counter-prone"] {
+ transform: translate(-5px, 6px);
+}
+
+[href="#counter-grenade"] {
+ transform: translate(-5px, -5px);
+}
+
+g.clone {
+ stroke: white;
+ stroke-width: 0.5px;
+ stroke-dasharray: 1;
+}
+
+g.clone [href="#counter-prone"] {
+ opacity: 0.5;
+}
+
+.removed[href="#counter-prone"] {
+ opacity: 0.5;
+}
+
+g[data-allegiance="defender"].clone {
+ fill: rgb(255, 126, 126);
+}
+
+g[data-allegiance="attacker"].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-allegiance="defender"] {
+ fill: red;
+}
+
+polygon.firing-arc[data-allegiance="attacker"] {
+ fill: green;
+}
+
+#shapes {
+ opacity: 0.1;
+}
+
+#shapes polygon {
+ stroke: none;
+}
+
+#lines polyline, #lines line {
+ fill: none;
+ stroke: black;
+ stroke-width: 0.5;
+}
+
+#lines line {
+ stroke-opacity: 0.2;
+}
+
+#lines line {
+ pointer-events: none;
+}
+
+.sight-line {
+ stroke: orangered;
+ stroke-width: 0.5px;
+ pointer-events: none;
+}
+
+#hex {
+ fill: inherit;
+ fill-opacity: inherit;
+ stroke: inherit;
+ stroke-width: inherit;
+ stroke-opacity: inherit;
+}
+
+g.counter use, use[href*="#t-"] {
+ r: 5px;
+}
+
+g.selected use {
+ animation: 1s selected 0.25s linear infinite;
+ stroke-width: 2px;
+ stroke: yellow;
+ r: 6px;
+}
+
+@keyframes selected {
+ 50% {
+ /* stroke: yellow; */
+ stroke-width: 0px;
+ r: 5px;
+ }
+}
+
+.counter[data-allegiance="attacker"] {
+ fill: green;
+}
+
+.counter[data-allegiance="defender"] {
+ fill: red;
+}
+
+.gameboard {
+ transform: translate(19px, 31px) scale(4);
+}
+
+/* Inradius and circumradius values come from the hexagon */
+.grid, g.start-locations {
+ --inradius: 8.66px;
+ --circumradius: 10px;
+ --x-step: calc(var(--inradius) * 2);
+ --y-step: calc((3 / 2) * var(--circumradius));
+}
+
+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) {
+ --translateX: calc(var(--inradius));
+}
+
+[data-x] use[href="#hex"] {
+ --scale: 1;
+ transform: scale(var(--scale));
+}
+
+[data-x]:hover use[href="#hex"] {
+ /* --scale: 0.95; */
+ opacity: 1;
+ fill: orange;
+ stroke: black;
+}
+
+[data-x]:hover use[href*="#t-"] {
+ transform: scale(1.5);
+}
+
+[data-x] {
+ --scale: 1;
+ transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale));
+}
+
+g[data-y="0"] { --i: 0; }
+g[data-y="1"] { --i: 1; }
+g[data-y="2"] { --i: 2; }
+g[data-y="3"] { --i: 3; }
+g[data-y="4"] { --i: 4; }
+g[data-y="5"] { --i: 5; }
+g[data-y="6"] { --i: 6; }
+g[data-y="7"] { --i: 7; }
+g[data-y="8"] { --i: 8; }
+g[data-y="9"] { --i: 9; }
+g[data-y="10"] { --i: 10; }
+g[data-y="11"] { --i: 11; }
+g[data-y="12"] { --i: 12; }
+g[data-y="13"] { --i: 13; }
+g[data-y="14"] { --i: 14; }
+g[data-y="15"] { --i: 15; }
+g[data-y="16"] { --i: 16; }
+g[data-y="17"] { --i: 17; }
+g[data-y="18"] { --i: 18; }
+g[data-y="19"] { --i: 19; }
+g[data-y="20"] { --i: 20; }
+g[data-y="21"] { --i: 21; }
+g[data-y="22"] { --i: 22; }
+g[data-y="23"] { --i: 23; }
+g[data-y="24"] { --i: 24; }
+g[data-y="25"] { --i: 25; }
+g[data-y="26"] { --i: 26; }
+g[data-y="27"] { --i: 27; }
+g[data-y="28"] { --i: 28; }
+g[data-y="29"] { --i: 29; }
+g[data-y="30"] { --i: 30; }
+g[data-y="31"] { --i: 31; }
+g[data-y="32"] { --i: 32; }
+g[data-y="33"] { --i: 33; }
+g[data-y="34"] { --i: 34; }
+g[data-y="35"] { --i: 35; }
+g[data-y="36"] { --i: 36; }
+g[data-y="37"] { --i: 37; }
+g[data-y="38"] { --i: 38; }
+g[data-y="39"] { --i: 39; }
+g[data-y="40"] { --i: 40; }
+g[data-y="41"] { --i: 41; }
+g[data-y="42"] { --i: 42; }
+g[data-y="43"] { --i: 43; }
+g[data-y="44"] { --i: 44; }
+g[data-y="45"] { --i: 45; }
+g[data-y="46"] { --i: 46; }
+g[data-y="47"] { --i: 47; }
+g[data-y="48"] { --i: 48; }
+g[data-y="49"] { --i: 49; }
+g[data-y="50"] { --i: 50; }
+g[data-y="51"] { --i: 51; }
+g[data-y="52"] { --i: 52; }
+g[data-y="53"] { --i: 53; }
+g[data-y="54"] { --i: 54; }
+g[data-y="55"] { --i: 55; }
+g[data-y="56"] { --i: 56; }
+g[data-y="57"] { --i: 57; }
+g[data-y="58"] { --i: 58; }
+g[data-y="59"] { --i: 59; }
+g[data-y="60"] { --i: 60; }
+g[data-y="61"] { --i: 61; }
+g[data-y="62"] { --i: 62; }
+g[data-y="63"] { --i: 63; }
+g[data-y="64"] { --i: 64; }
+g[data-y="65"] { --i: 65; }
+g[data-y="66"] { --i: 66; }
+g[data-y="67"] { --i: 67; }
+g[data-y="68"] { --i: 68; }
+g[data-y="69"] { --i: 69; }
+g[data-y="70"] { --i: 70; }
+g[data-y="71"] { --i: 71; }
+g[data-y="72"] { --i: 72; }
+g[data-y="73"] { --i: 73; }
+g[data-y="74"] { --i: 74; }
+g[data-y="75"] { --i: 75; }
+g[data-y="76"] { --i: 76; }
+
+[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; }
+
+.buildings {
+ display: none;
+}
+
+#test-arcs line, #test-arcs polyline {
+ stroke: black;
+ fill: none;
+}
+
+#test-arcs rect, #test-arcs polygon {
+ fill: black;
+ fill-opacity: 0.2;
+}