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, 4 insertions, 51 deletions

diff --git a/webAO/packets/handlers/handlePR.ts b/webAO/packets/handlers/handlePR.ts
index e39103d..f81d8dc 100644
--- a/webAO/packets/handlers/handlePR.ts
+++ b/webAO/packets/handlers/handlePR.ts
@@ -1,51 +1,5 @@
 import { client } from "../../client";
-import { kickPlayer, banPlayer } from "../../dom/banPlayer";
-
-function addPlayer(playerID: number) {
-  const list = <HTMLTableElement>document.getElementById("client_playerlist");
-  const playerRow = list.insertRow();
-  playerRow.id = `client_playerlist_entry${playerID}`;
-  playerRow.className = `area0`;
-
-  const imgCell = playerRow.insertCell(0);
-  imgCell.style.width = "64px";
-  const img = document.createElement("img");
-  imgCell.appendChild(img);
-
-  const name = document.createTextNode("No Data");
-
-  const charNameCell = playerRow.insertCell(1);
-  charNameCell.appendChild(name);
-  const showNameCell = playerRow.insertCell(2);
-  showNameCell.appendChild(name);
-  const oocNameCell = playerRow.insertCell(3);
-  oocNameCell.appendChild(name);
-
-  const kickCell = playerRow.insertCell(4);
-  kickCell.style.width = "64px";
-  const kick = <HTMLButtonElement>document.createElement("button");
-  kick.innerText = "Kick";
-  kick.onclick = () => {
-    window.kickPlayer(playerID);
-  };
-  kickCell.appendChild(kick);
-
-  const banCell = playerRow.insertCell(5);
-  banCell.style.width = "64px";
-  const ban = <HTMLButtonElement>document.createElement("button");
-  ban.innerText = "Ban";
-  ban.onclick = () => {
-    window.banPlayer(playerID);
-  };
-  banCell.appendChild(ban);
-}
-
-function removePlayer(playerID: number) {
-  const playerRow = <HTMLTableElement>(
-    document.getElementById(`client_playerlist_entry${playerID}`)
-  );
-  playerRow.remove();
-}
+import { renderPlayerList } from "../../dom/renderPlayerList";
 
 /**
  * Handles a player joining or leaving
@@ -54,10 +8,9 @@ function removePlayer(playerID: number) {
 export const handlePR = (args: string[]) => {
   const playerID = Number(args[1]);
   if (Number(args[2]) === 0) {
-    addPlayer(playerID);
-    client.players.set(playerID, { charId: -1, area: 0 });
+    client.playerlist.set(playerID, { charId: -1, charName: "", showName: "", name: "", area: 0 });
   } else if (Number(args[2]) === 1) {
-    removePlayer(playerID);
-    client.players.delete(playerID);
+    client.playerlist.delete(playerID);
   }
+  renderPlayerList();
 };