diff options
| -rw-r--r-- | play.html | 67 | ||||
| -rw-r--r-- | play.js | 9 | ||||
| -rw-r--r-- | rules.js | 5 |
3 files changed, 72 insertions, 9 deletions
@@ -37,18 +37,54 @@ body.Versailles header.your_turn { background-color: skyblue; } cursor: pointer; } -#hand { +/* PANELS */ + +.panel_grid { + display: grid; + grid-template-columns: min-content 1fr; + max-width: 1500px; + margin: 18px auto; + gap: 18px; +} + +#hand_panel { + grid-column: 1 / 3; +} + +#objective { + min-width: 250px; +} + +.panel { + background-color: #555; +} + +.panel_header { + background-color: #444; + color: white; + user-select: none; + font-weight: bold; + text-align: center; + padding: 3px 1em; +} + +.panel_body { display: flex; + justify-content: start; flex-wrap: wrap; - justify-content: center; - margin: 20px; - gap: 20px; + padding: 18px; + gap: 18px; + min-height: 350px; } +body.Observer #final_panel { display: none } + +/* CARDS */ + .card { background-size: cover; background-repeat: no-repeat; - background-color: ivory; + background-color: #555; width: 250px; height: 350px; border-radius: 16px; @@ -375,7 +411,7 @@ body.Versailles header.your_turn { background-color: skyblue; } <main> -<div id="mapwrap" class="fit"> +<div id="mapwrap"> <div id="map"> <div id="spaces"></div> <div id="pieces"> @@ -388,7 +424,24 @@ body.Versailles header.your_turn { background-color: skyblue; } </div> </div> -<div id="hand"></div> +<div class="panel_grid"> + +<div id="hand_panel" class="panel"> +<div id="hand_header" class="panel_header">Hand</div> +<div id="hand" class="panel_body"></div> +</div> + +<div id="objective_panel" class="panel"> +<div id="objective_header" class="panel_header">Objective</div> +<div id="objective" class="panel_body"></div> +</div> + +<div id="final_panel" class="panel"> +<div id="final_header" class="panel_header">Set-aside cards</div> +<div id="final" class="panel_body"></div> +</div> + +</div> </main> @@ -357,11 +357,16 @@ function on_update() { ui.political_vp.className = `piece cylinder orange vp${5+view.political_vp}` document.getElementById("hand").replaceChildren() - if (view.objective) - document.getElementById("hand").appendChild(ui.cards[view.objective]) + document.getElementById("final").replaceChildren() + document.getElementById("objective").replaceChildren() if (view.hand) for (let c of view.hand) document.getElementById("hand").appendChild(ui.cards[c]) + if (view.final) + for (let c of view.final) + document.getElementById("final").appendChild(ui.cards[c]) + if (view.objective) + document.getElementById("objective").appendChild(ui.cards[view.objective]) for (let i = 0; i < space_names.length; ++i) layout[i] = [] @@ -1034,9 +1034,11 @@ exports.setup = function (seed, scenario, options) { discard: 0, red_hand: [ 34 ], + red_final: [], red_objective: 0, blue_hand: [ 17 ], + blue_final: [], blue_objective: 0, presence: 0, @@ -1146,15 +1148,18 @@ exports.view = function(state, player) { discard: game.discard, hand: 0, + final: 0, objective: 0 } if (player === COMMUNE) { view.hand = game.red_hand + view.final = game.red_final view.objective = game.red_objective } if (player === VERSAILLES) { view.hand = game.blue_hand + view.final = game.blue_final view.objective = game.blue_objective } |