From 1f9b51478992c419faadec81b5766fb7883562ff Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Mon, 20 Dec 2021 17:20:47 +0100
Subject: Use ID instead of class for battle dialog.

---
 play.html | 20 ++++++++------------
 ui.js     | 10 +++++-----
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/play.html b/play.html
index e5ae252..916c401 100644
--- a/play.html
+++ b/play.html
@@ -29,10 +29,6 @@
 #log .bs { background-color: lightsteelblue; }
 #log .br { font-style: italic; text-decoration: underline; }
 
-.battle_header { background-color: silver; }
-.battle_message { background-color: silver; }
-.battle_separator { background-color: silver; }
-
 .hand {
 	min-height: 300px;
 }
@@ -124,7 +120,7 @@ body.shift .block.known:hover {
 	z-index: 100;
 }
 
-.battle div.block {
+#battle div.block {
 	position: relative;
 }
 
@@ -175,10 +171,10 @@ div.block {
 
 /* BATTLE BOARD */
 
-.battle { background-color: silver; }
-.battle .battle_message { background-color: lightsteelblue; }
-.battle .battle_header { background-color: steelblue; color: white; font-weight: bold; }
-.battle .battle_separator { background-color: steelblue; }
+#battle { background-color: silver; }
+#battle_message { background-color: lightsteelblue; }
+#battle_header { background-color: steelblue; color: white; font-weight: bold; }
+.battle_separator { background-color: steelblue; }
 
 .battle_reserves > td > div { height: 75px; padding: 5px; }
 .battle_a_cell > div { min-width: 180px; padding: 5px 10px; }
@@ -278,9 +274,9 @@ div.block {
 <form id="chat_form" action=""><input id="chat_input" autocomplete="off"></form>
 </div>
 
-<table class="battle">
+<table id="battle">
 <tr>
-<th class="battle_header" colspan=4></th>
+<th id="battle_header" colspan=4></th>
 <tr class="battle_reserves enemy">
 <td colspan=4><div id="ER"></div></td>
 <tr class="battle_line enemy">
@@ -298,7 +294,7 @@ div.block {
 <tr class="battle_reserves friendly">
 <td colspan=4><div id="FR"></div></td>
 <tr>
-<th class="battle_message" colspan=4></th>
+<th id="battle_message" colspan=4></th>
 </table>
 
 <div id="grid_window">
diff --git a/ui.js b/ui.js
index 53125ae..ab7f4d1 100644
--- a/ui.js
+++ b/ui.js
@@ -782,18 +782,18 @@ function on_update() {
 	update_map();
 
 	if (game.battle) {
-		document.querySelector(".battle_header").textContent = game.battle.title;
-		document.querySelector(".battle_message").textContent = game.battle.flash;
-		document.querySelector(".battle").classList.add("show");
+		document.getElementById("battle_header").textContent = game.battle.title;
+		document.getElementById("battle_message").textContent = game.battle.flash;
+		document.getElementById("battle").classList.add("show");
 		update_battle();
 	} else {
-		document.querySelector(".battle").classList.remove("show");
+		document.getElementById("battle").classList.remove("show");
 	}
 }
 
 build_map();
 
-drag_element_with_mouse(".battle", ".battle_header");
+drag_element_with_mouse("#battle", "#battle_header");
 scroll_with_middle_mouse("#grid_center", 2);
 init_map_zoom();
 init_shift_zoom();
-- 
cgit v1.2.3