Merge branch 'master' into 2fa

52 files changed, 1030 insertions, 0 deletions

diff --git a/webAO/dom/addEvidence.ts b/webAO/dom/addEvidence.ts
new file mode 100644
index 0000000..8a13f06
--- /dev/null
+++ b/webAO/dom/addEvidence.ts
@@ -0,0 +1,20 @@
+import { client } from "../client";
+import { cancelEvidence } from "./cancelEvidence";
+
+/**
+ * Add evidence.
+ */
+ export function addEvidence() {
+    const evidence_select = <HTMLSelectElement>(
+      document.getElementById("evi_select")
+    );
+    client.sender.sendPE(
+      (<HTMLInputElement>document.getElementById("evi_name")).value,
+      (<HTMLInputElement>document.getElementById("evi_desc")).value,
+      evidence_select.selectedIndex === 0
+        ? (<HTMLInputElement>document.getElementById("evi_filename")).value
+        : evidence_select.options[evidence_select.selectedIndex].text
+    );
+    cancelEvidence();
+  }
+  window.addEvidence = addEvidence;
\ No newline at end of file
diff --git a/webAO/dom/addHPD.ts b/webAO/dom/addHPD.ts
new file mode 100644
index 0000000..8f7e1f7
--- /dev/null
+++ b/webAO/dom/addHPD.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Increment defense health point.
+ */
+export function addHPD() {
+    client.sender.sendHP(1, client.hp[0] + 1);
+}
+window.addHPD = addHPD;
\ No newline at end of file
diff --git a/webAO/dom/addHPP.ts b/webAO/dom/addHPP.ts
new file mode 100644
index 0000000..1379f7c
--- /dev/null
+++ b/webAO/dom/addHPP.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Increment prosecution health point.
+ */
+export function addHPP() {
+    client.sender.sendHP(2, client.hp[1] + 1);
+}
+window.addHPP = addHPP;
\ No newline at end of file
diff --git a/webAO/dom/areaClick.ts b/webAO/dom/areaClick.ts
new file mode 100644
index 0000000..1b0fe52
--- /dev/null
+++ b/webAO/dom/areaClick.ts
@@ -0,0 +1,15 @@
+import { client } from '../client'
+/**
+ * Triggered when an item on the area list is clicked.
+ * @param {HTMLElement} el
+ */
+export function area_click(el: HTMLElement) {
+    const area = client.areas[el.id.substr(4)].name;
+    client.sender.sendMusicChange(area);
+
+    const areaHr = document.createElement("div");
+    areaHr.className = "hrtext";
+    areaHr.textContent = `switched to ${el.textContent}`;
+    document.getElementById("client_log")!.appendChild(areaHr);
+}
+window.area_click = area_click;
\ No newline at end of file
diff --git a/webAO/dom/callMod.ts b/webAO/dom/callMod.ts
new file mode 100644
index 0000000..a2e2685
--- /dev/null
+++ b/webAO/dom/callMod.ts
@@ -0,0 +1,16 @@
+import { client, extrafeatures } from "../client";
+/**
+ * Call mod.
+ */
+export function callMod() {
+    let modcall;
+    if (extrafeatures.includes("modcall_reason")) {
+        modcall = prompt("Please enter the reason for the modcall", "");
+    }
+    if (modcall == null || modcall === "") {
+        // cancel
+    } else {
+        client.sender.sendZZ(modcall);
+    }
+}
+window.callMod = callMod;
\ No newline at end of file
diff --git a/webAO/dom/cancelEvidence.ts b/webAO/dom/cancelEvidence.ts
new file mode 100644
index 0000000..a906613
--- /dev/null
+++ b/webAO/dom/cancelEvidence.ts
@@ -0,0 +1,36 @@
+import { client, } from "../client";
+import { updateEvidenceIcon } from './updateEvidenceIcon'
+import { AO_HOST } from "../client/aoHost";
+
+
+/**
+ * Cancel evidence selection.
+ */
+export function cancelEvidence() {
+    // Clear evidence data
+    if (client.selectedEvidence > 0) {
+        document.getElementById(`evi_${client.selectedEvidence}`)!.className =
+            "evi_icon";
+    }
+    client.selectedEvidence = 0;
+
+    // Clear evidence on information window
+    (<HTMLSelectElement>document.getElementById("evi_select")).selectedIndex = 0;
+    updateEvidenceIcon(); // Update icon widget
+    (<HTMLInputElement>document.getElementById("evi_filename")).value = "";
+    (<HTMLInputElement>document.getElementById("evi_name")).value = "";
+    (<HTMLInputElement>document.getElementById("evi_desc")).value = "";
+    (<HTMLImageElement>(
+        document.getElementById("evi_preview")
+    )).src = `${AO_HOST}misc/empty.png`; // Clear icon
+
+    // Update button
+    document.getElementById("evi_add")!.className = "client_button hover_button";
+    document.getElementById("evi_edit")!.className =
+        "client_button hover_button inactive";
+    document.getElementById("evi_cancel")!.className =
+        "client_button hover_button inactive";
+    document.getElementById("evi_del")!.className =
+        "client_button hover_button inactive";
+}
+window.cancelEvidence = cancelEvidence;
\ No newline at end of file
diff --git a/webAO/dom/changeBackgroundOOC.ts b/webAO/dom/changeBackgroundOOC.ts
new file mode 100644
index 0000000..1608ebe
--- /dev/null
+++ b/webAO/dom/changeBackgroundOOC.ts
@@ -0,0 +1,28 @@
+
+import queryParser from '../utils/queryParser'
+import { client } from '../client'
+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.sender.sendOOC(`/${changeBGCommand.replace("$1", filename)}`);
+    } else if (mode === "replay") {
+        client.sender.sendSelf(`BN#${filename}#%`);
+    }
+}
+window.changeBackgroundOOC = changeBackgroundOOC;
\ No newline at end of file
diff --git a/webAO/dom/changeBlipVolume.ts b/webAO/dom/changeBlipVolume.ts
new file mode 100644
index 0000000..572f389
--- /dev/null
+++ b/webAO/dom/changeBlipVolume.ts
@@ -0,0 +1,15 @@
+import setCookie from "../utils/setCookie";
+import { client } from '../client'
+/**
+ * Triggered by the blip volume slider.
+ */
+export const changeBlipVolume = () => {
+    const blipVolume = (<HTMLInputElement>(
+        document.getElementById("client_bvolume")
+    )).value;
+    client.viewport.blipChannels.forEach(
+        (channel: HTMLAudioElement) => (channel.volume = Number(blipVolume))
+    );
+    setCookie("blipVolume", blipVolume);
+}
+window.changeBlipVolume = changeBlipVolume;
diff --git a/webAO/dom/changeCallwords.ts b/webAO/dom/changeCallwords.ts
new file mode 100644
index 0000000..28be674
--- /dev/null
+++ b/webAO/dom/changeCallwords.ts
@@ -0,0 +1,13 @@
+import { client } from '../client'
+import setCookie from '../utils/setCookie';
+
+/**
+ * Triggered by a changed callword list
+ */
+export function changeCallwords() {
+    client.callwords = (<HTMLInputElement>(
+        document.getElementById("client_callwords")
+    )).value.split("\n");
+    setCookie("callwords", client.callwords.join("\n"));
+}
+window.changeCallwords = changeCallwords;
\ No newline at end of file
diff --git a/webAO/dom/changeCharacter.ts b/webAO/dom/changeCharacter.ts
new file mode 100644
index 0000000..7ecefe5
--- /dev/null
+++ b/webAO/dom/changeCharacter.ts
@@ -0,0 +1,11 @@
+
+/**
+ * Triggered when a character icon is clicked in the character selection menu.
+ * @param {MouseEvent} event
+ */
+export function changeCharacter(_event: Event) {
+    document.getElementById("client_waiting")!.style.display = "block";
+    document.getElementById("client_charselect")!.style.display = "block";
+    document.getElementById("client_emo")!.innerHTML = "";
+}
+window.changeCharacter = changeCharacter;
\ No newline at end of file
diff --git a/webAO/dom/changeMusicVolume.ts b/webAO/dom/changeMusicVolume.ts
new file mode 100644
index 0000000..9e5d51a
--- /dev/null
+++ b/webAO/dom/changeMusicVolume.ts
@@ -0,0 +1,14 @@
+import { client } from '../client'
+import setCookie from '../utils/setCookie';
+
+export const changeMusicVolume = (volume: number = -1) => {
+    const clientVolume = Number(
+        (<HTMLInputElement>document.getElementById("client_mvolume")).value
+    );
+    let musicVolume = volume === -1 ? clientVolume : volume;
+    client.viewport.music.forEach(
+        (channel: HTMLAudioElement) => (channel.volume = musicVolume)
+    );
+    setCookie("musicVolume", String(musicVolume));
+};
+window.changeMusicVolume = changeMusicVolume;
\ No newline at end of file
diff --git a/webAO/dom/changeRoleOOC.ts b/webAO/dom/changeRoleOOC.ts
new file mode 100644
index 0000000..7d89bee
--- /dev/null
+++ b/webAO/dom/changeRoleOOC.ts
@@ -0,0 +1,13 @@
+import { updateActionCommands } from './updateActionCommands'
+import { client } from '../client'
+/**
+ * Change role via OOC.
+ */
+export function changeRoleOOC() {
+    const roleselect = <HTMLInputElement>document.getElementById("role_select");
+
+    client.sender.sendOOC(`/pos ${roleselect.value}`);
+    client.sender.sendServer(`SP#${roleselect.value}#%`);
+    updateActionCommands(roleselect.value);
+}
+window.changeRoleOOC = changeRoleOOC;
\ No newline at end of file
diff --git a/webAO/dom/charError.ts b/webAO/dom/charError.ts
new file mode 100644
index 0000000..8cb672a
--- /dev/null
+++ b/webAO/dom/charError.ts
@@ -0,0 +1,12 @@
+import transparentPng from "../constants/transparentPng";
+
+/**
+ * Triggered when there was an error loading a character sprite.
+ * @param {HTMLImageElement} image the element containing the missing image
+ */
+export function charError(image: HTMLImageElement) {
+    console.warn(`${image.src} is missing from webAO`);
+    image.src = transparentPng;
+    return true;
+}
+window.charError = charError;
\ No newline at end of file
diff --git a/webAO/dom/charTableFilter.ts b/webAO/dom/charTableFilter.ts
new file mode 100644
index 0000000..d81fb88
--- /dev/null
+++ b/webAO/dom/charTableFilter.ts
@@ -0,0 +1,20 @@
+import { client } from '../client'
+/**
+ * Triggered when the music search bar is changed
+ * @param {MouseEvent} event
+ */
+export function chartable_filter(_event: Event) {
+    const searchname = (<HTMLInputElement>(
+        document.getElementById("client_charactersearch")
+    )).value;
+
+    client.chars.forEach((character: any, charid: number) => {
+        const demothing = document.getElementById(`demo_${charid}`)!;
+        if (character.name.toLowerCase().indexOf(searchname.toLowerCase()) === -1) {
+            demothing.style.display = "none";
+        } else {
+            demothing.style.display = "inline-block";
+        }
+    });
+}
+window.chartable_filter = chartable_filter;
\ No newline at end of file
diff --git a/webAO/dom/deleteEvidence.ts b/webAO/dom/deleteEvidence.ts
new file mode 100644
index 0000000..cd299e4
--- /dev/null
+++ b/webAO/dom/deleteEvidence.ts
@@ -0,0 +1,12 @@
+import { client } from "../client";
+import { cancelEvidence } from "./cancelEvidence";
+
+/**
+ * Delete selected evidence.
+ */
+export function deleteEvidence() {
+    const id = client.selectedEvidence - 1;
+    client.sender.sendDE(id);
+    cancelEvidence();
+}
+window.deleteEvidence = deleteEvidence;
\ No newline at end of file
diff --git a/webAO/dom/editEvidence.ts b/webAO/dom/editEvidence.ts
new file mode 100644
index 0000000..931caad
--- /dev/null
+++ b/webAO/dom/editEvidence.ts
@@ -0,0 +1,22 @@
+import { client } from '../client'
+import { cancelEvidence } from './cancelEvidence';
+
+/**
+ * Edit selected evidence.
+ */
+export function editEvidence() {
+    const evidence_select = <HTMLSelectElement>(
+        document.getElementById("evi_select")
+    );
+    const id = client.selectedEvidence - 1;
+    client.sender.sendEE(
+        id,
+        (<HTMLInputElement>document.getElementById("evi_name")).value,
+        (<HTMLInputElement>document.getElementById("evi_desc")).value,
+        evidence_select.selectedIndex === 0
+            ? (<HTMLInputElement>document.getElementById("evi_filename")).value
+            : evidence_select.options[evidence_select.selectedIndex].text
+    );
+    cancelEvidence();
+}
+window.editEvidence = editEvidence;
\ No newline at end of file
diff --git a/webAO/dom/getIndexFromSelect.ts b/webAO/dom/getIndexFromSelect.ts
new file mode 100644
index 0000000..2f21653
--- /dev/null
+++ b/webAO/dom/getIndexFromSelect.ts
@@ -0,0 +1,16 @@
+/**
+ * Find index of anything in select box.
+ * @param {string} select_box the select element name
+ * @param {string} value the value that need to be compared
+ */
+export function getIndexFromSelect(select_box: string, value: string) {
+    // Find if icon alraedy existed in select box
+    const select_element = <HTMLSelectElement>document.getElementById(select_box);
+    for (let i = 1; i < select_element.length; ++i) {
+        if (select_element.options[i].value === value) {
+            return i;
+        }
+    }
+    return 0;
+}
+window.getIndexFromSelect = getIndexFromSelect;
\ No newline at end of file
diff --git a/webAO/dom/guilty.ts b/webAO/dom/guilty.ts
new file mode 100644
index 0000000..f008065
--- /dev/null
+++ b/webAO/dom/guilty.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Declare the defendant not guilty
+ */
+export function guilty() {
+    client.sender.sendRT("judgeruling#1");
+}
+window.guilty = guilty;
\ No newline at end of file
diff --git a/webAO/dom/imgError.ts b/webAO/dom/imgError.ts
new file mode 100644
index 0000000..fdb6122
--- /dev/null
+++ b/webAO/dom/imgError.ts
@@ -0,0 +1,10 @@
+/**
+ * Triggered when there was an error loading a generic sprite.
+ * @param {HTMLImageElement} image the element containing the missing image
+ */
+export function imgError(image: HTMLImageElement) {
+    image.onerror = null;
+    image.src = ""; // unload so the old sprite doesn't persist
+    return true;
+}
+window.imgError = imgError;
\ No newline at end of file
diff --git a/webAO/dom/iniEdit.ts b/webAO/dom/iniEdit.ts
new file mode 100644
index 0000000..0710de9
--- /dev/null
+++ b/webAO/dom/iniEdit.ts
@@ -0,0 +1,15 @@
+import { client } from "../client";
+import { handleCharacterInfo } from "../client/handleCharacterInfo";
+import { packetHandler } from "../packets/packetHandler";
+
+/**
+ * Triggered by the ini button.
+ */
+export async function iniedit() {
+    const ininame = (<HTMLInputElement>document.getElementById("client_ininame"))
+        .value;
+    const inicharID = client.charID;
+    await handleCharacterInfo(ininame.split("&"), inicharID);
+    packetHandler.get("PV")!(`PV#0#CID#${inicharID}`.split("#"));
+}
+window.iniedit = iniedit;
diff --git a/webAO/dom/initCE.ts b/webAO/dom/initCE.ts
new file mode 100644
index 0000000..fd57d74
--- /dev/null
+++ b/webAO/dom/initCE.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Declare cross examination.
+ */
+export function initCE() {
+    client.sender.sendRT("testimony2");
+}
+window.initCE = initCE;
\ No newline at end of file
diff --git a/webAO/dom/initWT.ts b/webAO/dom/initWT.ts
new file mode 100644
index 0000000..d99fc3e
--- /dev/null
+++ b/webAO/dom/initWT.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Declare witness testimony.
+ */
+export function initWT() {
+    client.sender.sendRT("testimony1");
+}
+window.initWT = initWT;
\ No newline at end of file
diff --git a/webAO/dom/modCallTest.ts b/webAO/dom/modCallTest.ts
new file mode 100644
index 0000000..7058caf
--- /dev/null
+++ b/webAO/dom/modCallTest.ts
@@ -0,0 +1,8 @@
+import { packetHandler } from "../packets/packetHandler";
+/**
+ * Triggered by the modcall sfx dropdown
+ */
+export function modcall_test() {
+    packetHandler.get("ZZ")!("test#test".split("#"));
+}
+window.modcall_test = modcall_test;
\ No newline at end of file
diff --git a/webAO/dom/musicListClick.ts b/webAO/dom/musicListClick.ts
new file mode 100644
index 0000000..2243553
--- /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.sender.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;
diff --git a/webAO/dom/musicListFilter.ts b/webAO/dom/musicListFilter.ts
new file mode 100644
index 0000000..3db7fcd
--- /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/notGuilty.ts b/webAO/dom/notGuilty.ts
new file mode 100644
index 0000000..95b830b
--- /dev/null
+++ b/webAO/dom/notGuilty.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Declare the defendant not guilty
+ */
+export function notguilty() {
+    client.sender.sendRT("judgeruling#0");
+}
+window.notguilty = notguilty;
\ No newline at end of file
diff --git a/webAO/dom/onEnter.ts b/webAO/dom/onEnter.ts
new file mode 100644
index 0000000..5ab532c
--- /dev/null
+++ b/webAO/dom/onEnter.ts
@@ -0,0 +1,103 @@
+import { client, selectedShout } from "../client";
+import { escapeChat } from "../encoding";
+
+
+/**
+ * Triggered when the Return key is pressed on the in-character chat input box.
+ * @param {KeyboardEvent} event
+ */
+ export function onEnter(event: KeyboardEvent) {
+    if (event.keyCode === 13) {
+      const mychar = client.character;
+      const myemo = client.emote;
+      const evi = client.evidence;
+      const flip = Boolean(
+        document.getElementById("button_flip")!.classList.contains("dark")
+      );
+      const flash = Boolean(
+        document.getElementById("button_flash")!.classList.contains("dark")
+      );
+      const screenshake = Boolean(
+        document.getElementById("button_shake")!.classList.contains("dark")
+      );
+      const noninterrupting_preanim = Boolean(
+        (<HTMLInputElement>document.getElementById("check_nonint")).checked
+      );
+      const looping_sfx = Boolean(
+        (<HTMLInputElement>document.getElementById("check_loopsfx")).checked
+      );
+      const color = Number(
+        (<HTMLInputElement>document.getElementById("textcolor")).value
+      );
+      const showname = escapeChat(
+        (<HTMLInputElement>document.getElementById("ic_chat_name")).value
+      );
+      const text = (<HTMLInputElement>document.getElementById("client_inputbox"))
+        .value;
+      const pairchar = (<HTMLInputElement>document.getElementById("pair_select"))
+        .value;
+      const pairoffset = Number(
+        (<HTMLInputElement>document.getElementById("pair_offset")).value
+      );
+      const pairyoffset = Number(
+        (<HTMLInputElement>document.getElementById("pair_y_offset")).value
+      );
+      const myrole = (<HTMLInputElement>document.getElementById("role_select"))
+        .value
+        ? (<HTMLInputElement>document.getElementById("role_select")).value
+        : mychar.side;
+      const additive = Boolean(
+        (<HTMLInputElement>document.getElementById("check_additive")).checked
+      );
+      const effect = (<HTMLInputElement>document.getElementById("effect_select"))
+        .value;
+  
+      let sfxname = "0";
+      let sfxdelay = 0;
+      let emote_mod = myemo.zoom;
+      if ((<HTMLInputElement>document.getElementById("sendsfx")).checked) {
+        sfxname = myemo.sfx;
+        sfxdelay = myemo.sfxdelay;
+      }
+  
+      // not to overwrite a 5 from the ini or anything else
+      if ((<HTMLInputElement>document.getElementById("sendpreanim")).checked) {
+        if (emote_mod === 0) {
+          emote_mod = 1;
+        }
+      } else if (emote_mod === 1) {
+        emote_mod = 0;
+      }
+  
+      client.sender.sendIC(
+        myemo.deskmod,
+        myemo.preanim,
+        mychar.name,
+        myemo.emote,
+        text,
+        myrole,
+        sfxname,
+        emote_mod,
+        sfxdelay,
+        selectedShout,
+        evi,
+        flip,
+        flash,
+        color,
+        showname,
+        pairchar,
+        pairoffset,
+        pairyoffset,
+        noninterrupting_preanim,
+        looping_sfx,
+        screenshake,
+        "-",
+        "-",
+        "-",
+        additive,
+        effect
+      );
+    }
+    return false;
+  }
+  window.onEnter = onEnter;
\ No newline at end of file
diff --git a/webAO/dom/onOOCEnter.ts b/webAO/dom/onOOCEnter.ts
new file mode 100644
index 0000000..d7ec21b
--- /dev/null
+++ b/webAO/dom/onOOCEnter.ts
@@ -0,0 +1,15 @@
+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.sender.sendOOC(
+            (<HTMLInputElement>document.getElementById("client_oocinputbox")).value
+        );
+        (<HTMLInputElement>document.getElementById("client_oocinputbox")).value =
+            "";
+    }
+}
+window.onOOCEnter = onOOCEnter;
diff --git a/webAO/dom/onReplayGo.ts b/webAO/dom/onReplayGo.ts
new file mode 100644
index 0000000..82a6f2f
--- /dev/null
+++ b/webAO/dom/onReplayGo.ts
@@ -0,0 +1,10 @@
+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/opusCheck.ts b/webAO/dom/opusCheck.ts
new file mode 100644
index 0000000..939fdc6
--- /dev/null
+++ b/webAO/dom/opusCheck.ts
@@ -0,0 +1,22 @@
+/**
+ * Triggered when there was an error loading a sound
+ * @param {HTMLAudioElement} image the element containing the missing sound
+ */
+export function opusCheck(
+  channel: HTMLAudioElement
+): OnErrorEventHandlerNonNull {
+  const audio = channel.src;
+  if (audio === "") {
+    return;
+  }
+  console.info(`failed to load sound ${channel.src}`);
+  let oldsrc = "";
+  let newsrc = "";
+  oldsrc = channel.src;
+  if (!oldsrc.endsWith(".opus")) {
+    newsrc = oldsrc.replace(".mp3", ".opus");
+    newsrc = newsrc.replace(".wav", ".opus");
+    channel.src = newsrc; // unload so the old sprite doesn't persist
+  }
+}
+window.opusCheck = opusCheck;
\ No newline at end of file
diff --git a/webAO/dom/pickChar.ts b/webAO/dom/pickChar.ts
new file mode 100644
index 0000000..82fb6af
--- /dev/null
+++ b/webAO/dom/pickChar.ts
@@ -0,0 +1,16 @@
+import { client } from "../client";
+
+/**
+ * Requests to play as a character.
+ * @param {number} ccharacter the character ID; if this is a large number,
+ * then spectator is chosen instead.
+ */
+export function pickChar(ccharacter: number) {
+    if (ccharacter === -1) {
+        // Spectator
+        document.getElementById("client_waiting")!.style.display = "none";
+        document.getElementById("client_charselect")!.style.display = "none";
+    }
+    client.sender.sendCharacter(ccharacter);
+}
+window.pickChar = pickChar;
\ No newline at end of file
diff --git a/webAO/dom/pickEmotion.ts b/webAO/dom/pickEmotion.ts
new file mode 100644
index 0000000..b72583f
--- /dev/null
+++ b/webAO/dom/pickEmotion.ts
@@ -0,0 +1,24 @@
+import { client } from '../client'
+/**
+ * Highlights and selects an emotion for in-character chat.
+ * @param {string} emo the new emotion to be selected
+ */
+export function pickEmotion(emo: number) {
+    try {
+        if (client.selectedEmote !== -1) {
+            document.getElementById(`emo_${client.selectedEmote}`)!.className =
+                "emote_button";
+        }
+    } catch (err) {
+        // do nothing
+    }
+    client.selectedEmote = emo;
+    document.getElementById(`emo_${emo}`)!.className = "emote_button dark";
+
+    (<HTMLInputElement>document.getElementById("sendsfx")).checked =
+        client.emote.sfx.length > 1;
+
+    (<HTMLInputElement>document.getElementById("sendpreanim")).checked =
+        client.emote.zoom == 1;
+}
+window.pickEmotion = pickEmotion;
\ No newline at end of file
diff --git a/webAO/dom/pickEvidence.ts b/webAO/dom/pickEvidence.ts
new file mode 100644
index 0000000..411acc1
--- /dev/null
+++ b/webAO/dom/pickEvidence.ts
@@ -0,0 +1,51 @@
+import { client } from '../client'
+import { cancelEvidence } from './cancelEvidence';
+import { updateEvidenceIcon } from './updateEvidenceIcon'
+import { getIndexFromSelect } from './getIndexFromSelect'
+
+/**
+ * Highlights and selects an evidence for in-character chat.
+ * @param {string} evidence the evidence to be presented
+ */
+export function pickEvidence(evidence: number) {
+    if (client.selectedEvidence !== evidence) {
+        // Update selected evidence
+        if (client.selectedEvidence > 0) {
+            document.getElementById(`evi_${client.selectedEvidence}`)!.className =
+                "evi_icon";
+        }
+        document.getElementById(`evi_${evidence}`)!.className = "evi_icon dark";
+        client.selectedEvidence = evidence;
+
+        // Show evidence on information window
+        (<HTMLInputElement>document.getElementById("evi_name")).value =
+            client.evidences[evidence - 1].name;
+        (<HTMLInputElement>document.getElementById("evi_desc")).value =
+            client.evidences[evidence - 1].desc;
+
+        // Update icon
+        const icon_id = getIndexFromSelect(
+            "evi_select",
+            client.evidences[evidence - 1].filename
+        );
+        (<HTMLSelectElement>document.getElementById("evi_select")).selectedIndex =
+            icon_id;
+        if (icon_id === 0) {
+            (<HTMLInputElement>document.getElementById("evi_filename")).value =
+                client.evidences[evidence - 1].filename;
+        }
+        updateEvidenceIcon();
+
+        // Update button
+        document.getElementById("evi_add")!.className =
+            "client_button hover_button inactive";
+        document.getElementById("evi_edit")!.className =
+            "client_button hover_button";
+        document.getElementById("evi_cancel")!.className =
+            "client_button hover_button";
+        document.getElementById("evi_del")!.className = "client_button hover_button";
+    } else {
+        cancelEvidence();
+    }
+}
+window.pickEvidence = pickEvidence;
diff --git a/webAO/dom/randomCharacterOOC.ts b/webAO/dom/randomCharacterOOC.ts
new file mode 100644
index 0000000..657a474
--- /dev/null
+++ b/webAO/dom/randomCharacterOOC.ts
@@ -0,0 +1,8 @@
+import { client } from '../client'
+/**
+ * Random character via OOC.
+ */
+export function randomCharacterOOC() {
+    client.sender.sendOOC(`/randomchar`);
+}
+window.randomCharacterOOC = randomCharacterOOC;
\ No newline at end of file
diff --git a/webAO/dom/reconnectButton.ts b/webAO/dom/reconnectButton.ts
new file mode 100644
index 0000000..4031ccd
--- /dev/null
+++ b/webAO/dom/reconnectButton.ts
@@ -0,0 +1,16 @@
+import Client, { client, setClient } from "../client";
+import queryParser from "../utils/queryParser";
+let { ip: serverIP } = queryParser();
+
+/**
+ * Triggered when the reconnect button is pushed.
+ */
+export function ReconnectButton() {
+    client.cleanup();
+    setClient(new Client(serverIP));
+
+    if (client) {
+        document.getElementById("client_error")!.style.display = "none";
+    }
+}
+window.ReconnectButton = ReconnectButton;
\ No newline at end of file
diff --git a/webAO/dom/redHPD.ts b/webAO/dom/redHPD.ts
new file mode 100644
index 0000000..e228d21
--- /dev/null
+++ b/webAO/dom/redHPD.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Decrement defense health point.
+ */
+export function redHPD() {
+    client.sender.sendHP(1, client.hp[0] - 1);
+}
+window.redHPD = redHPD;
\ No newline at end of file
diff --git a/webAO/dom/redHPP.ts b/webAO/dom/redHPP.ts
new file mode 100644
index 0000000..efde941
--- /dev/null
+++ b/webAO/dom/redHPP.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Decrement prosecution health point.
+ */
+export function redHPP() {
+    client.sender.sendHP(2, client.hp[1] - 1);
+}
+window.redHPP = redHPP;
\ No newline at end of file
diff --git a/webAO/dom/reloadTheme.ts b/webAO/dom/reloadTheme.ts
new file mode 100644
index 0000000..bfa46b6
--- /dev/null
+++ b/webAO/dom/reloadTheme.ts
@@ -0,0 +1,16 @@
+import { client } from '../client'
+import setCookie from '../utils/setCookie';
+
+/**
+ * Triggered by the theme selector.
+ */
+export const reloadTheme = () => {
+    client.viewport.setTheme((<HTMLSelectElement>document.getElementById("client_themeselect"))
+        .value);
+
+    setCookie("theme", client.viewport.getTheme());
+    (<HTMLAnchorElement>(
+        document.getElementById("client_theme")
+    )).href = `styles/${client.viewport.getTheme()}.css`;
+}
+window.reloadTheme = reloadTheme;
\ No newline at end of file
diff --git a/webAO/dom/resetOffset.ts b/webAO/dom/resetOffset.ts
new file mode 100644
index 0000000..86dfd5b
--- /dev/null
+++ b/webAO/dom/resetOffset.ts
@@ -0,0 +1,6 @@
+
+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/resizeChatbox.ts b/webAO/dom/resizeChatbox.ts
new file mode 100644
index 0000000..efb8bdc
--- /dev/null
+++ b/webAO/dom/resizeChatbox.ts
@@ -0,0 +1,33 @@
+import { CHATBOX } from "../client";
+/**
+ * Set the font size for the chatbox
+ */
+export function resizeChatbox() {
+    const chatContainerBox = document.getElementById("client_chatcontainer")!;
+    const gameHeight = document.getElementById("client_background")!.offsetHeight;
+
+    chatContainerBox.style.fontSize = `${(gameHeight * 0.0521).toFixed(1)}px`;
+
+    const trackstatus = <HTMLMarqueeElement>(document.getElementById("client_trackstatustext"));
+    trackstatus.width = (trackstatus.offsetWidth - 1) + "px";
+
+
+    //clock
+    const now = new Date();
+    let weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    const month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    document.getElementById("client_clock_month")!.innerText = month[now.getMonth()];
+    console.debug(CHATBOX);
+    if (CHATBOX == "acww") {
+        weekday = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+        document.getElementById("client_clock_weekday")!.innerText = weekday[now.getDay()];
+        document.getElementById("client_clock_date")!.innerText = now.getDay() + "/" + now.getMonth();
+        document.getElementById("client_clock_time")!.innerText = now.getHours() + ":" + now.getMinutes();
+    } else if (CHATBOX == "key") {
+        weekday = ["Sun.", "Mon.", "Tue.", "Wed.", "Thu.", "Fri.", "Sat."];
+        document.getElementById("client_clock_weekday")!.innerText = weekday[now.getDay()];
+        document.getElementById("client_clock_date")!.innerText = String(now.getDay());
+    }
+
+}
+window.resizeChatbox = resizeChatbox;
\ No newline at end of file
diff --git a/webAO/dom/setChatbox.ts b/webAO/dom/setChatbox.ts
new file mode 100644
index 0000000..6d1a78c
--- /dev/null
+++ b/webAO/dom/setChatbox.ts
@@ -0,0 +1,28 @@
+import { CHATBOX, setCHATBOX } from "../client";
+import chatbox_arr from "../styles/chatbox/chatboxes.js";
+import setCookie from "../utils/setCookie";
+
+/**
+ * Set the style of the chatbox
+ */
+export function setChatbox(style: string) {
+    const chatbox_theme = <HTMLAnchorElement>(
+        document.getElementById("chatbox_theme")
+    );
+    const themeselect = <HTMLSelectElement>(
+        document.getElementById("client_chatboxselect")
+    );
+    setCHATBOX(themeselect.value);
+
+    setCookie("chatbox", CHATBOX);
+    if (CHATBOX === "dynamic") {
+        if (chatbox_arr.includes(style)) {
+            chatbox_theme.href = `styles/chatbox/${style}.css`;
+        } else {
+            chatbox_theme.href = "styles/chatbox/aa.css";
+        }
+    } else {
+        chatbox_theme.href = `styles/chatbox/${CHATBOX}.css`;
+    }
+}
+window.setChatbox = setChatbox;
\ No newline at end of file
diff --git a/webAO/dom/showNameClick.ts b/webAO/dom/showNameClick.ts
new file mode 100644
index 0000000..3e48b70
--- /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 | null) {
+    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/switchAspectRatio.ts b/webAO/dom/switchAspectRatio.ts
new file mode 100644
index 0000000..79d4110
--- /dev/null
+++ b/webAO/dom/switchAspectRatio.ts
@@ -0,0 +1,19 @@
+/**
+ * Triggered by the change aspect ratio checkbox
+ */
+export async function switchAspectRatio() {
+    const background = document.getElementById("client_gamewindow")!;
+    const offsetCheck = <HTMLInputElement>(
+        document.getElementById("client_hdviewport_offset")
+    );
+    if (
+        (<HTMLInputElement>document.getElementById("client_hdviewport")).checked
+    ) {
+        background.style.paddingBottom = "56.25%";
+        offsetCheck.disabled = false;
+    } else {
+        background.style.paddingBottom = "75%";
+        offsetCheck.disabled = true;
+    }
+}
+window.switchAspectRatio = switchAspectRatio;
\ No newline at end of file
diff --git a/webAO/dom/switchChatOffset.ts b/webAO/dom/switchChatOffset.ts
new file mode 100644
index 0000000..6552cbd
--- /dev/null
+++ b/webAO/dom/switchChatOffset.ts
@@ -0,0 +1,17 @@
+/**
+ * Triggered by the change aspect ratio checkbox
+ */
+export async function switchChatOffset() {
+    const container = document.getElementById("client_chatcontainer")!;
+    if (
+        (<HTMLInputElement>document.getElementById("client_hdviewport_offset"))
+            .checked
+    ) {
+        container.style.width = "80%";
+        container.style.left = "10%";
+    } else {
+        container.style.width = "100%";
+        container.style.left = "0";
+    }
+}
+window.switchChatOffset = switchChatOffset;
\ No newline at end of file
diff --git a/webAO/dom/switchPanTilt.ts b/webAO/dom/switchPanTilt.ts
new file mode 100644
index 0000000..7ceea06
--- /dev/null
+++ b/webAO/dom/switchPanTilt.ts
@@ -0,0 +1,16 @@
+/**
+ * Triggered by the pantilt checkbox
+ */
+export async function switchPanTilt() {
+    const fullview = document.getElementById("client_fullview")!;
+    const checkbox = <HTMLInputElement>document.getElementById("client_pantilt");
+
+    if (checkbox.checked) {
+        fullview.style.transition = "0.5s ease-in-out";
+    } else {
+        fullview.style.transition = "none";
+    }
+
+    return;
+}
+window.switchPanTilt = switchPanTilt;
\ No newline at end of file
diff --git a/webAO/dom/toggleElement.js b/webAO/dom/toggleElement.js
new file mode 100644
index 0000000..efddabf
--- /dev/null
+++ b/webAO/dom/toggleElement.js
@@ -0,0 +1,13 @@
+/**
+ * Hides and shows any html element
+ * @param {string} element_id the id of the element to toggle
+ */
+export function toggleElement(element_id) {
+    const element = document.getElementById(element_id);
+    if (element.style.display !== 'none') {
+        element.style.display = 'none';
+    } else {
+        element.style.display = 'block';
+    }
+}
+window.toggleElement = toggleElement;
diff --git a/webAO/dom/toggleMenu.ts b/webAO/dom/toggleMenu.ts
new file mode 100644
index 0000000..6d5e1fc
--- /dev/null
+++ b/webAO/dom/toggleMenu.ts
@@ -0,0 +1,18 @@
+import { selectedMenu, setSelectedMenu } from "../client";
+
+/**
+ * Highlights and selects a menu.
+ * @param {number} menu the menu to be selected
+ */
+export function toggleMenu(menu: number) {
+    if (menu !== selectedMenu) {
+        document.getElementById(`menu_${menu}`)!.className = "menu_button active";
+        document.getElementById(`content_${menu}`)!.className =
+            "menu_content active";
+        document.getElementById(`menu_${selectedMenu}`)!.className = "menu_button";
+        document.getElementById(`content_${selectedMenu}`)!.className =
+            "menu_content";
+        setSelectedMenu(menu);
+    }
+}
+window.toggleMenu = toggleMenu;
diff --git a/webAO/dom/toggleShout.ts b/webAO/dom/toggleShout.ts
new file mode 100644
index 0000000..cb12f49
--- /dev/null
+++ b/webAO/dom/toggleShout.ts
@@ -0,0 +1,21 @@
+import { selectedShout, setSelectedShout } from "../client";
+
+/**
+ * Highlights and selects a shout for in-character chat.
+ * If the same shout button is selected, then the shout is canceled.
+ * @param {number} shout the new shout to be selected
+ */
+export function toggleShout(shout: number) {
+    if (shout === selectedShout) {
+        document.getElementById(`button_${shout}`)!.className = "client_button";
+        setSelectedShout(0);
+    } else {
+        document.getElementById(`button_${shout}`)!.className = "client_button dark";
+        if (selectedShout) {
+            document.getElementById(`button_${selectedShout}`)!.className =
+                "client_button";
+        }
+        setSelectedShout(shout);
+    }
+}
+window.toggleShout = toggleShout;
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..b41ee8f
--- /dev/null
+++ b/webAO/dom/updateBackgroundPreview.ts
@@ -0,0 +1,28 @@
+import { AO_HOST } from '../client/aoHost'
+/**
+ * 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/dom/updateEvidenceIcon.ts b/webAO/dom/updateEvidenceIcon.ts
new file mode 100644
index 0000000..bff0475
--- /dev/null
+++ b/webAO/dom/updateEvidenceIcon.ts
@@ -0,0 +1,28 @@
+import { AO_HOST } from "../client/aoHost";
+/**
+ * Update evidence icon.
+ */
+export function updateEvidenceIcon() {
+    const evidence_select = <HTMLSelectElement>(
+        document.getElementById("evi_select")
+    );
+    const evidence_filename = <HTMLInputElement>(
+        document.getElementById("evi_filename")
+    );
+    const evidence_iconbox = <HTMLImageElement>(
+        document.getElementById("evi_preview")
+    );
+
+    if (evidence_select.selectedIndex === 0) {
+        evidence_filename.style.display = "initial";
+        evidence_iconbox.src = `${AO_HOST}evidence/${encodeURI(
+            evidence_filename.value.toLowerCase()
+        )}`;
+    } else {
+        evidence_filename.style.display = "none";
+        evidence_iconbox.src = `${AO_HOST}evidence/${encodeURI(
+            evidence_select.value.toLowerCase()
+        )}`;
+    }
+}
+window.updateEvidenceIcon = updateEvidenceIcon;
diff --git a/webAO/dom/window.ts b/webAO/dom/window.ts
new file mode 100644
index 0000000..2535768
--- /dev/null
+++ b/webAO/dom/window.ts
@@ -0,0 +1,56 @@
+declare global {
+    interface Window {
+        toggleShout: (shout: number) => void;
+        toggleMenu: (menu: number) => void;
+        updateBackgroundPreview: () => void;
+        redHPP: () => void;
+        addHPP: () => void;
+        redHPD: () => void;
+        addHPD: () => void;
+        guilty: () => void;
+        notguilty: () => void;
+        initCE: () => void;
+        initWT: () => void;
+        callMod: () => void;
+        randomCharacterOOC: () => void;
+        changeRoleOOC: () => void;
+        changeBackgroundOOC: () => void;
+        updateActionCommands: (side: string) => void;
+        updateEvidenceIcon: () => void;
+        resizeChatbox: () => void;
+        setChatbox: (style: string) => void;
+        getIndexFromSelect: (select_box: string, value: string) => Number;
+        cancelEvidence: () => void;
+        deleteEvidence: () => void;
+        editEvidence: () => void;
+        addEvidence: () => void;
+        pickEvidence: (evidence: any) => void;
+        pickEmotion: (emo: any) => void;
+        pickChar: (ccharacter: any) => void;
+        chartable_filter: (_event: any) => void;
+        ReconnectButton: (_event: any) => void;
+        opusCheck: (channel: HTMLAudioElement) => OnErrorEventHandlerNonNull;
+        imgError: (image: any) => void;
+        charError: (image: any) => void;
+        changeCharacter: (_event: any) => void;
+        switchChatOffset: () => void;
+        switchAspectRatio: () => void;
+        switchPanTilt: (addcheck: number) => void;
+        iniedit: () => void;
+        modcall_test: () => void;
+        reloadTheme: () => void;
+        changeCallwords: () => void;
+        changeBlipVolume: () => void;
+        changeMusicVolume: () => void;
+        area_click: (el: any) => void;
+        showname_click: (_event: any) => void;
+        mutelist_click: (_event: any) => void;
+        musiclist_click: (_event: any) => void;
+        musiclist_filter: (_event: any) => void;
+        resetOffset: (_event: any) => void;
+        onEnter: (event: any) => void;
+        onReplayGo: (_event: any) => void;
+        onOOCEnter: (_event: any) => void;
+    }
+}
+export { }
\ No newline at end of file