4 files changed, 93 insertions, 9 deletions

diff --git a/webAO/packets/handlers/handlePR.ts b/webAO/packets/handlers/handlePR.ts
new file mode 100644
index 0000000..a52ad1f
--- /dev/null
+++ b/webAO/packets/handlers/handlePR.ts
@@ -0,0 +1,44 @@
+import { client } from "../../client";
+import { 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}`;
+
+    const imgCell = playerRow.insertCell(0);
+    const img = document.createElement('img');
+    imgCell.appendChild(img);
+
+    const name = document.createTextNode('Unknown');
+
+    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 banCell = playerRow.insertCell(4);
+    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();
+}
+
+/**
+  * Handles a player joining or leaving
+  * @param {Array} args packet arguments
+  */
+export const handlePR = (args: string[]) => {
+    const playerID = Number(args[1]);
+    if (Number(args[2]) === 0)
+        addPlayer(playerID);
+    else if (Number(args[2]) === 1)
+        removePlayer(playerID);
+}
\ No newline at end of file
diff --git a/webAO/packets/handlers/handlePU.ts b/webAO/packets/handlers/handlePU.ts
new file mode 100644
index 0000000..6db644b
--- /dev/null
+++ b/webAO/packets/handlers/handlePU.ts
@@ -0,0 +1,29 @@
+import { getCharIcon } from "../../client/handleCharacterInfo";
+
+/**
+  * 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 type = Number(args[2]);
+    const data = args[3];
+    switch (type) {
+        case 0:
+            const oocName = <HTMLElement>playerRow.childNodes[3];
+            oocName.innerText = data;
+            break;
+        case 1:
+            const playerImg = <HTMLImageElement>playerRow.childNodes[0].firstChild;
+            getCharIcon(playerImg, data);
+            const charName = <HTMLElement>playerRow.childNodes[1];
+            charName.innerText = data;
+            break;
+        case 2:
+            const showName = <HTMLElement>playerRow.childNodes[2];
+            showName.innerText = data;
+            break;
+        default:
+            break;
+    }
+}
\ No newline at end of file
diff --git a/webAO/packets/handlers/handlePV.ts b/webAO/packets/handlers/handlePV.ts
index 879d004..5a04b89 100644
--- a/webAO/packets/handlers/handlePV.ts
+++ b/webAO/packets/handlers/handlePV.ts
@@ -4,6 +4,19 @@ import { updateActionCommands } from '../../dom/updateActionCommands'
 import { pickEmotion } from '../../dom/pickEmotion'
 import { AO_HOST } from "../../client/aoHost";
 
+function addEmoteButton(i: number, imgurl: string, desc: string) {
+    const emotesList = document.getElementById("client_emo");
+    const emote_item = new Image();
+    emote_item.id = "emo_" + i;
+    emote_item.className = "emote_button";
+    emote_item.src = imgurl;
+    emote_item.alt = desc;
+    emote_item.title = desc;
+    emote_item.onclick = () => { window.pickEmotion(i) }
+    emotesList.appendChild(emote_item);
+}
+
+
 /**
  * Handles the server's assignment of a character for the player to use.
  * PV # playerID (unused) # CID # character ID
@@ -17,7 +30,7 @@ export const handlePV = async (args: string[]) => {
     const me = client.chars[client.charID];
     client.selectedEmote = -1;
     const { emotes } = client;
-    const emotesList = document.getElementById("client_emo")!;
+    const emotesList = document.getElementById("client_emo");
     emotesList.style.display = "";
     emotesList.innerHTML = ""; // Clear emote box
     const ini = me.inifile;
@@ -72,14 +85,8 @@ export const handlePV = async (args: string[]) => {
                     button: url,
                 };
 
-                const emote_item = new Image();
-                emote_item.id = "emo_" + i;
-                emote_item.className = "emote_button";
-                emote_item.src = emotes[i].button;
-                emote_item.alt = emotes[i].desc;
-                emote_item.title = emotes[i].desc;
-                emote_item.onclick = () => { window.pickEmotion(i) }
-                emotesList.appendChild(emote_item);
+                addEmoteButton(i, url, emotes[i].desc);
+
                 if (i === 1) pickEmotion(1);
             } catch (e) {
                 console.error(`missing emote ${i}`);
diff --git a/webAO/packets/packets.ts b/webAO/packets/packets.ts
index 79c43c1..ab6e3b0 100644
--- a/webAO/packets/packets.ts
+++ b/webAO/packets/packets.ts
@@ -38,6 +38,8 @@ import { handleASS } from './handlers/handleASS'
 import { handleackMS } from './handlers/handleackMS'
 import { handleSP } from './handlers/handleSP'
 import { handleJD } from './handlers/handleJD'
+import { handlePU } from './handlers/handlePU'
+import { handlePR } from './handlers/handlePR'
 
 export const packets = {
     "MS": handleMS,
@@ -80,6 +82,8 @@ export const packets = {
     "ackMS": handleackMS,
     "SP": handleSP,
     "JD": handleJD,
+    "PU": handlePU,
+    "PR": handlePR,
     "decryptor": () => { },
     "CHECK": () => { },
     "CH": () => { },