Use charName directly for playerlist rendering and add table styling

Render char icons and names from the character name string (PU type 1)
instead of gating on charId lookup. Add header row and row separators
to the playerlist table.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

1 files changed, 15 insertions, 10 deletions

diff --git a/webAO/dom/renderPlayerList.ts b/webAO/dom/renderPlayerList.ts
index 43dab64..d0f08c6 100644
--- a/webAO/dom/renderPlayerList.ts
+++ b/webAO/dom/renderPlayerList.ts
@@ -5,27 +5,32 @@ export function renderPlayerList() {
   const list = document.getElementById("client_playerlist") as HTMLTableElement;
   list.innerHTML = "";
 
+  const header = list.createTHead().insertRow();
+  for (const label of ["Icon", "Character", "Showname", "OOC Name"]) {
+    const th = document.createElement("th");
+    th.textContent = label;
+    header.appendChild(th);
+  }
+
+  const body = list.createTBody();
   for (const [playerID, player] of client.playerlist) {
-    const playerRow = list.insertRow();
+    const playerRow = body.insertRow();
     playerRow.id = `client_playerlist_entry${playerID}`;
 
     const imgCell = playerRow.insertCell(0);
     imgCell.style.width = "64px";
     const img = document.createElement("img");
-    if (player.charId >= 0) {
-      const char = client.chars[player.charId];
-      if (char) {
-        const iconExt = client.charicon_extensions[0] || ".png";
-        img.src = `${AO_HOST}characters/${encodeURI(char.name.toLowerCase())}/char_icon${iconExt}`;
-        img.alt = char.name;
-        img.title = char.name;
-      }
+    if (player.charName) {
+      const iconExt = client.charicon_extensions[0] || ".png";
+      img.src = `${AO_HOST}characters/${encodeURI(player.charName.toLowerCase())}/char_icon${iconExt}`;
+      img.alt = player.charName;
+      img.title = player.charName;
     }
     imgCell.appendChild(img);
 
     const charNameCell = playerRow.insertCell(1);
     charNameCell.textContent =
-      player.charId >= 0 ? `[${playerID}] ${player.charName}` : "";
+      player.charName ? `[${playerID}] ${player.charName}` : "";
 
     const showNameCell = playerRow.insertCell(2);
     showNameCell.textContent = player.showName;