Add notepad.

2 files changed, 132 insertions, 18 deletions

diff --git a/public/common/play.css b/public/common/play.css
index 314bf2a..02a667d 100644
--- a/public/common/play.css
+++ b/public/common/play.css
@@ -4,12 +4,12 @@ html {
 	image-rendering: -webkit-optimize-contrast; /* try to fix chromium's terrible image rescaling */
 }
 
-html, button, input, select {
+html, button, input, select, textarea {
 	font-family: "Source Sans", "Circled Numbers", "Dingbats", "Noto Emoji", "Verdana", sans-serif;
 	font-size: 16px;
 }
 
-#chat_text, #chat_input {
+#chat_text, #chat_input, #notepad_input {
 	font-family: "Source Serif", "Circled Numbers", "Dingbats", "Noto Emoji", "Georgia", serif;
 }
 
@@ -301,10 +301,18 @@ header .replay button {
 }
 
 #chat_window {
-	position: fixed;
 	left: 24px;
 	top: 68px;
 	width: 640px;
+}
+
+#notepad_window {
+	left: 60px;
+	top: 200px;
+}
+
+#chat_window, #notepad_window {
+	position: fixed;
 	z-index: 500;
 	border: 1px solid black;
 	background-color: white;
@@ -312,11 +320,11 @@ header .replay button {
 	visibility: hidden;
 }
 
-#chat_window.show {
+#chat_window.show, #notepad_window.show {
 	visibility: visible;
 }
 
-#chat_header {
+#chat_header, #notepad_header {
 	user-select: none;
 	cursor: move;
 	background-color: gainsboro;
@@ -324,7 +332,7 @@ header .replay button {
 	padding: 4px 8px;
 }
 
-#chat_x {
+#chat_x, #notepad_x {
 	user-select: none;
 	cursor: pointer;
 	float: right;
@@ -332,12 +340,13 @@ header .replay button {
 	margin: 4px 4px;
 }
 
-#chat_x:hover {
+#chat_x:hover, #notepad_x:hover {
 	background-color: black;
 	color: white;
 }
 
-#chat_text {
+#chat_text, #notepad_input {
+	margin: 0;
 	font-size: 16px;
 	line-height: 24px;
 	height: 216px;
@@ -365,6 +374,20 @@ header .replay button {
 	font-size: 16px;
 }
 
+#notepad_input {
+	outline: none;
+	border: none;
+	resize: none;
+}
+
+#notepad_footer {
+	display: flex;
+	justify-content: end;
+	padding: 8px;
+	background-color: gainsboro;
+	border-top: 1px solid black;
+}
+
 /* MOBILE PHONE LAYOUT */
 
 @media (max-width: 640px) {
@@ -399,7 +422,7 @@ header .replay button {
 		white-space: normal;
 	}
 
-	#chat_window {
+	#chat_window, #notepad_window {
 		position: static;
 		grid-column: 1;
 		grid-row: 2;
@@ -408,7 +431,7 @@ header .replay button {
 		box-shadow: none;
 		border-top: none;
 	}
-	#chat_window.show {
+	#chat_window.show, #notepad_window.show {
 		display: block;
 	}
 
diff --git a/public/common/play.js b/public/common/play.js
index 613d3a3..ba59d6f 100644
--- a/public/common/play.js
+++ b/public/common/play.js
@@ -177,8 +177,9 @@ function init_chat() {
 			}
 		}
 		if (e.key === "Enter") {
-			let input = document.getElementById("chat_input")
-			if (document.activeElement !== input) {
+			let chat_input = document.getElementById("chat_input")
+			let notepad_input = document.getElementById("notepad_input")
+			if (document.activeElement !== chat_input && document.activeElement !== notepad_input) {
 				e.preventDefault()
 				show_chat()
 			}
@@ -257,6 +258,83 @@ function toggle_chat() {
 		show_chat()
 }
 
+/* NOTEPAD */
+
+let notepad = null
+
+function init_notepad() {
+	if (notepad !== null)
+		return
+
+	add_main_menu_item("Notepad", toggle_notepad)
+
+	let notepad_window = document.createElement("div")
+	notepad_window.id = "notepad_window"
+	notepad_window.innerHTML = `
+		<div id="notepad_x" onclick="toggle_notepad()">\u274c</div>
+		<div id="notepad_header">Notepad: ${player}</div>
+		<textarea id="notepad_input" cols="55" rows="20" maxlength="16000" oninput="dirty_notepad()"></textarea>
+		<div id="notepad_footer"><button id="notepad_save" onclick="save_notepad()" disabled>Save</button></div>
+		`
+	document.querySelector("body").appendChild(notepad_window)
+
+	notepad = {
+		is_visible: false,
+		is_dirty: false,
+	}
+
+	drag_element_with_mouse("#notepad_window", "#notepad_header")
+}
+
+function dirty_notepad() {
+	if (!notepad.is_dirty) {
+		notepad.is_dirty = true
+		document.getElementById("notepad_save").disabled = false
+	}
+}
+
+function save_notepad() {
+	if (notepad.is_dirty) {
+		let text = document.getElementById("notepad_input").value
+		send_message("putnote", text)
+		notepad.is_dirty = false
+		document.getElementById("notepad_save").disabled = true
+	}
+}
+
+function load_notepad() {
+	send_message("getnote")
+}
+
+function update_notepad(text) {
+	document.getElementById("notepad_input").value = text
+}
+
+function show_notepad() {
+	if (!notepad.is_visible) {
+		load_notepad()
+		document.getElementById("notepad_window").classList.add("show")
+		document.getElementById("notepad_input").focus()
+		notepad.is_visible = true
+	}
+}
+
+function hide_notepad() {
+	if (notepad.is_visible) {
+		save_notepad()
+		document.getElementById("notepad_window").classList.remove("show")
+		document.getElementById("notepad_input").blur()
+		notepad.is_visible = false
+	}
+}
+
+function toggle_notepad() {
+	if (notepad.is_visible)
+		hide_notepad()
+	else
+		show_notepad()
+}
+
 /* REMATCH BUTTON */
 
 function remove_resign_menu() {
@@ -361,13 +439,19 @@ function connect_play() {
 			update_chat(arg[0], arg[1], arg[2], arg[3])
 			break
 
+		case 'note':
+			update_notepad(arg)
+			break
+
 		case 'players':
 			player = arg[0]
 			document.querySelector("body").classList.add(player.replace(/ /g, "_"))
-			if (player !== "Observer")
+			if (player !== "Observer") {
 				init_chat()
-			else
+				init_notepad()
+			} else {
 				remove_resign_menu()
+			}
 			init_player_names(arg[1])
 			break
 
@@ -908,16 +992,23 @@ window.addEventListener("load", function () {
 		connect_play()
 })
 
-function init_home_menu(link, text) {
+function init_main_menu() {
 	let popup = document.querySelector(".menu_popup")
 	let sep = document.createElement("div")
 	sep.className = "menu_separator"
+	sep.id = "main_menu_separator"
 	popup.insertBefore(sep, popup.firstChild)
+}
+
+function add_main_menu_item(text, onclick) {
+	let popup = document.querySelector(".menu_popup")
+	let sep = document.getElementById("main_menu_separator")
 	let item = document.createElement("div")
 	item.className = "menu_item"
-	item.onclick = () => window.open(link, "_self")
+	item.onclick = onclick
 	item.textContent = text
-	popup.insertBefore(item, popup.firstChild)
+	popup.insertBefore(item, sep)
 }
 
-init_home_menu("/games/active", "Go Home")
+init_main_menu()
+add_main_menu_item("Go Home", () => window.open("/games/active", "_self"))