Web Dev Solutions

Catalin Mititiuc

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 +++++++ public/map.svg | 1888 +----------------------------------------------------- public/style.css | 2 +- 3 files changed, 258 insertions(+), 1858 deletions(-) create mode 100644 public/map.css (limited to 'public') 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 diff --git a/public/map.svg b/public/map.svg index d977609..3f869ce 100644 --- a/public/map.svg +++ b/public/map.svg @@ -2,180 +2,10 @@ - + + @@ -230,1691 +60,35 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/style.css b/public/style.css index a1f8da5..d63bdb9 100644 --- a/public/style.css +++ b/public/style.css @@ -49,7 +49,7 @@ div#status { div#content { display: flex; - /* display: none; */ + display: none; border-left: 1px solid gray; flex-basis: 0; /* overflow: scroll; */ -- cgit v1.2.3