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

Use checkboxes for grenades

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-04-18 19:13:37 -07:00
parent ac71447aee
commit ea2ff860fa
4 changed files with 69 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
public/index.html
View File

@ -83,9 +83,12 @@
<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>
<p class="grenades">
<span>Hand Grenades</span>
<input type="number" min="0" max="4" value="4" />
<label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
<label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
<label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
<label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
</p>
</template>
@ -186,49 +189,49 @@
17th Kestral Mechanized Infantry -->
</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="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></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 is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="davion">
<span slot="troop-number">2</span>
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>2</text></svg></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 is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="davion">
<span slot="troop-number">3</span>
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>3</text></svg></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 is="soldier-record-block" class="soldier-record" data-troop-number="4" data-troop-allegiance="davion">
<span slot="troop-number">4</span>
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>4</text></svg></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 is="soldier-record-block" class="soldier-record" data-troop-number="5" data-troop-allegiance="davion">
<span slot="troop-number">5</span>
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>5</text></svg></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 is="soldier-record-block" class="soldier-record" data-troop-number="6" data-troop-allegiance="davion">
<span slot="troop-number">6</span>
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>6</text></svg></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 is="soldier-record-block" class="soldier-record" data-troop-number="7" data-troop-allegiance="davion">
<span slot="troop-number">7</span>
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>7</text></svg></span>
<span slot="primary-weapon-type">Blazer</span>
<span slot="primary-weapon-damage">4L</span>
<span slot="primary-weapon-range-short">1-17</span>
@ -250,49 +253,49 @@
Aldebaran Home Guard -->
</p>
<div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="liao">
<span slot="troop-number">1</span>
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></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 is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="liao">
<span slot="troop-number">2</span>
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>2</text></svg></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 is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="liao">
<span slot="troop-number">3</span>
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>3</text></svg></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 is="soldier-record-block" class="soldier-record" data-troop-number="4" data-troop-allegiance="liao">
<span slot="troop-number">4</span>
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>4</text></svg></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 is="soldier-record-block" class="soldier-record" data-troop-number="5" data-troop-allegiance="liao">
<span slot="troop-number">5</span>
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>5</text></svg></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 is="soldier-record-block" class="soldier-record" data-troop-number="6" data-troop-allegiance="liao">
<span slot="troop-number">6</span>
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>6</text></svg></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 is="soldier-record-block" class="soldier-record" data-troop-number="7" data-troop-allegiance="liao">
<span slot="troop-number">7</span>
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>7</text></svg></span>
<span slot="primary-weapon-type">Blazer</span>
<span slot="primary-weapon-damage">4L</span>
<span slot="primary-weapon-range-short">1-17</span>

20
public/soldier_record_block.css
View File

@ -33,3 +33,23 @@ ul li {
p {
margin: 0;
}
.grenades input {
display: none;
}
.grenades svg {
width: 14px;
height: 14px;
vertical-align: bottom;
}
.grenades svg circle {
fill: none;
stroke: black;
stroke-width: 2px;
}
.grenades input:checked + svg circle {
fill: gray;
}

5
public/soldier_record_block.js
View File

@ -47,6 +47,11 @@ customElements.define(
shadowRoot.appendChild(templateContent.cloneNode(true));
}
connectedCallback() {
// this.shadowRoot.querySelectorAll('.grenades *').forEach(el => el.addEventListener('click', e => e.stopPropagation()));
this.shadowRoot.querySelector('.grenades').addEventListener('click', e => e.stopPropagation());
}
},
{ extends: 'div' }
);

33
public/style.css
View File

@ -355,19 +355,36 @@ button.set-firing-arc img {
background-color: white;
}
.soldier-record [slot="troop-number"] {
color: white;
.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] svg {
fill: green;
}
.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] svg {
fill: red;
}
.soldier-record [slot="troop-number"] svg {
width: 20px;
height: 20px;
background-color: initial;
vertical-align: middle;
}
.soldier-record [slot="troop-number"] svg text {
fill: white;
text-anchor: middle;
font-size: 10px;
font-weight: bold;
border-radius: 10px;
padding: 0 4px;
transform: translateY(3.5px);
font-family: monospace;
}
.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] {
background-color: red;
.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] img {
fill: red;
}
.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] {
background-color: green;
.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] img {
fill: green;
}
.soldier-record.selected {