Use ID instead of class for battle dialog.

2 files changed, 14 insertions, 14 deletions

diff --git a/play.html b/play.html
index da1ec0d..13db759 100644
--- a/play.html
+++ b/play.html
@@ -147,7 +147,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; }
@@ -265,16 +265,16 @@ body.shift .block.known:hover {
 
 /* BATTLE BOARD */
 
-.battle {
+#battle {
 	background-color: tan;
 	min-width: 700px;
 }
-.battle .battle_message {
+#battle_message {
 	background-color: gainsboro;
 	text-align: center;
 	border-top: 1px solid black;
 }
-.battle .battle_header {
+#battle_header {
 	Xbackground-color: #224467;
 	background-color: steelblue;
 	color: white;
@@ -282,7 +282,7 @@ body.shift .block.known:hover {
 	text-align: center;
 	border-bottom: 1px solid black;
 }
-.battle .battle_menu {
+.battle_menu {
 	margin: 5px 5px;
 }
 
@@ -412,15 +412,15 @@ body.shift .block.known:hover {
 <form id="chat_form" action=""><input id="chat_input" autocomplete="off"></form>
 </div>
 
-<div class="battle">
-<div class="battle_header"></div>
+<div id="battle">
+<div id="battle_header"></div>
 <div id="ER"></div>
 <div id="EC"></div>
 <div id="EF"></div>
 <div id="FF"></div>
 <div id="FC"></div>
 <div id="FR"></div>
-<div class="battle_message"></div>
+<div id="battle_message"></div>
 </div>
 
 <div id="grid_window">
diff --git a/ui.js b/ui.js
index f69a376..c46a99f 100644
--- a/ui.js
+++ b/ui.js
@@ -744,7 +744,7 @@ function update_battle() {
 
 let flash_timer = 0;
 function start_flash() {
-	let element = document.querySelector(".battle_message");
+	let element = document.getElementById("battle_message");
 	let tick = true;
 	if (flash_timer)
 		return;
@@ -783,20 +783,20 @@ 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.getElementById("battle_header").textContent = game.battle.title;
+		document.getElementById("battle_message").textContent = game.battle.flash;
 		if (game.flash_next)
 			start_flash();
-		document.querySelector(".battle").classList.add("show");
+		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", 3);
 init_map_zoom();
 init_shift_zoom();