caesar: Layout blocks by owner and show Jupiter badge for stolen blocks.

3 files changed, 67 insertions, 48 deletions

diff --git a/play.html b/play.html
index 578b0bb..7c6fed4 100644
--- a/play.html
+++ b/play.html
@@ -158,8 +158,8 @@ body.shift .block.known:hover {
 .simple-labels .block.Caesar { background-color: #b22; border: 2px solid #822; }
 .simple-labels .block.Pompeius { background-color: #eb2; border: 2px solid #862; }
 .simple-labels .block.Cleopatra { background-color: #09b; border: 2px solid #067; }
-.simple-labels .block.highlight { border: 2px solid white; }
-.simple-labels .block.selected { border: 2px solid yellow; }
+.simple-labels .block.highlight { border: 2px solid white !important ; }
+.simple-labels .block.selected { border: 2px solid yellow !important ; }
 .simple-labels .block.moved { filter: grayscale(70%); }
 
 .columbia-labels .block{ width: 56px; height: 56px; border-radius: 6px; }
@@ -170,8 +170,8 @@ body.shift .block.known:hover {
 .columbia-labels .block.known.Caesar { background-color: #822; }
 .columbia-labels .block.known.Pompeius { background-color: #862; }
 .columbia-labels .block.known.Cleopatra { background-color: #067; }
-.columbia-labels .block.highlight { border: 3px solid white; }
-.columbia-labels .block.selected { border: 3px solid yellow; }
+.columbia-labels .block.highlight { border: 3px solid white !important ; }
+.columbia-labels .block.selected { border: 3px solid yellow !important ; }
 .columbia-labels .block.moved { filter: grayscale(70%); }
 
 .columbia-labels .block.r0 { transform: rotate(0deg); }
@@ -189,6 +189,18 @@ body.shift .block.known:hover {
 	background-size: 80%;
 	background-position: center;
 }
+.block.jupiter:not(.known) {
+	background-image: url("jupiter.svg");
+	background-size: 80%;
+	background-position: center;
+}
+
+.Observer ~ .grid_center .simple-labels .known.jupiter.Caesar { border: 2px solid #862; }
+.Observer ~ .grid_center .simple-labels .known.jupiter.Pompeius { border: 2px solid #822; }
+.Observer ~ .grid_center .simple-labels .known.jupiter.Cleopatra { border: 2px solid #822; }
+.Observer ~ .grid_center .columbia-labels .known.jupiter.Caesar { border: 3px solid #862; }
+.Observer ~ .grid_center .columbia-labels .known.jupiter.Pompeius { border: 3px solid #822; }
+.Observer ~ .grid_center .columbia-labels .known.jupiter.Cleopatra { border: 3px solid #822; }
 
 .block { box-shadow: 0px 0px 4px 0px black; }
 
diff --git a/rules.js b/rules.js
index f82928a..e3d01bf 100644
--- a/rules.js
+++ b/rules.js
@@ -2452,23 +2452,22 @@ exports.view = function(state, current) {
 	}
 
 	for (let b in BLOCKS) {
+		let jupiter = (BLOCKS[b].owner != block_owner(b)) ? 1 : 0;
 		if (game.state == 'game_over') {
 			if (game.location[b] != LEVY)
-				view.known[b] = [ game.location[b], game.steps[b], 0 ];
+				view.known[b] = [ game.location[b], game.steps[b], 0, jupiter ];
 		} else if (block_owner(b) == current || game.location[b] == DEAD) {
-			view.known[b] = [ game.location[b], game.steps[b], game.moved[b]?1:0 ];
+			view.known[b] = [ game.location[b], game.steps[b], game.moved[b]?1:0, jupiter ];
 		} else {
-			let o = BLOCKS[b].owner;
 			let a = game.location[b];
+			let o = BLOCKS[b].owner;
 			if (b == CLEOPATRA)
 				o = CLEOPATRA;
 			if (a != LEVY) {
 				let list = view.secret[o];
 				if (!(a in list))
-					list[a] = [0, 0];
-				list[a][0]++;
-				if (game.moved[b])
-					list[a][1]++;
+					list[a] = [];
+				list[a].push([game.moved[b]?1:0, jupiter]);
 			}
 		}
 	}
diff --git a/ui.js b/ui.js
index 362408c..9abea0b 100644
--- a/ui.js
+++ b/ui.js
@@ -2,6 +2,7 @@
 
 const DEAD = "Dead";
 const LEVY = "Levy";
+const ENEMY = { "Caesar": "Pompeius", "Pompeius": "Caesar" };
 
 let label_style = window.localStorage['julius-caesar/label-style'] || 'columbia';
 let label_layout = window.localStorage['julius-caesar/label-layout'] || 'spread';
@@ -310,8 +311,8 @@ function layout_blocks_spread(location, secret, known) {
 		++i;
 	}
 
-	// Break early if secret and known fit in exactly two rows, and more than three blocks total
-	if (s > 0 && s <= wrap && k > 0 && k <= wrap && n > 3)
+	// Break early if secret and known fit in exactly two rows and more than two blocks.
+	if (s > 0 && s <= wrap && k > 0 && k <= wrap && n > 2)
 		new_line();
 
 	while (known.length > 0) {
@@ -384,14 +385,14 @@ function update_map() {
 	let layout = {};
 
 	for (let s in SPACES)
-		layout[s] = { secret: [], known: [] };
+		layout[s] = { Caesar: [], Pompeius: [] };
 
 	// Move secret blocks to overflow queue if there are too many in a location
 	for (let s in SPACES) {
 		for (let color of [CAESAR, POMPEIUS, CLEOPATRA]) {
 			let max = 0;
 			if (game.secret[color] && game.secret[color][s])
-				max = game.secret[color][s][0];
+				max = game.secret[color][s].length;
 			while (ui.secret[color][s].length > max)
 				overflow[color].push(ui.secret[color][s].pop());
 		}
@@ -402,7 +403,7 @@ function update_map() {
 		for (let color of [CAESAR, POMPEIUS, CLEOPATRA]) {
 			let max = 0;
 			if (game.secret[color] && game.secret[color][s])
-				max = game.secret[color][s][0];
+				max = game.secret[color][s].length;
 			while (ui.secret[color][s].length < max) {
 				if (overflow[color].length > 0) {
 					ui.secret[color][s].push(overflow[color].pop());
@@ -438,49 +439,52 @@ function update_map() {
 	}
 
 	// Add secret blocks to layout
-	for (let location in SPACES) {
-		for (let color of [CAESAR, POMPEIUS, CLEOPATRA]) {
-			if (location != LEVY) {
-				let i = 0, n = 0, m = 0;
-				if (game.secret[color] && game.secret[color][location]) {
-					n = game.secret[color][location][0];
-					m = game.secret[color][location][1];
-				}
-				// Preserve block stacking order, but lets the user track block identities...
-				if (label_layout == 'stack')
-					ui.secret[color][location].sort((a,b) => a.secret_index - b.secret_index);
-				for (let element of ui.secret[color][location]) {
-					if (i++ < n - m)
-						element.classList.remove('moved');
-					else
-						element.classList.add('moved');
-
-					if (color == game.mars && location == game.surprise)
-						element.classList.add("mars");
-					else
-						element.classList.remove("mars");
-					if (color == game.neptune && location == game.surprise)
-						element.classList.add("neptune");
-					else
-						element.classList.remove("neptune");
-
-					element.style.visibility = 'visible';
-					layout[location].secret.push(element);
-				}
+	for (let color in game.secret) {
+		for (let location in game.secret[color]) {
+			let i = 0;
+			for (let [moved, jupiter] of game.secret[color][location]) {
+				let element = ui.secret[color][location][i++];
+				if (moved)
+					element.classList.add('moved');
+				else
+					element.classList.remove('moved');
+				if (jupiter)
+					element.classList.add('jupiter');
+				else
+					element.classList.remove('jupiter');
+				if (color == game.mars && location == game.surprise)
+					element.classList.add("mars");
+				else
+					element.classList.remove("mars");
+				if (color == game.neptune && location == game.surprise)
+					element.classList.add("neptune");
+				else
+					element.classList.remove("neptune");
+				let owner = color;
+				if (owner == CLEOPATRA)
+					owner = POMPEIUS;
+				if (jupiter)
+					owner = ENEMY[owner];
+				layout[location][owner].push(element);
+				element.style.visibility = 'visible';
 			}
 		}
 	}
 
 	// Add known blocks to layout
 	for (let block in game.known) {
+		let element = ui.known[block];
 		let location = game.known[block][0];
 		let steps = game.known[block][1];
 		let moved = game.known[block][2];
-		let element = ui.known[block];
+		let jupiter = game.known[block][3];
+		let color = BLOCKS[block].owner;
+		if (jupiter)
+			color = ENEMY[color];
 
 		element.style.visibility = 'visible';
 
-		layout[location].known.push(element);
+		layout[location][color].push(element);
 
 		let old_location = ui.map_location[block];
 		update_steps(ui.map_steps, block, steps, element, location == old_location);
@@ -490,13 +494,17 @@ function update_map() {
 			element.classList.add("moved");
 		else
 			element.classList.remove("moved");
+		if (jupiter)
+			element.classList.add("jupiter");
+		else
+			element.classList.remove("jupiter");
 
 		ui.seen.add(block);
 	}
 
 	// Layout blocks on map
 	for (let location in SPACES)
-		layout_blocks(location, layout[location].secret, layout[location].known);
+		layout_blocks(location, layout[location].Caesar, layout[location].Pompeius);
 
 	// Mark selections and highlights