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
2024-08-06 19:51:22 -07:00
parent c6cdbcf492
commit 0783d703c1
9 changed files with 250 additions and 56 deletions
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