diff options
| author | Tor Andersson <tor@ccxvii.net> | 2022-07-07 23:48:36 +0200 |
|---|---|---|
| committer | Tor Andersson <tor@ccxvii.net> | 2022-11-17 13:11:25 +0100 |
| commit | 68d249e1cff4b1638e4eefa463f3a680ffd62d6c (patch) | |
| tree | ddd62623d07c373d66100ff598b19d74f1ab928e /play.html | |
| parent | 689061a44d01813f2cd9faf0299321d0a1d6498a (diff) | |
| download | rommel-in-the-desert-68d249e1cff4b1638e4eefa463f3a680ffd62d6c.tar.gz | |
Battle dialog.
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 97 |
1 files changed, 97 insertions, 0 deletions
@@ -31,6 +31,80 @@ header.your_turn { background-color: orange; } cursor: pointer; } +/* BATTLE DIALOG */ + +#battle_header { background-color: brown; color: gold } +#battle_hits { background-color: #c4ab8b; } +#battle_line_1, #battle_line_2 { background-color: #d6c4a9; background: url(texture_clear.png); } +#battle_buttons { background-color: #c4ab8b; } +#battle_message { background-color: #d6c4a9; } + +#battle { + position: fixed; + min-width: 524px; /* 6 blocks wide */ + left: 12px; + top: 56px; + z-index: 100; + box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); + border: 1px solid black; + user-select: none; +} + +#battle_header { + cursor: move; + padding: 2px 8px; + line-height: 24px; + min-height: 24px; + text-align: center; + font-weight: bold; + border-bottom: 1px solid black; +} + +#battle_message { + padding: 2px 8px; + line-height: 24px; + min-height: 24px; + text-align: center; + border-top: 1px solid black; +} + +#battle_hits { + padding: 4px; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 6px; + border-bottom: 1px solid black; +} + +#battle_hits .hits_text { + width: 24px; +} + +#battle_hits .hits_icon { + display: block; + vertical-align: middle +} + +#battle_line_1, #battle_line_2 { + padding: 20px; + min-height: 60px; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 16px; +} + +#battle_buttons { + padding: 12px; + min-height: 28px; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 12px; + border-top: 1px solid black; +} + /* TABLES */ table { border-collapse: collapse; font-size: 12px; } @@ -361,6 +435,29 @@ svg .hex.allied_control { </head> <body> + <div id="battle" class="hide"> + <div id="battle_header"></div> + <div id="battle_hits"> + <img class="hits_icon" src="icons/armor.svg"> + <div class="hits_text" id="hits_armor">0</div> + <img class="hits_icon" src="icons/infantry.svg"> + <div class="hits_text" id="hits_infantry">0</div> + <img class="hits_icon" src="icons/motorized_antitank_old.svg"> + <div class="hits_text" id="hits_antitank">0</div> + <img class="hits_icon" src="icons/artillery.svg"> + <div class="hits_text" id="hits_artillery">0</div> + </div> + <div id="battle_line_1"></div> + <div id="battle_line_2"></div> + <div id="battle_buttons"> + <button id="target_armor_button" onclick="send_action('armor')">Armor</button> + <button id="target_infantry_button" onclick="send_action('infantry')">Infantry</button> + <button id="target_antitank_button" onclick="send_action('antitank')">Anti-tank</button> + <button id="target_artillery_button" onclick="send_action('artillery')">Artillery</button> + </div> + <div id="battle_message"></div> + </div> + <header> <div id="toolbar"> <div class="menu"> |