spawns a auto-updating user list. Update 1: (now with colored names)

let lastDraw = [];
let lastHeight = 0;
let lastWidth = 0;

let spawnX = cursor.x;
let spawnY = cursor.y;

// Draw only changed characters + colors
function drawDiffLines(lines, x0, y0) {
  for (let y = 0; y < lines.length; y++) {
    const newLine = lines[y];
    const oldLine = lastDraw[y] || [];

    const maxLen = Math.max(newLine.length, oldLine.length);

    for (let x = 0; x < maxLen; x++) {
      const n = newLine[x] || { char: " ", color: 0 };
      const o = oldLine[x] || { char: " ", color: 0 };

      if (n.char !== o.char || n.color !== o.color) {
        writeCharAt(n.char, n.color, x0 + x, y0 + y);
      }
    }
  }

  lastDraw = lines.map(r => [...r]);
  lastHeight = lines.length;
  lastWidth = Math.max(...lines.map(r => r.length));
}

// Colored username
function makeColoredText(text, color) {
  return [...text].map(ch => ({ char: ch, color }));
}

// Normal text
function makeText(text) {
  return [...text].map(ch => ({ char: ch, color: 0 }));
}

function ut() {
  let rows = [];

  // Build new content
  for (const [id, cur] of w.cursors) {
    if (!cur) continue;

    const cname = cur.n;
    const ccolor = cur.c || 0;
    const rest = ` | ${cur.id} → (${cur.l[0]},${cur.l[1]})`;

    rows.push([
      ...makeColoredText(cname, ccolor),
      ...makeText(rest)
    ]);
  }

  rows.push(makeText(""));
  rows.push(makeText("Client: " + w.clientId));
  rows.push(makeText("Color:  " + (localStorage.col || "?")));

  // ---- CLEAR PREVIOUS AREA IF NEW ONE IS SMALLER ----
  const newHeight = rows.length;
  const newWidth = Math.max(...rows.map(r => r.length));

  if (newHeight < lastHeight || newWidth < lastWidth) {
    const clearRows = [];

    for (let y = 0; y < lastHeight; y++) {
      clearRows.push(
        [...Array(lastWidth)].map(() => ({ char: " ", color: 0 }))
      );
    }

    drawDiffLines(clearRows, spawnX, spawnY);
  }

  // ---- DRAW ACTUAL CONTENT ----
  drawDiffLines(rows, spawnX, spawnY);

  requestAnimationFrame(ut);
}

ut();