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

WIP: very rough armor

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:33 -07:00
parent 56bbbd9361
commit 75e0b7758e
9 changed files with 250 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
public/assets/css/soldier_record_block.css
View File

@ -5,6 +5,9 @@ span {
}
.physical-status-track {
display: flex;
justify-content: space-between;
align-items: end;
text-align: center;
}
@ -57,3 +60,37 @@ p {
.grenades input:checked + svg circle {
fill: gray;
}
[slot="block-number"]:not(:last-of-type) {
display: inline-block;
width: 1.3em;
}
damage-block.armor span[slot="block-number"] {
border: 1px solid black;
padding: 2px;
border-radius: 50%;
position: relative;
}
.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover {
border: 1px solid orangered;
cursor: pointer;
}
.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover::before {
content: '🡄'; /*<⇽⭠⮈🠈 🠜 🡄*/
position: absolute;
margin-left: -1.5em;
}
.physical-status-track damage-block:nth-last-child(1 of .armor) span[slot="block-number"]:hover {
border: 1px solid orangered;
cursor: pointer;
}
.physical-status-track damage-block:nth-last-child(1 of .armor) span[slot="block-number"]:hover::after {
content: '🡆'; /* 🠊 🡆 */
position: absolute;
margin-left: 1em;
}

3
public/assets/css/style.css
View File

@ -134,6 +134,9 @@ button.set-firing-arc img {
white-space: nowrap;
background-color: white;
transition: transform 0.25s;
user-select: none;
-webkit-user-select: none;
cursor: default;
}
.soldier-record span[slot] {

12
public/assets/images/counters.svg
View File

@ -105,7 +105,7 @@
</g>
</g>
<g id="gl" style="r: inherit;" class="weapon-symbol">
<g id="smggl" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use href="#auto"/>
@ -115,6 +115,16 @@
</g>
</g>
<g id="riflegl" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use href="#semi-auto" />
<circle cy="-2.25" r="1"/>
<line x1="0" y1="-5" x2="0" y2="5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g>
</g>
<g id="mech-template" style="pointer-events: none;">
<clipPath id="mech-template-clip-path" r="36.5">
<use href="#dead-zone"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 13 KiB

7
public/assets/images/map4.svg
View File

@ -55,7 +55,7 @@
<g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north" style="--i: -2">
<g class="counter" data-allegiance="attacker" data-number="1" data-squad="1">
<g class="counter" data-allegiance="attacker" data-number="1" data-squad="1" data-armor="4">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
@ -117,11 +117,6 @@
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
<!--<g class="counter" data-allegiance="defender" data-number="2" data-squad="1">-->
<!-- <use class="primary-weapon" href="counters.svg#hsplaser"/>-->
<!-- <use class="troop-number" href="counters.svg#number-2"/>-->
<!-- <use class="squad-number" href="counters.svg#number-1"/>-->
<!--</g>-->
<g class="counter" data-allegiance="defender" data-number="1" data-squad="2">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-1"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

36
public/assets/images/scenario-dragon_hunting.svg
View File

@ -18,49 +18,49 @@
</g>
<g data-edge="south" style="--i: 78">
<g data-x="13">
<g class="counter" data-allegiance="defender" data-number="1" data-squad="1">
<g class="counter" data-allegiance="defender" data-number="1" data-squad="1" data-armor="2">
<use class="primary-weapon" href="#smg"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="14">
<g class="counter" data-allegiance="defender" data-number="2" data-squad="1">
<g class="counter" data-allegiance="defender" data-number="2" data-squad="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="15">
<g class="counter" data-allegiance="defender" data-number="3" data-squad="1">
<g class="counter" data-allegiance="defender" data-number="3" data-squad="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#hsplaser"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="16">
<g class="counter" data-allegiance="defender" data-number="4" data-squad="1">
<g class="counter" data-allegiance="defender" data-number="4" data-squad="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#lmg"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="17">
<g class="counter" data-allegiance="defender" data-number="5" data-squad="1">
<g class="counter" data-allegiance="defender" data-number="5" data-squad="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#lmg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="18">
<g class="counter" data-allegiance="defender" data-number="6" data-squad="1">
<g class="counter" data-allegiance="defender" data-number="6" data-squad="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="19">
<g class="counter" data-allegiance="defender" data-number="7" data-squad="1">
<g class="counter" data-allegiance="defender" data-number="7" data-squad="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-1"/>
@ -68,49 +68,49 @@
</g>
<g data-x="13">
<g class="counter" data-allegiance="defender" data-number="1" data-squad="2">
<use class="primary-weapon" href="#gl"/>
<g class="counter" data-allegiance="defender" data-number="1" data-squad="2" data-armor="2">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="14">
<g class="counter" data-allegiance="defender" data-number="2" data-squad="2">
<use class="primary-weapon" href="counters.svg#gl"/>
<g class="counter" data-allegiance="defender" data-number="2" data-squad="2" data-armor="2">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="15">
<g class="counter" data-allegiance="defender" data-number="3" data-squad="2">
<use class="primary-weapon" href="counters.svg#gl"/>
<g class="counter" data-allegiance="defender" data-number="3" data-squad="2" data-armor="2">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="16">
<g class="counter" data-allegiance="defender" data-number="4" data-squad="2">
<use class="primary-weapon" href="counters.svg#gl"/>
<g class="counter" data-allegiance="defender" data-number="4" data-squad="2" data-armor="2">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="17">
<g class="counter" data-allegiance="defender" data-number="5" data-squad="2">
<g class="counter" data-allegiance="defender" data-number="5" data-squad="2" data-armor="2">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="18">
<g class="counter" data-allegiance="defender" data-number="6" data-squad="2">
<g class="counter" data-allegiance="defender" data-number="6" data-squad="2" data-armor="2">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="19">
<g class="counter" data-allegiance="defender" data-number="7" data-squad="2">
<g class="counter" data-allegiance="defender" data-number="7" data-squad="2" data-armor="2">
<use class="primary-weapon" href="counters.svg#lmg"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-2"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

137
public/assets/images/scenario-race_against_time.svg
View File

@ -7,25 +7,25 @@
</g>
</g>
<g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g class="start-locations">
<g data-edge="north" style="--i: -2">
<g data-x="13">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="14">
<g class="counter" data-allegiance="attacker" data-number="2">
<use class="primary-weapon" href="counters.svg#rifle"/>
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="15">
<g class="counter" data-allegiance="attacker" data-number="3">
<use class="primary-weapon" href="counters.svg#rifle"/>
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
@ -58,57 +58,158 @@
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="13">
<g class="counter" data-allegiance="attacker" data-number="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="14">
<g class="counter" data-allegiance="attacker" data-number="2" data-armor="2">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="15">
<g class="counter" data-allegiance="attacker" data-number="3" data-armor="2">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="16">
<g class="counter" data-allegiance="attacker" data-number="4" data-armor="2">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="17">
<g class="counter" data-allegiance="attacker" data-number="5" data-armor="2">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="18">
<g class="counter" data-allegiance="attacker" data-number="6" data-armor="2">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="19">
<g class="counter" data-allegiance="attacker" data-number="7" data-armor="2">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
</g>
<g data-edge="south" style="--i: 26">
<g data-x="13">
<g class="counter" data-allegiance="defender" data-number="1">
<use class="primary-weapon" href="#blazer"/>
<g class="counter" data-allegiance="defender" data-number="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="14">
<g class="counter" data-allegiance="defender" data-number="2">
<use class="primary-weapon" href="counters.svg#rifle"/>
<g class="counter" data-allegiance="defender" data-number="2" data-armor="2">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="15">
<g class="counter" data-allegiance="defender" data-number="3">
<use class="primary-weapon" href="counters.svg#rifle"/>
<g class="counter" data-allegiance="defender" data-number="3" data-armor="2">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="16">
<g class="counter" data-allegiance="defender" data-number="4">
<use class="primary-weapon" href="counters.svg#smg"/>
<g class="counter" data-allegiance="defender" data-number="4" data-armor="2">
<use class="primary-weapon" href="counters.svg#lmg"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="17">
<g class="counter" data-allegiance="defender" data-number="5">
<use class="primary-weapon" href="counters.svg#smg"/>
<g class="counter" data-allegiance="defender" data-number="5" data-armor="2">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="18">
<g class="counter" data-allegiance="defender" data-number="6">
<use class="primary-weapon" href="counters.svg#smg"/>
<g class="counter" data-allegiance="defender" data-number="6" data-armor="2">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="19">
<g class="counter" data-allegiance="defender" data-number="7">
<use class="primary-weapon" href="counters.svg#smg"/>
<g class="counter" data-allegiance="defender" data-number="7" data-armor="2">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="13">
<g class="counter" data-allegiance="defender" data-number="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="14">
<g class="counter" data-allegiance="defender" data-number="2" data-armor="2">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="15">
<g class="counter" data-allegiance="defender" data-number="3" data-armor="2">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="16">
<g class="counter" data-allegiance="defender" data-number="4" data-armor="2">
<use class="primary-weapon" href="counters.svg#lmg"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="17">
<g class="counter" data-allegiance="defender" data-number="5" data-armor="2">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="18">
<g class="counter" data-allegiance="defender" data-number="6" data-armor="2">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="19">
<g class="counter" data-allegiance="defender" data-number="7" data-armor="2">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
</g>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

2
public/assets/images/scenario-side_show.svg
View File

@ -63,7 +63,7 @@
<g data-edge="south" style="--i: 53">
<g data-x="13">
<g class="counter" data-allegiance="defender" data-number="1">
<use class="primary-weapon" href="#blazer"/>
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

22
src/modules/gameboard.js
View File

@ -379,17 +379,17 @@ export function start(el) {
//cell2.classList.add('hover');
//
soldier.place(
svg,
soldier.createCounter({ dataset: { allegiance: 'attacker', number: 2, squad: 1 }}, 'hsplaser'),
getCell(-2, 3, -1, 0)
);
soldier.place(
svg,
soldier.createCounter({ dataset: { allegiance: 'attacker', number: 2, squad: 5 }}, 'rifle'),
getCell(-3, 3, 0, 0)
);
//soldier.place(
// svg,
// soldier.createCounter({ dataset: { allegiance: 'attacker', number: 2, squad: 1 }}, 'hsplaser'),
// getCell(-2, 3, -1, 0)
//);
//
//soldier.place(
// svg,
// soldier.createCounter({ dataset: { allegiance: 'attacker', number: 2, squad: 5 }}, 'rifle'),
// getCell(-3, 3, 0, 0)
//);
// Add some counters in an unoccupied cell
//const countersCell = getCell(-1, 1, 0, 0);

50
src/modules/record_sheet.js
View File

@ -38,11 +38,17 @@ const weapons = {
shortRange: '1-44',
longRange: '45-108'
},
gl: {
smggl: {
name: 'SMG w/Grenade Launcher',
damage: '4/2/1 L',
shortRange: '1-10',
longRange: '11-24'
},
riflegl: {
name: 'Rifle w/Grenade Launcher',
damage: '4/2/1 L',
shortRange: '1-10',
longRange: '11-24'
}
}
@ -121,6 +127,48 @@ function createRecord(unit) {
spans.forEach(el => div.appendChild(el));
if (unit.dataset.armor) {
const s = `damage-block:nth-of-type(n + 1):nth-of-type(-n + ${unit.dataset.armor})`;
const armorBlocks = div.shadowRoot.querySelectorAll(s);
armorBlocks.forEach(el => {
el.classList.add('armor');
});
const ls = 'damage-block:nth-child(1 of .armor):not(:first-child)';
const rs = 'damage-block:nth-last-child(1 of .armor):not(:last-child)';
const moveArmorEl = div.shadowRoot.querySelectorAll(`${ls}, ${rs}`);
function moveArmorHandler(e) {
e.stopPropagation();
this.removeEventListener('click', moveArmorHandler);
if (!this.previousElementSibling.classList.contains('armor')) {
this.previousElementSibling.classList.add('armor');
this.previousElementSibling.addEventListener('click', moveArmorHandler);
let current = this.nextElementSibling;
while (current.nextElementSibling && current.nextElementSibling.classList.contains('armor')) {
current = current.nextElementSibling;
}
current.classList.remove('armor');
current.removeEventListener('click', moveArmorHandler);
current.previousElementSibling.addEventListener('click', moveArmorHandler);
} else if (!this.nextElementSibling.classList.contains('armor')) {
this.nextElementSibling.classList.add('armor');
this.nextElementSibling.addEventListener('click', moveArmorHandler);
let current = this.previousElementSibling;
while (current.previousElementSibling && current.previousElementSibling.classList.contains('armor')) {
current = current.previousElementSibling;
}
current.classList.remove('armor');
current.removeEventListener('click', moveArmorHandler);
current.nextElementSibling.addEventListener('click', moveArmorHandler);
}
}
moveArmorEl.forEach(el => el.addEventListener('click', moveArmorHandler));
}
function makeInactiveDivider(parent) {
const div = document.createElement('div');
div.classList.add('inactive-divider');