diff options
| -rw-r--r-- | play.css | 37 | ||||
| -rw-r--r-- | play.js | 31 |
2 files changed, 44 insertions, 24 deletions
@@ -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; + } +} @@ -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]) |