3 files changed, 60 insertions, 26 deletions
diff --git a/webAO/dom/areaClick.ts b/webAO/dom/areaClick.ts
index 1e41f4b..27682c7 100644
--- a/webAO/dom/areaClick.ts
+++ b/webAO/dom/areaClick.ts
@@ -1,5 +1,5 @@
 import { client } from "../client";
-import { updatePlayerAreas } from "./updatePlayerAreas";
+import { renderPlayerList } from "./renderPlayerList";
 /**
  * Triggered when an item on the area list is clicked.
  * @param {HTMLElement} el
@@ -13,6 +13,6 @@ export function area_click(el: HTMLElement) {
   areaHr.textContent = `switched to ${el.textContent}`;
   document.getElementById("client_log")!.appendChild(areaHr);
   client.area = Number(el.id.substring(4));
-  updatePlayerAreas(client.area);
+  renderPlayerList();
 }
 window.area_click = area_click;
diff --git a/webAO/dom/renderPlayerList.ts b/webAO/dom/renderPlayerList.ts
new file mode 100644
index 0000000..48354ae
--- /dev/null
+++ b/webAO/dom/renderPlayerList.ts
@@ -0,0 +1,58 @@
+import { client } from "../client";
+import { AO_HOST } from "../client/aoHost";
+
+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 = body.insertRow();
+    playerRow.id = `client_playerlist_entry${playerID}`;
+    playerRow.style.display = player.area === client.area ? "" : "none";
+
+    const imgCell = playerRow.insertCell(0);
+    imgCell.style.width = "64px";
+    const img = document.createElement("img");
+    img.style.maxWidth = "60px";
+    img.style.maxHeight = "60px";
+    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.charName ? `[${playerID}] ${player.charName}` : "";
+
+    const showNameCell = playerRow.insertCell(2);
+    showNameCell.textContent = player.showName;
+
+    const oocNameCell = playerRow.insertCell(3);
+    oocNameCell.textContent = player.name;
+
+    const kickCell = playerRow.insertCell(4);
+    kickCell.style.width = "64px";
+    const kick = 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 = document.createElement("button");
+    ban.innerText = "Ban";
+    ban.onclick = () => window.banPlayer(playerID);
+    banCell.appendChild(ban);
+  }
+}
diff --git a/webAO/dom/updatePlayerAreas.ts b/webAO/dom/updatePlayerAreas.ts
deleted file mode 100644
index 99eccf1..0000000
--- a/webAO/dom/updatePlayerAreas.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { client } from "../client";
-import { area_click } from "./areaClick";
-/**
- * Triggered when someone switches areas
- * @param {Number} ownarea
- */
-export function updatePlayerAreas(ownarea: number) {
-  for (let i = 0; i < client.areas.length; i++) {
-    if (i === ownarea)
-      for (let classelement of Array.from(
-        document.getElementsByClassName(
-          `area${i}`,
-        ) as HTMLCollectionOf<HTMLElement>,
-      ))
-        classelement.style.display = "";
-    else
-      for (let classelement of Array.from(
-        document.getElementsByClassName(
-          `area${i}`,
-        ) as HTMLCollectionOf<HTMLElement>,
-      ))
-        classelement.style.display = "none";
-  }
-}