diff options
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 67 |
1 files changed, 60 insertions, 7 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> |