diff options
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 52 |
1 files changed, 42 insertions, 10 deletions
@@ -20,8 +20,7 @@ header.your_turn { background-color: orange; } #role_Axis .role_name { background-color: darkseagreen; } #role_Allied .role_name { background-color: tan; } #turn_info { background-color: gainsboro; } -.role_vp { float: right; } -.role_info { border-bottom: 1px solid black; } +.role_supply { float: right; } #log { background-color: ghostwhite; } #log .h1 { background-color: silver; font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; } @@ -30,12 +29,47 @@ header.your_turn { background-color: orange; } #log > .i { padding-left: 20px; } #log > div > .i { padding-left: 12px; } -.role_info { padding: 15px; } - .action { cursor: pointer; } +/* CARDS */ + +.hand { + margin: 0 auto; + display: flex; + flex-wrap: wrap; + //justify-content: center; + min-height: 350px; + max-width: 2672px; + gap: 20px; + padding: 24px; +} + +.card { + background-size: cover; + background-repeat: no-repeat; + background-color: ivory; + width: 124px; + height: 170px; + border-radius: 8px; + box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + transition: 100ms; +} + +.card.real { + background-image: url(card_real.svg); +} + +.card.dummy { + background-image: url(card_dummy.svg); +} + +.card.action:hover { + transform: scale(1.1); +} + + /* BATTLE DIALOG */ #battle { background-color: #d6c4a9; background: url(texture_clear.png); } @@ -566,18 +600,16 @@ svg .hex.tip { <div class="role" id="role_Axis"> <div class="role_name"> Axis - <div class="role_vp" id="axis_vp"></div> + <div class="role_supply" id="axis_supply">0</div> <div class="role_user">-</div> </div> - <div id="info_Axis" class="role_info"></div> </div> <div class="role" id="role_Allied"> <div class="role_name"> Allied - <div class="role_vp" id="allied_vp"></div> + <div class="role_supply" id="allied_supply">0</div> <div class="role_user">-</div> </div> - <div id="info_Allied" class="role_info"></div> </div> <div id="turn_info">1940</div> </div> @@ -1074,8 +1106,8 @@ svg .hex.tip { </div> </div> - -</body> +<div id="hand" class="hand"> +</div> </main> |