summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--play.css37
-rw-r--r--play.js31
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])