10 files changed, 42 insertions, 74 deletions
diff --git a/webAO/packets/handlers/handleASS.ts b/webAO/packets/handlers/handleASS.ts
index a46d68e..c50443a 100644
--- a/webAO/packets/handlers/handleASS.ts
+++ b/webAO/packets/handlers/handleASS.ts
@@ -1,4 +1,5 @@
 import { setAOhost } from "../../client/aoHost";
+import { renderPlayerList } from "../../dom/renderPlayerList";
 
 /**
  * new asset url!!
@@ -6,4 +7,5 @@ import { setAOhost } from "../../client/aoHost";
  */
 export const handleASS = (args: string[]) => {
   if (args[1] !== "None") setAOhost(args[1]);
+  renderPlayerList();
 };
diff --git a/webAO/packets/handlers/handleMC.ts b/webAO/packets/handlers/handleMC.ts
index 8a1c0a2..44237ea 100644
--- a/webAO/packets/handlers/handleMC.ts
+++ b/webAO/packets/handlers/handleMC.ts
@@ -24,7 +24,7 @@ export const handleMC = (args: string[]) => {
     music.src = `${AO_HOST}sounds/music/${encodeURI(track.toLowerCase())}`;
   }
   music.loop = looping;
-  music.play();
+  music.play().catch(() => {});
 
   try {
     musicname = client.chars[charID].name;
diff --git a/webAO/packets/handlers/handleMS.ts b/webAO/packets/handlers/handleMS.ts
index 2622fe6..9b46bc0 100644
--- a/webAO/packets/handlers/handleMS.ts
+++ b/webAO/packets/handlers/handleMS.ts
@@ -1,7 +1,7 @@
 /* eslint indent: ["error", 2, { "SwitchCase": 1 }] */
 
 import { client, extrafeatures, UPDATE_INTERVAL } from "../../client";
-import { handleCharacterInfo } from "../../client/handleCharacterInfo";
+import { handleCharacterInfo, ensureCharIni } from "../../client/handleCharacterInfo";
 import { resetICParams } from "../../client/resetICParams";
 import { prepChat, safeTags } from "../../encoding";
 import { handle_ic_speaking } from "../../viewport/utils/handleICSpeaking";
@@ -27,6 +27,9 @@ export const handleMS = (args: string[]) => {
         );
         const chargs = (`${char_name}&` + "iniediter").split("&");
         handleCharacterInfo(chargs, char_id);
+      } else if (!client.chars[char_id].inifile) {
+        // Lazily load char.ini in background so future messages have proper data
+        ensureCharIni(char_id);
       }
     }
 
diff --git a/webAO/packets/handlers/handlePR.ts b/webAO/packets/handlers/handlePR.ts
index aeb3969..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
@@ -53,6 +7,10 @@ function removePlayer(playerID: number) {
  */
 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);
+  if (Number(args[2]) === 0) {
+    client.playerlist.set(playerID, { charId: -1, charName: "", showName: "", name: "", area: 0 });
+  } else if (Number(args[2]) === 1) {
+    client.playerlist.delete(playerID);
+  }
+  renderPlayerList();
 };
diff --git a/webAO/packets/handlers/handlePU.ts b/webAO/packets/handlers/handlePU.ts
index 508bb51..3b70ad3 100644
--- a/webAO/packets/handlers/handlePU.ts
+++ b/webAO/packets/handlers/handlePU.ts
@@ -1,36 +1,42 @@
 import { client } from "../../client";
-import { getCharIcon } from "../../client/handleCharacterInfo";
-import { updatePlayerAreas } from "../../dom/updatePlayerAreas";
+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;
-      getCharIcon(playerImg, data);
-      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) {
+        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);
+      player.area = Number(data);
+      break;
     default:
       break;
   }
+
+  renderPlayerList();
 };
diff --git a/webAO/packets/handlers/handlePV.ts b/webAO/packets/handlers/handlePV.ts
index a39a4dd..1ee13c8 100644
--- a/webAO/packets/handlers/handlePV.ts
+++ b/webAO/packets/handlers/handlePV.ts
@@ -3,6 +3,7 @@ import fileExists from "../../utils/fileExists";
 import { updateActionCommands } from "../../dom/updateActionCommands";
 import { pickEmotion } from "../../dom/pickEmotion";
 import { AO_HOST } from "../../client/aoHost";
+import { ensureCharIni } from "../../client/handleCharacterInfo";
 
 function addEmoteButton(i: number, imgurl: string, desc: string) {
   const emotesList = document.getElementById("client_emo");
@@ -34,7 +35,7 @@ export const handlePV = async (args: string[]) => {
   const emotesList = document.getElementById("client_emo");
   emotesList.style.display = "";
   emotesList.innerHTML = ""; // Clear emote box
-  const ini = me.inifile;
+  const ini = await ensureCharIni(client.charID);
   me.side = ini.options.side;
   updateActionCommands(me.side);
   if (ini.emotions.number === 0) {
diff --git a/webAO/packets/handlers/handleRMC.ts b/webAO/packets/handlers/handleRMC.ts
index 7758844..0cc6aa7 100644
--- a/webAO/packets/handlers/handleRMC.ts
+++ b/webAO/packets/handlers/handleRMC.ts
@@ -17,7 +17,7 @@ export const handleRMC = (args: string[]) => {
       music.currentTime += parseFloat(
         music.totime + (new Date().getTime() / 1000 - music.offset),
       ).toFixed(3);
-      music.play();
+      music.play().catch(() => {});
     },
     false,
   );
diff --git a/webAO/packets/handlers/handleSC.ts b/webAO/packets/handlers/handleSC.ts
index 271a164..f7b789f 100644
--- a/webAO/packets/handlers/handleSC.ts
+++ b/webAO/packets/handlers/handleSC.ts
@@ -1,7 +1,7 @@
 import queryParser from "../../utils/queryParser";
 
 import { client } from "../../client";
-import { handleCharacterInfo } from "../../client/handleCharacterInfo";
+import { setupCharacterBasic } from "../../client/handleCharacterInfo";
 const { mode } = queryParser();
 
 /**
@@ -17,13 +17,10 @@ export const handleSC = async (args: string[]) => {
     document.getElementById("client_charselect")!.style.display = "block";
   }
 
-  document.getElementById("client_loadingtext")!.innerHTML =
-    "Loading Characters";
   for (let i = 1; i < args.length; i++) {
     const chargs = args[i].split("&");
     const charid = i - 1;
-
-    setTimeout(() => handleCharacterInfo(chargs, charid), charid * 6);
+    setupCharacterBasic(chargs, charid);
   }
   // We're done with the characters, request the music
   client.sender.sendServer("RM#%");
diff --git a/webAO/packets/handlers/handleSI.ts b/webAO/packets/handlers/handleSI.ts
index f20f4b2..eac84e0 100644
--- a/webAO/packets/handlers/handleSI.ts
+++ b/webAO/packets/handlers/handleSI.ts
@@ -20,6 +20,7 @@ export const handleSI = (args: string[]) => {
     const demothing = document.createElement("img");
 
     demothing.className = "demothing";
+    demothing.loading = "lazy";
     demothing.id = `demo_${i}`;
     const demoonclick = document.createAttribute("onclick");
     demoonclick.value = `pickChar(${i})`;
diff --git a/webAO/packets/handlers/handleZZ.ts b/webAO/packets/handlers/handleZZ.ts
index 31ceef5..0496d42 100644
--- a/webAO/packets/handlers/handleZZ.ts
+++ b/webAO/packets/handlers/handleZZ.ts
@@ -18,6 +18,6 @@ export const handleZZ = (args: string[]) => {
   const oldvolume = client.viewport.getSfxAudio().volume;
   client.viewport.getSfxAudio().volume = 1;
   client.viewport.getSfxAudio().src = `${AO_HOST}sounds/general/sfx-gallery.opus`;
-  client.viewport.getSfxAudio().play();
+  client.viewport.getSfxAudio().play().catch(() => {});
   client.viewport.getSfxAudio().volume = oldvolume;
 };