ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add physical status track to soldier records

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:28 -07:00
parent 64cbc94bdc
commit a2d7e22c23
4 changed files with 69 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

273
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Infantry Combat</title> <title>Infantry Combat Solo Basic</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
@ -27,14 +27,10 @@
</label> </label>
</template> </template>
<template id="physical-status-track">
<link rel="stylesheet" href="physical_status_track_style.css">
</template>
<template id="soldier-record-block"> <template id="soldier-record-block">
<link rel="stylesheet" href="soldier_record_block.css"> <link rel="stylesheet" href="soldier_record_block.css">
<p class="damage"> <p class="physical-status-track">
<span is="damage-block"> <span is="damage-block">
<span slot="block-number">10</span> <span slot="block-number">10</span>
<span slot="movement-points">8</span> <span slot="movement-points">8</span>
@ -89,16 +85,15 @@
</span> </span>
<span is="damage-block"> <span is="damage-block">
<span slot="block-number">DEAD</span> <span slot="block-number">DEAD</span>
<span slot="movement-points"></span>
</span> </span>
</p> </p>
<p><span>Troop Number</span> 1</p> <p><span>Troop Number</span> <slot name="troop-number">1</slot></p>
<p><span>Primary Weapon Type</span> Rifle</p> <p><span>Primary Weapon Type</span> <slot name="primary-weapon-type">Rifle</slot></p>
<ul> <ul>
<li><span>Damage</span> 4L</li> <li><span>Damage</span> <slot name="primary-weapon-damage">4L</slot></li>
<li><span>Short</span> 1-27</li> <li><span>Short</span> <slot name="primary-weapon-range-short">1-27</slot></li>
<li><span>Long</span> 28-75</li> <li><span>Long</span> <slot name="primary-weapon-range-long">28-75</slot></li>
</ul> </ul>
<p> <p>
<span>Hand Grenades</span> <span>Hand Grenades</span>
@ -155,213 +150,26 @@
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br> <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
17th Kestral Mechanized Infantry --> 17th Kestral Mechanized Infantry -->
</p> </p>
<div class="soldier-record" data-troop-number="1" data-troop-allegiance="davion"> <div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="davion">
<!-- technically called the Physical Status Track --> <span slot="troop-number">1</span>
<p class="damage"> <span slot="primary-weapon-type">Rifle</span>
<span> <span slot="primary-weapon-damage">4L</span>
10 <span slot="primary-weapon-range-short">1-27</span>
<label> <span slot="primary-weapon-range-long">28-75</span>
<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> </div>
<div class="soldier-record" data-troop-number="2" data-troop-allegiance="davion"> <div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="davion">
Troop Number: 2<br> <span slot="troop-number">2</span>
Primary Weapon Type: SMG, Damage: 3L, Short: 1-15, Long: 16-25<br> <span slot="primary-weapon-type">SMG</span>
Hand Grenades: 4 <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>
<div class="soldier-record" data-troop-number="3" data-troop-allegiance="davion"> <div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="davion">
Troop Number: 3<br> <span slot="troop-number">3</span>
Primary Weapon Type: Blazer, Damage: 4L, Short: 1-17, Long: 18-105<br> <span slot="primary-weapon-type">Blazer</span>
Hand Grenades: 4 <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> </div>
<div> <div>
@ -371,21 +179,26 @@
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br> <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
Aldebaran Home Guard --> Aldebaran Home Guard -->
</p> </p>
<div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="liao"></div> <div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="liao">
<div class="soldier-record" data-troop-number="1" data-troop-allegiance="liao"> <span slot="troop-number">1</span>
Troop Number: 1<br> <span slot="primary-weapon-type">Rifle</span>
Primary Weapon Type: Rifle, Damage: 4L, Short: 1-27, Long: 28-75<br> <span slot="primary-weapon-damage">4L</span>
HG: 4 <span slot="primary-weapon-range-short">1-27</span>
<span slot="primary-weapon-range-long">28-75</span>
</div> </div>
<div class="soldier-record" data-troop-number="2" data-troop-allegiance="liao"> <div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="liao">
Troop Number: 2<br> <span slot="troop-number">2</span>
Primary Weapon Type: SMG, Damage: 3L, Short: 1-15, Long: 16-25<br> <span slot="primary-weapon-type">SMG</span>
HG: 4 <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>
<div class="soldier-record" data-troop-number="3" data-troop-allegiance="liao"> <div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="liao">
Troop Number: 3<br> <span slot="troop-number">3</span>
Primary Weapon Type: Blazer, Damage: 4L, Short: 1-17, Long: 18-105<br> <span slot="primary-weapon-type">Blazer</span>
HG: 4 <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> </div>
</div> </div>

20
index.js
View File

@ -8,7 +8,14 @@ class SoldierRecordBlock extends HTMLDivElement {
const shadowRoot = this.attachShadow({ mode: "open" }); const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(templateContent.cloneNode(true)); shadowRoot.appendChild(templateContent.cloneNode(true));
customElements.define( this.shadowRoot
.querySelectorAll('p:has(input[type="number"]), .physical-status-track')
.forEach(el => el.addEventListener('click', e => e.stopPropagation()))
;
}
}
customElements.define(
'damage-block', 'damage-block',
class extends HTMLSpanElement { class extends HTMLSpanElement {
constructor() { constructor() {
@ -22,14 +29,7 @@ class SoldierRecordBlock extends HTMLDivElement {
} }
}, },
{ extends: 'span' } { extends: 'span' }
); );
this.shadowRoot
.querySelector('input[type="number"]')
.addEventListener('click', e => e.stopPropagation())
;
}
}
customElements.define( customElements.define(
'soldier-record-block', 'soldier-record-block',
@ -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 => { document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('click', e => {
let selectedSoldier = document.querySelector('.soldier-record.selected'); let selectedSoldier = document.querySelector('.soldier-record.selected');

4
soldier_record_block.css
View File

@ -4,7 +4,7 @@ span {
margin-right: 1em; margin-right: 1em;
} }
.damage span { .physical-status-track span {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-block; display: inline-block;
@ -12,7 +12,7 @@ span {
vertical-align: middle; vertical-align: middle;
} }
.damage span[slot="block-number"] { .physical-status-track span[slot="block-number"] {
font-family: serif; font-family: serif;
font-size: unset; font-size: unset;
} }

13
style.css
View File

@ -45,10 +45,11 @@ rect#map {
} }
polygon.firing-arc { polygon.firing-arc {
/* opacity: 0.1; */ opacity: 0.1;
fill: transparent; fill: black;
/* fill: transparent;
stroke-width: 2px; stroke-width: 2px;
stroke: black; stroke: black; */
} }
button.set-firing-arc img { button.set-firing-arc img {
@ -65,10 +66,8 @@ line.ruler {
stroke-width: 0.25in; stroke-width: 0.25in;
} }
.soldier-record span { .soldier-record {
font-size: smaller; display: inline-block;
font-family: monospace;
margin-right: 1em;
} }
.soldier-record ul { .soldier-record ul {