View squad records

public/assets/css/map.css

@@ -399,8 +399,8 @@ g[data-y="76"] { --i: 76; }
 
 .furniture, .stairs {
   fill: lightgray;
-  stroke: gray;
+  stroke: #666;
-  stroke-width: 0.25px;
+  stroke-width: 0.5px;
 }
 
 .building path.walls {

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;

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>
+        <div>
-          <strong class="name">Attacker</strong>
+          <div><strong class="name">Attacker</strong></div>
-          <button type="button" class="end-move" data-allegiance="attacker">
+          <div><button type="button" class="end-move" data-allegiance="attacker">
             End Movement
-          </button>
+          </button></div>
-          <button type="button" class="end-turn" data-allegiance="defender">
+          <div><button type="button" class="end-turn" data-allegiance="defender">
             End Turn
-          </button>
+          </button></div>
-          <br>
+          <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>
-        <div class="records"></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>
+        <div>
-          <strong class="name">Defender</strong>
+          <div><strong class="name">Defender</strong></div>
-          <button type="button" class="end-move" data-allegiance="defender">
+          <div><button type="button" class="end-move" data-allegiance="defender">
             End Movement
-          </button>
+          </button></div>
-          <button type="button" class="end-turn" data-allegiance="attacker">
+          <div><button type="button" class="end-turn" data-allegiance="attacker">
             End Turn
-          </button>
+          </button></div>
-          <br>
+          <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>
-        <div class="records"></div>
+        <div class="records" data-view-squad-number="1"></div>
       </div>
     </div>
   </div>

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();