const socket = io();

let channel = "global";

const messages = document.getElementById("chat-messages");

socket.emit("register", "Spieler");

document.querySelectorAll(".chat-channels button").forEach((btn) => {
  btn.onclick = () => {
    document
      .querySelectorAll(".chat-channels button")
      .forEach((b) => b.classList.remove("active"));

    btn.classList.add("active");

    channel = btn.dataset.channel;

    messages.innerHTML = "";
  };
});

document.getElementById("chat-send").onclick = () => {
  const text = document.getElementById("chat-text").value;

  if (!text) return;

  socket.emit("chatMessage", {
    channel: channel,
    message: text,
  });

  document.getElementById("chat-text").value = "";
};

socket.on("chatMessage", (data) => {
  if (data.channel !== channel) return;

  const div = document.createElement("div");

  div.innerHTML = `<b>${data.user}</b>: ${data.message}`;

  messages.appendChild(div);
});