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 ++++++++++++++++++++++++++++++++--- public/index.html | 86 ++++++++++++++++++++++++++++++++++----------- src/index.js | 14 ++++++++ 4 files changed, 145 insertions(+), 26 deletions(-) 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; diff --git a/public/index.html b/public/index.html index 25b0596..9db6c80 100644 --- a/public/index.html +++ b/public/index.html @@ -238,37 +238,83 @@
-
+
-

- Attacker - -

+
-
+
+
+ + + 1 + +
+
+ + + 2 + +
+
+ + + 3 + +
+
+ + + 4 + +
-

-
+
+
-
+
-

- Defender - -

+
-
+
+
+ + + 1 + +
+
+ + + 2 + +
+
+ + + 3 + +
+
+ + + 4 + +
-

-
+
+
diff --git a/src/index.js b/src/index.js index 2ab35fa..98a3c1b 100644 --- a/src/index.js +++ b/src/index.js @@ -255,6 +255,20 @@ document.querySelector('#toggle-grid-vis input').addEventListener('change', func svg.querySelector('#dots').style.display = this.checked ? 'inline' : 'none'; }); +document.querySelectorAll('#record-sheet [data-allegiance]').forEach(el => { + const squadNumbers = el.querySelectorAll(`.squad-number`); + const recordContainer = el.querySelector('.records'); + + squadNumbers.forEach(sn => + sn.addEventListener('click', function() { + recordContainer.dataset.viewSquadNumber = this.dataset.number; + squadNumbers.forEach(sn => + sn.classList[sn.dataset.number === this.dataset.number ? 'add' : 'remove']('selected') + ); + }) + ); +}); + contentVisToggleEl.addEventListener('input', toggleContentVis); contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false'); toggleContentVis(); -- cgit v1.2.3