Structured viewport a little differently

20 files changed, 253 insertions, 224 deletions

diff --git a/tsconfig.json b/tsconfig.json
index 9422b00..1a2dd33 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,5 +8,5 @@
     "strictNullChecks": false, //document.getElementBy
     "downlevelIteration": true
   },
-  "include": ["./webAO/*"]
+  "include": ["./webAO/*", "webAO/viewport/viewport.ts"]
 }
\ No newline at end of file
diff --git a/webAO/client.ts b/webAO/client.ts
index 8b2f691..b908b62 100644
--- a/webAO/client.ts
+++ b/webAO/client.ts
@@ -8,7 +8,8 @@ import FingerprintJS from "@fingerprintjs/fingerprintjs";
 import { sender, ISender } from './client/sender/index'
 import queryParser from "./utils/queryParser";
 import getResources from "./utils/getResources.js";
-import masterViewport, { Viewport } from "./viewport";
+import masterViewport from "./viewport/viewport";
+import { Viewport } from './viewport/interfaces/Viewport';
 import { EventEmitter } from "events";
 import { onReplayGo } from './dom/onReplayGo'
 import { packetHandler } from './packets/packetHandler'
diff --git a/webAO/client/loadResources.ts b/webAO/client/loadResources.ts
index 7039333..65d0895 100644
--- a/webAO/client/loadResources.ts
+++ b/webAO/client/loadResources.ts
@@ -5,7 +5,7 @@ import { client } from "../client";
 import { setChatbox } from "../dom/setChatbox";
 import { changeSFXVolume, changeShoutVolume, changeTestimonyVolume } from "../dom/changeVolume";
 import { showname_click } from "../dom/showNameClick";
-
+import { changeBlipVolume } from '../dom/changeBlipVolume'
 const version = process.env.npm_package_version;
 /**
    * Load game resources and stored settings.
@@ -65,7 +65,7 @@ export const loadResources = () => {
     changeTestimonyVolume();
     (<HTMLInputElement>document.getElementById("client_bvolume")).value =
         getCookie("blipVolume") || "1";
-    client.viewport.changeBlipVolume();
+    changeBlipVolume();
 
     (<HTMLInputElement>document.getElementById("ic_chat_name")).value =
         getCookie("ic_chat_name");
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/viewport/constants/colors.ts b/webAO/viewport/constants/colors.ts
new file mode 100644
index 0000000..aad3530
--- /dev/null
+++ b/webAO/viewport/constants/colors.ts
@@ -0,0 +1,11 @@
+export const COLORS = [
+    "white",
+    "green",
+    "red",
+    "orange",
+    "blue",
+    "yellow",
+    "pink",
+    "cyan",
+    "grey",
+  ];
\ No newline at end of file
diff --git a/webAO/viewport/constants/defaultChatMsg.ts b/webAO/viewport/constants/defaultChatMsg.ts
new file mode 100644
index 0000000..8a5db6b
--- /dev/null
+++ b/webAO/viewport/constants/defaultChatMsg.ts
@@ -0,0 +1,15 @@
+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,
+  } as ChatMsg;
\ No newline at end of file
diff --git a/webAO/viewport/constants/positions.ts b/webAO/viewport/constants/positions.ts
new file mode 100644
index 0000000..1712ac6
--- /dev/null
+++ b/webAO/viewport/constants/positions.ts
@@ -0,0 +1,45 @@
+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
diff --git a/webAO/viewport/constants/shouts.ts b/webAO/viewport/constants/shouts.ts
new file mode 100644
index 0000000..eddd6d3
--- /dev/null
+++ b/webAO/viewport/constants/shouts.ts
@@ -0,0 +1 @@
+export const SHOUTS = [undefined, "holdit", "objection", "takethat", "custom"];
diff --git a/webAO/viewport/interfaces/ChatMsg.ts b/webAO/viewport/interfaces/ChatMsg.ts
new file mode 100644
index 0000000..293a774
--- /dev/null
+++ b/webAO/viewport/interfaces/ChatMsg.ts
@@ -0,0 +1,34 @@
+export interface ChatMsg {
+    content: string;
+    objection: number;
+    sound: string;
+    startpreanim: boolean;
+    startspeaking: boolean;
+    side: any;
+    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
diff --git a/webAO/viewport/interfaces/Desk.ts b/webAO/viewport/interfaces/Desk.ts
new file mode 100644
index 0000000..872426a
--- /dev/null
+++ b/webAO/viewport/interfaces/Desk.ts
@@ -0,0 +1,4 @@
+export interface Desk {
+    ao2?: string;
+    ao1?: string;
+}
\ No newline at end of file
diff --git a/webAO/viewport/interfaces/Position.ts b/webAO/viewport/interfaces/Position.ts
new file mode 100644
index 0000000..dea7238
--- /dev/null
+++ b/webAO/viewport/interfaces/Position.ts
@@ -0,0 +1,7 @@
+import { Desk } from './Desk'
+
+export interface Position {
+    bg?: string;
+    desk?: Desk;
+    speedLines: string;
+}
\ No newline at end of file
diff --git a/webAO/viewport/interfaces/Positions.ts b/webAO/viewport/interfaces/Positions.ts
new file mode 100644
index 0000000..0644962
--- /dev/null
+++ b/webAO/viewport/interfaces/Positions.ts
@@ -0,0 +1,5 @@
+import { Position } from './Position'
+
+export interface Positions {
+    [key: string]: Position;
+}
\ No newline at end of file
diff --git a/webAO/viewport/interfaces/Testimony.ts b/webAO/viewport/interfaces/Testimony.ts
new file mode 100644
index 0000000..61a7491
--- /dev/null
+++ b/webAO/viewport/interfaces/Testimony.ts
@@ -0,0 +1,3 @@
+export interface Testimony {
+    [key: number]: string;
+}
\ No newline at end of file
diff --git a/webAO/viewport/interfaces/Viewport.ts b/webAO/viewport/interfaces/Viewport.ts
new file mode 100644
index 0000000..3ffbcc8
--- /dev/null
+++ b/webAO/viewport/interfaces/Viewport.ts
@@ -0,0 +1,24 @@
+import { ChatMsg } from "./ChatMsg";
+export interface Viewport {
+    chat_tick: Function;
+    changeMusicVolume: Function;
+    reloadTheme: Function;
+    playSFX: Function;
+    set_side: Function;
+    initTestimonyUpdater: Function;
+    updateTestimony: Function;
+    disposeTestimony: Function;
+    handle_ic_speaking: Function;
+    handleTextTick: Function;
+    theme: string;
+    chatmsg: ChatMsg;
+    setSfxAudio: Function;
+    getSfxAudio: Function;
+    getBackgroundFolder: Function;
+    blipChannels: HTMLAudioElement[];
+    music: any;
+    musicVolume: number;
+    setBackgroundName: Function;
+    lastChar: string;
+    getBackgroundName: Function;
+}
\ No newline at end of file
diff --git a/webAO/viewport/utils/createBlipChannels.ts b/webAO/viewport/utils/createBlipChannels.ts
new file mode 100644
index 0000000..6296b3b
--- /dev/null
+++ b/webAO/viewport/utils/createBlipChannels.ts
@@ -0,0 +1,15 @@
+import { opusCheck } from "../../dom/opusCheck";
+
+export const createBlipsChannels = () => {
+    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
diff --git a/webAO/viewport/utils/createMusic.ts b/webAO/viewport/utils/createMusic.ts
new file mode 100644
index 0000000..9bf5240
--- /dev/null
+++ b/webAO/viewport/utils/createMusic.ts
@@ -0,0 +1,13 @@
+import { opusCheck } from '../../dom/opusCheck'
+
+export const createMusic = () => {
+    const audioChannels = document.getElementsByClassName(
+        "audioChannel"
+    ) as HTMLCollectionOf<HTMLAudioElement>;
+    let 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
diff --git a/webAO/viewport/utils/createSfxAudio.ts b/webAO/viewport/utils/createSfxAudio.ts
new file mode 100644
index 0000000..7e03563
--- /dev/null
+++ b/webAO/viewport/utils/createSfxAudio.ts
@@ -0,0 +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
diff --git a/webAO/viewport/utils/createShoutAudio.ts b/webAO/viewport/utils/createShoutAudio.ts
new file mode 100644
index 0000000..8211116
--- /dev/null
+++ b/webAO/viewport/utils/createShoutAudio.ts
@@ -0,0 +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
diff --git a/webAO/viewport/utils/createTestimonyAudio.ts b/webAO/viewport/utils/createTestimonyAudio.ts
new file mode 100644
index 0000000..2ff98f6
--- /dev/null
+++ b/webAO/viewport/utils/createTestimonyAudio.ts
@@ -0,0 +1,9 @@
+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
diff --git a/webAO/viewport.ts b/webAO/viewport/viewport.ts
index 7716409..9772796 100644
--- a/webAO/viewport.ts
+++ b/webAO/viewport/viewport.ts
@@ -1,208 +1,31 @@
-import tryUrls from "./utils/tryUrls";
-import fileExists from "./utils/fileExists";
-import Client, { delay } from "./client";
-import { opusCheck } from './dom/opusCheck'
-import { UPDATE_INTERVAL } from "./client";
-import { setChatbox } from "./dom/setChatbox";
-import { resizeChatbox } from "./dom/resizeChatbox";
-import transparentPng from "./constants/transparentPng";
-import mlConfig from "./utils/aoml";
-import setEmote from "./client/setEmote";
-import getAnimLength from "./utils/getAnimLength";
-import { safeTags } from "./encoding";
-import setCookie from "./utils/setCookie";
-import { AO_HOST } from "./client/aoHost";
-import { appendICLog } from "./client/appendICLog";
-import { checkCallword } from './client/checkCallword'
-
-interface ChatMsg {
-  content: string;
-  objection: number;
-  sound: string;
-  startpreanim: boolean;
-  startspeaking: boolean;
-  side: any;
-  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;
-}
-interface Testimony {
-  [key: number]: string;
-}
-export interface Viewport {
-  chat_tick: Function;
-  changeMusicVolume: Function;
-  changeBlipVolume: Function;
-  reloadTheme: Function;
-  playSFX: Function;
-  set_side: Function;
-  initTestimonyUpdater: Function;
-  updateTestimony: Function;
-  disposeTestimony: Function;
-  handle_ic_speaking: Function;
-  handleTextTick: Function;
-  theme: string;
-  chatmsg: ChatMsg;
-  setSfxAudio: Function;
-  getSfxAudio: Function;
-  getBackgroundFolder: Function;
-  blipChannels: HTMLAudioElement[];
-  music: any;
-  musicVolume: number;
-  setBackgroundName: Function;
-  lastChar: string;
-  getBackgroundName: Function;
-}
-const SHOUTS = [undefined, "holdit", "objection", "takethat", "custom"];
-
-const COLORS = [
-  "white",
-  "green",
-  "red",
-  "orange",
-  "blue",
-  "yellow",
-  "pink",
-  "cyan",
-  "grey",
-];
-const createMusic = () => {
-  const audioChannels = document.getElementsByClassName(
-    "audioChannel"
-  ) as HTMLCollectionOf<HTMLAudioElement>;
-  let music = [...audioChannels];
-  music.forEach((channel: HTMLAudioElement) => (channel.volume = 0.5));
-  music.forEach(
-    (channel: HTMLAudioElement) => (channel.onerror = opusCheck(channel))
-  );
-  return music;
-};
-const createTestimonyAudio = () => {
-  const testimonyAudio = document.getElementById(
-    "client_testimonyaudio"
-  ) as HTMLAudioElement;
-  testimonyAudio.src = `${AO_HOST}sounds/general/sfx-guilty.opus`;
-  return testimonyAudio;
-};
+import tryUrls from "../utils/tryUrls";
+import fileExists from "../utils/fileExists";
+import Client, { delay } from "../client";
+import { UPDATE_INTERVAL } from "../client";
+import { setChatbox } from "../dom/setChatbox";
+import { resizeChatbox } from "../dom/resizeChatbox";
+import transparentPng from "../constants/transparentPng";
+import mlConfig from "../utils/aoml";
+import setEmote from "../client/setEmote";
+import getAnimLength from "../utils/getAnimLength";
+import { safeTags } from "../encoding";
+import setCookie from "../utils/setCookie";
+import { AO_HOST } from "../client/aoHost";
+import { appendICLog } from "../client/appendICLog";
+import { checkCallword } from '../client/checkCallword'
+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 { ChatMsg } from "./interfaces/ChatMsg";
+import { Testimony } from './interfaces/Testimony'
+import { COLORS } from './constants/colors'
+import { SHOUTS } from './constants/shouts'
+import { positions } from './constants/positions'
 
-const createShoutAudio = () => {
-  const shoutAudio = document.getElementById(
-    "client_shoutaudio"
-  ) as HTMLAudioElement;
-  shoutAudio.src = `${AO_HOST}misc/default/objection.opus`;
-  return shoutAudio;
-};
-const createSfxAudio = () => {
-  const sfxAudio = document.getElementById(
-    "client_sfxaudio"
-  ) as HTMLAudioElement;
-  sfxAudio.src = `${AO_HOST}sounds/general/sfx-realization.opus`;
-  return sfxAudio;
-};
-const createBlipsChannels = () => {
-  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;
-};
-const defaultChatMsg = {
-  content: "",
-  objection: 0,
-  sound: "",
-  startpreanim: true,
-  startspeaking: false,
-  side: null,
-  color: 0,
-  snddelay: 0,
-  preanimdelay: 0,
-  speed: UPDATE_INTERVAL,
-} as ChatMsg;
-interface Desk {
-  ao2?: string;
-  ao1?: string;
-}
-interface Position {
-  bg?: string;
-  desk?: Desk;
-  speedLines: string;
-}
-
-interface Positions {
-  [key: string]: Position;
-}
-
-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: null as Desk,
-    speedLines: "defense_speedlines.gif",
-  },
-  hlp: {
-    bg: "prohelperstand",
-    desk: null 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",
-  },
-};
 const viewport = (masterClient: Client): Viewport => {
   let animating = false;
   let attorneyMarkdown = mlConfig(AO_HOST);
@@ -230,9 +53,9 @@ const viewport = (masterClient: Client): 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())}/`;
 
@@ -1037,19 +860,6 @@ const viewport = (masterClient: Client): Viewport => {
     )).href = `styles/${theme}.css`;
   }
   window.reloadTheme = reloadTheme;
-  /**
-   * Triggered by the blip volume slider.
-   */
-  function changeBlipVolume() {
-    const blipVolume = (<HTMLInputElement>(
-      document.getElementById("client_bvolume")
-    )).value;
-    blipChannels.forEach(
-      (channel: HTMLAudioElement) => (channel.volume = Number(blipVolume))
-    );
-    setCookie("blipVolume", blipVolume);
-  }
-  window.changeBlipVolume = changeBlipVolume;
 
   const changeMusicVolume = (volume: number = -1) => {
     const clientVolume = Number(
@@ -1066,7 +876,6 @@ const viewport = (masterClient: Client): Viewport => {
   return {
     chat_tick,
     changeMusicVolume,
-    changeBlipVolume,
     reloadTheme,
     playSFX,
     set_side,