Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-07-08 18:13:37 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-07-08 18:13:37 -0700
commit4cf7aaab807f36721416eedfe5f9fab3f0c55e20 (patch)
treecf1bd30a44f4c143daf42906c845b74f27539aac
parent16b987f46f446398eececf72aa01c551305948d3 (diff)
View squad records
Diffstat
-rw-r--r--public/assets/css/map.css4
-rw-r--r--public/assets/css/style.css67
-rw-r--r--public/index.html86
-rw-r--r--src/index.js14
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 @@
</div>
<div id="record-sheet">
- <div id="attacker-record">
+ <div id="attacker-record" data-allegiance="attacker">
<!-- <img class="logo" src="logo-davion.png" /> -->
- <p>
- <strong class="name">Attacker</strong>
- <button type="button" class="end-move" data-allegiance="attacker">
+ <div>
+ <div><strong class="name">Attacker</strong></div>
+ <div><button type="button" class="end-move" data-allegiance="attacker">
End Movement
- </button>
- <button type="button" class="end-turn" data-allegiance="defender">
+ </button></div>
+ <div><button type="button" class="end-turn" data-allegiance="defender">
End Turn
- </button>
- <br>
+ </button></div>
+ <div class="squad-number selected" data-number="1">
+ <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+ <circle id="counter-base" r="5" cx="0" cy="0"></circle>
+ <text>1</text>
+ </svg>
+ </div>
+ <div class="squad-number" data-number="2">
+ <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+ <circle id="counter-base" r="5" cx="0" cy="0"></circle>
+ <text>2</text>
+ </svg>
+ </div>
+ <div class="squad-number" data-number="3">
+ <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+ <circle id="counter-base" r="5" cx="0" cy="0"></circle>
+ <text>3</text>
+ </svg>
+ </div>
+ <div class="squad-number" data-number="4">
+ <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+ <circle id="counter-base" r="5" cx="0" cy="0"></circle>
+ <text>4</text>
+ </svg>
+ </div>
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
17th Kestral Mechanized Infantry -->
- </p>
- <div class="records"></div>
+ </div>
+ <div class="records" data-view-squad-number="1"></div>
</div>
- <div id="defender-record">
+ <div id="defender-record" data-allegiance="defender">
<!-- <img class="logo" src="logo-liao.png" /> -->
- <p>
- <strong class="name">Defender</strong>
- <button type="button" class="end-move" data-allegiance="defender">
+ <div>
+ <div><strong class="name">Defender</strong></div>
+ <div><button type="button" class="end-move" data-allegiance="defender">
End Movement
- </button>
- <button type="button" class="end-turn" data-allegiance="attacker">
+ </button></div>
+ <div><button type="button" class="end-turn" data-allegiance="attacker">
End Turn
- </button>
- <br>
+ </button></div>
+ <div class="squad-number selected" data-number="1">
+ <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+ <circle id="counter-base" r="5" cx="0" cy="0"></circle>
+ <text>1</text>
+ </svg>
+ </div>
+ <div class="squad-number" data-number="2">
+ <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+ <circle id="counter-base" r="5" cx="0" cy="0"></circle>
+ <text>2</text>
+ </svg>
+ </div>
+ <div class="squad-number" data-number="3">
+ <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+ <circle id="counter-base" r="5" cx="0" cy="0"></circle>
+ <text>3</text>
+ </svg>
+ </div>
+ <div class="squad-number" data-number="4">
+ <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+ <circle id="counter-base" r="5" cx="0" cy="0"></circle>
+ <text>4</text>
+ </svg>
+ </div>
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
Aldebaran Home Guard -->
- </p>
- <div class="records"></div>
+ </div>
+ <div class="records" data-view-squad-number="1"></div>
</div>
</div>
</div>
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();