fix role panel

3 files changed, 52 insertions, 65 deletions

diff --git a/play.css b/play.css
index fec181d..925a777 100644
--- a/play.css
+++ b/play.css
@@ -3,9 +3,8 @@ header { background-color: silver; }
 aside { background-color: #f5e8d7; }
 body.British header.your_turn { background-color: salmon; }
 body.American header.your_turn { background-color: skyblue; }
-#role_American .role_name { background-color: skyblue; }
-#role_British .role_name { background-color: salmon; }
-.role_vp { float: right; }
+#role_American { background-color: skyblue; }
+#role_British { background-color: salmon; }
 
 #log > div { padding-left: 20px; text-indent: -12px; }
 
@@ -22,26 +21,32 @@ body.American header.your_turn { background-color: skyblue; }
 	padding: 1px;
 }
 
+#log .h1, #log .h2 {
+	border-top: 1px solid black;
+	border-bottom: 1px solid black;
+}
+
 #log .h2.american { background-color: skyblue; }
 #log .h2.british { background-color: salmon; }
 
 #log .card_tip:hover { text-decoration: dotted underline; }
 
+:root {
+	--piece-shadow: 1px 1px 4px #0008;
+}
+
 aside {
 	width: 230px;
 }
 
-.role_info {
-	padding: 10px 20px;
-	background-color: wheat;
-	white-space: pre-wrap;
+#turn_info {
 }
 
-.last_played {
+#turn_info {
 	background-color: tan;
 }
 
-.last_played .card {
+#turn_info .card {
 	margin: 5px auto;
 }
 
@@ -95,7 +100,7 @@ aside {
 	width: 56.5px;
 	height: 56.5px;
 	background-image: url('/washingtons-war/images/Marker_GameTurnRegulars.jpg');
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 }
 .marker.turn.no-regulars {
 	background-image: url('/washingtons-war/images/Marker_GameTurnNoRegulars.jpg');
@@ -105,7 +110,7 @@ aside {
 	width: 56.5px;
 	height: 56.5px;
 	background-image: url('/washingtons-war/images/Marker_FrenchAlliance.jpg');
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 }
 
 .marker.french-alliance.european-war {
@@ -116,20 +121,20 @@ aside {
 	width: 63px;
 	height: 126px;
 	background-image: url('/washingtons-war/images/Marker_FrenchNavy.jpg');
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 }
 
 .marker.congress {
 	width: 56.5px;
 	height: 56.5px;
 	background-image: url('/washingtons-war/images/Marker_ContinentalCongress.jpg');
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 }
 
 .marker.control {
 	width: 38px;
 	height: 38px;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 	visibility: hidden;
 }
 
@@ -165,7 +170,7 @@ aside {
 	text-shadow: 0px 0px 3px black;
 	font-weight: bold;
 	border-radius: 60px;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 }
 .cu.american { background-image: url('/washingtons-war/images/American-CU.png'); }
 .cu.british { background-image: url('/washingtons-war/images/British-CU.png'); }
@@ -177,7 +182,7 @@ aside {
 	height: 126px;
 	background-size: cover;
 	outline: 1px solid black;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 }
 .general.offmap {
 	display: none;
@@ -216,11 +221,9 @@ aside {
 }
 .space.enabled {
 	display: block;
+	cursor: pointer;
 	border: 7px solid transparent;
-	box-shadow: 0 0 10px 10px white;
-}
-.space.enabled:hover {
-	border: 7px solid yellow;
+	box-shadow: 0 0 0 4px white, inset 0 0 0 2px white;
 }
 .space.regular-space {
 	border-radius: 100px;
@@ -246,7 +249,7 @@ aside {
 	width: 186px;
 	height: 262px;
 	border-radius: 10px;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 	transition: 100ms;
 	display: none;
 }
@@ -255,13 +258,6 @@ aside {
 	display: block;
 }
 
-.hand .card.enabled:hover, .hand .card.selected {
-	Xtransform: scale(1.5) translate(0,-30px);
-	Xtransform: scale(1.1);
-	transform: translate(0,-10px);
-	z-index: 10;
-}
-
 .shift .hand .card:hover, .shift .hand .card.selected {
 	transform: scale(1.5) translate(0,-30px);
 	z-index: 10;
diff --git a/play.html b/play.html
index 9236937..4767218 100644
--- a/play.html
+++ b/play.html
@@ -20,16 +20,16 @@
 <menu id="popup">
 	<li class="title">CARD
 	<li class="separator">
-	<li data-action="card_play_event"> Play Event
-	<li data-action="card_discard_event"> Discard for PC action
-	<li data-action="card_campaign"> Play Campaign
-	<li data-action="card_ops_general"> Activate a General
-	<li data-action="card_ops_pc"> Place PC markers
-	<li data-action="card_ops_reinforcements"> Bring on Reinforcements
-	<li data-action="card_ops_queue"> Place into Operations Queue
-	<li data-action="card_battle_play"> Play for +2 DRM
-	<li data-action="card_battle_discard"> Discard for +1 DRM
-	<li data-action="exchange_for_discard"> Exchange for Discarded Event
+	<li data-action="card_play_event">&#x1f3b4; Play Event
+	<li data-action="card_discard_event">&#x274c; Discard for PC action
+	<li data-action="card_campaign">&#x1f465; Play Campaign
+	<li data-action="card_ops_general">&#x1f464; Activate a General
+	<li data-action="card_ops_pc">&#x2b55; Place PC markers
+	<li data-action="card_ops_reinforcements">&#x1f6a9; Bring on Reinforcements
+	<li data-action="card_ops_queue">&#x231b; Place into Operations Queue
+	<li data-action="card_battle_play">&#x1f3b2; Play for +2 DRM
+	<li data-action="card_battle_discard">&#x1f3b2; Discard for +1 DRM
+	<li data-action="exchange_for_discard">&#x267b; Exchange for Discarded Event
 </menu>
 
 <header>
@@ -47,25 +47,21 @@
 </header>
 
 <aside>
-	<div class="roles">
+	<div id="roles">
 		<div class="role" id="role_American">
-			<div class="role_name">
-				American
-				<div class="role_vp" id="american_vp">VP</div>
-				<div class="role_user">-</div>
-			</div>
-			<div class="role_info" id="american_info">$N cards in hand.</div>
+			<div class="role_name">American</div>
+			<div class="role_stat">VP</div>
+			<div class="role_user">-</div>
+			<div class="role_info"></div>
 		</div>
 		<div class="role" id="role_British">
-			<div class="role_name">
-				British
-				<div class="role_vp" id="british_vp"></div>
-				<div class="role_user">-</div>
-			</div>
-			<div class="role_info" id="british_info">$N cards in hand.</div>
+			<div class="role_name">British</div>
+			<div class="role_stat">VP</div>
+			<div class="role_user">-</div>
+			<div class="role_info"></div>
 		</div>
-		<div class="role_info last_played"><div id="last_played" class="card show card_back"></div></div>
 	</div>
+	<div id="turn_info"><div id="last_played" class="card show card_back"></div></div>
 	<div id="log"></div>
 </aside>
 
diff --git a/play.js b/play.js
index 6cb2fdc..f07bbb4 100644
--- a/play.js
+++ b/play.js
@@ -288,27 +288,22 @@ function update_units() {
 build_map();
 
 function player_info(player, nc, nq) {
-	let info;
-	if (nc == 1)
-		info = "1 card in hand.";
-	else
-		info = nc + " cards in hand.";
-	if (nq > 0)
-		info += "\n" + nq + " OPS in queue.";
+	let info = ""
 	if (player == AMERICAN) {
-		if (view.pennsylvania_and_new_jersey_line_mutinies)
-			info += "\nPennsylvania and New Jersey Line Mutinies!";
-		if (view.congress == CONTINENTAL_CONGRESS_DISPERSED)
-			info += "\nContinental Congress Dispersed!";
+		if (view.pennsylvania_and_new_jersey_line_mutinies || view.congress == CONTINENTAL_CONGRESS_DISPERSED)
+			info += "\u{1f6ab} "
 	}
+	if (nq > 0)
+		info += nq + "\u{231b} "
+	info += nc + "\u{1f3b4}"
 	return info;
 }
 
 function on_update() {
 	let e;
 
-	document.getElementById("british_info").textContent = player_info(BRITISH, view.b_cards, view.b_queue);
-	document.getElementById("american_info").textContent = player_info(AMERICAN, view.a_cards, view.a_queue);
+	roles.American.stat.textContent = player_info(AMERICAN, view.a_cards, view.a_queue);
+	roles.British.stat.textContent = player_info(BRITISH, view.b_cards, view.b_queue);
 
 	if (!view.last_played)
 		document.getElementById("last_played").className = "card show card_back";