Removed all window functions from client

26 files changed, 390 insertions, 378 deletions

diff --git a/webAO/client.ts b/webAO/client.ts
index 5618f3e..62539ea 100644
--- a/webAO/client.ts
+++ b/webAO/client.ts
@@ -5,42 +5,44 @@
  */
 
 import FingerprintJS from "@fingerprintjs/fingerprintjs";
-import { EventEmitter } from "events";
-import { area_click } from './dom/areaClick'
-import { onReplayGo } from './dom/onReplayGo'
-import { escapeChat, prepChat, safeTags, unescapeChat } from "./encoding";
-// Load some defaults for the background and evidence dropdowns
 import vanilla_background_arr from "./constants/backgrounds.js";
 import vanilla_evidence_arr from "./constants/evidence.js";
-import chatbox_arr from "./styles/chatbox/chatboxes.js";
 import iniParse from "./iniParse";
 import getCookie from "./utils/getCookie";
 import setCookie from "./utils/setCookie";
+import fileExists from "./utils/fileExists.js";
+import queryParser from "./utils/queryParser";
+import getResources from "./utils/getResources.js";
+import downloadFile from "./services/downloadFile";
+import masterViewport, { Viewport } from "./viewport";
+import { EventEmitter } from "events";
+import { area_click } from './dom/areaClick'
+import { onReplayGo } from './dom/onReplayGo'
+import { escapeChat, safeTags, unescapeChat } from "./encoding";
+import { setChatbox } from "./dom/setChatbox";
 import { request } from "./services/request.js";
 import {
   changeShoutVolume,
   changeSFXVolume,
   changeTestimonyVolume,
 } from "./dom/changeVolume.js";
-import fileExists from "./utils/fileExists.js";
-import queryParser from "./utils/queryParser";
-import getResources from "./utils/getResources.js";
-import transparentPng from "./constants/transparentPng";
-import downloadFile from "./services/downloadFile";
 import { getFilenameFromPath } from "./utils/paths";
-const version = process.env.npm_package_version;
-import masterViewport, { Viewport } from "./viewport";
 import { packetHandler } from './packets/packetHandler'
-let { ip: serverIP, mode, asset, theme } = queryParser();
-import { cancelEvidence } from './dom/cancelEvidence'
-// Unless there is an asset URL specified, use the wasabi one
 import { showname_click } from './dom/showNameClick'
-import { updateActionCommands } from './dom/updateActionCommands'
 import { AO_HOST } from './client/aoHost'
+
+const version = process.env.npm_package_version;
+let { ip: serverIP, mode, theme } = queryParser();
+
 let THEME: string = theme || "default";
 export let CHATBOX: string;
-
+export const setCHATBOX = (val: string) => {
+  CHATBOX = val
+}
 export let client: Client;
+export const setClient = (val: Client) => {
+  client = val
+}
 
 export const UPDATE_INTERVAL = 60;
 
@@ -55,7 +57,10 @@ export const setOldLoading = (val: boolean) => {
 }
 
 // presettings
-let selectedMenu = 1;
+export let selectedMenu = 1;
+export const setSelectedMenu = (val: number) => {
+  selectedMenu = val
+}
 export let selectedShout = 0;
 export const setSelectedShout = (val: number) => {
   selectedShout = val
@@ -71,62 +76,6 @@ export const setBanned = (val: boolean) => {
 }
 let hdid: string;
 
-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;
-  }
-}
-
 function isLowMemory() {
   if (
     /webOS|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|PlayStation|Nintendo|Opera Mini/i.test(
@@ -966,90 +915,6 @@ export function resetICParams() {
 }
 
 /**
- * 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;
-
-/**
- * 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;
-
-/**
- * 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;
-
-/**
- * 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;
-
-/**
- * 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;
-
-/**
- * Triggered when the reconnect button is pushed.
- */
-export function ReconnectButton() {
-  client.cleanup();
-  client = new Client(serverIP);
-
-  if (client) {
-    document.getElementById("client_error").style.display = "none";
-  }
-}
-window.ReconnectButton = ReconnectButton;
-
-/**
  * Appends a message to the in-character chat log.
  * @param {string} msg the string to be added
  * @param {string} name the name of the sender
@@ -1118,221 +983,4 @@ export function checkCallword(message: string, sfxAudio: HTMLAudioElement) {
   }
 }
 
-/**
- * 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;
-
-/**
- * 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.sendCharacter(ccharacter);
-}
-window.pickChar = pickChar;
-
-
-
-
-/**
- * Add evidence.
- */
-export function addEvidence() {
-  const evidence_select = <HTMLSelectElement>(
-    document.getElementById("evi_select")
-  );
-  client.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;
-
-
-
-/**
- * Delete selected evidence.
- */
-export function deleteEvidence() {
-  const id = client.selectedEvidence - 1;
-  client.sendDE(id);
-  cancelEvidence();
-}
-window.deleteEvidence = deleteEvidence;
-
-
-
-
-/**
- * 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")
-  );
-  CHATBOX = 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;
-
-
-
-
-/**
- * Change role via OOC.
- */
-export function changeRoleOOC() {
-  const roleselect = <HTMLInputElement>document.getElementById("role_select");
-
-  client.sendOOC(`/pos ${roleselect.value}`);
-  client.sendServer(`SP#${roleselect.value}#%`);
-  updateActionCommands(roleselect.value);
-}
-window.changeRoleOOC = changeRoleOOC;
-
-/**
- * Random character via OOC.
- */
-export function randomCharacterOOC() {
-  client.sendOOC(`/randomchar`);
-}
-window.randomCharacterOOC = randomCharacterOOC;
-
-/**
- * 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.sendZZ(modcall);
-  }
-}
-window.callMod = callMod;
-
-/**
- * Declare witness testimony.
- */
-export function initWT() {
-  client.sendRT("testimony1");
-}
-window.initWT = initWT;
-
-/**
- * Declare cross examination.
- */
-export function initCE() {
-  client.sendRT("testimony2");
-}
-window.initCE = initCE;
-
-/**
- * Declare the defendant not guilty
- */
-export function notguilty() {
-  client.sendRT("judgeruling#0");
-}
-window.notguilty = notguilty;
-
-/**
- * Declare the defendant not guilty
- */
-export function guilty() {
-  client.sendRT("judgeruling#1");
-}
-window.guilty = guilty;
-
-/**
- * Increment defense health point.
- */
-export function addHPD() {
-  client.sendHP(1, client.hp[0] + 1);
-}
-window.addHPD = addHPD;
-
-/**
- * Decrement defense health point.
- */
-export function redHPD() {
-  client.sendHP(1, client.hp[0] - 1);
-}
-window.redHPD = redHPD;
-
-/**
- * Increment prosecution health point.
- */
-export function addHPP() {
-  client.sendHP(2, client.hp[1] + 1);
-}
-window.addHPP = addHPP;
-
-/**
- * Decrement prosecution health point.
- */
-export function redHPP() {
-  client.sendHP(2, client.hp[1] - 1);
-}
-window.redHPP = redHPP;
-
-
-/**
- * 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";
-    selectedMenu = menu;
-  }
-}
-window.toggleMenu = toggleMenu;
-
-export default Client;
+export default Client;
\ No newline at end of file
diff --git a/webAO/dom/addEvidence.ts b/webAO/dom/addEvidence.ts
new file mode 100644
index 0000000..89bb4d5
--- /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.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..12d1c07
--- /dev/null
+++ b/webAO/dom/addHPD.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Increment defense health point.
+ */
+export function addHPD() {
+    client.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..4a1521c
--- /dev/null
+++ b/webAO/dom/addHPP.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Increment prosecution health point.
+ */
+export function addHPP() {
+    client.sendHP(2, client.hp[1] + 1);
+}
+window.addHPP = addHPP;
\ No newline at end of file
diff --git a/webAO/dom/callMod.ts b/webAO/dom/callMod.ts
new file mode 100644
index 0000000..0c52433
--- /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.sendZZ(modcall);
+    }
+}
+window.callMod = callMod;
\ 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/changeRoleOOC.ts b/webAO/dom/changeRoleOOC.ts
new file mode 100644
index 0000000..d838cb3
--- /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.sendOOC(`/pos ${roleselect.value}`);
+    client.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..f007cdf
--- /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.sendDE(id);
+    cancelEvidence();
+}
+window.deleteEvidence = deleteEvidence;
\ No newline at end of file
diff --git a/webAO/dom/guilty.ts b/webAO/dom/guilty.ts
new file mode 100644
index 0000000..f7fa5b8
--- /dev/null
+++ b/webAO/dom/guilty.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Declare the defendant not guilty
+ */
+export function guilty() {
+    client.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/initCE.ts b/webAO/dom/initCE.ts
new file mode 100644
index 0000000..87bc256
--- /dev/null
+++ b/webAO/dom/initCE.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Declare cross examination.
+ */
+export function initCE() {
+    client.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..b6268fc
--- /dev/null
+++ b/webAO/dom/initWT.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Declare witness testimony.
+ */
+export function initWT() {
+    client.sendRT("testimony1");
+}
+window.initWT = initWT;
\ No newline at end of file
diff --git a/webAO/dom/notGuilty.ts b/webAO/dom/notGuilty.ts
new file mode 100644
index 0000000..e15ee4b
--- /dev/null
+++ b/webAO/dom/notGuilty.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Declare the defendant not guilty
+ */
+export function notguilty() {
+    client.sendRT("judgeruling#0");
+}
+window.notguilty = notguilty;
\ No newline at end of file
diff --git a/webAO/dom/pickChar.ts b/webAO/dom/pickChar.ts
new file mode 100644
index 0000000..5773125
--- /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.sendCharacter(ccharacter);
+}
+window.pickChar = pickChar;
\ No newline at end of file
diff --git a/webAO/dom/randomCharacterOOC.ts b/webAO/dom/randomCharacterOOC.ts
new file mode 100644
index 0000000..507c3f0
--- /dev/null
+++ b/webAO/dom/randomCharacterOOC.ts
@@ -0,0 +1,8 @@
+import { client } from '../client'
+/**
+ * Random character via OOC.
+ */
+export function randomCharacterOOC() {
+    client.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..7b47c23
--- /dev/null
+++ b/webAO/dom/redHPD.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Decrement defense health point.
+ */
+export function redHPD() {
+    client.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..fb6711e
--- /dev/null
+++ b/webAO/dom/redHPP.ts
@@ -0,0 +1,9 @@
+import { client } from "../client";
+
+/**
+ * Decrement prosecution health point.
+ */
+export function redHPP() {
+    client.sendHP(2, client.hp[1] - 1);
+}
+window.redHPP = redHPP;
\ 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/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/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/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
diff --git a/webAO/viewport.ts b/webAO/viewport.ts
index d0e7b77..6c39784 100644
--- a/webAO/viewport.ts
+++ b/webAO/viewport.ts
@@ -3,7 +3,7 @@ import fileExists from "./utils/fileExists";
 import Client, { delay } from "./client";
 import {opusCheck} from './dom/opusCheck'
 import { UPDATE_INTERVAL } from "./client";
-import { setChatbox } from "./client";
+import { setChatbox } from "./dom/setChatbox";
 import { resizeChatbox } from "./dom/resizeChatbox";
 import transparentPng from "./constants/transparentPng";
 import mlConfig from "./utils/aoml";