Prettified Code!

18 files changed, 678 insertions, 619 deletions

diff --git a/webAO/viewport/constants/colors.ts b/webAO/viewport/constants/colors.ts
index 7d1a9a8..fd6acdb 100644
--- a/webAO/viewport/constants/colors.ts
+++ b/webAO/viewport/constants/colors.ts
@@ -1,12 +1,12 @@
 export const COLORS = [
-    "white",
-    "green",
-    "red",
-    "orange",
-    "blue",
-    "yellow",
-    "pink",
-    "cyan",
-    "grey",
-    "rainbow",
+  "white",
+  "green",
+  "red",
+  "orange",
+  "blue",
+  "yellow",
+  "pink",
+  "cyan",
+  "grey",
+  "rainbow",
 ];
diff --git a/webAO/viewport/constants/defaultChatMsg.ts b/webAO/viewport/constants/defaultChatMsg.ts
index d25426e..fa25b33 100644
--- a/webAO/viewport/constants/defaultChatMsg.ts
+++ b/webAO/viewport/constants/defaultChatMsg.ts
@@ -2,14 +2,14 @@ import { UPDATE_INTERVAL } from "../../client";
 import { ChatMsg } from "../interfaces/ChatMsg";
 
 export const defaultChatMsg = {
-    content: "",
-    objection: 0,
-    sound: "",
-    startpreanim: true,
-    startspeaking: false,
-    side: null,
-    color: 0,
-    snddelay: 0,
-    preanimdelay: 0,
-    speed: UPDATE_INTERVAL,
+  content: "",
+  objection: 0,
+  sound: "",
+  startpreanim: true,
+  startspeaking: false,
+  side: null,
+  color: 0,
+  snddelay: 0,
+  preanimdelay: 0,
+  speed: UPDATE_INTERVAL,
 } as ChatMsg;
diff --git a/webAO/viewport/constants/positions.ts b/webAO/viewport/constants/positions.ts
index 1712ac6..3627db7 100644
--- a/webAO/viewport/constants/positions.ts
+++ b/webAO/viewport/constants/positions.ts
@@ -1,45 +1,45 @@
-import { Positions } from '../interfaces/Positions'
-import { Desk } from '../interfaces/Desk';
+import { Positions } from "../interfaces/Positions";
+import { Desk } from "../interfaces/Desk";
 
 export const positions: Positions = {
-    def: {
-        bg: "defenseempty",
-        desk: { ao2: "defensedesk.png", ao1: "bancodefensa.png" } as Desk,
-        speedLines: "defense_speedlines.gif",
-    },
-    pro: {
-        bg: "prosecutorempty",
-        desk: { ao2: "prosecutiondesk.png", ao1: "bancoacusacion.png" } as Desk,
-        speedLines: "prosecution_speedlines.gif",
-    },
-    hld: {
-        bg: "helperstand",
-        desk: {} as Desk,
-        speedLines: "defense_speedlines.gif",
-    },
-    hlp: {
-        bg: "prohelperstand",
-        desk: {} as Desk,
-        speedLines: "prosecution_speedlines.gif",
-    },
-    wit: {
-        bg: "witnessempty",
-        desk: { ao2: "stand.png", ao1: "estrado.png" } as Desk,
-        speedLines: "prosecution_speedlines.gif",
-    },
-    jud: {
-        bg: "judgestand",
-        desk: { ao2: "judgedesk.png", ao1: "judgedesk.gif" } as Desk,
-        speedLines: "prosecution_speedlines.gif",
-    },
-    jur: {
-        bg: "jurystand",
-        desk: { ao2: "jurydesk.png", ao1: "estrado.png" } as Desk,
-        speedLines: "defense_speedlines.gif",
-    },
-    sea: {
-        bg: "seancestand",
-        desk: { ao2: "seancedesk.png", ao1: "estrado.png" } as Desk,
-        speedLines: "prosecution_speedlines.gif",
-    },
-};
\ No newline at end of file
+  def: {
+    bg: "defenseempty",
+    desk: { ao2: "defensedesk.png", ao1: "bancodefensa.png" } as Desk,
+    speedLines: "defense_speedlines.gif",
+  },
+  pro: {
+    bg: "prosecutorempty",
+    desk: { ao2: "prosecutiondesk.png", ao1: "bancoacusacion.png" } as Desk,
+    speedLines: "prosecution_speedlines.gif",
+  },
+  hld: {
+    bg: "helperstand",
+    desk: {} as Desk,
+    speedLines: "defense_speedlines.gif",
+  },
+  hlp: {
+    bg: "prohelperstand",
+    desk: {} as Desk,
+    speedLines: "prosecution_speedlines.gif",
+  },
+  wit: {
+    bg: "witnessempty",
+    desk: { ao2: "stand.png", ao1: "estrado.png" } as Desk,
+    speedLines: "prosecution_speedlines.gif",
+  },
+  jud: {
+    bg: "judgestand",
+    desk: { ao2: "judgedesk.png", ao1: "judgedesk.gif" } as Desk,
+    speedLines: "prosecution_speedlines.gif",
+  },
+  jur: {
+    bg: "jurystand",
+    desk: { ao2: "jurydesk.png", ao1: "estrado.png" } as Desk,
+    speedLines: "defense_speedlines.gif",
+  },
+  sea: {
+    bg: "seancestand",
+    desk: { ao2: "seancedesk.png", ao1: "estrado.png" } as Desk,
+    speedLines: "prosecution_speedlines.gif",
+  },
+};
diff --git a/webAO/viewport/interfaces/ChatMsg.ts b/webAO/viewport/interfaces/ChatMsg.ts
index 352674b..1e7078f 100644
--- a/webAO/viewport/interfaces/ChatMsg.ts
+++ b/webAO/viewport/interfaces/ChatMsg.ts
@@ -1,34 +1,34 @@
 export interface ChatMsg {
-    content: string;
-    objection: number;
-    sound: string;
-    startpreanim?: boolean;
-    startspeaking?: boolean;
-    side: string;
-    color: number;
-    snddelay: number;
-    preanimdelay?: number;
-    speed: number;
-    blips: string;
-    self_offset?: number[];
-    other_offset?: number[];
-    showname?: string;
-    nameplate?: string;
-    flip?: number;
-    other_flip?: number;
-    effects?: string[];
-    deskmod?: number;
-    preanim?: string;
-    other_name?: string;
-    sprite?: string;
-    name?: string;
-    chatbox?: string;
-    other_emote?: string;
-    parsed?: HTMLSpanElement[];
-    screenshake?: number;
-    flash?: number;
-    type?: number;
-    evidence?: number;
-    looping_sfx?: boolean;
-    noninterrupting_preanim?: number;
-  }
\ No newline at end of file
+  content: string;
+  objection: number;
+  sound: string;
+  startpreanim?: boolean;
+  startspeaking?: boolean;
+  side: string;
+  color: number;
+  snddelay: number;
+  preanimdelay?: number;
+  speed: number;
+  blips: string;
+  self_offset?: number[];
+  other_offset?: number[];
+  showname?: string;
+  nameplate?: string;
+  flip?: number;
+  other_flip?: number;
+  effects?: string[];
+  deskmod?: number;
+  preanim?: string;
+  other_name?: string;
+  sprite?: string;
+  name?: string;
+  chatbox?: string;
+  other_emote?: string;
+  parsed?: HTMLSpanElement[];
+  screenshake?: number;
+  flash?: number;
+  type?: number;
+  evidence?: number;
+  looping_sfx?: boolean;
+  noninterrupting_preanim?: number;
+}
diff --git a/webAO/viewport/interfaces/Desk.ts b/webAO/viewport/interfaces/Desk.ts
index 872426a..2bcba96 100644
--- a/webAO/viewport/interfaces/Desk.ts
+++ b/webAO/viewport/interfaces/Desk.ts
@@ -1,4 +1,4 @@
 export interface Desk {
-    ao2?: string;
-    ao1?: string;
-}
\ No newline at end of file
+  ao2?: string;
+  ao1?: string;
+}
diff --git a/webAO/viewport/interfaces/Position.ts b/webAO/viewport/interfaces/Position.ts
index dea7238..11ec8e5 100644
--- a/webAO/viewport/interfaces/Position.ts
+++ b/webAO/viewport/interfaces/Position.ts
@@ -1,7 +1,7 @@
-import { Desk } from './Desk'
+import { Desk } from "./Desk";
 
 export interface Position {
-    bg?: string;
-    desk?: Desk;
-    speedLines: string;
-}
\ No newline at end of file
+  bg?: string;
+  desk?: Desk;
+  speedLines: string;
+}
diff --git a/webAO/viewport/interfaces/Positions.ts b/webAO/viewport/interfaces/Positions.ts
index 0644962..745168d 100644
--- a/webAO/viewport/interfaces/Positions.ts
+++ b/webAO/viewport/interfaces/Positions.ts
@@ -1,5 +1,5 @@
-import { Position } from './Position'
+import { Position } from "./Position";
 
 export interface Positions {
-    [key: string]: Position;
-}
\ No newline at end of file
+  [key: string]: Position;
+}
diff --git a/webAO/viewport/interfaces/Testimony.ts b/webAO/viewport/interfaces/Testimony.ts
index 61a7491..f51a3dd 100644
--- a/webAO/viewport/interfaces/Testimony.ts
+++ b/webAO/viewport/interfaces/Testimony.ts
@@ -1,3 +1,3 @@
 export interface Testimony {
-    [key: number]: string;
-}
\ No newline at end of file
+  [key: number]: string;
+}
diff --git a/webAO/viewport/interfaces/Viewport.ts b/webAO/viewport/interfaces/Viewport.ts
index d6b8632..68d98ff 100644
--- a/webAO/viewport/interfaces/Viewport.ts
+++ b/webAO/viewport/interfaces/Viewport.ts
@@ -2,42 +2,42 @@
 import { ChatMsg } from "./ChatMsg";
 
 export interface Viewport {
-    getTextNow: Function;
-    setTextNow: Function;
-    getChatmsg: Function;
-    setChatmsg: Function;
-    getSfxPlayed: Function;
-    setSfxPlayed: Function;
-    setTickTimer: Function;
-    getTickTimer: Function;
-    getAnimating: Function;
-    setAnimating: Function;
-    getLastEvidence: Function;
-    setLastEvidence: Function;
-    setLastCharacter: Function;
-    getLastCharacter: Function;
-    setShoutTimer: Function;
-    getShoutTimer: Function;
-    setTestimonyTimer: Function;
-    getTestimonyTimer: Function;
-    setTestimonyUpdater: Function;
-    getTestimonyUpdater: Function;
-    getTheme: Function;
-    setTheme: Function;
-    testimonyAudio: HTMLAudioElement;
-    chat_tick: Function;
-    playSFX: Function;
-    set_side: Function;
-    updateTestimony: Function;
-    disposeTestimony: Function;
-    handleTextTick: Function;
-    setSfxAudio: Function;
-    getSfxAudio: Function;
-    getBackgroundFolder: Function;
-    blipChannels: HTMLAudioElement[];
-    music: any;
-    setBackgroundName: Function;
-    getBackgroundName: Function;
-    shoutaudio: HTMLAudioElement;
-    updater: any;
+  getTextNow: Function;
+  setTextNow: Function;
+  getChatmsg: Function;
+  setChatmsg: Function;
+  getSfxPlayed: Function;
+  setSfxPlayed: Function;
+  setTickTimer: Function;
+  getTickTimer: Function;
+  getAnimating: Function;
+  setAnimating: Function;
+  getLastEvidence: Function;
+  setLastEvidence: Function;
+  setLastCharacter: Function;
+  getLastCharacter: Function;
+  setShoutTimer: Function;
+  getShoutTimer: Function;
+  setTestimonyTimer: Function;
+  getTestimonyTimer: Function;
+  setTestimonyUpdater: Function;
+  getTestimonyUpdater: Function;
+  getTheme: Function;
+  setTheme: Function;
+  testimonyAudio: HTMLAudioElement;
+  chat_tick: Function;
+  playSFX: Function;
+  set_side: Function;
+  updateTestimony: Function;
+  disposeTestimony: Function;
+  handleTextTick: Function;
+  setSfxAudio: Function;
+  getSfxAudio: Function;
+  getBackgroundFolder: Function;
+  blipChannels: HTMLAudioElement[];
+  music: any;
+  setBackgroundName: Function;
+  getBackgroundName: Function;
+  shoutaudio: HTMLAudioElement;
+  updater: any;
 }
diff --git a/webAO/viewport/utils/createBlipChannels.ts b/webAO/viewport/utils/createBlipChannels.ts
index 6296b3b..9e9c964 100644
--- a/webAO/viewport/utils/createBlipChannels.ts
+++ b/webAO/viewport/utils/createBlipChannels.ts
@@ -1,15 +1,15 @@
 import { opusCheck } from "../../dom/opusCheck";
 
 export const createBlipsChannels = () => {
-    const blipSelectors = document.getElementsByClassName(
-        "blipSound"
-    ) as HTMLCollectionOf<HTMLAudioElement>;
+  const blipSelectors = document.getElementsByClassName(
+    "blipSound",
+  ) as HTMLCollectionOf<HTMLAudioElement>;
 
-    const blipChannels = [...blipSelectors];
-    // Allocate multiple blip audio channels to make blips less jittery
-    blipChannels.forEach((channel: HTMLAudioElement) => (channel.volume = 0.5));
-    blipChannels.forEach(
-        (channel: HTMLAudioElement) => (channel.onerror = opusCheck(channel))
-    );
-    return blipChannels;
-};
\ No newline at end of file
+  const blipChannels = [...blipSelectors];
+  // Allocate multiple blip audio channels to make blips less jittery
+  blipChannels.forEach((channel: HTMLAudioElement) => (channel.volume = 0.5));
+  blipChannels.forEach(
+    (channel: HTMLAudioElement) => (channel.onerror = opusCheck(channel)),
+  );
+  return blipChannels;
+};
diff --git a/webAO/viewport/utils/createMusic.ts b/webAO/viewport/utils/createMusic.ts
index e660173..5733911 100644
--- a/webAO/viewport/utils/createMusic.ts
+++ b/webAO/viewport/utils/createMusic.ts
@@ -1,13 +1,13 @@
-import { opusCheck } from '../../dom/opusCheck'
+import { opusCheck } from "../../dom/opusCheck";
 
 export const createMusic = () => {
-    const audioChannels = document.getElementsByClassName(
-        "audioChannel"
-    ) as HTMLCollectionOf<HTMLAudioElement>;
-    const music = [...audioChannels];
-    music.forEach((channel: HTMLAudioElement) => (channel.volume = 0.5));
-    music.forEach(
-        (channel: HTMLAudioElement) => (channel.onerror = opusCheck(channel))
-    );
-    return music;
-};
\ No newline at end of file
+  const audioChannels = document.getElementsByClassName(
+    "audioChannel",
+  ) as HTMLCollectionOf<HTMLAudioElement>;
+  const music = [...audioChannels];
+  music.forEach((channel: HTMLAudioElement) => (channel.volume = 0.5));
+  music.forEach(
+    (channel: HTMLAudioElement) => (channel.onerror = opusCheck(channel)),
+  );
+  return music;
+};
diff --git a/webAO/viewport/utils/createSfxAudio.ts b/webAO/viewport/utils/createSfxAudio.ts
index 7e03563..c17b28d 100644
--- a/webAO/viewport/utils/createSfxAudio.ts
+++ b/webAO/viewport/utils/createSfxAudio.ts
@@ -1,9 +1,9 @@
 import { AO_HOST } from "../../client/aoHost";
 
 export const createSfxAudio = () => {
-    const sfxAudio = document.getElementById(
-        "client_sfxaudio"
-    ) as HTMLAudioElement;
-    sfxAudio.src = `${AO_HOST}sounds/general/sfx-realization.opus`;
-    return sfxAudio;
-};
\ No newline at end of file
+  const sfxAudio = document.getElementById(
+    "client_sfxaudio",
+  ) as HTMLAudioElement;
+  sfxAudio.src = `${AO_HOST}sounds/general/sfx-realization.opus`;
+  return sfxAudio;
+};
diff --git a/webAO/viewport/utils/createShoutAudio.ts b/webAO/viewport/utils/createShoutAudio.ts
index 8211116..756d364 100644
--- a/webAO/viewport/utils/createShoutAudio.ts
+++ b/webAO/viewport/utils/createShoutAudio.ts
@@ -1,9 +1,9 @@
 import { AO_HOST } from "../../client/aoHost";
 
 export const createShoutAudio = () => {
-    const shoutAudio = document.getElementById(
-        "client_shoutaudio"
-    ) as HTMLAudioElement;
-    shoutAudio.src = `${AO_HOST}misc/default/objection.opus`;
-    return shoutAudio;
-};
\ No newline at end of file
+  const shoutAudio = document.getElementById(
+    "client_shoutaudio",
+  ) as HTMLAudioElement;
+  shoutAudio.src = `${AO_HOST}misc/default/objection.opus`;
+  return shoutAudio;
+};
diff --git a/webAO/viewport/utils/createTestimonyAudio.ts b/webAO/viewport/utils/createTestimonyAudio.ts
index 2ff98f6..2d6f4e4 100644
--- a/webAO/viewport/utils/createTestimonyAudio.ts
+++ b/webAO/viewport/utils/createTestimonyAudio.ts
@@ -1,9 +1,9 @@
-import { AO_HOST } from '../../client/aoHost'
+import { AO_HOST } from "../../client/aoHost";
 
 export const createTestimonyAudio = () => {
-    const testimonyAudio = document.getElementById(
-        "client_testimonyaudio"
-    ) as HTMLAudioElement;
-    testimonyAudio.src = `${AO_HOST}sounds/general/sfx-guilty.opus`;
-    return testimonyAudio;
-};
\ No newline at end of file
+  const testimonyAudio = document.getElementById(
+    "client_testimonyaudio",
+  ) as HTMLAudioElement;
+  testimonyAudio.src = `${AO_HOST}sounds/general/sfx-guilty.opus`;
+  return testimonyAudio;
+};
diff --git a/webAO/viewport/utils/handleICSpeaking.ts b/webAO/viewport/utils/handleICSpeaking.ts
index d5bd29f..bae4986 100644
--- a/webAO/viewport/utils/handleICSpeaking.ts
+++ b/webAO/viewport/utils/handleICSpeaking.ts
@@ -15,11 +15,17 @@ import mlConfig from "../../utils/aoml";
 const attorneyMarkdown = mlConfig(AO_HOST);
 
 export let startFirstTickCheck: boolean;
-export const setStartFirstTickCheck = (val: boolean) => { startFirstTickCheck = val }
+export const setStartFirstTickCheck = (val: boolean) => {
+  startFirstTickCheck = val;
+};
 export let startSecondTickCheck: boolean;
-export const setStartSecondTickCheck = (val: boolean) => { startSecondTickCheck = val }
+export const setStartSecondTickCheck = (val: boolean) => {
+  startSecondTickCheck = val;
+};
 export let startThirdTickCheck: boolean;
-export const setStartThirdTickCheck = (val: boolean) => { startThirdTickCheck = val }
+export const setStartThirdTickCheck = (val: boolean) => {
+  startThirdTickCheck = val;
+};
 /**
  * Sets a new emote.
  * This sets up everything before the tick() loops starts
@@ -28,303 +34,324 @@ export const setStartThirdTickCheck = (val: boolean) => { startThirdTickCheck =
  * @param {object} chatmsg the new chat message
  */
 export const handle_ic_speaking = async (playerChatMsg: ChatMsg) => {
-    client.viewport.setChatmsg(playerChatMsg);
-    client.viewport.setTextNow("");
-    client.viewport.setSfxPlayed(0);
-    client.viewport.setTickTimer(0);
-    client.viewport.setAnimating(true);
-
-    startFirstTickCheck = true;
-    startSecondTickCheck = false;
-    startThirdTickCheck = false;
-    let charLayers = document.getElementById("client_char")!;
-    let pairLayers = document.getElementById("client_pair_char")!;
-    // stop updater
-    clearTimeout(client.viewport.updater);
-
-    // stop last sfx from looping any longer
-    client.viewport.getSfxAudio().loop = false;
-
-    const fg = <HTMLImageElement>document.getElementById("client_fg");
-    const gamewindow = document.getElementById("client_gamewindow")!;
-    const waitingBox = document.getElementById("client_chatwaiting")!;
-
-    // Reset CSS animation
-    gamewindow.style.animation = "";
-    waitingBox.style.opacity = "0";
-
-    const eviBox = document.getElementById("client_evi")!;
-
-    if (client.viewport.getLastEvidence() !== client.viewport.getChatmsg().evidence) {
-        eviBox.style.opacity = "0";
-        eviBox.style.height = "0%";
-    }
-    client.viewport.setLastEvidence(client.viewport.getChatmsg().evidence);
-
-    const validSides: string[] = ["def", "pro", "wit"]; // these are for the full view pan, the other positions use 'client_char'
-    if (validSides.includes(client.viewport.getChatmsg().side)) {
-        charLayers = document.getElementById(`client_${client.viewport.getChatmsg().side}_char`);
-        pairLayers = document.getElementById(`client_${client.viewport.getChatmsg().side}_pair_char`);
-    }
-
-    const chatContainerBox = document.getElementById("client_chatcontainer")!;
-    const nameBoxInner = document.getElementById("client_inner_name")!;
-    const chatBoxInner = document.getElementById("client_inner_chat")!;
-
-    const displayname =
-        (<HTMLInputElement>document.getElementById("showname")).checked &&
-            client.viewport.getChatmsg().showname !== ""
-            ? client.viewport.getChatmsg().showname!
-            : client.viewport.getChatmsg().nameplate!;
-
-    // Clear out the last message
-    if (!client.viewport.getChatmsg().additive) {
-        chatBoxInner.innerText = client.viewport.getTextNow();
-    }
-    nameBoxInner.innerText = displayname;
-
-    if (client.viewport.getLastCharacter() !== client.viewport.getChatmsg().name) {
-        charLayers.style.opacity = "0";
-        pairLayers.style.opacity = "0";
-    }
-
-    client.viewport.setLastCharacter(client.viewport.getChatmsg().name);
-
-    appendICLog(client.viewport.getChatmsg().content, client.viewport.getChatmsg().showname, client.viewport.getChatmsg().nameplate);
-
-    checkCallword(client.viewport.getChatmsg().content, client.viewport.getSfxAudio());
-
-    setEmote(
-        AO_HOST,
-        client,
-        client.viewport.getChatmsg().name!.toLowerCase(),
-        client.viewport.getChatmsg().sprite!,
-        "(a)",
-        false,
-        client.viewport.getChatmsg().side
+  client.viewport.setChatmsg(playerChatMsg);
+  client.viewport.setTextNow("");
+  client.viewport.setSfxPlayed(0);
+  client.viewport.setTickTimer(0);
+  client.viewport.setAnimating(true);
+
+  startFirstTickCheck = true;
+  startSecondTickCheck = false;
+  startThirdTickCheck = false;
+  let charLayers = document.getElementById("client_char")!;
+  let pairLayers = document.getElementById("client_pair_char")!;
+  // stop updater
+  clearTimeout(client.viewport.updater);
+
+  // stop last sfx from looping any longer
+  client.viewport.getSfxAudio().loop = false;
+
+  const fg = <HTMLImageElement>document.getElementById("client_fg");
+  const gamewindow = document.getElementById("client_gamewindow")!;
+  const waitingBox = document.getElementById("client_chatwaiting")!;
+
+  // Reset CSS animation
+  gamewindow.style.animation = "";
+  waitingBox.style.opacity = "0";
+
+  const eviBox = document.getElementById("client_evi")!;
+
+  if (
+    client.viewport.getLastEvidence() !== client.viewport.getChatmsg().evidence
+  ) {
+    eviBox.style.opacity = "0";
+    eviBox.style.height = "0%";
+  }
+  client.viewport.setLastEvidence(client.viewport.getChatmsg().evidence);
+
+  const validSides: string[] = ["def", "pro", "wit"]; // these are for the full view pan, the other positions use 'client_char'
+  if (validSides.includes(client.viewport.getChatmsg().side)) {
+    charLayers = document.getElementById(
+      `client_${client.viewport.getChatmsg().side}_char`,
     );
-
-    if (client.viewport.getChatmsg().other_name) {
-        setEmote(
-            AO_HOST,
-            client,
-            client.viewport.getChatmsg().other_name.toLowerCase(),
-            client.viewport.getChatmsg().other_emote!,
-            "(a)",
-            false,
-            client.viewport.getChatmsg().side
-        );
-    }
-
-    // gets which shout shall played
-    const shoutSprite = <HTMLImageElement>(
-        document.getElementById("client_shout")
+    pairLayers = document.getElementById(
+      `client_${client.viewport.getChatmsg().side}_pair_char`,
     );
+  }
+
+  const chatContainerBox = document.getElementById("client_chatcontainer")!;
+  const nameBoxInner = document.getElementById("client_inner_name")!;
+  const chatBoxInner = document.getElementById("client_inner_chat")!;
+
+  const displayname =
+    (<HTMLInputElement>document.getElementById("showname")).checked &&
+    client.viewport.getChatmsg().showname !== ""
+      ? client.viewport.getChatmsg().showname!
+      : client.viewport.getChatmsg().nameplate!;
+
+  // Clear out the last message
+  if (!client.viewport.getChatmsg().additive) {
+    chatBoxInner.innerText = client.viewport.getTextNow();
+  }
+  nameBoxInner.innerText = displayname;
+
+  if (
+    client.viewport.getLastCharacter() !== client.viewport.getChatmsg().name
+  ) {
+    charLayers.style.opacity = "0";
+    pairLayers.style.opacity = "0";
+  }
+
+  client.viewport.setLastCharacter(client.viewport.getChatmsg().name);
+
+  appendICLog(
+    client.viewport.getChatmsg().content,
+    client.viewport.getChatmsg().showname,
+    client.viewport.getChatmsg().nameplate,
+  );
+
+  checkCallword(
+    client.viewport.getChatmsg().content,
+    client.viewport.getSfxAudio(),
+  );
+
+  setEmote(
+    AO_HOST,
+    client,
+    client.viewport.getChatmsg().name!.toLowerCase(),
+    client.viewport.getChatmsg().sprite!,
+    "(a)",
+    false,
+    client.viewport.getChatmsg().side,
+  );
+
+  if (client.viewport.getChatmsg().other_name) {
+    setEmote(
+      AO_HOST,
+      client,
+      client.viewport.getChatmsg().other_name.toLowerCase(),
+      client.viewport.getChatmsg().other_emote!,
+      "(a)",
+      false,
+      client.viewport.getChatmsg().side,
+    );
+  }
 
-    const shout = SHOUTS[client.viewport.getChatmsg().objection];
-    if (shout) {
-        // Hide message box
-        chatContainerBox.style.opacity = "0";
-        if (client.viewport.getChatmsg().objection === 4) {
-            shoutSprite.src = `${AO_HOST}characters/${encodeURI(
-                client.viewport.getChatmsg().name!.toLowerCase()
-            )}/custom.gif`;
-        } else {
-            shoutSprite.src = client.resources[shout].src;
-            shoutSprite.style.animation = "bubble 700ms steps(10, jump-both)";
-        }
-        shoutSprite.style.opacity = "1";
-
-        client.viewport.shoutaudio.src = `${AO_HOST}characters/${encodeURI(
-            client.viewport.getChatmsg().name.toLowerCase()
-        )}/${shout}.opus`;
-        client.viewport.shoutaudio.play();
-        client.viewport.setShoutTimer(client.resources[shout].duration);
-    } else {
-        client.viewport.setShoutTimer(0);
-    }
-
-    client.viewport.getChatmsg().startpreanim = true;
-    let gifLength = 0;
-
-    if (client.viewport.getChatmsg().type === 1 && client.viewport.getChatmsg().preanim !== "-") {
-        //we have a preanim
-        chatContainerBox.style.opacity = "0";
+  // gets which shout shall played
+  const shoutSprite = <HTMLImageElement>document.getElementById("client_shout");
 
-        gifLength = await getAnimLength(
-            `${AO_HOST}characters/${encodeURI(
-                client.viewport.getChatmsg().name!.toLowerCase()
-            )}/${encodeURI(client.viewport.getChatmsg().preanim)}`
-        );
-        client.viewport.getChatmsg().startspeaking = false;
+  const shout = SHOUTS[client.viewport.getChatmsg().objection];
+  if (shout) {
+    // Hide message box
+    chatContainerBox.style.opacity = "0";
+    if (client.viewport.getChatmsg().objection === 4) {
+      shoutSprite.src = `${AO_HOST}characters/${encodeURI(
+        client.viewport.getChatmsg().name!.toLowerCase(),
+      )}/custom.gif`;
     } else {
-        client.viewport.getChatmsg().startspeaking = true;
-        if (client.viewport.getChatmsg().content.trim() !== "") chatContainerBox.style.opacity = "1";
+      shoutSprite.src = client.resources[shout].src;
+      shoutSprite.style.animation = "bubble 700ms steps(10, jump-both)";
     }
-    client.viewport.getChatmsg().preanimdelay = gifLength;
-    const setAside = {
-        position: client.viewport.getChatmsg().side,
-        showSpeedLines: false,
-        showDesk: false,
-    };
-    let skipoffset: boolean = false;
-    if (client.viewport.getChatmsg().type === 5) {
-        setAside.showSpeedLines = true;
+    shoutSprite.style.opacity = "1";
+
+    client.viewport.shoutaudio.src = `${AO_HOST}characters/${encodeURI(
+      client.viewport.getChatmsg().name.toLowerCase(),
+    )}/${shout}.opus`;
+    client.viewport.shoutaudio.play();
+    client.viewport.setShoutTimer(client.resources[shout].duration);
+  } else {
+    client.viewport.setShoutTimer(0);
+  }
+
+  client.viewport.getChatmsg().startpreanim = true;
+  let gifLength = 0;
+
+  if (
+    client.viewport.getChatmsg().type === 1 &&
+    client.viewport.getChatmsg().preanim !== "-"
+  ) {
+    //we have a preanim
+    chatContainerBox.style.opacity = "0";
+
+    gifLength = await getAnimLength(
+      `${AO_HOST}characters/${encodeURI(
+        client.viewport.getChatmsg().name!.toLowerCase(),
+      )}/${encodeURI(client.viewport.getChatmsg().preanim)}`,
+    );
+    client.viewport.getChatmsg().startspeaking = false;
+  } else {
+    client.viewport.getChatmsg().startspeaking = true;
+    if (client.viewport.getChatmsg().content.trim() !== "")
+      chatContainerBox.style.opacity = "1";
+  }
+  client.viewport.getChatmsg().preanimdelay = gifLength;
+  const setAside = {
+    position: client.viewport.getChatmsg().side,
+    showSpeedLines: false,
+    showDesk: false,
+  };
+  let skipoffset: boolean = false;
+  if (client.viewport.getChatmsg().type === 5) {
+    setAside.showSpeedLines = true;
+    setAside.showDesk = false;
+    client.viewport.set_side(setAside);
+  } else {
+    switch (Number(client.viewport.getChatmsg().deskmod)) {
+      case 0: //desk is hidden
+        setAside.showSpeedLines = false;
         setAside.showDesk = false;
         client.viewport.set_side(setAside);
-    } else {
-        switch (Number(client.viewport.getChatmsg().deskmod)) {
-            case 0: //desk is hidden
-                setAside.showSpeedLines = false;
-                setAside.showDesk = false;
-                client.viewport.set_side(setAside);
-                break;
-            case 1: //desk is shown
-                setAside.showSpeedLines = false;
-                setAside.showDesk = true;
-                client.viewport.set_side(setAside);
-                break;
-            case 2: //desk is hidden during preanim, but shown during idle/talk
-                setAside.showSpeedLines = false;
-                setAside.showDesk = false;
-                client.viewport.set_side(setAside);
-                break;
-            case 3: //opposite of 2
-                setAside.showSpeedLines = false;
-                setAside.showDesk = false;
-                client.viewport.set_side(setAside);
-                break;
-            case 4: //desk is hidden, character offset is ignored, pair character is hidden during preanim, normal behavior during idle/talk
-                setAside.showSpeedLines = false;
-                setAside.showDesk = false;
-                client.viewport.set_side(setAside);
-                skipoffset = true;
-                break;
-            case 5: //opposite of 4
-                setAside.showSpeedLines = false;
-                setAside.showDesk = true;
-                client.viewport.set_side(setAside);
-                break;
-            default:
-                setAside.showSpeedLines = false;
-                setAside.showDesk = true;
-                client.viewport.set_side(setAside);
-                break;
-        }
-    }
-
-    setChatbox(client.viewport.getChatmsg().chatbox);
-    resizeChatbox();
-    if (client.viewport.getChatmsg().chatbox === "") {
-        // No chatbox means hide it
-        chatContainerBox.style.opacity = "0";
-    }
-
-    if (!skipoffset) {
-        // Flip the character
-        charLayers.style.transform =
-            client.viewport.getChatmsg().flip === 1 ? "scaleX(-1)" : "scaleX(1)";
-        pairLayers.style.transform =
-            client.viewport.getChatmsg().other_flip === 1 ? "scaleX(-1)" : "scaleX(1)";
-
-        // Shift by the horizontal offset
-        switch (client.viewport.getChatmsg().side) {
-            case "wit":
-                pairLayers.style.left = `${200 + Number(client.viewport.getChatmsg().other_offset[0])}%`;
-                charLayers.style.left = `${200 + Number(client.viewport.getChatmsg().self_offset[0])}%`;
-                break;
-            case "pro":
-                pairLayers.style.left = `${400 + Number(client.viewport.getChatmsg().other_offset[0])}%`;
-                charLayers.style.left = `${400 + Number(client.viewport.getChatmsg().self_offset[0])}%`;
-                break;
-            default:
-                pairLayers.style.left = `${Number(client.viewport.getChatmsg().other_offset[0])}%`;
-                charLayers.style.left = `${Number(client.viewport.getChatmsg().self_offset[0])}%`;
-                break;
-        }
-
-        // New vertical offsets
-        pairLayers.style.top = `${Number(client.viewport.getChatmsg().other_offset[1])}%`;
-        charLayers.style.top = `${Number(client.viewport.getChatmsg().self_offset[1])}%`;
+        break;
+      case 1: //desk is shown
+        setAside.showSpeedLines = false;
+        setAside.showDesk = true;
+        client.viewport.set_side(setAside);
+        break;
+      case 2: //desk is hidden during preanim, but shown during idle/talk
+        setAside.showSpeedLines = false;
+        setAside.showDesk = false;
+        client.viewport.set_side(setAside);
+        break;
+      case 3: //opposite of 2
+        setAside.showSpeedLines = false;
+        setAside.showDesk = false;
+        client.viewport.set_side(setAside);
+        break;
+      case 4: //desk is hidden, character offset is ignored, pair character is hidden during preanim, normal behavior during idle/talk
+        setAside.showSpeedLines = false;
+        setAside.showDesk = false;
+        client.viewport.set_side(setAside);
+        skipoffset = true;
+        break;
+      case 5: //opposite of 4
+        setAside.showSpeedLines = false;
+        setAside.showDesk = true;
+        client.viewport.set_side(setAside);
+        break;
+      default:
+        setAside.showSpeedLines = false;
+        setAside.showDesk = true;
+        client.viewport.set_side(setAside);
+        break;
     }
-
-    client.viewport.blipChannels.forEach(
-        (channel: HTMLAudioElement) =>
-        (channel.src = `${AO_HOST}sounds/blips/${encodeURI(
-            client.viewport.getChatmsg().blips.toLowerCase()
-        )}.opus`)
-    );
-
-    // process markup
-    if (client.viewport.getChatmsg().content.startsWith("~~")) {
-        chatBoxInner.style.textAlign = "center";
-        client.viewport.getChatmsg().content = client.viewport.getChatmsg().content.substring(2, client.viewport.getChatmsg().content.length);
-    } else {
-        chatBoxInner.style.textAlign = "inherit";
+  }
+
+  setChatbox(client.viewport.getChatmsg().chatbox);
+  resizeChatbox();
+  if (client.viewport.getChatmsg().chatbox === "") {
+    // No chatbox means hide it
+    chatContainerBox.style.opacity = "0";
+  }
+
+  if (!skipoffset) {
+    // Flip the character
+    charLayers.style.transform =
+      client.viewport.getChatmsg().flip === 1 ? "scaleX(-1)" : "scaleX(1)";
+    pairLayers.style.transform =
+      client.viewport.getChatmsg().other_flip === 1
+        ? "scaleX(-1)"
+        : "scaleX(1)";
+
+    // Shift by the horizontal offset
+    switch (client.viewport.getChatmsg().side) {
+      case "wit":
+        pairLayers.style.left = `${200 + Number(client.viewport.getChatmsg().other_offset[0])}%`;
+        charLayers.style.left = `${200 + Number(client.viewport.getChatmsg().self_offset[0])}%`;
+        break;
+      case "pro":
+        pairLayers.style.left = `${400 + Number(client.viewport.getChatmsg().other_offset[0])}%`;
+        charLayers.style.left = `${400 + Number(client.viewport.getChatmsg().self_offset[0])}%`;
+        break;
+      default:
+        pairLayers.style.left = `${Number(client.viewport.getChatmsg().other_offset[0])}%`;
+        charLayers.style.left = `${Number(client.viewport.getChatmsg().self_offset[0])}%`;
+        break;
     }
 
-    // apply effects
-    fg.style.animation = "";
-    const effectName = client.viewport.getChatmsg().effects[0].toLowerCase();
-    const badEffects = ["", "-", "none"];
-    if (effectName.startsWith("rain")) {
-        (<HTMLLinkElement>document.getElementById("effect_css")).href = "styles/effects/rain.css";
-        let intensity = 200;
-        if (effectName.endsWith("weak")) {
-            intensity = 100;
-        } else if (effectName.endsWith("strong")) {
-            intensity = 400;
-        }
-        if (intensity < fg.childElementCount)
-            fg.innerHTML = '';
-        else
-            intensity = intensity - fg.childElementCount;
-
-        for (let i = 0; i < intensity; i++) {
-            const drop = document.createElement("p");
-            drop.style.left = (Math.random() * 100) + "%";
-            drop.style.animationDelay = String(Math.random()) + "s";
-            fg.appendChild(drop)
-        }
-    } else if (
-        client.viewport.getChatmsg().effects[0] &&
-        !badEffects.includes(effectName)
-    ) {
-        (<HTMLLinkElement>document.getElementById("effect_css")).href = "";
-        fg.innerHTML = '';
-        const baseEffectUrl = `${AO_HOST}themes/default/effects/`;
-        fg.src = `${baseEffectUrl}${encodeURI(effectName)}.webp`;
-    } else {
-        fg.innerHTML = '';
-        fg.src = transparentPng;
+    // New vertical offsets
+    pairLayers.style.top = `${Number(client.viewport.getChatmsg().other_offset[1])}%`;
+    charLayers.style.top = `${Number(client.viewport.getChatmsg().self_offset[1])}%`;
+  }
+
+  client.viewport.blipChannels.forEach(
+    (channel: HTMLAudioElement) =>
+      (channel.src = `${AO_HOST}sounds/blips/${encodeURI(
+        client.viewport.getChatmsg().blips.toLowerCase(),
+      )}.opus`),
+  );
+
+  // process markup
+  if (client.viewport.getChatmsg().content.startsWith("~~")) {
+    chatBoxInner.style.textAlign = "center";
+    client.viewport.getChatmsg().content = client.viewport
+      .getChatmsg()
+      .content.substring(2, client.viewport.getChatmsg().content.length);
+  } else {
+    chatBoxInner.style.textAlign = "inherit";
+  }
+
+  // apply effects
+  fg.style.animation = "";
+  const effectName = client.viewport.getChatmsg().effects[0].toLowerCase();
+  const badEffects = ["", "-", "none"];
+  if (effectName.startsWith("rain")) {
+    (<HTMLLinkElement>document.getElementById("effect_css")).href =
+      "styles/effects/rain.css";
+    let intensity = 200;
+    if (effectName.endsWith("weak")) {
+      intensity = 100;
+    } else if (effectName.endsWith("strong")) {
+      intensity = 400;
     }
-
-
-    charLayers.style.opacity = "1";
-
-    const soundChecks = ["0", "1", "", undefined];
-    if (soundChecks.some((check) => client.viewport.getChatmsg().sound === check)) {
-        client.viewport.getChatmsg().sound = client.viewport.getChatmsg().effects[2];
+    if (intensity < fg.childElementCount) fg.innerHTML = "";
+    else intensity = intensity - fg.childElementCount;
+
+    for (let i = 0; i < intensity; i++) {
+      const drop = document.createElement("p");
+      drop.style.left = Math.random() * 100 + "%";
+      drop.style.animationDelay = String(Math.random()) + "s";
+      fg.appendChild(drop);
     }
-
-    try {
-        client.viewport.getChatmsg().parsed = await attorneyMarkdown.applyMarkdown(
-            client.viewport.getChatmsg().content,
-
-            COLORS[client.viewport.getChatmsg().color]
-
-        );
-    } catch (error) {
-        console.warn("markdown failed");
-        const output: HTMLSpanElement[] = []
-        for (const letter of client.viewport.getChatmsg().content) {
-            const currentSelector = document.createElement('span');
-            currentSelector.innerHTML = letter;
-            currentSelector.className = `text_${COLORS[client.viewport.getChatmsg().color]}`;
-            output.push(currentSelector);
-        }
-        client.viewport.getChatmsg().parsed = output;
+  } else if (
+    client.viewport.getChatmsg().effects[0] &&
+    !badEffects.includes(effectName)
+  ) {
+    (<HTMLLinkElement>document.getElementById("effect_css")).href = "";
+    fg.innerHTML = "";
+    const baseEffectUrl = `${AO_HOST}themes/default/effects/`;
+    fg.src = `${baseEffectUrl}${encodeURI(effectName)}.webp`;
+  } else {
+    fg.innerHTML = "";
+    fg.src = transparentPng;
+  }
+
+  charLayers.style.opacity = "1";
+
+  const soundChecks = ["0", "1", "", undefined];
+  if (
+    soundChecks.some((check) => client.viewport.getChatmsg().sound === check)
+  ) {
+    client.viewport.getChatmsg().sound =
+      client.viewport.getChatmsg().effects[2];
+  }
+
+  try {
+    client.viewport.getChatmsg().parsed = await attorneyMarkdown.applyMarkdown(
+      client.viewport.getChatmsg().content,
+
+      COLORS[client.viewport.getChatmsg().color],
+    );
+  } catch (error) {
+    console.warn("markdown failed");
+    const output: HTMLSpanElement[] = [];
+    for (const letter of client.viewport.getChatmsg().content) {
+      const currentSelector = document.createElement("span");
+      currentSelector.innerHTML = letter;
+      currentSelector.className = `text_${COLORS[client.viewport.getChatmsg().color]}`;
+      output.push(currentSelector);
     }
+    client.viewport.getChatmsg().parsed = output;
+  }
 
-    client.viewport.chat_tick();
+  client.viewport.chat_tick();
 };
diff --git a/webAO/viewport/utils/initTestimonyUpdater.ts b/webAO/viewport/utils/initTestimonyUpdater.ts
index e6f6e9d..c1e4d93 100644
--- a/webAO/viewport/utils/initTestimonyUpdater.ts
+++ b/webAO/viewport/utils/initTestimonyUpdater.ts
@@ -1,31 +1,33 @@
-import { Testimony } from '../interfaces/Testimony'
-import { client, UPDATE_INTERVAL } from '../../client'
+import { Testimony } from "../interfaces/Testimony";
+import { client, UPDATE_INTERVAL } from "../../client";
 /**
  * Intialize testimony updater
  */
 export const initTestimonyUpdater = () => {
-    const testimonyFilenames: Testimony = {
-        1: "witnesstestimony",
-        2: "crossexamination",
-        3: "notguilty",
-        4: "guilty",
-    };
+  const testimonyFilenames: Testimony = {
+    1: "witnesstestimony",
+    2: "crossexamination",
+    3: "notguilty",
+    4: "guilty",
+  };
 
-    const testimony = testimonyFilenames[client.testimonyID];
-    if (!testimony) {
-        console.warn(`Invalid testimony ID ${client.testimonyID}`);
-        return;
-    }
+  const testimony = testimonyFilenames[client.testimonyID];
+  if (!testimony) {
+    console.warn(`Invalid testimony ID ${client.testimonyID}`);
+    return;
+  }
 
-    client.viewport.testimonyAudio.src = client.resources[testimony].sfx;
-    client.viewport.testimonyAudio.play();
+  client.viewport.testimonyAudio.src = client.resources[testimony].sfx;
+  client.viewport.testimonyAudio.play();
 
-    const testimonyOverlay = <HTMLImageElement>(
-        document.getElementById("client_testimony")
-    );
-    testimonyOverlay.src = client.resources[testimony].src;
-    testimonyOverlay.style.opacity = "1";
+  const testimonyOverlay = <HTMLImageElement>(
+    document.getElementById("client_testimony")
+  );
+  testimonyOverlay.src = client.resources[testimony].src;
+  testimonyOverlay.style.opacity = "1";
 
-    client.viewport.setTestimonyTimer(0);
-    client.viewport.setTestimonyUpdater(setTimeout(() => client.viewport.updateTestimony(), UPDATE_INTERVAL));
-};
\ No newline at end of file
+  client.viewport.setTestimonyTimer(0);
+  client.viewport.setTestimonyUpdater(
+    setTimeout(() => client.viewport.updateTestimony(), UPDATE_INTERVAL),
+  );
+};
diff --git a/webAO/viewport/utils/setSide.ts b/webAO/viewport/utils/setSide.ts
index 77d1744..fd229e1 100644
--- a/webAO/viewport/utils/setSide.ts
+++ b/webAO/viewport/utils/setSide.ts
@@ -1,8 +1,8 @@
-import { positions } from '../constants/positions'
-import { AO_HOST } from '../../client/aoHost'
-import { client } from '../../client'
-import tryUrls from '../../utils/tryUrls';
-import findImgSrc from '../../utils/findImgSrc';
+import { positions } from "../constants/positions";
+import { AO_HOST } from "../../client/aoHost";
+import { client } from "../../client";
+import tryUrls from "../../utils/tryUrls";
+import findImgSrc from "../../utils/findImgSrc";
 
 /**
  * Changes the viewport background based on a given position.
@@ -11,81 +11,78 @@ import findImgSrc from '../../utils/findImgSrc';
  * @param {string} position the position to change into
  */
 export const set_side = async ({
-    position,
-    showSpeedLines,
-    showDesk,
+  position,
+  showSpeedLines,
+  showDesk,
 }: {
-    position: string;
-    showSpeedLines: boolean;
-    showDesk: boolean;
+  position: string;
+  showSpeedLines: boolean;
+  showDesk: boolean;
 }) => {
-    const view = document.getElementById("client_fullview")!;
-    let bench: HTMLImageElement;
-    if (['def', 'pro', 'wit'].includes(position)) {
-        bench = <HTMLImageElement>(
-            document.getElementById(`client_${position}_bench`)
-        );
-    } else {
-        bench = <HTMLImageElement>document.getElementById("client_bench_classic");
-    }
+  const view = document.getElementById("client_fullview")!;
+  let bench: HTMLImageElement;
+  if (["def", "pro", "wit"].includes(position)) {
+    bench = <HTMLImageElement>(
+      document.getElementById(`client_${position}_bench`)
+    );
+  } else {
+    bench = <HTMLImageElement>document.getElementById("client_bench_classic");
+  }
 
-    let court: HTMLImageElement;
-    if ("def,pro,wit".includes(position)) {
-        court = <HTMLImageElement>(
-            document.getElementById(`client_court_${position}`)
-        );
-    } else {
-        court = <HTMLImageElement>document.getElementById("client_court_classic");
-    }
+  let court: HTMLImageElement;
+  if ("def,pro,wit".includes(position)) {
+    court = <HTMLImageElement>(
+      document.getElementById(`client_court_${position}`)
+    );
+  } else {
+    court = <HTMLImageElement>document.getElementById("client_court_classic");
+  }
 
-    let bg;
-    let desk;
-    let speedLines;
+  let bg;
+  let desk;
+  let speedLines;
 
-    if ("def,pro,hld,hlp,wit,jud,jur,sea".includes(position)) {
-        bg = positions[position].bg;
-        desk = positions[position].desk;
-        speedLines = positions[position].speedLines;
-    } else {
-        bg = `${position}`;
-        desk = { ao2: `${position}_overlay.png`, ao1: "_overlay.png" };
-        speedLines = "defense_speedlines.gif";
-    }
+  if ("def,pro,hld,hlp,wit,jud,jur,sea".includes(position)) {
+    bg = positions[position].bg;
+    desk = positions[position].desk;
+    speedLines = positions[position].speedLines;
+  } else {
+    bg = `${position}`;
+    desk = { ao2: `${position}_overlay.png`, ao1: "_overlay.png" };
+    speedLines = "defense_speedlines.gif";
+  }
 
-    if (showSpeedLines === true) {
-        court.src = `${AO_HOST}themes/default/${encodeURI(speedLines)}`;
-    } else {
-        court.src = await tryUrls(client.viewport.getBackgroundFolder() + bg);
-    }
+  if (showSpeedLines === true) {
+    court.src = `${AO_HOST}themes/default/${encodeURI(speedLines)}`;
+  } else {
+    court.src = await tryUrls(client.viewport.getBackgroundFolder() + bg);
+  }
 
-    if (showDesk === true && desk) {
-        const bg_folder = client.viewport.getBackgroundFolder();
-        const urls_to_try = [
-            bg_folder + desk.ao2,
-            bg_folder + desk.ao1,
-        ];
-        bench.src = await findImgSrc(urls_to_try);
-        bench.style.opacity = "1";
-    } else {
-        bench.style.opacity = "0";
-    }
+  if (showDesk === true && desk) {
+    const bg_folder = client.viewport.getBackgroundFolder();
+    const urls_to_try = [bg_folder + desk.ao2, bg_folder + desk.ao1];
+    bench.src = await findImgSrc(urls_to_try);
+    bench.style.opacity = "1";
+  } else {
+    bench.style.opacity = "0";
+  }
 
-    if ("def,pro,wit".includes(position)) {
-        view.style.display = "";
-        document.getElementById("client_classicview")!.style.display = "none";
-        switch (position) {
-            case "def":
-                view.style.left = "0";
-                break;
-            case "wit":
-                view.style.left = "-200%";
-                break;
-            case "pro":
-                view.style.left = "-400%";
-                break;
-        }
-    } else {
-        view.style.display = "none";
-        document.getElementById("client_classicview").style.display = "";
+  if ("def,pro,wit".includes(position)) {
+    view.style.display = "";
+    document.getElementById("client_classicview")!.style.display = "none";
+    switch (position) {
+      case "def":
+        view.style.left = "0";
+        break;
+      case "wit":
+        view.style.left = "-200%";
+        break;
+      case "pro":
+        view.style.left = "-400%";
+        break;
     }
+  } else {
+    view.style.display = "none";
+    document.getElementById("client_classicview").style.display = "";
+  }
 };
diff --git a/webAO/viewport/viewport.ts b/webAO/viewport/viewport.ts
index 8a1e97d..c2613b3 100644
--- a/webAO/viewport/viewport.ts
+++ b/webAO/viewport/viewport.ts
@@ -5,18 +5,23 @@ import { UPDATE_INTERVAL } from "../client";
 import setEmote from "../client/setEmote";
 import { safeTags } from "../encoding";
 import { AO_HOST } from "../client/aoHost";
-import { Viewport } from './interfaces/Viewport'
-import { createBlipsChannels } from './utils/createBlipChannels'
-import { defaultChatMsg } from './constants/defaultChatMsg'
-import { createMusic } from './utils/createMusic'
-import { createSfxAudio } from './utils/createSfxAudio'
-import { createShoutAudio } from './utils/createShoutAudio'
-import { createTestimonyAudio } from './utils/createTestimonyAudio'
-import { Testimony } from './interfaces/Testimony'
-import { COLORS } from './constants/colors'
-import { set_side } from './utils/setSide'
+import { Viewport } from "./interfaces/Viewport";
+import { createBlipsChannels } from "./utils/createBlipChannels";
+import { defaultChatMsg } from "./constants/defaultChatMsg";
+import { createMusic } from "./utils/createMusic";
+import { createSfxAudio } from "./utils/createSfxAudio";
+import { createShoutAudio } from "./utils/createShoutAudio";
+import { createTestimonyAudio } from "./utils/createTestimonyAudio";
+import { Testimony } from "./interfaces/Testimony";
+import { COLORS } from "./constants/colors";
+import { set_side } from "./utils/setSide";
 import { ChatMsg } from "./interfaces/ChatMsg";
-import { setStartFirstTickCheck, setStartSecondTickCheck, startFirstTickCheck, startSecondTickCheck } from "./utils/handleICSpeaking";
+import {
+  setStartFirstTickCheck,
+  setStartSecondTickCheck,
+  startFirstTickCheck,
+  startSecondTickCheck,
+} from "./utils/handleICSpeaking";
 
 const viewport = (): Viewport => {
   let animating = false;
@@ -39,33 +44,63 @@ const viewport = (): Viewport => {
   let updater: any;
   let backgroundName = "";
   const getSfxAudio = () => sfxAudio;
-  const setSfxAudio = (value: HTMLAudioElement) => { sfxAudio = value };
+  const setSfxAudio = (value: HTMLAudioElement) => {
+    sfxAudio = value;
+  };
   const getBackgroundName = () => backgroundName;
-  const setBackgroundName = (value: string) => { backgroundName = value };
+  const setBackgroundName = (value: string) => {
+    backgroundName = value;
+  };
   const getBackgroundFolder = () =>
     `${AO_HOST}background/${encodeURI(backgroundName.toLowerCase())}/`;
-  const getTextNow = () => {return textnow}
-  const setTextNow = (val: string) => {textnow = val}
-  const getChatmsg = () => {return chatmsg}
-  const setChatmsg = (val: ChatMsg) => {chatmsg = val}
-  const getSfxPlayed = () => sfxplayed
-  const setSfxPlayed = (val: number) => {sfxplayed = val}
-  const getTickTimer = () => tickTimer
-  const setTickTimer = (val: number) => {tickTimer = val}
-  const getAnimating = () => animating
-  const setAnimating = (val: boolean) => {animating = val}
-  const getLastEvidence = () => lastEvi
-  const setLastEvidence = (val: number) => {lastEvi = val}
-  const setLastCharacter = (val: string) => {lastChar = val}
-  const getLastCharacter = () => lastChar
-  const getShoutTimer = () => shoutTimer
-  const setShoutTimer = (val: number) => {shoutTimer = val}
-  const getTheme = () => theme
-  const setTheme = (val: string) => {theme = val}
+  const getTextNow = () => {
+    return textnow;
+  };
+  const setTextNow = (val: string) => {
+    textnow = val;
+  };
+  const getChatmsg = () => {
+    return chatmsg;
+  };
+  const setChatmsg = (val: ChatMsg) => {
+    chatmsg = val;
+  };
+  const getSfxPlayed = () => sfxplayed;
+  const setSfxPlayed = (val: number) => {
+    sfxplayed = val;
+  };
+  const getTickTimer = () => tickTimer;
+  const setTickTimer = (val: number) => {
+    tickTimer = val;
+  };
+  const getAnimating = () => animating;
+  const setAnimating = (val: boolean) => {
+    animating = val;
+  };
+  const getLastEvidence = () => lastEvi;
+  const setLastEvidence = (val: number) => {
+    lastEvi = val;
+  };
+  const setLastCharacter = (val: string) => {
+    lastChar = val;
+  };
+  const getLastCharacter = () => lastChar;
+  const getShoutTimer = () => shoutTimer;
+  const setShoutTimer = (val: number) => {
+    shoutTimer = val;
+  };
+  const getTheme = () => theme;
+  const setTheme = (val: string) => {
+    theme = val;
+  };
   const getTestimonyTimer = () => testimonyTimer;
-  const setTestimonyTimer = (val: number) => {testimonyTimer = val}
-  const setTestimonyUpdater = (val: any) => {testimonyUpdater = val}
-  const getTestimonyUpdater = () => testimonyUpdater 
+  const setTestimonyTimer = (val: number) => {
+    testimonyTimer = val;
+  };
+  const setTestimonyUpdater = (val: any) => {
+    testimonyUpdater = val;
+  };
+  const getTestimonyUpdater = () => testimonyUpdater;
   const playSFX = async (sfxname: string, looping: boolean) => {
     sfxAudio.pause();
     sfxAudio.loop = looping;
@@ -146,7 +181,7 @@ const viewport = (): Viewport => {
         Object.entries({
           s: shake,
           f: flash,
-        })
+        }),
       );
       const textSpeeds = new Set(["{", "}"]);
 
@@ -194,7 +229,7 @@ const viewport = (): Viewport => {
         charEmote,
         "(a)",
         false,
-        chatmsg.side
+        chatmsg.side,
       );
       charLayers.style.opacity = "1";
       waitingBox.style.opacity = "1";
@@ -296,13 +331,13 @@ const viewport = (): Viewport => {
       }
 
       // Done with first check, move to second
-      setStartFirstTickCheck(false)
-      setStartSecondTickCheck(true)
+      setStartFirstTickCheck(false);
+      setStartSecondTickCheck(true);
 
       chatmsg.startpreanim = false;
       chatmsg.startspeaking = true;
     }
-    
+
     const hasNonInterruptingPreAnim = chatmsg.noninterrupting_preanim === 1;
     if (textnow !== chatmsg.content && hasNonInterruptingPreAnim) {
       const chatContainerBox = document.getElementById("client_chatcontainer");
@@ -315,9 +350,7 @@ const viewport = (): Viewport => {
         // Evidence Bullshit
         if (chatmsg.evidence > 0) {
           // Prepare evidence
-          eviBox.src = safeTags(
-            client.evidences[chatmsg.evidence - 1].icon
-          );
+          eviBox.src = safeTags(client.evidences[chatmsg.evidence - 1].icon);
 
           eviBox.style.width = "auto";
           eviBox.style.height = "36.5%";
@@ -381,7 +414,7 @@ const viewport = (): Viewport => {
             pairEmote,
             "(a)",
             true,
-            chatmsg.side
+            chatmsg.side,
           );
           pairLayers.style.opacity = "1";
         } else {
@@ -395,7 +428,7 @@ const viewport = (): Viewport => {
           charEmote,
           "(b)",
           false,
-          chatmsg.side
+          chatmsg.side,
         );
         charLayers.style.opacity = "1";
 
@@ -407,7 +440,7 @@ const viewport = (): Viewport => {
             charEmote,
             "(a)",
             false,
-            chatmsg.side
+            chatmsg.side,
           );
           charLayers.style.opacity = "1";
           waitingBox.style.opacity = "1";
@@ -417,7 +450,7 @@ const viewport = (): Viewport => {
         }
       } else if (textnow !== chatmsg.content) {
         const chatContainerBox = document.getElementById(
-          "client_chatcontainer"
+          "client_chatcontainer",
         );
         chatContainerBox.style.opacity = "1";
         await handleTextTick(charLayers);
@@ -435,9 +468,9 @@ const viewport = (): Viewport => {
       ) {
         playSFX(
           `${AO_HOST}sounds/general/${encodeURI(
-            chatmsg.sound.toLowerCase()
+            chatmsg.sound.toLowerCase(),
           )}.opus`,
-          chatmsg.looping_sfx
+          chatmsg.looping_sfx,
         );
       }
     }