From 9993c378613b20b6f6f74b324c22c3bfda4c71fc Mon Sep 17 00:00:00 2001
From: David Skoland <davidskoland@gmail.com>
Date: Tue, 10 Feb 2026 23:59:48 +0100
Subject: 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>
---
 webAO/dom/renderPlayerList.ts | 25 +++++++++++++++----------
 webAO/styles/client.css       | 17 +++++++++++++++++
 2 files changed, 32 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;
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 88eca59..e3ee820 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -714,6 +714,23 @@
   opacity: 0.5;
 }
 
+#client_playerlist {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+#client_playerlist th,
+#client_playerlist td {
+  border-bottom: 1px solid #555;
+  padding: 4px 6px;
+  text-align: left;
+}
+
+#client_playerlist th {
+  font-weight: bold;
+  border-bottom: 2px solid #888;
+}
+
 .hrtext {
   overflow: hidden;
   text-align: center;
-- 
cgit