Blue sea battles.

2 files changed, 39 insertions, 30 deletions

diff --git a/play.css b/play.css
index 39a21f2..464505c 100644
--- a/play.css
+++ b/play.css
@@ -61,7 +61,7 @@ header.your_turn { background-color: orange; }
 	width: 224px;
 	height: 348px;
 	border-radius: 12px;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: 1px 1px 4px #0008;
 	display: none;
 }
 
@@ -123,6 +123,11 @@ header.your_turn { background-color: orange; }
 #battle_header { background-color: brown; color: lemonchiffon; }
 #FR, #ER { background-color: #bda27e; }
 
+#battle.sea #battle_header { background-color: hsl(205, 40%, 45%); color: white; }
+#battle.sea #FR, #battle.sea #ER { background-color: hsl(205, 30%, 60%); }
+#battle.sea { background-color: hsl(205, 30%, 70%); }
+#battle.sea #battle_message { background-color: hsl(205, 50%, 85%); }
+
 /* MAP WITH BLOCKS AND SPACES */
 
 #mapwrap {
@@ -148,7 +153,6 @@ header.your_turn { background-color: orange; }
 	left: 51px;
 	border-radius: 12px;
 	border: 3px solid white;
-	box-shadow: 0 0 12px white;
 }
 #turn.year_705 { top: 384px; }
 #turn.year_706 { top: 301px; }
@@ -213,34 +217,47 @@ body.shift .block.known:hover {
 
 .block.highlight { cursor: pointer; }
 
-.simple-labels .block { width: 48px; height: 48px; border-radius: 6px; }
+.simple-labels .block {
+	width: 48px;
+	height: 48px;
+	border: 3px solid black;
+	box-shadow: 0 0 2px 1px #0002;
+	border-radius: 6px;
+}
+.simple-labels .block.Caesar { background-color: #b22; border-color: #822; }
+.simple-labels .block.Pompeius { background-color: #eb2; border-color: #862; }
+.simple-labels .block.Cleopatra { background-color: #09b; border-color: #067; }
+.simple-labels .block.highlight { border-color: white; }
+.simple-labels .block.selected { border-color: yellow; }
+.simple-labels .hit .block.highlight { border-color: black; }
 
-.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.moved { filter: grayscale(70%); }
+.columbia-labels .block {
+	width: 56px;
+	height: 56px;
+	border: 3px solid #363639;
+	box-shadow: 0 0 2px 1px #0002;
+	border-radius: 6px;
+}
 
-.columbia-labels .block{ width: 56px; height: 56px; border-radius: 6px; }
+.columbia-labels .block.Caesar { background-color: hsl(358, 69%, 47%); }
+.columbia-labels .block.Pompeius { background-color: hsl(43, 87%, 44%); }
+.columbia-labels .block.Cleopatra { background-color: hsl(187, 100%, 35%); }
 
-.columbia-labels .block.Caesar { background-color: #c22; border: 3px solid #822; }
-.columbia-labels .block.Pompeius { background-color: #c91; border: 3px solid #862; }
-.columbia-labels .block.Cleopatra { background-color: #09a; border: 3px solid #067; }
-.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.moved { filter: grayscale(70%); }
+.columbia-labels .block.Caesar { border-color: hsl(358, 69%, 32%); }
+.columbia-labels .block.Pompeius { border-color: hsl(43, 87%, 30%); }
+.columbia-labels .block.Cleopatra { border-color: hsl(187, 100%, 23%); }
 
-.battle_menu.hit .block.highlight { border-color: black; }
+.columbia-labels .block.highlight { border-color: white; }
+.columbia-labels .block.selected { border-color: yellow; }
+.columbia-labels .hit .block.highlight { border-color: black; }
 
 .columbia-labels .block.r0 { transform: rotate(0deg); }
 .columbia-labels .block.r1 { transform: rotate(-90deg); }
 .columbia-labels .block.r2 { transform: rotate(-180deg); }
 .columbia-labels .block.r3 { transform: rotate(-270deg); }
 
+.block.moved { filter: grayscale(50%); }
+
 .block.mars {
 	background-image: url("mars.svg");
 	background-size: 80%;
@@ -262,15 +279,6 @@ body.shift .block.known:hover {
 */
 .block.battle { opacity: 0; pointer-events: none; }
 
-body.Observer .simple-labels .known.jupiter.Caesar { border: 2px solid #862; }
-body.Observer .simple-labels .known.jupiter.Pompeius { border: 2px solid #822; }
-body.Observer .simple-labels .known.jupiter.Cleopatra { border: 2px solid #822; }
-body.Observer .columbia-labels .known.jupiter.Caesar { border: 3px solid #862; }
-body.Observer .columbia-labels .known.jupiter.Pompeius { border: 3px solid #822; }
-body.Observer .columbia-labels .known.jupiter.Cleopatra { border: 3px solid #822; }
-
-.block { box-shadow: 0px 0px 4px 0px black; }
-
 .block {
 	transition-property: top, left, transform, opacity;
 	transition-duration: 700ms, 700ms, 250ms, 250ms;
diff --git a/play.js b/play.js
index 7c89572..e922641 100644
--- a/play.js
+++ b/play.js
@@ -483,7 +483,7 @@ function layout_blocks_spread(location, north, south) {
 
 function position_block_spread(location, row, n_rows, col, n_cols, element) {
 	let space = SPACES[location]
-	let block_size = (label_style === 'columbia') ? 56+6 : 48+4
+	let block_size = (label_style === 'columbia') ? 56+6 : 48+6
 	let padding = (location === LEVY || location === DEAD) ? 6 : 3
 	let offset = block_size + padding
 	let row_size = (n_rows-1) * offset
@@ -853,6 +853,7 @@ function on_update() {
 		update_battle()
 		if (!document.getElementById("battle").classList.contains("show"))
 			show_battle()
+		document.getElementById("battle").classList.toggle("sea", SPACES[view.battle.where].type === "sea")
 	} else {
 		document.getElementById("battle").classList.remove("show")
 	}