3 files changed, 40 insertions, 26 deletions

diff --git a/play.html b/play.html
index 2311ab0..92da5ea 100644
--- a/play.html
+++ b/play.html
@@ -28,15 +28,26 @@ body.Observer #hand {
 	display: none;
 }
 
-.court, #hand {
+.role_hand_size { float: right }
+
+.court, #hand, #darkness {
 	font-family: "Albert Text";
 	padding: 6px 10px;
 	text-align: right;
 	font-size: 20px;
+	//text-shadow: 0 0 2px #fff8;
 	color: #0004;
 }
 
-#log { background-color: oldlace; }
+#darkness {
+	position: absolute;
+	right: -2px;
+	bottom: -2px;
+	color: #444;
+	text-shadow: 0 0 4px white;
+}
+
+#log { background-color: whitesmoke; }
 #log .h1 {
 	margin: 6px 0;
 	padding: 2px 8px;
@@ -71,7 +82,7 @@ body.Observer #hand {
 	position: absolute;
 	width: 825px;
 	border: 2px solid #0004;
-	border-color: #fff4 #0004 #0004 #fff4;
+	border-color: #fff3 #0004 #0004 #fff3;
 	box-shadow: 0 0 0 1px #222, 1px 1px 8px -2px #000;
 }
 
@@ -97,9 +108,9 @@ body.Observer #hand {
 #hand { top: calc(12px + 80px + 12px + 638px + 12px + 80px + 12px) }
 #mapwrap { height: calc(12px + 80px + 12px + 638px + 12px + 80px + 12px + 80px) }
 
+#hand, .court { background-color: #666 }
 .red.court { background-color: hsl(359,35%,45%) }
 .blue.court { background-color: hsl(220,35%,45%) }
-#hand { background-color: #666 }
 
 #map div {
 	position: absolute;
@@ -209,14 +220,16 @@ body.Observer #hand {
 	<div id="roles">
 		<div class="role" id="role_Red">
 			<div class="role_name">
-				Red &#x2013;
-				<span class="role_user"></span>
+				Red
+				<div class="role_hand_size" id="red_hand_size"></div>
+				<div class="role_user"></div>
 			</div>
 		</div>
 		<div class="role" id="role_Blue">
 			<div class="role_name">
-				Blue &#x2013;
-				<span class="role_user"></span>
+				Blue
+				<div class="role_hand_size" id="blue_hand_size"></div>
+				<div class="role_user"></div>
 			</div>
 		</div>
 	</div>
@@ -227,10 +240,10 @@ body.Observer #hand {
 
 <div id="mapwrap" class="fit">
 <div id="map">
-<div id="court1" class="red court">Rival Court</div>
-<div id="board"></div>
-<div id="court2" class="blue court">Court</div>
-<div id="hand" class="blue hand">Hand</div>
+<div id="court1" class="court">Rival Court</div>
+<div id="board"><div id="darkness"></div></div>
+<div id="court2" class="court">Court</div>
+<div id="hand">Hand</div>
 </div>
 </div>
 
diff --git a/play.js b/play.js
index c4eae91..34a0b6e 100644
--- a/play.js
+++ b/play.js
@@ -72,6 +72,9 @@ let ui = {
 	board: document.getElementById("map"),
 	court1: document.getElementById("court1"),
 	court2: document.getElementById("court2"),
+	darkness: document.getElementById("darkness"),
+	red_hand_size: document.getElementById("red_hand_size"),
+	blue_hand_size: document.getElementById("blue_hand_size"),
 	red_score: null,
 	blue_score: null,
 	oval_spaces: [],
@@ -180,6 +183,10 @@ function hide(elt) {
 function on_update() {
 	on_init()
 
+	ui.red_hand_size.textContent = view.red_hand + " in Hand"
+	ui.blue_hand_size.textContent = view.blue_hand + " in Hand"
+	ui.darkness.textContent = view.darkness + " in Darkness"
+
 	for (let i = 1; i <= 54; ++i) {
 		if ((view.hand && view.hand.includes(i)) || view.red_court.includes(i) || view.blue_court.includes(i) || view.squares.includes(i))
 			show(ui.tiles[i])
diff --git a/rules.js b/rules.js
index 8659e2d..c8f9668 100644
--- a/rules.js
+++ b/rules.js
@@ -82,20 +82,11 @@ function space_name(s) {
 }
 
 function tile_name(tile) {
-	if (tile >= TILE_BLUE && tile < TILE_BLUE + 12) return "Blue"
-	if (tile >= TILE_RED && tile < TILE_RED + 12) return "Red"
-	if (tile >= TILE_GOLD && tile < TILE_GOLD + 12) return "Gold"
-	if (tile >= TILE_WHITE && tile < TILE_WHITE + 12) return "White"
-	if (tile >= TILE_GREEN && tile < TILE_GREEN + 12) return "Green"
-	return "None"
-}
-
-function tile_type_name(tile) {
-	if (tile >= TILE_BLUE && tile < TILE_BLUE + 12) return "Beasts"
-	if (tile >= TILE_RED && tile < TILE_RED + 12) return "Tournaments"
-	if (tile >= TILE_GOLD && tile < TILE_GOLD + 12) return "Cloth of Gold"
-	if (tile >= TILE_WHITE && tile < TILE_WHITE + 12) return "Piety"
-	if (tile >= TILE_GREEN && tile < TILE_GREEN + 12) return "Jewels"
+	if (tile >= TILE_BLUE && tile < TILE_BLUE + 12) return "blue"
+	if (tile >= TILE_RED && tile < TILE_RED + 12) return "red"
+	if (tile >= TILE_GOLD && tile < TILE_GOLD + 12) return "gold"
+	if (tile >= TILE_WHITE && tile < TILE_WHITE + 12) return "white"
+	if (tile >= TILE_GREEN && tile < TILE_GREEN + 12) return "green"
 	return "None"
 }
 
@@ -164,6 +155,9 @@ exports.view = function(state, player) {
 		prompt: null,
 		tokens: game.tokens,
 		squares: game.squares,
+		darkness: game.darkness.length,
+		red_hand: game.red_hand.length,
+		blue_hand: game.blue_hand.length,
 		red_score: game.red_score,
 		blue_score: game.blue_score,
 		red_court: game.red_court,