3 files changed, 28 insertions, 3 deletions

diff --git a/play.html b/play.html
index 900e8d1..89fb684 100644
--- a/play.html
+++ b/play.html
@@ -370,6 +370,13 @@ body.Observer .columbia-labels .known.jupiter.Cleopatra { border: 3px solid #822
 <div id="card+26" class="card card_12" onclick="select_card(26)"></div>
 <div id="card+27" class="card card_12" onclick="select_card(27)"></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 8fcb889..dc21cf2 100644
--- a/rules.js
+++ b/rules.js
@@ -2526,6 +2526,13 @@ function make_battle_view() {
 	return bv;
 }
 
+function observer_hand() {
+	let hand = [];
+	hand.length = Math.max(game.c_hand.length, game.p_hand.length);
+	hand.fill(0);
+	return hand;
+}
+
 exports.view = function(state, current) {
 	game = state;
 
@@ -2539,7 +2546,7 @@ exports.view = function(state, current) {
 		p_vp: game.p_vp,
 		c_card: (game.show_cards || current === CAESAR) ? game.c_card : 0,
 		p_card: (game.show_cards || current === POMPEIUS) ? game.p_card : 0,
-		hand: (current === CAESAR) ? game.c_hand : (current === POMPEIUS) ? game.p_hand : [],
+		hand: (current === CAESAR) ? game.c_hand : (current === POMPEIUS) ? game.p_hand : observer_hand(),
 		who: (game.active === current) ? game.who : null,
 		where: game.where,
 		known: {},
diff --git a/ui.js b/ui.js
index 693ca9c..37ca0e6 100644
--- a/ui.js
+++ b/ui.js
@@ -72,6 +72,7 @@ let ui = {
 	map_location: {},
 	battle_steps: {},
 	cards: {},
+	card_backs: {},
 };
 
 create_log_entry = function (text) {
@@ -288,9 +289,10 @@ function build_map() {
 		build_battle_block(b, block, color);
 	}
 
-	for (let c = 1; c <= 27; ++c) {
+	for (let c = 1; c <= 27; ++c)
 		ui.cards[c] = document.getElementById("card+" + c);
-	}
+	for (let c = 1; c <= 6; ++c)
+		ui.card_backs[c] = document.getElementById("back+" + c);
 }
 
 function update_steps(memo, block, steps, element, animate) {
@@ -692,6 +694,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 on_update() {