Web Dev Solutions

Catalin Mititiuc

From 187faec2dfb7959c536d6847a61be912cff9275e Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Wed, 29 May 2024 18:02:18 -0700 Subject: Try to simplify trooper counter --- public/assets/css/map.css | 36 +++----- public/assets/css/style.css | 15 +-- public/assets/images/counters.svg | 43 +++++++-- public/assets/images/scenario-side_show.svg | 136 ++++++++++++++++++++++------ public/index.html | 2 +- 5 files changed, 167 insertions(+), 65 deletions(-) (limited to 'public') diff --git a/public/assets/css/map.css b/public/assets/css/map.css index 8f45936..47e5bfe 100644 --- a/public/assets/css/map.css +++ b/public/assets/css/map.css @@ -47,10 +47,6 @@ polyline.move-trace { /* fill: #bacae3; */ } -#counter-base { - r: inherit; -} - g.troop-counter, g.counter, g.troop-counter use { r: inherit; } @@ -59,7 +55,7 @@ g.troop-counter-template, g.troop-counter-template use { r: inherit; } -g.weapon-symbol { +g.weapon-symbol :not(use[href="#counter-base"]) { stroke: white; stroke-width: 0.5px; } @@ -107,18 +103,27 @@ g[data-allegiance="attacker"].clone { fill: rgb(126, 126, 255); } -text.counter, #troop-counter text { +.counter, #troop-counter text { + /* transform: translateY(4px); */ +} + +g.counter use.troop-number, g.counter use.squad-number { font-size: 12px; font-weight: bold; - fill: white; - font-family: sans-serif; + font-family: monospace; cursor: default; text-anchor: middle; - transform: translateY(4px); pointer-events: none; user-select: none; + --text-fill: white; + --translateY: 4px; } +/* .primary-weapon { + stroke: white; + stroke-width: 0.5px; +} */ + polygon.firing-arc[data-allegiance="defender"] { fill: red; } @@ -167,17 +172,6 @@ g.counter use { r: 5px; } -g.counter text.troop-number, g.counter text.squad-number { - fill: black; - font-size: 6px; - font-family: monospace; - font-weight: bold; - cursor: default; - text-anchor: middle; - pointer-events: none; - user-select: none; -} - g.counter use.troop-number, g.counter use.squad-number { --scale: 0.4; } @@ -194,7 +188,7 @@ g.counter .troop-number, g.counter .squad-number { transform: translate(var(--translateX), 0) scale(var(--scale)); } -g.selected use[href="#counter-base"] { +g.selected use.primary-weapon { animation: 1s selected 0.25s linear infinite; stroke-width: 2px; stroke: yellow; diff --git a/public/assets/css/style.css b/public/assets/css/style.css index cde2c33..582e118 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -181,11 +181,18 @@ polygon.firing-arc[data-allegiance="attacker"] { fill: blue; } -.weapon-icon { +.soldier-record svg use { + r: 5px; + stroke: none; +} + + +.soldier-record svg.weapon-icon use { stroke: white; stroke-width: 0.5px; } + .soldier-record svg { width: 20px; height: 20px; @@ -210,12 +217,6 @@ polygon.firing-arc[data-allegiance="attacker"] { font-family: monospace; } -.weapon-symbol :not(use[href="#counter-base"]) { - stroke: white; - stroke-width: 0.5; - fill: none; -} - .soldier-record.selected { background-color: khaki; } diff --git a/public/assets/images/counters.svg b/public/assets/images/counters.svg index ec9cff6..85936d0 100644 --- a/public/assets/images/counters.svg +++ b/public/assets/images/counters.svg @@ -1,7 +1,36 @@ - + + + + + 1 + + + + 2 + + + + 3 + + + + 4 + + + + 5 + + + + 6 + + + + 7 + @@ -15,22 +44,22 @@ - - + + - - + + - - + + diff --git a/public/assets/images/scenario-side_show.svg b/public/assets/images/scenario-side_show.svg index f18e689..543475e 100644 --- a/public/assets/images/scenario-side_show.svg +++ b/public/assets/images/scenario-side_show.svg @@ -25,7 +25,6 @@ - @@ -45,13 +44,36 @@ - 1 - 2 - 3 - 4 - 5 - 6 - 7 + + + + + 1 + + + + 2 + + + + 3 + + + + 4 + + + + 5 + + + + 6 + + + + 7 + @@ -64,19 +86,22 @@ - + + - + - + + - + + @@ -114,51 +139,104 @@ - - - + + + + - + + + + + - + + + + + - + + + + + - + + + + + - + + + + + - + + + + + - + + + + + - + + + + + - + + + + + - + + + + + - + + + + + - + + + + + - + + + + + @@ -1952,6 +2030,6 @@ - + diff --git a/public/index.html b/public/index.html index 4a5752d..7ab9f15 100644 --- a/public/index.html +++ b/public/index.html @@ -247,7 +247,7 @@ -- cgit v1.2.3