1 files changed, 268 insertions, 26 deletions
diff --git a/index.html b/index.html
index 36594b0..179d02a 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,107 @@
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
+    <template id="damage-block">
+      <link rel="stylesheet" href="damage_block.css">
+
+      <slot name="block-number"></slot>
+      <span class="damage-effect-indicator">
+        <slot name="firing-modifier"></slot><br>
+        <slot name="movement-points"></slot>
+      </span>
+      <label>
+        <input type="radio" name="damage" checked>
+        <span class="damage-selector lethal"></span>
+      </label>
+      <label>
+        <input type="radio" name="damage">
+        <span class="damage-selector clear"></span>
+      </label>
+      <label>
+        <input type="radio" name="damage">
+        <span class="damage-selector bruise"></span>
+      </label>
+    </template>
+
+    <template id="physical-status-track">
+      <link rel="stylesheet" href="physical_status_track_style.css">
+    </template>
+
+    <template id="soldier-record-block">
+      <link rel="stylesheet" href="soldier_record_block.css">
+
+      <p class="damage">
+        <span is="damage-block">
+          <span slot="block-number">10</span>
+          <span slot="movement-points">8</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">9</span>
+          <span slot="movement-points">8</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">8</span>
+          <span slot="movement-points">8</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">7</span>
+          <span slot="movement-points">8</span>
+          <span slot="firing-modifier">+1</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">6</span>
+          <span slot="movement-points">7</span>
+          <span slot="firing-modifier">+1</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">5</span>
+          <span slot="movement-points">7</span>
+          <span slot="firing-modifier">+2</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">4</span>
+          <span slot="movement-points">6</span>
+          <span slot="firing-modifier">+2</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">3</span>
+          <span slot="movement-points">6</span>
+          <span slot="firing-modifier">+2</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">2</span>
+          <span slot="movement-points">5</span>
+          <span slot="firing-modifier">+3</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">1</span>
+          <span slot="movement-points">4</span>
+          <span slot="firing-modifier">+3</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">0</span>
+          <span slot="movement-points">None</span>
+          <span slot="firing-modifier">0</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">DEAD</span>
+          <span slot="movement-points"></span>
+        </span>
+      </p>
+
+      <p><span>Troop Number</span> 1</p>
+      <p><span>Primary Weapon Type</span> Rifle</p>
+      <ul>
+        <li><span>Damage</span> 4L</li>
+        <li><span>Short</span> 1-27</li>
+        <li><span>Long</span> 28-75</li>
+      </ul>
+      <p>
+        <span>Hand Grenades</span>
+        <input type="number" min="0" max="4" value="4" />
+      </p>
+    </template>
+
     <svg viewbox="-100 -100 3450 2400" xmlns="http://www.w3.org/2000/svg">
       <defs>
         <pattern id="inch-mark" x="0" y="0" width="2in" height="2in" patternUnits="userSpaceOnUse">
@@ -55,52 +156,189 @@
           17th Kestral Mechanized Infantry -->
         </p>
         <div class="soldier-record" data-troop-number="1" data-troop-allegiance="davion">
-          <!-- <p class="damage">
+          <!-- technically called the Physical Status Track -->
+          <p class="damage">
+            <span>
+              10
+              <label>
+                <input type="radio" name="d1" checked>
+                <span class="damage-selector lethal">8</span>
+              </label>
+              <label>
+                <input type="radio" name="d1">
+                <span class="damage-selector clear">8</span>
+              </label>
+              <label>
+                <input type="radio" name="d1">
+                <span class="damage-selector bruise">8</span>
+              </label>
+            </span>
+            <span>
+              9
+              <label>
+                <input type="radio" name="d2" checked>
+                <span class="damage-selector lethal">8</span>
+              </label>
+              <label>
+                <input type="radio" name="d2">
+                <span class="damage-selector clear">8</span>
+              </label>
+              <label>
+                <input type="radio" name="d2">
+                <span class="damage-selector bruise">8</span>
+              </label>
+            </span>
             <span>
+              8
               <label>
-                <input type="checkbox" /> Bruise
+                <input type="radio" name="d3" checked>
+                <span class="damage-selector lethal">8</span>
               </label>
               <label>
-                <input type="checkbox" /> Lethal
+                <input type="radio" name="d3">
+                <span class="damage-selector clear">8</span>
+              </label>
+              <label>
+                <input type="radio" name="d3">
+                <span class="damage-selector bruise">8</span>
               </label>
             </span>
             <span>
+              7
+              <label>
+                <input type="radio" name="d4" checked>
+                <span class="damage-selector lethal">+1<br>8</span>
+              </label>
               <label>
-                <input type="checkbox" />
-                Bruise
+                <input type="radio" name="d4">
+                <span class="damage-selector clear">+1<br>8</span>
               </label>
               <label>
-                <input type="checkbox" />
-                Lethal
+                <input type="radio" name="d4">
+                <span class="damage-selector bruise">+1<br>8</span>
               </label>
             </span>
-          </p> -->
-          <!-- <p class="damage">
             <span>
-              <input type="radio" name="d1" id="clear" checked>
-              <label for="clear">lethal</label>
-              <input type="radio" name="d1" id="bruise">
-              <label for="bruise">clear</label>
-              <input type="radio" name="d1" id="lethal">
-              <label for="lethal">bruise</label>
+              6
+              <label>
+                <input type="radio" name="d5" checked>
+                <span class="damage-selector lethal">+1<br>7</span>
+              </label>
+              <label>
+                <input type="radio" name="d5">
+                <span class="damage-selector clear">+1<br>7</span>
+              </label>
+              <label>
+                <input type="radio" name="d5">
+                <span class="damage-selector bruise">+1<br>7</span>
+              </label>
             </span>
-          </p> -->
 
-          <p class="damage">
-            <!-- <span> -->
+            <span>
+              5
               <label>
-                <input type="radio" name="d1" checked>
-                <span class="damage-selector lethal"></span>
+                <input type="radio" name="d6" checked>
+                <span class="damage-selector lethal">+2<br>7</span>
               </label>
               <label>
-                <input type="radio" name="d1">
-                <span class="damage-selector clear"></span>
+                <input type="radio" name="d6">
+                <span class="damage-selector clear">+2<br>7</span>
               </label>
               <label>
-                <input type="radio" name="d1">
-                <span class="damage-selector bruise"></span>
+                <input type="radio" name="d6">
+                <span class="damage-selector bruise">+2<br>7</span>
               </label>
-            <!-- </span> -->
+            </span>
+            <span>
+              4
+              <label>
+                <input type="radio" name="d7" checked>
+                <span class="damage-selector lethal">+2<br>6</span>
+              </label>
+              <label>
+                <input type="radio" name="d7">
+                <span class="damage-selector clear">+2<br>6</span>
+              </label>
+              <label>
+                <input type="radio" name="d7">
+                <span class="damage-selector bruise">+2<br>6</span>
+              </label>
+            </span>
+            <span>
+              3
+              <label>
+                <input type="radio" name="d8" checked>
+                <span class="damage-selector lethal">+2<br>6</span>
+              </label>
+              <label>
+                <input type="radio" name="d8">
+                <span class="damage-selector clear">+2<br>6</span>
+              </label>
+              <label>
+                <input type="radio" name="d8">
+                <span class="damage-selector bruise">+2<br>6</span>
+              </label>
+            </span>
+            <span>
+              2
+              <label>
+                <input type="radio" name="d9" checked>
+                <span class="damage-selector lethal">+3<br>5</span>
+              </label>
+              <label>
+                <input type="radio" name="d9">
+                <span class="damage-selector clear">+3<br>5</span>
+              </label>
+              <label>
+                <input type="radio" name="d9">
+                <span class="damage-selector bruise">+3<br>5</span>
+              </label>
+            </span>
+            <span>
+              1
+              <label>
+                <input type="radio" name="d10" checked>
+                <span class="damage-selector lethal">+3<br>4</span>
+              </label>
+              <label>
+                <input type="radio" name="d10">
+                <span class="damage-selector clear">+3<br>4</span>
+              </label>
+              <label>
+                <input type="radio" name="d10">
+                <span class="damage-selector bruise">+3<br>4</span>
+              </label>
+            </span>
+            <span>
+              0
+              <label>
+                <input type="radio" name="d11" checked>
+                <span class="damage-selector lethal">None<br>0</span>
+              </label>
+              <label>
+                <input type="radio" name="d11">
+                <span class="damage-selector clear">None<br>0</span>
+              </label>
+              <label>
+                <input type="radio" name="d11">
+                <span class="damage-selector bruise">None<br>0</span>
+              </label>
+            </span>
+            <span>
+              DEAD
+              <label>
+                <input type="radio" name="d12" checked>
+                <span class="damage-selector lethal">&nbsp;</span>
+              </label>
+              <label>
+                <input type="radio" name="d12">
+                <span class="damage-selector clear">&nbsp;</span>
+              </label>
+              <label>
+                <input type="radio" name="d12">
+                <span class="damage-selector bruise">&nbsp;</span>
+              </label>
+            </span>
           </p>
 
           <p><span>Troop Number</span> 1</p>
@@ -110,7 +348,10 @@
             <li><span>Short</span> 1-27</li>
             <li><span>Long</span> 28-75</li>
           </ul>
-          <p><span>Hand Grenades</span> 4</p>
+          <p>
+            <span>Hand Grenades</span>
+            <input type="number" min="0" max="4" value="4" />
+          </p>
         </div>
         <div class="soldier-record" data-troop-number="2" data-troop-allegiance="davion">
           Troop Number: 2<br>
@@ -130,6 +371,7 @@
           <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
           Aldebaran Home Guard -->
         </p>
+        <div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="liao"></div>
         <div class="soldier-record" data-troop-number="1" data-troop-allegiance="liao">
           Troop Number: 1<br>
           Primary Weapon Type: Rifle, Damage: 4L, Short: 1-27, Long: 28-75<br>