More UI tweaks.

2 files changed, 44 insertions, 24 deletions

diff --git a/play.css b/play.css
index efc2b66..2261ede 100644
--- a/play.css
+++ b/play.css
@@ -1,7 +1,7 @@
 /* STYLESHEET FOR RED FLAG OVER PARIS */
 
-main { background-color: dimgray; }
-header { background-color: gainsboro; }
+main { background-color: dimgray }
+header { background-color: gainsboro }
 
 #role_Commune { background-color: hsl(358, 62%, 75%); }
 #role_Versailles { background-color: hsl(199, 45%, 75%); }
@@ -57,19 +57,18 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
 #final_panel { width: clamp(290px, 560px, 100%) }
 #set_aside_panel { width: clamp(290px, 830px, 100%) }
 
-#red_objective_header { background-color: hsl(358, 20%, 28%); }
-#blue_objective_header { background-color: hsl(199, 14%, 26%); }
-#red_objective { background-color: hsl(358, 10%, 36%); }
-#blue_objective { background-color: hsl(199, 7%, 33%); }
+#red_objective_header { background-color: hsl(358, 20%, 28%) }
+#blue_objective_header { background-color: hsl(199, 20%, 26%) }
+#red_objective { background-color: hsl(358, 10%, 36%) }
+#blue_objective { background-color: hsl(199, 10%, 34%) }
 
 .panel {
 	background-color: #555;
-	box-shadow: 3px 3px 9px #0008;
 }
 
 .panel_header {
 	background-color: #444;
-	color: white;
+	color: hsl(40, 60%, 90%);
 	user-select: none;
 	font-weight: bold;
 	text-align: center;
@@ -92,7 +91,7 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
 	width: 250px;
 	height: 350px;
 	border-radius: 16px;
-	box-shadow: 2px 2px 6px #0008;
+	box-shadow: 0px 1px 6px #0008;
 }
 
 #tooltip {
@@ -105,7 +104,7 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
 /* MAP */
 
 #mapwrap {
-	box-shadow: 3px 3px 9px #0008;
+	box-shadow: 1px 1px 9px #0008;
 	width: 1500px;
 	height: 1050px;
 	margin-bottom: 30px;
@@ -401,3 +400,21 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
 .card_52{background-image:url(cards.2x/objective_11.jpg)}
 .card_53{background-image:url(cards.2x/objective_12.jpg)}
 }
+
+/* MOBILE LAYOUT */
+
+@media (max-width: 640px) {
+	#mapwrap {
+		margin: 0
+	}
+	.panel_grid {
+		gap: 0;
+		margin: 0;
+	}
+	.panel {
+		width: 100% !important;
+	}
+	.panel_body {
+		justify-content: center;
+	}
+}
diff --git a/play.js b/play.js
index 9a86ca0..47d1418 100644
--- a/play.js
+++ b/play.js
@@ -313,8 +313,6 @@ function build_user_interface() {
 		let name = space_names[s]
 		let [x, y, w, h] = boxes[name]
 		let cn = "space"
-		if (s < 12)
-			cn += " " + DIMENSION_CLASS[s]
 		if (s === 0 || s === 3 || s === 6 || s === 9) {
 			cn += " pivotal"
 			x -= 22
@@ -327,18 +325,21 @@ function build_user_interface() {
 			w -= 10
 			h -= 10
 		}
-		elt = ui.spaces[s] = create("div", {
-			className: cn,
-			my_space: s,
-			my_name: name,
-			onmousedown: on_click_space,
-			onmouseenter: on_focus_space,
-			onmouseleave: on_blur,
-			style: `top: ${y-1}px;left:${x-1}px;width:${w+2}px;height:${h+2}px`
-		})
+		if (s < 12) {
+			cn += " " + DIMENSION_CLASS[s]
+			elt = ui.spaces[s] = create("div", {
+				className: cn,
+				my_space: s,
+				my_name: name,
+				onmousedown: on_click_space,
+				onmouseenter: on_focus_space,
+				onmouseleave: on_blur,
+				style: `top: ${y-1}px;left:${x-1}px;width:${w+2}px;height:${h+2}px`
+			})
+			document.getElementById("spaces").appendChild(elt)
+		}
 		space_layout_cube[s] = { x: x + Math.round(w/2), y: y + Math.round(h*1/2) }
 		space_layout_disc[s] = { x: x + w, y: y + h }
-		document.getElementById("spaces").appendChild(elt)
 	}
 }
 
@@ -568,8 +569,10 @@ function on_update() {
 
 	for (let i = 0; i < space_count; ++i) {
 		layout_cubes(layout[i], space_layout_cube[i].x, space_layout_cube[i].y)
-		ui.spaces[i].classList.toggle("action", is_space_action(i))
-		ui.spaces[i].classList.toggle("selected", i === view.where)
+		if (i < 12) {
+			ui.spaces[i].classList.toggle("action", is_space_action(i))
+			ui.spaces[i].classList.toggle("selected", i === view.where)
+		}
 	}
 	for (let i = 0; i < 4; ++i) {
 		layout_disc(view.pieces[36+i], ui.discs[i])