Several functions moved

14 files changed, 351 insertions, 334 deletions

diff --git a/webAO/client.ts b/webAO/client.ts
index 980fadd..806c0a5 100644
--- a/webAO/client.ts
+++ b/webAO/client.ts
@@ -35,6 +35,9 @@ import { packetHandler } from './packets/packetHandler'
 let { ip: serverIP, mode, asset, theme } = queryParser();
 // Unless there is an asset URL specified, use the wasabi one
 const DEFAULT_HOST = "http://attorneyoffline.de/base/";
+import { showname_click } from './dom/showNameClick'
+import { onReplayGo } from './dom/onReplayGo'
+import { updateActionCommands } from './dom/updateActionCommands'
 export let AO_HOST = asset || DEFAULT_HOST;
 export const setAOhost = (val: string) => {
   AO_HOST = val
@@ -619,10 +622,10 @@ class Client extends EventEmitter {
     const data = msg.split("%")[0];
     const splitPacket = data.split('#')
     const packetHeader = splitPacket[0];
-    
-    packetHandler.has(packetHeader) 
-    ? packetHandler.get(packetHeader)(splitPacket) 
-    : console.warn(`Invalid packet header ${packetHeader}`);
+
+    packetHandler.has(packetHeader)
+      ? packetHandler.get(packetHeader)(splitPacket)
+      : console.warn(`Invalid packet header ${packetHeader}`);
 
   }
 
@@ -947,29 +950,8 @@ class Client extends EventEmitter {
   }
 }
 
-/**
- * Triggered when the Return key is pressed on the out-of-character chat input box.
- * @param {KeyboardEvent} event
- */
-export function onOOCEnter(event: KeyboardEvent) {
-  if (event.keyCode === 13) {
-    client.sendOOC(
-      (<HTMLInputElement>document.getElementById("client_oocinputbox")).value
-    );
-    (<HTMLInputElement>document.getElementById("client_oocinputbox")).value =
-      "";
-  }
-}
-window.onOOCEnter = onOOCEnter;
 
-/**
- * Triggered when the user click replay GOOOOO
- * @param {KeyboardEvent} event
- */
-export function onReplayGo(_event: Event) {
-  client.handleReplay();
-}
-window.onReplayGo = onReplayGo;
+
 
 /**
  * Triggered when the Return key is pressed on the in-character chat input box.
@@ -1091,100 +1073,6 @@ export function resetICParams() {
   }
 }
 
-export function resetOffset(_event: Event) {
-  (<HTMLInputElement>document.getElementById("pair_offset")).value = "0";
-  (<HTMLInputElement>document.getElementById("pair_y_offset")).value = "0";
-}
-window.resetOffset = resetOffset;
-
-/**
- * Triggered when the music search bar is changed
- * @param {MouseEvent} event
- */
-export function musiclist_filter(_event: Event) {
-  const musiclist_element = <HTMLSelectElement>(
-    document.getElementById("client_musiclist")
-  );
-  const searchname = (<HTMLInputElement>(
-    document.getElementById("client_musicsearch")
-  )).value;
-
-  musiclist_element.innerHTML = "";
-
-  for (const trackname of client.musics) {
-    if (trackname.toLowerCase().indexOf(searchname.toLowerCase()) !== -1) {
-      const newentry = <HTMLOptionElement>document.createElement("OPTION");
-      newentry.text = trackname;
-      musiclist_element.options.add(newentry);
-    }
-  }
-}
-window.musiclist_filter = musiclist_filter;
-
-/**
- * Triggered when an item on the music list is clicked.
- * @param {MouseEvent} event
- */
-export function musiclist_click(_event: Event) {
-  const playtrack = (<HTMLInputElement>(
-    document.getElementById("client_musiclist")
-  )).value;
-  client.sendMusicChange(playtrack);
-
-  // This is here so you can't actually select multiple tracks,
-  // even though the select tag has the multiple option to render differently
-  const musiclist_elements = (<HTMLSelectElement>(
-    document.getElementById("client_musiclist")
-  )).selectedOptions;
-  for (let i = 0; i < musiclist_elements.length; i++) {
-    musiclist_elements[i].selected = false;
-  }
-}
-window.musiclist_click = musiclist_click;
-
-/**
- * Triggered when a character in the mute list is clicked
- * @param {MouseEvent} event
- */
-export function mutelist_click(_event: Event) {
-  const mutelist = <HTMLSelectElement>document.getElementById("mute_select");
-  const selected_character = mutelist.options[mutelist.selectedIndex];
-
-  if (client.chars[selected_character.value].muted === false) {
-    client.chars[selected_character.value].muted = true;
-    selected_character.text = `${client.chars[selected_character.value].name
-      } (muted)`;
-    console.info(`muted ${client.chars[selected_character.value].name}`);
-  } else {
-    client.chars[selected_character.value].muted = false;
-    selected_character.text = client.chars[selected_character.value].name;
-  }
-}
-window.mutelist_click = mutelist_click;
-
-/**
- * Triggered when the showname checkboc is clicked
- * @param {MouseEvent} event
- */
-export function showname_click(_event: Event) {
-  setCookie(
-    "showname",
-    String((<HTMLInputElement>document.getElementById("showname")).checked)
-  );
-  setCookie(
-    "ic_chat_name",
-    (<HTMLInputElement>document.getElementById("ic_chat_name")).value
-  );
-
-  const css_s = <HTMLAnchorElement>document.getElementById("nameplate_setting");
-
-  if ((<HTMLInputElement>document.getElementById("showname")).checked) {
-    css_s.href = "styles/shownames.css";
-  } else {
-    css_s.href = "styles/nameplates.css";
-  }
-}
-window.showname_click = showname_click;
 
 /**
  * Triggered when an item on the area list is clicked.
@@ -1714,55 +1602,9 @@ export function updateEvidenceIcon() {
 }
 window.updateEvidenceIcon = updateEvidenceIcon;
 
-/**
- * Update evidence icon.
- */
-export function updateActionCommands(side: string) {
-  if (side === "jud") {
-    document.getElementById("judge_action").style.display = "inline-table";
-    document.getElementById("no_action").style.display = "none";
-  } else {
-    document.getElementById("judge_action").style.display = "none";
-    document.getElementById("no_action").style.display = "inline-table";
-  }
 
-  // Update role selector
-  for (
-    let i = 0,
-    role_select = <HTMLSelectElement>document.getElementById("role_select");
-    i < role_select.options.length;
-    i++
-  ) {
-    if (side === role_select.options[i].value) {
-      role_select.options.selectedIndex = i;
-      return;
-    }
-  }
-}
-window.updateActionCommands = updateActionCommands;
 
-/**
- * Change background via OOC.
- */
-export function changeBackgroundOOC() {
-  const selectedBG = <HTMLSelectElement>document.getElementById("bg_select");
-  const changeBGCommand = "bg $1";
-  const bgFilename = <HTMLInputElement>document.getElementById("bg_filename");
-
-  let filename = "";
-  if (selectedBG.selectedIndex === 0) {
-    filename = bgFilename.value;
-  } else {
-    filename = selectedBG.value;
-  }
 
-  if (mode === "join") {
-    client.sendOOC(`/${changeBGCommand.replace("$1", filename)}`);
-  } else if (mode === "replay") {
-    client.sendSelf(`BN#${filename}#%`);
-  }
-}
-window.changeBackgroundOOC = changeBackgroundOOC;
 
 /**
  * Change role via OOC.
@@ -1865,34 +1707,6 @@ export function redHPP() {
 window.redHPP = redHPP;
 
 /**
- * Update background preview.
- */
-export function updateBackgroundPreview() {
-  const background_select = <HTMLSelectElement>(
-    document.getElementById("bg_select")
-  );
-  const background_filename = <HTMLInputElement>(
-    document.getElementById("bg_filename")
-  );
-  const background_preview = <HTMLImageElement>(
-    document.getElementById("bg_preview")
-  );
-
-  if (background_select.selectedIndex === 0) {
-    background_filename.style.display = "initial";
-    background_preview.src = `${AO_HOST}background/${encodeURI(
-      background_filename.value.toLowerCase()
-    )}/defenseempty.png`;
-  } else {
-    background_filename.style.display = "none";
-    background_preview.src = `${AO_HOST}background/${encodeURI(
-      background_select.value.toLowerCase()
-    )}/defenseempty.png`;
-  }
-}
-window.updateBackgroundPreview = updateBackgroundPreview;
-
-/**
  * Highlights and selects a menu.
  * @param {number} menu the menu to be selected
  */
diff --git a/webAO/dom/changeBackgroundOOC.ts b/webAO/dom/changeBackgroundOOC.ts
new file mode 100644
index 0000000..abf3a97
--- /dev/null
+++ b/webAO/dom/changeBackgroundOOC.ts
@@ -0,0 +1,27 @@
+import { client } from "../client";
+import queryParser from "../utils/queryParser";
+
+let { mode } = queryParser();
+
+/**
+ * Change background via OOC.
+ */
+export function changeBackgroundOOC() {
+    const selectedBG = <HTMLSelectElement>document.getElementById("bg_select");
+    const changeBGCommand = "bg $1";
+    const bgFilename = <HTMLInputElement>document.getElementById("bg_filename");
+
+    let filename = "";
+    if (selectedBG.selectedIndex === 0) {
+        filename = bgFilename.value;
+    } else {
+        filename = selectedBG.value;
+    }
+
+    if (mode === "join") {
+        client.sendOOC(`/${changeBGCommand.replace("$1", filename)}`);
+    } else if (mode === "replay") {
+        client.sendSelf(`BN#${filename}#%`);
+    }
+}
+window.changeBackgroundOOC = changeBackgroundOOC;
\ No newline at end of file
diff --git a/webAO/dom/musicListClick.ts b/webAO/dom/musicListClick.ts
new file mode 100644
index 0000000..1eb6619
--- /dev/null
+++ b/webAO/dom/musicListClick.ts
@@ -0,0 +1,21 @@
+import { client } from "../client";
+/**
+ * Triggered when an item on the music list is clicked.
+ * @param {MouseEvent} event
+ */
+export function musiclist_click(_event: Event) {
+    const playtrack = (<HTMLInputElement>(
+        document.getElementById("client_musiclist")
+    )).value;
+    client.sendMusicChange(playtrack);
+
+    // This is here so you can't actually select multiple tracks,
+    // even though the select tag has the multiple option to render differently
+    const musiclist_elements = (<HTMLSelectElement>(
+        document.getElementById("client_musiclist")
+    )).selectedOptions;
+    for (let i = 0; i < musiclist_elements.length; i++) {
+        musiclist_elements[i].selected = false;
+    }
+}
+window.musiclist_click = musiclist_click;
\ No newline at end of file
diff --git a/webAO/dom/musicListFilter.ts b/webAO/dom/musicListFilter.ts
new file mode 100644
index 0000000..c44978d
--- /dev/null
+++ b/webAO/dom/musicListFilter.ts
@@ -0,0 +1,24 @@
+import { client } from "../client";
+/**
+ * Triggered when the music search bar is changed
+ * @param {MouseEvent} event
+ */
+export function musiclist_filter(_event: Event) {
+    const musiclist_element = <HTMLSelectElement>(
+        document.getElementById("client_musiclist")
+    );
+    const searchname = (<HTMLInputElement>(
+        document.getElementById("client_musicsearch")
+    )).value;
+
+    musiclist_element.innerHTML = "";
+
+    for (const trackname of client.musics) {
+        if (trackname.toLowerCase().indexOf(searchname.toLowerCase()) !== -1) {
+            const newentry = <HTMLOptionElement>document.createElement("OPTION");
+            newentry.text = trackname;
+            musiclist_element.options.add(newentry);
+        }
+    }
+}
+window.musiclist_filter = musiclist_filter;
\ No newline at end of file
diff --git a/webAO/dom/muteListClick.ts b/webAO/dom/muteListClick.ts
new file mode 100644
index 0000000..6ae3eea
--- /dev/null
+++ b/webAO/dom/muteListClick.ts
@@ -0,0 +1,20 @@
+import { client } from "../client";
+/**
+ * Triggered when a character in the mute list is clicked
+ * @param {MouseEvent} event
+ */
+export function mutelist_click(_event: Event) {
+    const mutelist = <HTMLSelectElement>document.getElementById("mute_select");
+    const selected_character = mutelist.options[mutelist.selectedIndex];
+
+    if (client.chars[selected_character.value].muted === false) {
+        client.chars[selected_character.value].muted = true;
+        selected_character.text = `${client.chars[selected_character.value].name
+            } (muted)`;
+        console.info(`muted ${client.chars[selected_character.value].name}`);
+    } else {
+        client.chars[selected_character.value].muted = false;
+        selected_character.text = client.chars[selected_character.value].name;
+    }
+}
+window.mutelist_click = mutelist_click;
\ No newline at end of file
diff --git a/webAO/dom/onOOCEnter.ts b/webAO/dom/onOOCEnter.ts
new file mode 100644
index 0000000..a24928b
--- /dev/null
+++ b/webAO/dom/onOOCEnter.ts
@@ -0,0 +1,16 @@
+import {client} from '../client'
+/**
+ * Triggered when the Return key is pressed on the out-of-character chat input box.
+ * @param {KeyboardEvent} event
+ */
+ export function onOOCEnter(event: KeyboardEvent) {
+    if (event.keyCode === 13) {
+      client.sendOOC(
+        (<HTMLInputElement>document.getElementById("client_oocinputbox")).value
+      );
+      (<HTMLInputElement>document.getElementById("client_oocinputbox")).value =
+        "";
+    }
+  }
+  window.onOOCEnter = onOOCEnter;
+  
\ No newline at end of file
diff --git a/webAO/dom/onReplayGo.ts b/webAO/dom/onReplayGo.ts
new file mode 100644
index 0000000..c13a8e6
--- /dev/null
+++ b/webAO/dom/onReplayGo.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+/**
+ * Triggered when the user click replay GOOOOO
+ * @param {KeyboardEvent} event
+ */
+ export function onReplayGo(_event: Event) {
+    client.handleReplay();
+  }
+  window.onReplayGo = onReplayGo;
\ No newline at end of file
diff --git a/webAO/dom/resetOffset.ts b/webAO/dom/resetOffset.ts
new file mode 100644
index 0000000..2cf8197
--- /dev/null
+++ b/webAO/dom/resetOffset.ts
@@ -0,0 +1,5 @@
+export function resetOffset(_event: Event) {
+    (<HTMLInputElement>document.getElementById("pair_offset")).value = "0";
+    (<HTMLInputElement>document.getElementById("pair_y_offset")).value = "0";
+  }
+  window.resetOffset = resetOffset;
\ No newline at end of file
diff --git a/webAO/dom/showNameClick.ts b/webAO/dom/showNameClick.ts
new file mode 100644
index 0000000..265f6c8
--- /dev/null
+++ b/webAO/dom/showNameClick.ts
@@ -0,0 +1,26 @@
+import setCookie from "../utils/setCookie";
+
+
+/**
+ * Triggered when the showname checkboc is clicked
+ * @param {MouseEvent} event
+ */
+export function showname_click(_event: Event) {
+    setCookie(
+        "showname",
+        String((<HTMLInputElement>document.getElementById("showname")).checked)
+    );
+    setCookie(
+        "ic_chat_name",
+        (<HTMLInputElement>document.getElementById("ic_chat_name")).value
+    );
+
+    const css_s = <HTMLAnchorElement>document.getElementById("nameplate_setting");
+
+    if ((<HTMLInputElement>document.getElementById("showname")).checked) {
+        css_s.href = "styles/shownames.css";
+    } else {
+        css_s.href = "styles/nameplates.css";
+    }
+}
+window.showname_click = showname_click;
diff --git a/webAO/dom/updateActionCommands.ts b/webAO/dom/updateActionCommands.ts
new file mode 100644
index 0000000..9d0bd82
--- /dev/null
+++ b/webAO/dom/updateActionCommands.ts
@@ -0,0 +1,27 @@
+
+/**
+ * Update evidence icon.
+ */
+export function updateActionCommands(side: string) {
+    if (side === "jud") {
+        document.getElementById("judge_action")!.style.display = "inline-table";
+        document.getElementById("no_action")!.style.display = "none";
+    } else {
+        document.getElementById("judge_action")!.style.display = "none";
+        document.getElementById("no_action")!.style.display = "inline-table";
+    }
+
+    // Update role selector
+    for (
+        let i = 0,
+        role_select = <HTMLSelectElement>document.getElementById("role_select");
+        i < role_select.options.length;
+        i++
+    ) {
+        if (side === role_select.options[i].value) {
+            role_select.options.selectedIndex = i;
+            return;
+        }
+    }
+}
+window.updateActionCommands = updateActionCommands;
\ No newline at end of file
diff --git a/webAO/dom/updateBackgroundPreview.ts b/webAO/dom/updateBackgroundPreview.ts
new file mode 100644
index 0000000..e55bf60
--- /dev/null
+++ b/webAO/dom/updateBackgroundPreview.ts
@@ -0,0 +1,29 @@
+import { AO_HOST } from "../client";
+
+/**
+ * Update background preview.
+ */
+export function updateBackgroundPreview() {
+    const background_select = <HTMLSelectElement>(
+        document.getElementById("bg_select")
+    );
+    const background_filename = <HTMLInputElement>(
+        document.getElementById("bg_filename")
+    );
+    const background_preview = <HTMLImageElement>(
+        document.getElementById("bg_preview")
+    );
+
+    if (background_select.selectedIndex === 0) {
+        background_filename.style.display = "initial";
+        background_preview.src = `${AO_HOST}background/${encodeURI(
+            background_filename.value.toLowerCase()
+        )}/defenseempty.png`;
+    } else {
+        background_filename.style.display = "none";
+        background_preview.src = `${AO_HOST}background/${encodeURI(
+            background_select.value.toLowerCase()
+        )}/defenseempty.png`;
+    }
+}
+window.updateBackgroundPreview = updateBackgroundPreview;
\ No newline at end of file
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