Position und Text geändert

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;
+}

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 = `<b>${data.user}</b>: ${data.message}`;
+  if (history[data.channel].length > 50) history[data.channel].shift();
 
-  messages.appendChild(div);
+  if (data.channel === channel) updateChat();
 });

views/launcher.ejs

@@ -188,7 +188,7 @@
         <button data-channel="private">Privat</button>
       </div>
 
-      <div id="chat-messages"></div>
+      <textarea id="chat-messages" readonly></textarea>
 
       <div class="chat-input">
         <input id="chat-text" placeholder="Nachricht..." />