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

WIP: template work

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-03-24 16:42:49 -07:00
parent 1935310fbf
commit b5143808d2
5 changed files with 450 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
damage_block.css Normal file
View File

@ -0,0 +1,61 @@
.damage-selector, .damage-effect-indicator {
width: 20px;
height: 30px;
}
.damage-selector {
margin: 0;
padding: 0;
border: 1px solid black;
display: inline-block;
}
.damage-effect-indicator {
position: absolute;
margin: 0;
padding: 0;
display: block;
pointer-events: none;
font-family: monospace;
}
.damage-selector.clear {
background-color: white;
}
.damage-selector.bruise {
background-color: orange;
}
.damage-selector.lethal {
background-color: red;
}
label input[type="radio"] {
position: absolute;
opacity: 0;
margin: 0;
padding: 0;
}
label {
display: none;
margin: 0;
padding: 0;
}
label:first-of-type {
display: block;
}
label:has(input:checked) {
display: none;
}
label:has(+ label input:checked) {
display: none;
}
label:has(input:checked) + label {
display: block;
}

316
index.html
View File

@ -5,6 +5,107 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <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"> <svg viewbox="-100 -100 3450 2400" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
<pattern id="inch-mark" x="0" y="0" width="2in" height="2in" patternUnits="userSpaceOnUse"> <pattern id="inch-mark" x="0" y="0" width="2in" height="2in" patternUnits="userSpaceOnUse">
@ -55,52 +156,189 @@
17th Kestral Mechanized Infantry --> 17th Kestral Mechanized Infantry -->
</p> </p>
<div class="soldier-record" data-troop-number="1" data-troop-allegiance="davion"> <div class="soldier-record" data-troop-number="1" data-troop-allegiance="davion">
<!-- <p class="damage"> <!-- technically called the Physical Status Track -->
<span>
<label>
<input type="checkbox" /> Bruise
</label>
<label>
<input type="checkbox" /> Lethal
</label>
</span>
<span>
<label>
<input type="checkbox" />
Bruise
</label>
<label>
<input type="checkbox" />
Lethal
</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>
</span>
</p> -->
<p class="damage"> <p class="damage">
<!-- <span> --> <span>
10
<label> <label>
<input type="radio" name="d1" checked> <input type="radio" name="d1" checked>
<span class="damage-selector lethal"></span> <span class="damage-selector lethal">8</span>
</label> </label>
<label> <label>
<input type="radio" name="d1"> <input type="radio" name="d1">
<span class="damage-selector clear"></span> <span class="damage-selector clear">8</span>
</label> </label>
<label> <label>
<input type="radio" name="d1"> <input type="radio" name="d1">
<span class="damage-selector bruise"></span> <span class="damage-selector bruise">8</span>
</label> </label>
<!-- </span> --> </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>
<p><span>Troop Number</span> 1</p> <p><span>Troop Number</span> 1</p>
@ -110,7 +348,10 @@
<li><span>Short</span> 1-27</li> <li><span>Short</span> 1-27</li>
<li><span>Long</span> 28-75</li> <li><span>Long</span> 28-75</li>
</ul> </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>
<div class="soldier-record" data-troop-number="2" data-troop-allegiance="davion"> <div class="soldier-record" data-troop-number="2" data-troop-allegiance="davion">
Troop Number: 2<br> Troop Number: 2<br>
@ -130,6 +371,7 @@
<!-- 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 class="soldier-record" data-troop-number="1" data-troop-allegiance="liao"> <div class="soldier-record" data-troop-number="1" data-troop-allegiance="liao">
Troop Number: 1<br> Troop Number: 1<br>
Primary Weapon Type: Rifle, Damage: 4L, Short: 1-27, Long: 28-75<br> Primary Weapon Type: Rifle, Damage: 4L, Short: 1-27, Long: 28-75<br>

41
index.js
View File

@ -1,3 +1,42 @@
class SoldierRecordBlock extends HTMLDivElement {
constructor() {
super();
let template = document.getElementById('soldier-record-block');
let templateContent = template.content;
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())
;
}
}
customElements.define(
'soldier-record-block',
SoldierRecordBlock,
{ extends: 'div'}
);
function isEven(n) { function isEven(n) {
return n % 2 === 0; return n % 2 === 0;
} }
@ -274,6 +313,8 @@ 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');

32
soldier_record_block.css Normal file
View File

@ -0,0 +1,32 @@
span {
font-size: smaller;
font-family: monospace;
margin-right: 1em;
}
.damage span {
margin: 0;
padding: 0;
display: inline-block;
text-align: center;
vertical-align: middle;
}
.damage span[slot="block-number"] {
font-family: serif;
font-size: unset;
}
ul {
margin: 0;
padding: 0;
}
ul li {
display: inline;
margin-left: 1em;
}
p {
margin: 0;
}

55
style.css
View File

@ -45,7 +45,10 @@ rect#map {
} }
polygon.firing-arc { polygon.firing-arc {
opacity: 0.1; /* opacity: 0.1; */
fill: transparent;
stroke-width: 2px;
stroke: black;
} }
button.set-firing-arc img { button.set-firing-arc img {
@ -82,12 +85,30 @@ line.ruler {
margin: 0; margin: 0;
} }
.damage label {
margin: 0;
padding: 0;
}
label span { .damage span {
margin: 0;
padding: 0;
}
.damage > span {
display: inline-block; display: inline-block;
width: 10px; text-align: center;
height: 10px; font-family: serif;
vertical-align: middle;
}
.damage-selector {
width: 20px;
height: 30px;
margin: 0;
padding: 0;
border: 1px solid black; border: 1px solid black;
display: inline-block;
} }
.damage-selector.clear { .damage-selector.clear {
@ -102,8 +123,11 @@ label span {
background-color: red; background-color: red;
} }
label { .damage label input {
display: block; position: absolute;
opacity: 0;
margin: 0;
padding: 0;
} }
/* .soldier-record p.damage span { /* .soldier-record p.damage span {
@ -163,29 +187,24 @@ input:checked + label + input + label {
} }
*/ */
input { label {
position: absolute;
opacity: 0;
}
label span {
display: none; display: none;
} }
label:first-of-type span { label:first-of-type {
display: inline-block; display: block;
} }
label:has(input:checked) span { label:has(input:checked) {
display: none; display: none;
} }
label:has(+ label input:checked) span { label:has(+ label input:checked) {
display: none; display: none;
} }
label:has(input:checked) + label span { label:has(input:checked) + label {
display: inline-block; display: block;
} }
image#img1 { image#img1 {