summaryrefslogtreecommitdiff
path: root/play.html
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2022-07-07 23:48:36 +0200
committerTor Andersson <tor@ccxvii.net>2022-11-17 13:11:25 +0100
commit68d249e1cff4b1638e4eefa463f3a680ffd62d6c (patch)
treeddd62623d07c373d66100ff598b19d74f1ab928e /play.html
parent689061a44d01813f2cd9faf0299321d0a1d6498a (diff)
downloadrommel-in-the-desert-68d249e1cff4b1638e4eefa463f3a680ffd62d6c.tar.gz
Battle dialog.
Diffstat (limited to 'play.html')
-rw-r--r--play.html97
1 files changed, 97 insertions, 0 deletions
diff --git a/play.html b/play.html
index 9b888f5..5df888b 100644
--- a/play.html
+++ b/play.html
@@ -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">