(function () {
  const roster = document.getElementById("roster");
  if (!roster) return;

  function escape(s) {
    const d = document.createElement("div");
    d.textContent = s;
    return d.innerHTML;
  }

  function render(list) {
    roster.innerHTML = list
      .map(
        (w) =>
          `<li><span class="dot ${w.status}"></span> <strong>${escape(w.username)}</strong> <span class="muted">— last seen ${escape(w.lastSeen)}</span></li>`
      )
      .join("");
  }

  async function poll() {
    try {
      const r = await fetch("/waddlers", { headers: { Accept: "application/json" } });
      if (r.ok) render(await r.json());
    } catch (e) {
      console.error(e);
    }
  }

  setInterval(poll, 2000);
})();