3 files changed, 139 insertions, 140 deletions

diff --git a/webAO/packets/handlers/handleBN.ts b/webAO/packets/handlers/handleBN.ts
index 3cd3c5a..9dabc15 100644
--- a/webAO/packets/handlers/handleBN.ts
+++ b/webAO/packets/handlers/handleBN.ts
@@ -1,81 +1,81 @@
-import { AO_HOST, client, getIndexFromSelect, updateBackgroundPreview } from "../../client";
+import { AO_HOST, client, getIndexFromSelect } from "../../client";
 import { safeTags } from "../../encoding";
 import tryUrls from "../../utils/tryUrls";
+import { updateBackgroundPreview } from '../../dom/updateBackgroundPreview'
 
-
-  /**
-   * Handles a background change.
-   * @param {Array} args packet arguments
-   */
+/**
+ * Handles a background change.
+ * @param {Array} args packet arguments
+ */
 
 export const handleBN = (args: string[]) => {
-    const bgFromArgs = safeTags(args[1]);
-    client.viewport.setBackgroundName(bgFromArgs);
-    const bgfolder = client.viewport.getBackgroundFolder();
-    const bg_index = getIndexFromSelect(
-      "bg_select",
-      client.viewport.getBackgroundName()
-    );
-    (<HTMLSelectElement>document.getElementById("bg_select")).selectedIndex =
-      bg_index;
-    updateBackgroundPreview();
-    if (bg_index === 0) {
-      (<HTMLInputElement>document.getElementById("bg_filename")).value =
-        client.viewport.getBackgroundName();
-    }
+  const bgFromArgs = safeTags(args[1]);
+  client.viewport.setBackgroundName(bgFromArgs);
+  const bgfolder = client.viewport.getBackgroundFolder();
+  const bg_index = getIndexFromSelect(
+    "bg_select",
+    client.viewport.getBackgroundName()
+  );
+  (<HTMLSelectElement>document.getElementById("bg_select")).selectedIndex =
+    bg_index;
+  updateBackgroundPreview();
+  if (bg_index === 0) {
+    (<HTMLInputElement>document.getElementById("bg_filename")).value =
+      client.viewport.getBackgroundName();
+  }
 
-    tryUrls(
-      `${AO_HOST}background/${encodeURI(args[1].toLowerCase())}/defenseempty`
-    ).then((resp) => {
-      (<HTMLImageElement>document.getElementById("bg_preview")).src = resp;
-    });
-    tryUrls(`${bgfolder}defensedesk`).then((resp) => {
-      (<HTMLImageElement>document.getElementById("client_def_bench")).src =
-        resp;
-    });
-    tryUrls(`${bgfolder}stand`).then((resp) => {
-      (<HTMLImageElement>document.getElementById("client_wit_bench")).src =
-        resp;
-    });
-    tryUrls(`${bgfolder}prosecutiondesk`).then((resp) => {
-      (<HTMLImageElement>document.getElementById("client_pro_bench")).src =
-        resp;
-    });
-    tryUrls(`${bgfolder}full`).then((resp) => {
-      (<HTMLImageElement>document.getElementById("client_court")).src = resp;
-    });
-    tryUrls(`${bgfolder}defenseempty`).then((resp) => {
-      (<HTMLImageElement>document.getElementById("client_court_def")).src =
-        resp;
-    });
-    tryUrls(`${bgfolder}transition_def`).then((resp) => {
-      (<HTMLImageElement>document.getElementById("client_court_deft")).src =
-        resp;
-    });
-    tryUrls(`${bgfolder}witnessempty`).then((resp) => {
-      (<HTMLImageElement>document.getElementById("client_court_wit")).src =
-        resp;
-    });
-    tryUrls(`${bgfolder}transition_pro`).then((resp) => {
-      (<HTMLImageElement>document.getElementById("client_court_prot")).src =
-        resp;
+  tryUrls(
+    `${AO_HOST}background/${encodeURI(args[1].toLowerCase())}/defenseempty`
+  ).then((resp) => {
+    (<HTMLImageElement>document.getElementById("bg_preview")).src = resp;
+  });
+  tryUrls(`${bgfolder}defensedesk`).then((resp) => {
+    (<HTMLImageElement>document.getElementById("client_def_bench")).src =
+      resp;
+  });
+  tryUrls(`${bgfolder}stand`).then((resp) => {
+    (<HTMLImageElement>document.getElementById("client_wit_bench")).src =
+      resp;
+  });
+  tryUrls(`${bgfolder}prosecutiondesk`).then((resp) => {
+    (<HTMLImageElement>document.getElementById("client_pro_bench")).src =
+      resp;
+  });
+  tryUrls(`${bgfolder}full`).then((resp) => {
+    (<HTMLImageElement>document.getElementById("client_court")).src = resp;
+  });
+  tryUrls(`${bgfolder}defenseempty`).then((resp) => {
+    (<HTMLImageElement>document.getElementById("client_court_def")).src =
+      resp;
+  });
+  tryUrls(`${bgfolder}transition_def`).then((resp) => {
+    (<HTMLImageElement>document.getElementById("client_court_deft")).src =
+      resp;
+  });
+  tryUrls(`${bgfolder}witnessempty`).then((resp) => {
+    (<HTMLImageElement>document.getElementById("client_court_wit")).src =
+      resp;
+  });
+  tryUrls(`${bgfolder}transition_pro`).then((resp) => {
+    (<HTMLImageElement>document.getElementById("client_court_prot")).src =
+      resp;
+  });
+  tryUrls(`${bgfolder}prosecutorempty`).then((resp) => {
+    (<HTMLImageElement>document.getElementById("client_court_pro")).src =
+      resp;
+  });
+
+  if (client.charID === -1) {
+    client.viewport.set_side({
+      position: "jud",
+      showSpeedLines: false,
+      showDesk: true,
     });
-    tryUrls(`${bgfolder}prosecutorempty`).then((resp) => {
-      (<HTMLImageElement>document.getElementById("client_court_pro")).src =
-        resp;
+  } else {
+    client.viewport.set_side({
+      position: client.chars[client.charID].side,
+      showSpeedLines: false,
+      showDesk: true,
     });
-
-    if (client.charID === -1) {
-        client.viewport.set_side({
-        position: "jud",
-        showSpeedLines: false,
-        showDesk: true,
-      });
-    } else {
-        client.viewport.set_side({
-        position: client.chars[client.charID].side,
-        showSpeedLines: false,
-        showDesk: true,
-      });
-    }
-  }
\ No newline at end of file
+  }
+}
\ No newline at end of file
diff --git a/webAO/packets/handlers/handlePV.ts b/webAO/packets/handlers/handlePV.ts
index ea57331..5bdb702 100644
--- a/webAO/packets/handlers/handlePV.ts
+++ b/webAO/packets/handlers/handlePV.ts
@@ -1,83 +1,83 @@
-import { AO_HOST, client, pickEmotion, updateActionCommands } from "../../client";
+import { AO_HOST, client, pickEmotion } from "../../client";
 import fileExists from "../../utils/fileExists";
+import { updateActionCommands } from '../../dom/updateActionCommands'
 
-
-  /**
-   * Handles the server's assignment of a character for the player to use.
-   * PV # playerID (unused) # CID # character ID
-   * @param {Array} args packet arguments
-   */
+/**
+ * Handles the server's assignment of a character for the player to use.
+ * PV # playerID (unused) # CID # character ID
+ * @param {Array} args packet arguments
+ */
 export const handlePV = async (args: string[]) => {
-    client.charID = Number(args[3]);
-    document.getElementById("client_waiting")!.style.display = "none";
-    document.getElementById("client_charselect")!.style.display = "none";
+  client.charID = Number(args[3]);
+  document.getElementById("client_waiting")!.style.display = "none";
+  document.getElementById("client_charselect")!.style.display = "none";
 
-    const me = client.chars[client.charID];
-    client.selectedEmote = -1;
-    const { emotes } = client;
-    const emotesList = document.getElementById("client_emo")!;
-    emotesList.style.display = "";
-    emotesList.innerHTML = ""; // Clear emote box
-    const ini = me.inifile;
-    me.side = ini.options.side;
-    updateActionCommands(me.side);
-    if (ini.emotions.number === 0) {
-      emotesList.innerHTML = `<span
+  const me = client.chars[client.charID];
+  client.selectedEmote = -1;
+  const { emotes } = client;
+  const emotesList = document.getElementById("client_emo")!;
+  emotesList.style.display = "";
+  emotesList.innerHTML = ""; // Clear emote box
+  const ini = me.inifile;
+  me.side = ini.options.side;
+  updateActionCommands(me.side);
+  if (ini.emotions.number === 0) {
+    emotesList.innerHTML = `<span
 					id="emo_0"
 					alt="unavailable"
 					class="emote_button">No emotes available</span>`;
-    } else {
-      for (let i = 1; i <= ini.emotions.number; i++) {
+  } else {
+    for (let i = 1; i <= ini.emotions.number; i++) {
+      try {
+        const emoteinfo = ini.emotions[i].split("#");
+        let esfx;
+        let esfxd;
         try {
-          const emoteinfo = ini.emotions[i].split("#");
-          let esfx;
-          let esfxd;
-          try {
-            esfx = ini.soundn[i] || "0";
-            esfxd = Number(ini.soundt[i]) || 0;
-          } catch (e) {
-            console.warn("ini sound is completly missing");
-            esfx = "0";
-            esfxd = 0;
-          }
-          // Make sure the asset server is case insensitive, or that everything on it is lowercase
+          esfx = ini.soundn[i] || "0";
+          esfxd = Number(ini.soundt[i]) || 0;
+        } catch (e) {
+          console.warn("ini sound is completly missing");
+          esfx = "0";
+          esfxd = 0;
+        }
+        // Make sure the asset server is case insensitive, or that everything on it is lowercase
 
-          emotes[i] = {
-            desc: emoteinfo[0].toLowerCase(),
-            preanim: emoteinfo[1].toLowerCase(),
-            emote: emoteinfo[2].toLowerCase(),
-            zoom: Number(emoteinfo[3]) || 0,
-            deskmod: Number(emoteinfo[4]) || 1,
-            sfx: esfx.toLowerCase(),
-            sfxdelay: esfxd,
-            frame_screenshake: "",
-            frame_realization: "",
-            frame_sfx: "",
-            button: `${AO_HOST}characters/${encodeURI(
-              me.name.toLowerCase()
-            )}/emotions/button${i}_off.png`,
-          };
-          emotesList.innerHTML += `<img src=${emotes[i].button}
+        emotes[i] = {
+          desc: emoteinfo[0].toLowerCase(),
+          preanim: emoteinfo[1].toLowerCase(),
+          emote: emoteinfo[2].toLowerCase(),
+          zoom: Number(emoteinfo[3]) || 0,
+          deskmod: Number(emoteinfo[4]) || 1,
+          sfx: esfx.toLowerCase(),
+          sfxdelay: esfxd,
+          frame_screenshake: "",
+          frame_realization: "",
+          frame_sfx: "",
+          button: `${AO_HOST}characters/${encodeURI(
+            me.name.toLowerCase()
+          )}/emotions/button${i}_off.png`,
+        };
+        emotesList.innerHTML += `<img src=${emotes[i].button}
 					id="emo_${i}"
 					alt="${emotes[i].desc}"
           title="${emotes[i].desc}"
 					class="emote_button"
 					onclick="pickEmotion(${i})">`;
-        } catch (e) {
-          console.error(`missing emote ${i}`);
-        }
+      } catch (e) {
+        console.error(`missing emote ${i}`);
       }
-      pickEmotion(1);
-    }
-
-    if (
-      await fileExists(
-        `${AO_HOST}characters/${encodeURI(me.name.toLowerCase())}/custom.gif`
-      )
-    ) {
-      document.getElementById("button_4")!.style.display = "";
-    } else {
-      document.getElementById("button_4")!.style.display = "none";
     }
+    pickEmotion(1);
+  }
 
+  if (
+    await fileExists(
+      `${AO_HOST}characters/${encodeURI(me.name.toLowerCase())}/custom.gif`
+    )
+  ) {
+    document.getElementById("button_4")!.style.display = "";
+  } else {
+    document.getElementById("button_4")!.style.display = "none";
   }
+
+}
diff --git a/webAO/packets/handlers/handleSP.ts b/webAO/packets/handlers/handleSP.ts
index e2cad18..e176eeb 100644
--- a/webAO/packets/handlers/handleSP.ts
+++ b/webAO/packets/handlers/handleSP.ts
@@ -1,5 +1,4 @@
-import { updateActionCommands } from "../../client";
-
+import { updateActionCommands } from '../../dom/updateActionCommands'
 /**
 * position change
 * @param {string} pos new position