Add "X" close button to chat window.

2 files changed, 15 insertions, 0 deletions

diff --git a/public/common/play.css b/public/common/play.css
index 4a413fc..efd6d88 100644
--- a/public/common/play.css
+++ b/public/common/play.css
@@ -320,12 +320,26 @@ header .replay button {
 }
 
 #chat_header {
+	user-select: none;
 	cursor: move;
 	background-color: gainsboro;
 	border-bottom: 1px solid black;
 	padding: 5px 10px;
 }
 
+#chat_x {
+	user-select: none;
+	cursor: pointer;
+	float: right;
+	padding: 0px 2px;
+	margin: 5px 5px;
+}
+
+#chat_x:hover {
+	background-color: black;
+	color: white;
+}
+
 #chat_text {
 	font-size: 16px;
 	line-height: 24px;
diff --git a/public/common/play.js b/public/common/play.js
index aeb30b9..8a748c6 100644
--- a/public/common/play.js
+++ b/public/common/play.js
@@ -124,6 +124,7 @@ function init_chat() {
 	let chat_window = document.createElement("div");
 	chat_window.id = "chat_window";
 	chat_window.innerHTML = `
+		<div id="chat_x" onclick="toggle_chat()">\u274c</div>
 		<div id="chat_header">Chat</div>
 		<div id="chat_text"></div>
 		<form id="chat_form" action=""><input id="chat_input" autocomplete="off"></form>