From 152e57f0799754cc8b0c06f264c14c66102d29f6 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Thu, 28 Jul 2022 00:54:23 +0200
Subject: Supply card commitment.

---
 play.html | 52 ++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 10 deletions(-)

(limited to 'play.html')

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>
 
-- 
cgit v1.2.3