const statusLineElement = document.getElementById("status-line");
const statusLineElement2 = statusLineElement.cloneNode();
statusLineElement2.id = "status-line2";
document.body.appendChild(statusLineElement2);

let status = { blocks: [{ text: "Streamboy is connecting...", color: "#ffffff" }] };
let scroll = 0;

setInterval(() => {
  let string = "";
  for (const i in status.blocks) {
    string += status.blocks[i].text;
    if (i < status.blocks.length - 1) string += "    |    ";
  }

  if (scroll >= string.length + 9) scroll = 0;
  const stringWidth = 8 * string.length + 72;
  if (8 * string.length <= statusLineElement.parentElement.clientWidth) {
    scroll = 0;
    statusLineElement.style.removeProperty("position");
    statusLineElement.style.removeProperty("left");
    statusLineElement2.style.display = "none";
    statusLineElement.textContent = string;
    statusLineElement2.textContent = string;
  } else {
    statusLineElement.style.position = "absolute";
    statusLineElement.style.left = `${-8 * scroll}px`;
    statusLineElement2.style.position = "absolute";
    statusLineElement2.style.left = `${-8 * scroll + stringWidth}px`;
    statusLineElement2.style.removeProperty("display");
    scroll += 1;
    statusLineElement.textContent = string + "    |    ";
    statusLineElement2.textContent = string + "    |    ";
  }
}, 500);

const socket = new WebSocket("ws://localhost:8012");

socket.addEventListener("message", (event) => {
  status = JSON.parse(event.data);
});