Show card backs when observing the block games.

3 files changed, 28 insertions, 1 deletions

diff --git a/play.html b/play.html
index 6b8d58c..6d1f227 100644
--- a/play.html
+++ b/play.html
@@ -1586,6 +1586,13 @@ c20 -20 41 -80 41 -116 0 -27 -18 -45 -46 -45 -40 0 -54 25 -54 99 0 37 3 71
 <div id="card+23" class="card card_2"></div>
 <div id="card+24" class="card card_2"></div>
 <div id="card+25" class="card card_2"></div>
+<div id="back+1" class="card card_back"></div>
+<div id="back+2" class="card card_back"></div>
+<div id="back+3" class="card card_back"></div>
+<div id="back+4" class="card card_back"></div>
+<div id="back+5" class="card card_back"></div>
+<div id="back+6" class="card card_back"></div>
+<div id="back+7" class="card card_back"></div>
 </div>
 
 	</div>
diff --git a/rules.js b/rules.js
index 89bac06..2c93200 100644
--- a/rules.js
+++ b/rules.js
@@ -3413,6 +3413,13 @@ exports.resign = function (state, current) {
 	return state;
 }
 
+function observer_hand() {
+	let hand = [];
+	hand.length = Math.max(game.l_hand.length, game.y_hand.length);
+	hand.fill(0);
+	return hand;
+}
+
 exports.view = function(state, current) {
 	game = state;
 
@@ -3424,7 +3431,7 @@ exports.view = function(state, current) {
 		pretender: game.pretender,
 		l_card: (game.show_cards || current === LANCASTER) ? game.l_card : 0,
 		y_card: (game.show_cards || current === YORK) ? game.y_card : 0,
-		hand: (current === LANCASTER) ? game.l_hand : (current === YORK) ? game.y_hand : [],
+		hand: (current === LANCASTER) ? game.l_hand : (current === YORK) ? game.y_hand : observer_hand(),
 		who: (game.active === current) ? game.who : null,
 		where: game.where,
 		known: {},
diff --git a/ui.js b/ui.js
index fcf2196..2f8632a 100644
--- a/ui.js
+++ b/ui.js
@@ -50,6 +50,7 @@ function toggle_blocks() {
 
 let ui = {
 	cards: {},
+	card_backs: {},
 	areas: {},
 	known: {},
 	secret: { Lancaster: {}, York: {}, Rebel: {} },
@@ -406,6 +407,9 @@ function build_map() {
 		ui.cards[c].addEventListener("click", on_click_card);
 	}
 
+	for (let c = 1; c <= 7; ++c)
+		ui.card_backs[c] = document.getElementById("back+"+c);
+
 	for (let name in AREAS) {
 		let area = AREAS[name];
 		element = document.getElementById("svgmap").getElementById("area_"+name.replace(/ /g, "_"));
@@ -663,6 +667,15 @@ function update_cards() {
 			ui.cards[c].classList.remove('show');
 	}
 
+	if (player === 'Observer') {
+		let n = game.hand.length;
+		for (let c = 1; c <= 7; ++c)
+			if (c <= n)
+				ui.card_backs[c].classList.add("show");
+			else
+				ui.card_backs[c].classList.remove("show");
+	}
+
 	if (game.actions && game.actions.play) {
 		for (let c of game.actions.play)
 			ui.cards[c].classList.add('enabled');