3 files changed, 27 insertions, 1 deletions

diff --git a/play.html b/play.html
index b52ddf2..6d17c9c 100644
--- a/play.html
+++ b/play.html
@@ -537,6 +537,12 @@ body.shift .block.known:hover {
 <div id="card+25" class="card card_1"></div>
 <div id="card+26" class="card card_1"></div>
 <div id="card+27" class="card card_1"></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>
 
 	</div>
diff --git a/rules.js b/rules.js
index 98fe00d..38a7d4d 100644
--- a/rules.js
+++ b/rules.js
@@ -3761,6 +3761,13 @@ function make_siege_view() {
 	return list;
 }
 
+function observer_hand() {
+	let hand = [];
+	hand.length = Math.max(game.s_hand.length, game.f_hand.length);
+	hand.fill(0);
+	return hand;
+}
+
 exports.view = function(state, current) {
 	game = state;
 
@@ -3774,7 +3781,7 @@ exports.view = function(state, current) {
 		s_vp: count_victory_points(SARACENS),
 		f_card: (game.show_cards || current === FRANKS) ? game.f_card : 0,
 		s_card: (game.show_cards || current === SARACENS) ? game.s_card : 0,
-		hand: (current === FRANKS) ? game.f_hand : (current === SARACENS) ? game.s_hand : [],
+		hand: (current === FRANKS) ? game.f_hand : (current === SARACENS) ? game.s_hand : observer_hand(),
 		who: (game.active === current) ? game.who : null,
 		location: game.location,
 		castle: game.castle,
diff --git a/ui.js b/ui.js
index c9be15f..ea7b575 100644
--- a/ui.js
+++ b/ui.js
@@ -43,6 +43,7 @@ function toggle_blocks() {
 
 let ui = {
 	cards: {},
+	card_backs: {},
 	towns: {},
 	blocks: {},
 	battle_menu: {},
@@ -342,6 +343,9 @@ function build_map() {
 		ui.cards[c].addEventListener("click", on_click_card);
 	}
 
+	for (let c = 1; c <= 6; ++c)
+		ui.card_backs[c] = document.getElementById("back+"+c);
+
 	for (let name in TOWNS) {
 		let town = TOWNS[name];
 		if (name === F_POOL || name === S_POOL || name === DEAD)
@@ -632,6 +636,15 @@ function update_cards() {
 			element.classList.remove("show");
 		}
 	}
+
+	if (player === 'Observer') {
+		let n = game.hand.length;
+		for (let c = 1; c <= 6; ++c)
+			if (c <= n)
+				ui.card_backs[c].classList.add("show");
+			else
+				ui.card_backs[c].classList.remove("show");
+	}
 }
 
 function compare_blocks(a, b) {