feat: hide/show chat button

Chicken · May 13, 2024 · cdd7d0e · cdd7d0e
1 parent 6280977
commit cdd7d0e
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 3 deletions.
diff --git a/BlueMap/Chat/src/main/resources/bluemap-chat.css b/BlueMap/Chat/src/main/resources/bluemap-chat.css
@@ -7,7 +7,7 @@
     position: absolute;
     bottom: 0;
     left: 0;
-    width: min(calc(100vw - 3em), 600px);
+    width: min(calc(100vw - 4em), 600px);
     height: 300px;
     margin: 0;
     padding: 0;
@@ -54,3 +54,19 @@
     box-sizing: border-box;
     text-shadow: inherit;
 }
+
+#zoom-buttons > .chat-toggle {
+    display: none;
+    margin-bottom: 0.5em;
+}
+.control-bar > .chat-toggle {
+    display: block;
+}
+@media (max-width: 575.98px) {
+    #zoom-buttons > .chat-toggle {
+        display: block;
+    }
+    .control-bar > .chat-toggle {
+        display: none;
+    }
+}
diff --git a/BlueMap/Chat/src/main/resources/bluemap-chat.js b/BlueMap/Chat/src/main/resources/bluemap-chat.js
@@ -19,6 +19,8 @@ function getAuthStatus() {
 
 const nbps = String.fromCharCode(160);
 
+const chatSvg = `<svg viewBox="0 0 30 30"><path d="m 22.988,6.045 c 1.616,0 2.938,0.94 2.938,2.09 v 10.927 c 0,1.15 -1.322,2.09 -2.938,2.09 H 8.55 c -1.616,0 -2.938,-0.94 -2.938,-2.09 V 8.135 c 0,-1.15 1.322,-2.09 2.938,-2.09 z"/><path d="M 12.757,20.93 4.074,23.956 5.795,14.923 Z"/></svg>`;
+
 void async function() {
     const auth = await getAuthStatus().catch(() => {
         console.warn("[Chat/warn] Could not acquire auth status, sending not enabled");
@@ -28,6 +30,7 @@ void async function() {
 
     const root = document.createElement("div");
     root.id = "chat-root";
+    root.style.display = "none";
     const chatMessages = document.createElement("div");
     chatMessages.id = "chat-messages";
     root.appendChild(chatMessages);
@@ -37,12 +40,45 @@ void async function() {
     chatInput.maxLength = 256;
     chatInput.enterKeyHint = "enter";
     root.appendChild(chatInput);
+    document.body.insertBefore(root, document.getElementById("app"));
 
     if (!auth || !auth.loggedIn) {
         chatInput.disabled = true;
         chatInput.placeholder = "Log in to send messages";
     }
 
+    const toggleBtnControl = document.createElement("div");
+    toggleBtnControl.className = "svg-button chat-toggle";
+    toggleBtnControl.innerHTML = chatSvg;
+    const toggleBtnZoom = toggleBtnControl.cloneNode(true);
+    const spacer = document.createElement("div");
+    spacer.className = "space thin-hide";
+
+    const cb = document.querySelector(".control-bar");
+    const cbReference = [...cb.children].find(el => el.className === "space thin-hide greedy");
+    cbReference.parentNode.insertBefore(spacer, cbReference);
+    cbReference.parentNode.insertBefore(toggleBtnControl, cbReference);
+
+    const zb = document.querySelector("#zoom-buttons");
+    zb.insertBefore(toggleBtnZoom, zb.children[0]);
+
+    let chatIsOpen = false;
+    function toggleChat() {
+        if (chatIsOpen) {
+            toggleBtnControl.classList.remove("active");
+            toggleBtnZoom.classList.remove("active");
+            root.style.display = "none";
+        } else {
+            toggleBtnControl.classList.add("active");
+            toggleBtnZoom.classList.add("active");
+            root.style.display = "";
+        }
+        chatIsOpen = !chatIsOpen;
+    }
+
+    toggleBtnControl.addEventListener("click", toggleChat);
+    toggleBtnZoom.addEventListener("click", toggleChat);
+
     chatInput.addEventListener("keydown", (e) => {
         e.stopPropagation();
         if (e.key === "Enter") {
@@ -73,7 +109,9 @@ void async function() {
 
     const e = new EventSource("./addons/chat/stream");
     e.onerror = () => {
-        console.log("[Chat/info] Chat requires login to send messages");
+        console.log("[Chat/info] Chat requires login to receive messages");
+        chatInput.placeholder = "Log in to receive messages";
+        if (chatIsOpen) toggleChat()
     };
     e.onmessage = (event) => {
         const data = JSON.parse(event.data);
@@ -84,7 +122,7 @@ void async function() {
                     root.removeChild(chatInput);
                     chatMessages.style.height = "100%";
                 }
-                document.body.insertBefore(root, document.getElementById("app"));
+                if (!chatIsOpen) toggleChat()
                 break;
             }
             case "chat": {