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 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;