Refactor playerlist to state-driven rendering with renderPlayerList

handlePR and handlePU now only update client.playerlist state,
and renderPlayerList handles all DOM rendering from that state.

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

1 files changed, 15 insertions, 32 deletions

diff --git a/webAO/packets/handlers/handlePU.ts b/webAO/packets/handlers/handlePU.ts
index d8d9b44..3b70ad3 100644
--- a/webAO/packets/handlers/handlePU.ts
+++ b/webAO/packets/handlers/handlePU.ts
@@ -1,59 +1,42 @@
 import { client } from "../../client";
-import { updatePlayerAreas } from "../../dom/updatePlayerAreas";
-import { AO_HOST } from "../../client/aoHost";
 import { ensureCharIni } from "../../client/handleCharacterInfo";
+import { renderPlayerList } from "../../dom/renderPlayerList";
 
 /**
  * Handles a playerlist update
  * @param {Array} args packet arguments
  */
 export const handlePU = (args: string[]) => {
-  const playerRow = <HTMLTableElement>(
-    document.getElementById(`client_playerlist_entry${Number(args[1])}`)
-  );
+  const playerID = Number(args[1]);
+  const player = client.playerlist.get(playerID);
+  if (!player) return;
+
   const type = Number(args[2]);
   const data = args[3];
+
   switch (type) {
     case 0:
-      const oocName = <HTMLElement>playerRow.childNodes[3];
-      oocName.innerText = data;
+      player.name = data;
       break;
     case 1:
-      const playerImg = <HTMLImageElement>playerRow.childNodes[0].firstChild;
-      playerImg.alt = data;
-      playerImg.title = data;
-      const iconExt = client.charicon_extensions[0] || ".png";
-      playerImg.src = `${AO_HOST}characters/${encodeURI(data.toLowerCase())}/char_icon${iconExt}`;
-      const charName = <HTMLElement>playerRow.childNodes[1];
-      charName.innerText = `[${args[1]}] ${data}`;
+      player.charName = data;
       const charId = client.chars.findIndex(
         (c: any) => c && c.name.toLowerCase() === data.toLowerCase()
       );
       if (charId >= 0) {
-        const player = client.players.get(Number(args[1]));
-        if (player) {
-          player.charId = charId;
-          if (player.area === client.area) {
-            ensureCharIni(charId);
-          }
-        }
+        player.charId = charId;
+        ensureCharIni(charId);
       }
       break;
     case 2:
-      const showName = <HTMLElement>playerRow.childNodes[2];
-      showName.innerText = data;
+      player.showName = data;
       break;
     case 3:
-      playerRow.className = `area${data}`;
-      updatePlayerAreas(client.area);
-      const puPlayer = client.players.get(Number(args[1]));
-      if (puPlayer) {
-        puPlayer.area = Number(data);
-        if (puPlayer.area === client.area && puPlayer.charId >= 0) {
-          ensureCharIni(puPlayer.charId);
-        }
-      }
+      player.area = Number(data);
+      break;
     default:
       break;
   }
+
+  renderPlayerList();
 };