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

WIP: smoothe squad view

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2024-08-05 15:29:45 -07:00
parent 34ed6e2a9c
commit f35d716bd3
6 changed files with 230 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -271,26 +271,35 @@ div#content {
overflow-x: hidden;
}
.soldier-record {
#record-sheet .records [class^="squad-"] {
transition: transform 0.125s;
}
#record-sheet .records > :not(:first-child) {
display: none;
transform: translateX(100%);
}
#record-sheet [data-view-squad-number="1"].records .soldier-record[data-squad="1"] {
display: block;
}
/*.soldier-record {*/
/* display: none;*/
/*}*/
#record-sheet [data-view-squad-number="2"].records .soldier-record[data-squad="2"] {
display: block;
}
#record-sheet [data-view-squad-number="3"].records .soldier-record[data-squad="3"] {
display: block;
}
#record-sheet [data-view-squad-number="4"].records .soldier-record[data-squad="4"] {
display: block;
}
/*#record-sheet [data-view-squad-number="1"].records .soldier-record[data-squad="1"] {*/
/* display: block;*/
/*}*/
/**/
/*#record-sheet [data-view-squad-number="2"].records .soldier-record[data-squad="2"] {*/
/* display: block;*/
/*}*/
/**/
/**/
/*#record-sheet [data-view-squad-number="3"].records .soldier-record[data-squad="3"] {*/
/* display: block;*/
/*}*/
/**/
/*#record-sheet [data-view-squad-number="4"].records .soldier-record[data-squad="4"] {*/
/* display: block;*/
/*}*/
#record-sheet .name {
text-transform: capitalize;

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

@@ -4,7 +4,6 @@
<g id="building1" class="building">
<g class="footprint">
<g data-q="0" data-r="0" data-s="0" data-left="1" data-top="3" data-right="2" data-bottom="4" data-offset="left" />
<g data-q="0" data-r="0" data-s="0" data-left="1" data-top="3" data-right="4" data-bottom="4" data-offset="left" />
</g>
<g class="structure">
@@ -25,7 +24,7 @@
<rect id="cabinet" x="-2.5" y="-4.75" width="5" height="9.5" />
<g id="mapsheet" class="mapsheet">
<g class="building1" data-q="1" data-r="-2" data-s="1">
<g class="building1" data-q="3" data-r="-5" data-s="2">
<use href="#building1"/>
<g class="furniture">
<use href="#couch" transform="rotate(90,10.34,-27.66)" />
@@ -44,7 +43,6 @@
</g>
<use href="counters.svg#mech-template"/>
<use href="counters.svg#fallen-mech-template"/>
<use href="counters.svg#standing-mech-template"/>
<use href="counters.svg#vehicle-template"/>
</defs>
@@ -57,22 +55,82 @@
<g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<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="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="1" data-squad="1">
<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>
<g class="counter" data-allegiance="attacker" 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="attacker" data-number="1" data-squad="2">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="2" data-squad="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-2"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="3" data-squad="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-2"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="1" data-squad="3">
<use class="primary-weapon" href="counters.svg#rifle"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="1" data-squad="4">
<use class="primary-weapon" href="counters.svg#rifle"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="2" data-squad="4">
<use class="primary-weapon" href="counters.svg#rifle"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="1" data-squad="5">
<use class="primary-weapon" href="counters.svg#rifle"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="2" data-squad="5">
<use class="primary-weapon" href="counters.svg#rifle"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<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="counters.svg#blazer"/>
<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="1" data-squad="1">
<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>
<!--<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"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
<g class="counter" data-allegiance="defender" data-number="2" data-squad="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-2"/>
</g>
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

58
public/index.html
View File

@@ -263,7 +263,7 @@
<div id="record-sheet">
<div id="attacker-record" data-allegiance="attacker">
<!-- <img class="logo" src="logo-davion.png" /> -->
<div>
<div class="records-header">
<div><strong class="name">Attacker</strong></div>
<div><button type="button" class="end-move" data-allegiance="attacker">
End Movement
@@ -271,30 +271,14 @@
<div><button type="button" class="end-turn" data-allegiance="defender">
End Turn
</button></div>
<div class="squad-number selected" data-number="1">
<div><button type="button" class="view-squad" value="previous">&lt;</button></div>
<div class="squad-number">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>1</text>
</svg>
</div>
<div class="squad-number" data-number="2">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>2</text>
</svg>
</div>
<div class="squad-number" data-number="3">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>3</text>
</svg>
</div>
<div class="squad-number" data-number="4">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>4</text>
</svg>
</div>
<div><button type="button" class="view-squad" value="next">&gt;</button></div>
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
17th Kestral Mechanized Infantry -->
</div>
@@ -302,7 +286,7 @@
</div>
<div id="defender-record" data-allegiance="defender">
<!-- <img class="logo" src="logo-liao.png" /> -->
<div>
<div class="records-header">
<div><strong class="name">Defender</strong></div>
<div><button type="button" class="end-move" data-allegiance="defender">
End Movement
@@ -310,30 +294,16 @@
<div><button type="button" class="end-turn" data-allegiance="attacker">
End Turn
</button></div>
<div class="squad-number selected" data-number="1">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>1</text>
</svg>
</div>
<div class="squad-number" data-number="2">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>2</text>
</svg>
</div>
<div class="squad-number" data-number="3">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>3</text>
</svg>
</div>
<div class="squad-number" data-number="4">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>4</text>
</svg>
<div><button type="button" class="view-squad" value="previous">&lt;</button></div>
<div>
<div class="squad-number">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>1</text>
</svg>
</div>
</div>
<div><button type="button" class="view-squad" value="next">&gt;</button></div>
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
Aldebaran Home Guard -->
</div>