Use ID instead of class for battle dialog.

2 files changed, 23 insertions, 23 deletions

diff --git a/play.html b/play.html
index 3151c4f..bcdb87a 100644
--- a/play.html
+++ b/play.html
@@ -84,10 +84,10 @@
 
 /* BATTLE BOARD */
 
-.battle { background-color: tan; }
-.battle .battle_message { background-color: wheat; }
-.battle .battle_header { background-color: brown; color: wheat; font-weight: bold; }
-.battle .battle_separator { background-color: brown; }
+#battle { background-color: tan; }
+#battle_message { background-color: wheat; }
+#battle_header { background-color: brown; color: wheat; font-weight: bold; }
+.battle_separator { background-color: brown; }
 
 .battle_line.enemy .battle_menu_list { min-height: 0; }
 .battle_reserves .battle_menu_list { min-height: 0; }
@@ -160,7 +160,7 @@ body.shift .block.known:hover {
 	z-index: 100;
 }
 
-.battle .block { position: relative; }
+#battle .block { position: relative; }
 #map .block { position: absolute; z-index: 2; }
 #map .block.highlight { z-index: 3; }
 #map .block.selected { z-index: 4; }
@@ -239,9 +239,9 @@ body.Observer .columbia-labels .known.jupiter.Cleopatra { border: 3px solid #822
 <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">
@@ -259,7 +259,7 @@ body.Observer .columbia-labels .known.jupiter.Cleopatra { border: 3px solid #822
 <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 58a3885..fbf965a 100644
--- a/ui.js
+++ b/ui.js
@@ -14,20 +14,20 @@ function toggle_blocks() {
 
 function set_simple_labels() {
 	label_style = 'simple';
-	document.querySelector(".blocks").classList.remove("columbia-labels");
-	document.querySelector(".battle").classList.remove("columbia-labels");
-	document.querySelector(".blocks").classList.add("simple-labels");
-	document.querySelector(".battle").classList.add("simple-labels");
+	document.getElementById("blocks").classList.remove("columbia-labels");
+	document.getElementById("battle").classList.remove("columbia-labels");
+	document.getElementById("blocks").classList.add("simple-labels");
+	document.getElementById("battle").classList.add("simple-labels");
 	window.localStorage['julius-caesar/label-style'] = label_style;
 	update_map();
 }
 
 function set_columbia_labels() {
 	label_style = 'columbia';
-	document.querySelector(".blocks").classList.remove("simple-labels");
-	document.querySelector(".battle").classList.remove("simple-labels");
-	document.querySelector(".blocks").classList.add("columbia-labels");
-	document.querySelector(".battle").classList.add("columbia-labels");
+	document.getElementById("blocks").classList.remove("simple-labels");
+	document.getElementById("battle").classList.remove("simple-labels");
+	document.getElementById("blocks").classList.add("columbia-labels");
+	document.getElementById("battle").classList.add("columbia-labels");
 	window.localStorage['julius-caesar/label-style'] = label_style;
 	update_map();
 }
@@ -719,12 +719,12 @@ function on_update() {
 	ui.seen.clear();
 
 	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");
 	}
 
 	for (let b in BLOCKS)
@@ -784,10 +784,10 @@ function select_battle_pass(evt) {
 
 build_map();
 
-document.querySelector(".blocks").classList.add(label_style+'-labels');
-document.querySelector(".battle").classList.add(label_style+'-labels');
+document.getElementById("blocks").classList.add(label_style+'-labels');
+document.getElementById("battle").classList.add(label_style+'-labels');
 
-drag_element_with_mouse(".battle", ".battle_header");
+drag_element_with_mouse("#battle", "#battle_header");
 scroll_with_middle_mouse("#grid_center");
 init_map_zoom();
 init_shift_zoom();