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>

2 files changed, 32 insertions, 10 deletions

diff --git a/webAO/dom/renderPlayerList.ts b/webAO/dom/renderPlayerList.ts
index 43dab648..d0f08c60 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 88eca592..e3ee820b 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;