From a2d7e22c2375164e6a384e597a669cd3600e2f32 Mon Sep 17 00:00:00 2001
From: Catalin Constantin Mititiuc <webdevcat@proton.me>
Date: Mon, 16 Jun 2025 22:41:28 -0700
Subject: [PATCH] Add physical status track to soldier records

---
 index.html               | 273 ++++++---------------------------------
 index.js                 |  38 +++---
 soldier_record_block.css |   4 +-
 style.css                |  13 +-
 4 files changed, 69 insertions(+), 259 deletions(-)
diff --git a/index.html b/index.html
index 179d02a..3f3ed56 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Infantry Combat</title>
+    <title>Infantry Combat Solo Basic</title>
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
@@ -27,14 +27,10 @@
       </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">
+      <p class="physical-status-track">
         <span is="damage-block">
           <span slot="block-number">10</span>
           <span slot="movement-points">8</span>
@@ -89,16 +85,15 @@
         </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>
+      <p><span>Troop Number</span> <slot name="troop-number">1</slot></p>
+      <p><span>Primary Weapon Type</span> <slot name="primary-weapon-type">Rifle</slot></p>
       <ul>
-        <li><span>Damage</span> 4L</li>
-        <li><span>Short</span> 1-27</li>
-        <li><span>Long</span> 28-75</li>
+        <li><span>Damage</span> <slot name="primary-weapon-damage">4L</slot></li>
+        <li><span>Short</span> <slot name="primary-weapon-range-short">1-27</slot></li>
+        <li><span>Long</span> <slot name="primary-weapon-range-long">28-75</slot></li>
       </ul>
       <p>
         <span>Hand Grenades</span>
@@ -155,213 +150,26 @@
           <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
           17th Kestral Mechanized Infantry -->
         </p>
-        <div class="soldier-record" data-troop-number="1" data-troop-allegiance="davion">
-          <!-- 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="radio" name="d3" checked>
-                <span class="damage-selector lethal">8</span>
-              </label>
-              <label>
-                <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="radio" name="d4">
-                <span class="damage-selector clear">+1<br>8</span>
-              </label>
-              <label>
-                <input type="radio" name="d4">
-                <span class="damage-selector bruise">+1<br>8</span>
-              </label>
-            </span>
-            <span>
-              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>
-
-            <span>
-              5
-              <label>
-                <input type="radio" name="d6" checked>
-                <span class="damage-selector lethal">+2<br>7</span>
-              </label>
-              <label>
-                <input type="radio" name="d6">
-                <span class="damage-selector clear">+2<br>7</span>
-              </label>
-              <label>
-                <input type="radio" name="d6">
-                <span class="damage-selector bruise">+2<br>7</span>
-              </label>
-            </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>
-          <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>
+        <div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="davion">
+          <span slot="troop-number">1</span>
+          <span slot="primary-weapon-type">Rifle</span>
+          <span slot="primary-weapon-damage">4L</span>
+          <span slot="primary-weapon-range-short">1-27</span>
+          <span slot="primary-weapon-range-long">28-75</span>
         </div>
-        <div class="soldier-record" data-troop-number="2" data-troop-allegiance="davion">
-          Troop Number: 2<br>
-          Primary Weapon Type: SMG, Damage: 3L, Short: 1-15, Long: 16-25<br>
-          Hand Grenades: 4
+        <div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="davion">
+          <span slot="troop-number">2</span>
+          <span slot="primary-weapon-type">SMG</span>
+          <span slot="primary-weapon-damage">3L</span>
+          <span slot="primary-weapon-range-short">1-15</span>
+          <span slot="primary-weapon-range-long">16-25</span>
         </div>
-        <div class="soldier-record" data-troop-number="3" data-troop-allegiance="davion">
-          Troop Number: 3<br>
-          Primary Weapon Type: Blazer, Damage: 4L, Short: 1-17, Long: 18-105<br>
-          Hand Grenades: 4
+        <div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="davion">
+          <span slot="troop-number">3</span>
+          <span slot="primary-weapon-type">Blazer</span>
+          <span slot="primary-weapon-damage">4L</span>
+          <span slot="primary-weapon-range-short">1-17</span>
+          <span slot="primary-weapon-range-long">18-105</span>
         </div>
       </div>
       <div>
@@ -371,21 +179,26 @@
           <!-- 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>
-          HG: 4
+        <div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="liao">
+          <span slot="troop-number">1</span>
+          <span slot="primary-weapon-type">Rifle</span>
+          <span slot="primary-weapon-damage">4L</span>
+          <span slot="primary-weapon-range-short">1-27</span>
+          <span slot="primary-weapon-range-long">28-75</span>
         </div>
-        <div class="soldier-record" data-troop-number="2" data-troop-allegiance="liao">
-          Troop Number: 2<br>
-          Primary Weapon Type: SMG, Damage: 3L, Short: 1-15, Long: 16-25<br>
-          HG: 4
+        <div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="liao">
+          <span slot="troop-number">2</span>
+          <span slot="primary-weapon-type">SMG</span>
+          <span slot="primary-weapon-damage">3L</span>
+          <span slot="primary-weapon-range-short">1-15</span>
+          <span slot="primary-weapon-range-long">16-25</span>
         </div>
-        <div class="soldier-record" data-troop-number="3" data-troop-allegiance="liao">
-          Troop Number: 3<br>
-          Primary Weapon Type: Blazer, Damage: 4L, Short: 1-17, Long: 18-105<br>
-          HG: 4
+        <div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="liao">
+          <span slot="troop-number">3</span>
+          <span slot="primary-weapon-type">Blazer</span>
+          <span slot="primary-weapon-damage">4L</span>
+          <span slot="primary-weapon-range-short">1-17</span>
+          <span slot="primary-weapon-range-long">18-105</span>
         </div>
       </div>
     </div>
diff --git a/index.js b/index.js
index 695eae5..15764a1 100644
--- a/index.js
+++ b/index.js
@@ -8,29 +8,29 @@ class SoldierRecordBlock extends HTMLDivElement {
     const shadowRoot = this.attachShadow({ mode: "open" });
     shadowRoot.appendChild(templateContent.cloneNode(true));
 
-    customElements.define(
-      'damage-block',
-      class extends HTMLSpanElement {
-        constructor() {
-          super();
-
-          let template = document.getElementById('damage-block');
-          let templateContent = template.content;
-
-          const shadowRoot = this.attachShadow({ mode: "open" });
-          shadowRoot.appendChild(templateContent.cloneNode(true));
-        }
-      },
-      { extends: 'span' }
-    );
-
     this.shadowRoot
-      .querySelector('input[type="number"]')
-      .addEventListener('click', e => e.stopPropagation())
+      .querySelectorAll('p:has(input[type="number"]), .physical-status-track')
+      .forEach(el => el.addEventListener('click', e => e.stopPropagation()))
       ;
   }
 }
 
+customElements.define(
+  'damage-block',
+  class extends HTMLSpanElement {
+    constructor() {
+      super();
+
+      let template = document.getElementById('damage-block');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({ mode: "open" });
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+    }
+  },
+  { extends: 'span' }
+);
+
 customElements.define(
   'soldier-record-block',
   SoldierRecordBlock,
@@ -313,8 +313,6 @@ document.querySelectorAll('.soldier-record').forEach(el =>
   })
 );
 
-document.querySelectorAll('#record-sheet .damage').forEach(el => el.addEventListener('click', e => e.stopPropagation()));
-
 document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('click', e => {
   let selectedSoldier = document.querySelector('.soldier-record.selected');
 
diff --git a/soldier_record_block.css b/soldier_record_block.css
index 02b5241..12925b2 100644
--- a/soldier_record_block.css
+++ b/soldier_record_block.css
@@ -4,7 +4,7 @@ span {
   margin-right: 1em;
 }
 
-.damage span {
+.physical-status-track span {
   margin: 0;
   padding: 0;
   display: inline-block;
@@ -12,7 +12,7 @@ span {
   vertical-align: middle;
 }
 
-.damage span[slot="block-number"] {
+.physical-status-track span[slot="block-number"] {
   font-family: serif;
   font-size: unset;
 }
diff --git a/style.css b/style.css
index 0f08fff..51481b9 100644
--- a/style.css
+++ b/style.css
@@ -45,10 +45,11 @@ rect#map {
 }
 
 polygon.firing-arc {
-  /* opacity: 0.1; */
-  fill: transparent;
+  opacity: 0.1;
+  fill: black;
+  /* fill: transparent;
   stroke-width: 2px;
-  stroke: black;
+  stroke: black; */
 }
 
 button.set-firing-arc img {
@@ -65,10 +66,8 @@ line.ruler {
   stroke-width: 0.25in;
 }
 
-.soldier-record span {
-  font-size: smaller;
-  font-family: monospace;
-  margin-right: 1em;
+.soldier-record {
+  display: inline-block;
 }
 
 .soldier-record ul {
