diff options
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 67 |
1 files changed, 37 insertions, 30 deletions
@@ -40,19 +40,25 @@ body.Versailles header.your_turn { background-color: skyblue; } /* PANELS */ .panel_grid { - display: grid; - grid-template-columns: min-content 1fr; - max-width: 1500px; - margin: 18px auto; - gap: 18px; + display: flex; + flex-wrap: wrap; + margin: 20px auto; + justify-content: center; + gap: 20px; } -#hand_panel { - grid-column: 1 / 3; +#hand, #final, #discard, #objective, #set_aside { + min-height: 350px; } -#objective { - min-width: 250px; +#hand { min-width: 1060px } +#final { min-width: 250px } +#objective { min-width: 520px } +#set_aside { min-width: 790px } +#discard { min-width: 250px } + +#hand, #set_aside { + flex-grow: 1 } .panel { @@ -72,12 +78,11 @@ body.Versailles header.your_turn { background-color: skyblue; } display: flex; justify-content: start; flex-wrap: wrap; - padding: 18px; - gap: 18px; - min-height: 350px; + padding: 20px; + gap: 20px; } -body.Observer #final_panel { display: none } +body.Observer #set_aside_panel { display: none } /* CARDS */ @@ -91,19 +96,6 @@ body.Observer #final_panel { display: none } box-shadow: 1px 1px 5px rgba(0,0,0,0.5); } -.card_info { - padding: 12px 0; - border-bottom: 1px solid black; - background-color: gray; -} - -.card_info .card { - margin: 0 auto; - width: 125px; - height: 175px; - border-radius: 8px; -} - #tooltip { position: fixed; z-index: 100; @@ -143,6 +135,7 @@ body.Observer #final_panel { display: none } } .piece { + pointer-events: none; position: absolute; background-size: cover; background-repeat: no-repeat; @@ -153,6 +146,7 @@ body.Observer #final_panel { display: none } } .piece.action { + pointer-events: auto; filter: drop-shadow(0 -2px 0 white) drop-shadow(0 2px 0 white) @@ -164,6 +158,10 @@ body.Observer #final_panel { display: none } box-shadow: 0 0 0 3px white; } +.card.selected { + box-shadow: 0 0 0 3px yellow; +} + /* original size (72dpi?) */ .piece.cube { width: 28px; height: 30px; } .piece.disc { width: 40px; height: 32px; } @@ -404,7 +402,6 @@ body.Observer #final_panel { display: none } <div class="role_user">-</div> </div> </div> - <div class="card_info"><div id="discarded_card" class="card card_strategy_back"></div></div> </div> <div id="log"></div> </aside> @@ -431,14 +428,24 @@ body.Observer #final_panel { display: none } <div id="hand" class="panel_body"></div> </div> +<div id="final_panel" class="panel"> +<div id="final_header" class="panel_header">Final</div> +<div id="final" class="panel_body"></div> +</div> + +<div id="discard_panel" class="panel"> +<div id="discard_header" class="panel_header">Discard</div> +<div id="discard" 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 id="set_aside_panel" class="panel"> +<div id="set_aside_header" class="panel_header">Set-aside cards</div> +<div id="set_aside" class="panel_body"></div> </div> </div> |