Show deck size when hovering over played card.

4 files changed, 18 insertions, 2 deletions

diff --git a/play.css b/play.css
index b394264..30b155b 100644
--- a/play.css
+++ b/play.css
@@ -29,6 +29,21 @@ aside { width: 220px; }
 	text-indent: -12px;
 }
 
+.card_info {
+	position: relative;
+}
+
+.card_info:hover #deck_size {
+	visibility: visible;
+}
+
+#deck_size {
+	visibility: hidden;
+	position: absolute;
+	right: 5px;
+	bottom: 3px;
+}
+
 /* CARDS */
 
 .hand {
diff --git a/play.html b/play.html
index ae2f18c..abc17a3 100644
--- a/play.html
+++ b/play.html
@@ -103,7 +103,7 @@
 				<div class="role_user"></div>
 			</div>
 		</div>
-		<div class="card_info"><div id="last_card" class="card show card_back"></div></div>
+		<div class="card_info"><div id="last_card" class="card show card_back"></div><div id="deck_size">0</div></div>
 	</div>
 	<div id="log"></div>
 </aside>
diff --git a/play.js b/play.js
index 51b687e..51f4122 100644
--- a/play.js
+++ b/play.js
@@ -1393,6 +1393,7 @@ function update_map() {
 
 	document.getElementById("british_hand").textContent = view.british.hand;
 	document.getElementById("french_hand").textContent = view.french.hand;
+	document.getElementById("deck_size").textContent = view.deck;
 
 	toggle_marker("british_card_held", view.british.held);
 	toggle_marker("french_card_held", view.french.held);
diff --git a/rules.js b/rules.js
index 4504f18..37d8fd9 100644
--- a/rules.js
+++ b/rules.js
@@ -9575,7 +9575,7 @@ exports.view = function(state, current) {
 		amphib: game.amphib,
 		fieldworks: game.fieldworks,
 		last_card: game.last_card,
-		// deck: game.deck.length,
+		deck: game.deck.length,
 		french: {
 			hand: game.french.hand.length,
 			allied: game.french.allied,