| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-08-05 15:29:45 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-08-05 15:29:58 -0700 |
| commit | f35d716bd38d03285fa511f6794af5d93e88f4dc (patch) | |
| tree | c9b10a7ff8749a2cdb51a58ba8731e965986e18c /public/assets | |
| parent | 34ed6e2a9c0ef9d4354454394c52e412d8c34d51 (diff) | |
WIP: smoothe squad view
Diffstat (limited to 'public/assets')
| -rw-r--r-- | public/assets/css/style.css | 45 | ||||
| -rw-r--r-- | public/assets/images/map4.svg | 88 |
2 files changed, 100 insertions, 33 deletions
diff --git a/public/assets/css/style.css b/public/assets/css/style.css index f3dbc4d..bd90a4e 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -271,26 +271,35 @@ div#content { overflow-x: hidden; } -.soldier-record { - display: none; -} - -#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 .records [class^="squad-"] { + transition: transform 0.125s; } - -#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 .records > :not(:first-child) { + display: none; + transform: translateX(100%); +} + +/*.soldier-record {*/ +/* display: none;*/ +/*}*/ + +/*#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; diff --git a/public/assets/images/map4.svg b/public/assets/images/map4.svg index 2603ed5..0113404 100644 --- a/public/assets/images/map4.svg +++ b/public/assets/images/map4.svg @@ -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> |
