Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
Diffstat (limited to 'public')
-rw-r--r--public/assets/css/style.css45
-rw-r--r--public/assets/images/map4.svg88
-rw-r--r--public/index.html58
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">&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>