From f968d091d6c3f313054b88a048c63280dd73fd31 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Wed, 28 Sep 2022 18:00:03 +0200 Subject: Add notepad. --- public/common/play.css | 43 +++++++++++++++----- public/common/play.js | 107 +++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 132 insertions(+), 18 deletions(-) (limited to 'public') 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 = ` +
\u274c
+
Notepad: ${player}
+ + + ` + 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")) -- cgit v1.2.3