Web Dev Solutions

Catalin Mititiuc

From 4cf7aaab807f36721416eedfe5f9fab3f0c55e20 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Mon, 8 Jul 2024 18:13:37 -0700 Subject: View squad records --- public/assets/css/map.css | 4 +-- public/assets/css/style.css | 67 ++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 65 insertions(+), 6 deletions(-) (limited to 'public/assets/css') diff --git a/public/assets/css/map.css b/public/assets/css/map.css index c44f637..bb6b0a8 100644 --- a/public/assets/css/map.css +++ b/public/assets/css/map.css @@ -399,8 +399,8 @@ g[data-y="76"] { --i: 76; } .furniture, .stairs { fill: lightgray; - stroke: gray; - stroke-width: 0.25px; + stroke: #666; + stroke-width: 0.5px; } .building path.walls { diff --git a/public/assets/css/style.css b/public/assets/css/style.css index c941eda..33adcf0 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -158,11 +158,11 @@ polygon.firing-arc[data-allegiance="attacker"] { fill: none; } -.soldier-record[data-allegiance="defender"] svg { +.soldier-record[data-allegiance="defender"] svg, #record-sheet [data-allegiance="defender"] svg { fill: red; } -.soldier-record[data-allegiance="attacker"] svg { +.soldier-record[data-allegiance="attacker"] svg, #record-sheet [data-allegiance="attacker"] svg { fill: blue; } @@ -200,7 +200,7 @@ polygon.firing-arc[data-allegiance="attacker"] { height: 30px; } -.soldier-record svg text { +.soldier-record svg text, #record-sheet svg text { fill: white; text-anchor: middle; font-size: 10px; @@ -276,6 +276,27 @@ div#content { overflow-y: auto; } +.soldier-record { + display: none; +} + +#record-sheet [data-view-squad-number="1"].records .soldier-record[data-squad="1"] { + display: block; +} + +#record-sheet [data-view-squad-number="2"].records .soldier-record[data-squad="2"] { + display: block; +} + + +#record-sheet [data-view-squad-number="3"].records .soldier-record[data-squad="3"] { + display: block; +} + +#record-sheet [data-view-squad-number="4"].records .soldier-record[data-squad="4"] { + display: block; +} + #record-sheet .name { text-transform: capitalize; } @@ -287,12 +308,15 @@ div#content { flex-direction: column; } -#record-sheet > div > p { +#record-sheet > div > div:first-of-type { margin: 0; margin-top: 0px; margin-bottom: 1px; padding: 6px 2px; background-color: lightgray; + display: flex; + flex-direction: row; + justify-content: space-around; } #record-sheet .soldier-record { @@ -308,6 +332,41 @@ div#content { margin-bottom: 0; } +#record-sheet .squad-number svg { + width: 15px; + height: 15px; + padding: 2px; + border-radius: 3px; + background-color: initial; + vertical-align: middle; +} + +#record-sheet [data-allegiance="attacker"] .squad-number.selected svg, +#record-sheet [data-allegiance="attacker"] .squad-number:hover svg { + fill: white; + background-color: blue; +} + +#record-sheet [data-allegiance="defender"] .squad-number.selected svg, +#record-sheet [data-allegiance="defender"] .squad-number:hover svg { + fill: white; + background-color: red; +} + +#record-sheet .squad-number.selected svg circle { + fill: white; +} + +#record-sheet [data-allegiance="attacker"] .squad-number.selected svg text, +#record-sheet [data-allegiance="attacker"] .squad-number:hover svg text { + fill: blue; +} + +#record-sheet [data-allegiance="defender"] .squad-number.selected svg text, +#record-sheet [data-allegiance="defender"] .squad-number:hover svg text { + fill: red; +} + .die { width: 31px; height: 31px; -- cgit v1.2.3