Use ID instead of class for prompt, chat window, and chat button.

2 files changed, 18 insertions, 19 deletions

diff --git a/public/common/client.js b/public/common/client.js
index a8ce4b2..8046bde 100644
--- a/public/common/client.js
+++ b/public/common/client.js
@@ -117,7 +117,7 @@ window.addEventListener("focus", stop_blinker);
 
 function load_chat() {
 	chat_key = "chat/" + param_game_id;
-	chat_text = document.querySelector(".chat_text");
+	chat_text = document.getElementById("chat_text");
 	chat_last_day = null;
 	chat_log = 0;
 	chat_seen = window.localStorage.getItem(chat_key) | 0;
@@ -158,7 +158,7 @@ function update_chat(chat_id, utc_date, user, message) {
 		add_chat_line(format_time(date), user, message);
 	}
 	if (chat_id > chat_seen) {
-		let button = document.querySelector(".chat_button");
+		let button = document.getElementById("chat_button");
 		start_blinker("NEW MESSAGE");
 		if (!chat_is_visible)
 			button.classList.add("new");
@@ -216,7 +216,7 @@ function init_client(roles) {
 		console.log("ROLES", me, JSON.stringify(players));
 		player = me.replace(/ /g, '_');
 		if (player === "Observer")
-			document.querySelector(".chat_button").style.display = "none";
+			document.getElementById("chat_button").style.display = "none";
 		document.querySelector("body").classList.add(player);
 		for (let i = 0; i < roles.length; ++i) {
 			let pr = players.find(p => p.role === roles[i]);
@@ -260,7 +260,7 @@ function init_client(roles) {
 		update_chat(item[0], item[1], item[2], item[3]);
 	});
 
-	document.querySelector(".chat_form").addEventListener("submit", e => {
+	document.getElementById("chat_form").addEventListener("submit", e => {
 		let input = document.getElementById("chat_input");
 		e.preventDefault();
 		if (input.value) {
@@ -289,7 +289,7 @@ function init_client(roles) {
 		}
 	});
 
-	drag_element_with_mouse(".chat_window", ".chat_header");
+	drag_element_with_mouse("#chat_window", "#chat_header");
 }
 
 let is_your_turn = false;
@@ -346,8 +346,8 @@ function toggle_fullscreen() {
 
 function show_chat() {
 	if (!chat_is_visible) {
-		document.querySelector(".chat_button").classList.remove("new");
-		document.querySelector(".chat_window").classList.add("show");
+		document.getElementById("chat_button").classList.remove("new");
+		document.getElementById("chat_window").classList.add("show");
 		document.getElementById("chat_input").focus();
 		chat_is_visible = true;
 		save_chat();
@@ -356,7 +356,7 @@ function show_chat() {
 
 function hide_chat() {
 	if (chat_is_visible) {
-		document.querySelector(".chat_window").classList.remove("show");
+		document.getElementById("chat_window").classList.remove("show");
 		document.getElementById("chat_input").blur();
 		chat_is_visible = false;
 	}
diff --git a/public/common/grid.css b/public/common/grid.css
index 0fd147d..2692b0a 100644
--- a/public/common/grid.css
+++ b/public/common/grid.css
@@ -9,7 +9,7 @@ html, button, input, select {
 	font-size: 16px;
 }
 
-.chat_text, #chat_input {
+#chat_text, #chat_input {
 	font-family: "Source Serif", "Circled Numbers", "Dingbats", "Noto Emoji", "Georgia", serif;
 }
 
@@ -30,7 +30,7 @@ html {
 	overflow: clip;
 }
 
-.status {
+#status {
 	position:absolute;
 	z-index: 100;
 	left: 0;
@@ -180,7 +180,6 @@ body.Observer .menu .resign {
 	display: none;
 }
 
-
 .image_button {
 	user-select: none;
 }
@@ -204,7 +203,7 @@ body.Observer .menu .resign {
 	display: none;
 }
 
-.prompt {
+#prompt {
 	margin: 0 50px;
 	font-size: large;
 	flex-grow: 1;
@@ -279,10 +278,10 @@ button:enabled:active:hover {
 
 /* CHAT WINDOW */
 
-.chat_button.new {
+#chat_button.new {
 	filter: invert(100%);
 }
-.chat_window {
+#chat_window {
 	position: absolute;
 	left: 10px;
 	top: 55px;
@@ -295,26 +294,26 @@ button:enabled:active:hover {
 	display: grid;
 	grid-template-rows: min-content 1fr min-content;
 }
-.chat_window.show {
+#chat_window.show {
 	visibility: visible;
 }
-.chat_header {
+#chat_header {
 	cursor: move;
 	background-color: gainsboro;
 	border-bottom: 1px solid black;
 	padding: 5px 10px;
 }
-.chat_text {
+#chat_text {
 	font-size: 16px;
 	line-height: 24px;
 	height: 216px;
 	padding: 0px 5px;
 	overflow-y: scroll;
 }
-.chat_text .date {
+#chat_text .date {
 	font-weight: bold;
 }
-.chat_form {
+#chat_form {
 	display: block;
 	margin: 0;
 	padding: 0;