| 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 | |
| parent | 34ed6e2a9c0ef9d4354454394c52e412d8c34d51 (diff) | |
WIP: smoothe squad view
Diffstat (limited to 'public')
| -rw-r--r-- | public/assets/css/style.css | 45 | ||||
| -rw-r--r-- | public/assets/images/map4.svg | 88 | ||||
| -rw-r--r-- | public/index.html | 58 |
3 files changed, 114 insertions, 77 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> diff --git a/public/index.html b/public/index.html index 51c4fcf..c3a1c75 100644 --- a/public/index.html +++ b/public/index.html @@ -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"><</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">></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"><</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">></button></div> <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br> Aldebaran Home Guard --> </div> |
