New player list.

3 files changed, 29 insertions, 44 deletions

diff --git a/play.css b/play.css
index cb58ac6..f479c86 100644
--- a/play.css
+++ b/play.css
@@ -3,9 +3,8 @@ aside { background-color: gainsboro; }
 header { background-color: silver; }
 body.Persia header.your_turn { background-color: skyblue; }
 body.Greece header.your_turn { background-color: salmon; }
-#role_Persia .role_name { background-color: skyblue; }
-#role_Greece .role_name { background-color: salmon; }
-.role_info { background-color: silver; }
+#role_Persia { background-color: skyblue; }
+#role_Greece { background-color: salmon; }
 
 #log {
 	background-color: gainsboro;
@@ -44,15 +43,10 @@ body.Greece header.your_turn { background-color: salmon; }
 	border-radius: 10px;
 }
 
-.role_info {
-	padding: 3px 18px;
-	background-color: gainsboro;
-	white-space: pre-wrap;
-}
-.card_info {
-	padding: 3px 18px;
+#turn_info {
 	background-color: silver;
 }
+
 #deck_info {
 	text-align: center;
 }
@@ -101,17 +95,13 @@ body.Greece header.your_turn { background-color: salmon; }
 	display: block;
 }
 
-.card_info .card {
+#turn_info .card {
 	margin: 10px auto 5px auto;
 	width: 125px;
 	height: 175px;
 	border-radius: 10px;
 }
 
-.role_info, .card_info {
-	border-bottom: 1px solid black;
-}
-
 #tooltip {
 	pointer-events: none;
 	position: fixed;
@@ -131,8 +121,7 @@ body.Greece header.your_turn { background-color: salmon; }
 }
 
 @media (max-height: 700px) {
-	.card_info { padding: 3px 18px; }
-	.card_info .card { display: none; }
+	#turn_info .card { display: none; }
 }
 
 /* CARD ACTION POPUP MENU */
diff --git a/play.html b/play.html
index d11ce83..35e6e22 100644
--- a/play.html
+++ b/play.html
@@ -41,18 +41,17 @@
 <aside>
 	<div id="roles">
 		<div class="role" id="role_Greece">
-			<div class="role_name">Greece &#x2013; <span class="role_user"></span></div>
-			<div class="role_info" id="greek_info">0 cards in hand</div>
+			<div class="role_name">Greece</div>
+			<div class="role_stat" id="greek_stat"></div>
+			<div class="role_user">-</div>
 		</div>
 		<div class="role" id="role_Persia">
-			<div class="role_name">Persia &#x2013; <span class="role_user"></span></div>
-			<div class="role_info" id="persian_info">0 cards in hand</div>
-		</div>
-		<div class="card_info">
-			<div id="discard" class="card show card_back"></div>
-			<div id="deck_info"></div>
+			<div class="role_name">Persia</div>
+			<div class="role_stat" id="persian_stat"></div>
+			<div class="role_user">-</div>
 		</div>
 	</div>
+	<div id="turn_info"><div id="discard" class="card show card_back"></div><div id="deck_info"></div></div>
 	<div id="log"></div>
 </aside>
 
diff --git a/play.js b/play.js
index 581ecb1..1499c28 100644
--- a/play.js
+++ b/play.js
@@ -309,23 +309,20 @@ function build_ui() {
 	document.getElementById("discard").addEventListener("mouseleave", on_blur_discard);
 }
 
-function greek_info() {
-	let text = "";
-	if (view.g_cards === 1)
-		text += "1 card in hand";
-	else
-		text += view.g_cards + " cards in hand";
-	if (view.trigger.acropolis_on_fire)
-		text += "\nAcropolis on Fire!";
-	if (view.trigger.carneia_festival)
-		text += "\nCarneia Festival!";
-	return text;
+function greek_stat() {
+	let text = ""
+	if (view.trigger.carneia_festival || view.trigger.acropolis_on_fire) {
+		if (view.trigger.carneia_festival)
+			text += "\u{1f3ad} "
+		if (view.trigger.acropolis_on_fire)
+			text += "\u{1f525} "
+	}
+	text += view.g_cards + " \u{1f3b4}"
+	return text
 }
 
-function persian_info() {
-	if (view.p_cards === 1)
-		return "1 card in hand";
-	return view.p_cards + " cards in hand";
+function persian_stat() {
+	return view.p_cards + " \u{1f3b4}"
 }
 
 function show_marker(id, class_name, show = 1, enabled = 0) {
@@ -338,8 +335,8 @@ function show_marker(id, class_name, show = 1, enabled = 0) {
 }
 
 function on_update() {
-	document.getElementById("greek_info").textContent = greek_info();
-	document.getElementById("persian_info").textContent = persian_info();
+	document.getElementById("greek_stat").textContent = greek_stat();
+	document.getElementById("persian_stat").textContent = persian_stat();
 
 	if (player === GREECE)
 		document.getElementById("map").classList.add("greek");
@@ -351,8 +348,8 @@ function on_update() {
 	else
 		document.getElementById("discard").className = "card show card_" + view.discard;
 
-	document.getElementById("deck_info").textContent =
-		"Deck: " + view.deck_size + " \u2014 Discard: " + view.discard_size;
+	let text = "Deck: " + view.deck_size + " \u2014 Discard: " + view.discard_size;
+	document.getElementById("deck_info").textContent = text
 
 	action_button("battle", "Battle");
 	action_button("build", "Build bridge");