Add physical status track to soldier records
This commit is contained in:
parent
64cbc94bdc
commit
a2d7e22c23
273
index.html
273
index.html
@ -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"> </span>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="d12">
|
|
||||||
<span class="damage-selector clear"> </span>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="d12">
|
|
||||||
<span class="damage-selector bruise"> </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>
|
||||||
|
|||||||
38
index.js
38
index.js
@ -8,29 +8,29 @@ 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(
|
|
||||||
'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
|
this.shadowRoot
|
||||||
.querySelector('input[type="number"]')
|
.querySelectorAll('p:has(input[type="number"]), .physical-status-track')
|
||||||
.addEventListener('click', e => e.stopPropagation())
|
.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(
|
customElements.define(
|
||||||
'soldier-record-block',
|
'soldier-record-block',
|
||||||
SoldierRecordBlock,
|
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 => {
|
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,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
13
style.css
@ -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 {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user