1 files changed, 66 insertions, 20 deletions
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>