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

Generate weapon data dynamically from counters

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:30 -07:00
parent 19b1a0aadd
commit 868ea94010
4 changed files with 84 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
public/assets/css/map.css
View File

@ -173,11 +173,38 @@ polygon.firing-arc[data-allegiance="attacker"] {
stroke-opacity: inherit;
}
g.counter use, use[href*="#t-"] {
g.counter use {
r: 5px;
}
g.selected use {
g.counter text.troop-number, g.counter text.squad-number {
fill: black;
font-size: 6px;
font-family: monospace;
font-weight: bold;
cursor: default;
text-anchor: middle;
pointer-events: none;
user-select: none;
}
g.counter use.troop-number, g.counter use.squad-number {
--scale: 0.4;
}
g.counter .troop-number {
--translateX: -4px;
}
g.counter .squad-number {
--translateX: 4px;
}
g.counter .troop-number, g.counter .squad-number {
transform: translate(var(--translateX), 0) scale(var(--scale));
}
g.selected use[href="#counter-base"] {
animation: 1s selected 0.25s linear infinite;
stroke-width: 2px;
stroke: yellow;
@ -186,7 +213,6 @@ g.selected use {
@keyframes selected {
50% {
/* stroke: yellow; */
stroke-width: 0px;
r: 5px;
}
@ -227,16 +253,23 @@ g[data-y]:nth-child(odd) {
}
[data-x]:hover use[href="#hex"] {
/* --scale: 0.95; */
opacity: 1;
fill: orange;
stroke: black;
}
[data-x]:hover use[href*="#t-"] {
[data-x]:hover g.counter {
transform: scale(1.5);
}
[data-x]:hover g.counter .troop-number {
--translateX: -6px;
}
[data-x]:hover g.counter .squad-number {
--translateX: 6px;
}
[data-x] {
--scale: 1;
transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale));

30
public/assets/images/map1.svg
View File

@ -65,7 +65,7 @@
<symbol id="n0" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
</defs>
<rect id="background" x="-18" y="-10" width="2320" height="3106"/>
<rect id="background"/>
<g id="image-maps">
<image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518"/>
@ -81,48 +81,48 @@
<g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north">
<g data-x="13">
<g class="counter" data-allegiance="attacker" data-number="1"><use href="#t-1"/></g>
<g class="counter" data-allegiance="attacker" data-number="1"><use href="#counter-base"/><use class="troop-number" href="#t-1"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
</g>
<g data-x="14">
<g class="counter" data-allegiance="attacker" data-number="2"><use href="#t-2"/></g>
<g class="counter" data-allegiance="attacker" data-number="2"><use href="#counter-base"/><use class="troop-number" href="#t-2"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
</g>
<g data-x="15">
<g class="counter" data-allegiance="attacker" data-number="3"><use href="#t-3"/></g>
<g class="counter" data-allegiance="attacker" data-number="3"><use href="#counter-base"/><use class="troop-number" href="#t-3"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
</g>
<g data-x="16">
<g class="counter" data-allegiance="attacker" data-number="4"><use href="#t-4"/></g>
<g class="counter" data-allegiance="attacker" data-number="4"><use href="#counter-base"/><use class="troop-number" href="#t-4"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
</g>
<g data-x="17">
<g class="counter" data-allegiance="attacker" data-number="5"><use href="#t-5"/></g>
<g class="counter" data-allegiance="attacker" data-number="5"><use href="#counter-base"/><use class="troop-number" href="#t-5"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
</g>
<g data-x="18">
<g class="counter" data-allegiance="attacker" data-number="6"><use href="#t-6"/></g>
<g class="counter" data-allegiance="attacker" data-number="6"><use href="#counter-base"/><use class="troop-number" href="#t-6"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
</g>
<g data-x="19">
<g class="counter" data-allegiance="attacker" data-number="7"><use href="#t-7"/></g>
<g class="counter" data-allegiance="attacker" data-number="7"><use href="#counter-base"/><use class="troop-number" href="#t-7"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#blazer"/></g>
</g>
</g>
<g data-edge="south">
<g data-x="13">
<g class="counter" data-allegiance="defender" data-number="1"><use href="#t-1"/></g>
<g class="counter" data-allegiance="defender" data-number="1"><use href="#counter-base"/><use class="troop-number" href="#t-1"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
</g>
<g data-x="14">
<g class="counter" data-allegiance="defender" data-number="2"><use href="#t-2"/></g>
<g class="counter" data-allegiance="defender" data-number="2"><use href="#counter-base"/><use class="troop-number" href="#t-2"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
</g>
<g data-x="15">
<g class="counter" data-allegiance="defender" data-number="3"><use href="#t-3"/></g>
<g class="counter" data-allegiance="defender" data-number="3"><use href="#counter-base"/><use class="troop-number" href="#t-3"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
</g>
<g data-x="16">
<g class="counter" data-allegiance="defender" data-number="4"><use href="#t-4"/></g>
<g class="counter" data-allegiance="defender" data-number="4"><use href="#counter-base"/><use class="troop-number" href="#t-4"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
</g>
<g data-x="17">
<g class="counter" data-allegiance="defender" data-number="5"><use href="#t-5"/></g>
<g class="counter" data-allegiance="defender" data-number="5"><use href="#counter-base"/><use class="troop-number" href="#t-5"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
</g>
<g data-x="18">
<g class="counter" data-allegiance="defender" data-number="6"><use href="#t-6"/></g>
<g class="counter" data-allegiance="defender" data-number="6"><use href="#counter-base"/><use class="troop-number" href="#t-6"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
</g>
<g data-x="19">
<g class="counter" data-allegiance="defender" data-number="7"><use href="#t-7"/></g>
<g class="counter" data-allegiance="defender" data-number="7"><use href="#counter-base"/><use class="troop-number" href="#t-7"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#blazer"/></g>
</g>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 84 KiB

2
src/modules/game/soldier.js
View File

@ -43,7 +43,7 @@ function updatePlacement(cell, selected, clone) {
selected.dataset.previous = prevCoords;
cell.appendChild(selected);
selected.childNodes.forEach(n => {
Array.from(selected.children).forEach(n => {
if (n.classList.contains('removed')) {
n.remove();
} else if ('preexisting' in n.dataset) {

36
src/modules/record_sheet.js
View File

@ -1,3 +1,24 @@
const weapons = {
rifle: {
name: 'Rifle',
damage: '4L',
shortRange: '1-27',
longRange: '28-75'
},
smg: {
name: 'SMG',
damage: '3L',
shortRange: '1-15',
longRange: '16-25'
},
blazer: {
name: 'Blazer',
damage: '4L',
shortRange: '1-17',
longRange: '18-105'
}
}
function createIcon(number) {
const svgns = 'http://www.w3.org/2000/svg';
const [icon, circle, text] = ['svg', 'circle', 'text'].map(t => document.createElementNS(svgns, t));
@ -17,8 +38,11 @@ function createIcon(number) {
return icon;
}
function createRecord({ dataset: { allegiance, number }}) {
const div = document.createElement('div', { is: 'soldier-record-block' }),
function createRecord(unit) {
const { dataset: { allegiance, number }} = unit,
primaryWeapon = unit.querySelector('.primary-weapon'),
pw = primaryWeapon.getAttribute('href').replace('#', ''),
div = document.createElement('div', { is: 'soldier-record-block' }),
spans = Array(5).fill('span').map(t => document.createElement(t)),
[tn, pwt, pwd, pwrs, pwrl] = spans;
@ -30,16 +54,16 @@ function createRecord({ dataset: { allegiance, number }}) {
tn.appendChild(createIcon(number));
pwt.setAttribute('slot', 'primary-weapon-type');
pwt.textContent = 'Rifle';
pwt.textContent = weapons[pw].name;
pwd.setAttribute('slot', 'primary-weapon-damage');
pwd.textContent = '4L';
pwd.textContent = weapons[pw].damage;
pwrs.setAttribute('slot', 'primary-weapon-range-short');
pwrs.textContent = '1-27';
pwrs.textContent = weapons[pw].shortRange;
pwrl.setAttribute('slot', 'primary-weapon-range-long');
pwrl.textContent = '28-75';
pwrl.textContent = weapons[pw].longRange;
spans.forEach(el => div.appendChild(el));