diff --git a/public/css/launcher.css b/public/css/launcher.css index 52b3738..01d4690 100644 --- a/public/css/launcher.css +++ b/public/css/launcher.css @@ -105,3 +105,44 @@ .tab-content.active { display: block; } + +#game-chat { + position: absolute; + + left: 0px; + top: 732px; + + width: 296px; + height: 285px; + + background: linear-gradient(#2b2115, #1a140d); + + border: 3px solid #8b6a3c; + + color: #f3e6c5; + + font-family: serif; + + display: flex; + flex-direction: column; + + z-index: 200; +} + +#chat-messages { + flex: 1; + + resize: none; + + background: #1b140b; + + border: none; + + color: #f3e6c5; + + padding: 5px; + + font-size: 13px; + + overflow-y: auto; +} diff --git a/public/js/chat.js b/public/js/chat.js index 986f148..590de2f 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -2,9 +2,19 @@ const socket = io(); let channel = "global"; -const messages = document.getElementById("chat-messages"); +const chatBox = document.getElementById("chat-messages"); -socket.emit("register", "Spieler"); +let history = { + global: [], + guild: [], + private: [], +}; + +function updateChat() { + chatBox.value = history[channel].join("\n"); + + chatBox.scrollTop = chatBox.scrollHeight; +} document.querySelectorAll(".chat-channels button").forEach((btn) => { btn.onclick = () => { @@ -16,7 +26,7 @@ document.querySelectorAll(".chat-channels button").forEach((btn) => { channel = btn.dataset.channel; - messages.innerHTML = ""; + updateChat(); }; }); @@ -34,11 +44,11 @@ document.getElementById("chat-send").onclick = () => { }; socket.on("chatMessage", (data) => { - if (data.channel !== channel) return; + const line = `${data.user}: ${data.message}`; - const div = document.createElement("div"); + history[data.channel].push(line); - div.innerHTML = `${data.user}: ${data.message}`; + if (history[data.channel].length > 50) history[data.channel].shift(); - messages.appendChild(div); + if (data.channel === channel) updateChat(); }); diff --git a/views/launcher.ejs b/views/launcher.ejs index c9bcef5..019ae28 100644 --- a/views/launcher.ejs +++ b/views/launcher.ejs @@ -188,7 +188,7 @@ -
+