summaryrefslogtreecommitdiff
path: root/play.html
diff options
context:
space:
mode:
Diffstat (limited to 'play.html')
-rw-r--r--play.html52
1 files changed, 42 insertions, 10 deletions
diff --git a/play.html b/play.html
index b63f76c..b496f89 100644
--- a/play.html
+++ b/play.html
@@ -20,8 +20,7 @@ header.your_turn { background-color: orange; }
#role_Axis .role_name { background-color: darkseagreen; }
#role_Allied .role_name { background-color: tan; }
#turn_info { background-color: gainsboro; }
-.role_vp { float: right; }
-.role_info { border-bottom: 1px solid black; }
+.role_supply { float: right; }
#log { background-color: ghostwhite; }
#log .h1 { background-color: silver; font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
@@ -30,12 +29,47 @@ header.your_turn { background-color: orange; }
#log > .i { padding-left: 20px; }
#log > div > .i { padding-left: 12px; }
-.role_info { padding: 15px; }
-
.action {
cursor: pointer;
}
+/* CARDS */
+
+.hand {
+ margin: 0 auto;
+ display: flex;
+ flex-wrap: wrap;
+ //justify-content: center;
+ min-height: 350px;
+ max-width: 2672px;
+ gap: 20px;
+ padding: 24px;
+}
+
+.card {
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-color: ivory;
+ width: 124px;
+ height: 170px;
+ border-radius: 8px;
+ box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+ transition: 100ms;
+}
+
+.card.real {
+ background-image: url(card_real.svg);
+}
+
+.card.dummy {
+ background-image: url(card_dummy.svg);
+}
+
+.card.action:hover {
+ transform: scale(1.1);
+}
+
+
/* BATTLE DIALOG */
#battle { background-color: #d6c4a9; background: url(texture_clear.png); }
@@ -566,18 +600,16 @@ svg .hex.tip {
<div class="role" id="role_Axis">
<div class="role_name">
Axis
- <div class="role_vp" id="axis_vp"></div>
+ <div class="role_supply" id="axis_supply">0</div>
<div class="role_user">-</div>
</div>
- <div id="info_Axis" class="role_info"></div>
</div>
<div class="role" id="role_Allied">
<div class="role_name">
Allied
- <div class="role_vp" id="allied_vp"></div>
+ <div class="role_supply" id="allied_supply">0</div>
<div class="role_user">-</div>
</div>
- <div id="info_Allied" class="role_info"></div>
</div>
<div id="turn_info">1940</div>
</div>
@@ -1074,8 +1106,8 @@ svg .hex.tip {
</div>
</div>
-
-</body>
+<div id="hand" class="hand">
+</div>
</main>