Merge pull request #175 from caleb-mabry/more-function-removal-viewport

More function removal from viewport

1 files changed, 63 insertions, 466 deletions

diff --git a/webAO/viewport/viewport.ts b/webAO/viewport/viewport.ts
index 9772796..9ac6e96 100644
--- a/webAO/viewport/viewport.ts
+++ b/webAO/viewport/viewport.ts
@@ -1,18 +1,8 @@
-import tryUrls from "../utils/tryUrls";
-import fileExists from "../utils/fileExists";
-import Client, { delay } from "../client";
+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'
@@ -20,18 +10,16 @@ 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'
+import { set_side } from './utils/setSide'
+import { ChatMsg } from "./interfaces/ChatMsg";
+import { setStartFirstTickCheck, setStartSecondTickCheck, startFirstTickCheck, startSecondTickCheck } from "./utils/handleICSpeaking";
 
-const viewport = (masterClient: Client): Viewport => {
+const viewport = (): Viewport => {
   let animating = false;
-  let attorneyMarkdown = mlConfig(AO_HOST);
   let blipChannels = createBlipsChannels();
   let chatmsg = defaultChatMsg;
-  let client = masterClient;
   let currentBlipChannel = 0;
   let lastChar = "";
   let lastEvi = 0;
@@ -41,9 +29,6 @@ const viewport = (masterClient: Client): Viewport => {
   let sfxplayed = 0;
   let shoutTimer = 0;
   let shoutaudio = createShoutAudio();
-  let startFirstTickCheck: boolean;
-  let startSecondTickCheck: boolean;
-  let startThirdTickCheck: boolean;
   let testimonyAudio = createTestimonyAudio();
   let testimonyTimer = 0;
   let testimonyUpdater: any;
@@ -58,129 +43,34 @@ const viewport = (masterClient: Client): Viewport => {
   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 getTestimonyTimer = () => testimonyTimer;
+  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;
     sfxAudio.src = sfxname;
     sfxAudio.play();
   };
-
-  /**
-   * Changes the viewport background based on a given position.
-   *
-   * Valid positions: `def, pro, hld, hlp, wit, jud, jur, sea`
-   * @param {string} position the position to change into
-   */
-  const set_side = async ({
-    position,
-    showSpeedLines,
-    showDesk,
-  }: {
-    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");
-    }
-
-    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;
-
-    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(getBackgroundFolder() + bg);
-    }
-
-    if (showDesk === true && desk) {
-      const deskFilename = (await fileExists(getBackgroundFolder() + desk.ao2))
-        ? desk.ao2
-        : desk.ao1;
-      bench.src = getBackgroundFolder() + deskFilename;
-      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 = "";
-    }
-  };
-
-  /**
-   * Intialize testimony updater
-   */
-  const initTestimonyUpdater = () => {
-    const testimonyFilenames: Testimony = {
-      1: "witnesstestimony",
-      2: "crossexamination",
-      3: "notguilty",
-      4: "guilty",
-    };
-
-    const testimony = testimonyFilenames[masterClient.testimonyID];
-    if (!testimony) {
-      console.warn(`Invalid testimony ID ${masterClient.testimonyID}`);
-      return;
-    }
-
-    testimonyAudio.src = masterClient.resources[testimony].sfx;
-    testimonyAudio.play();
-
-    const testimonyOverlay = <HTMLImageElement>(
-      document.getElementById("client_testimony")
-    );
-    testimonyOverlay.src = masterClient.resources[testimony].src;
-    testimonyOverlay.style.opacity = "1";
-
-    testimonyTimer = 0;
-    testimonyUpdater = setTimeout(() => updateTestimony(), UPDATE_INTERVAL);
-  };
-
   /**
    * Updates the testimony overaly
    */
@@ -195,8 +85,8 @@ const viewport = (masterClient: Client): Viewport => {
     // Update timer
     testimonyTimer += UPDATE_INTERVAL;
 
-    const testimony = testimonyFilenames[masterClient.testimonyID];
-    const resource = masterClient.resources[testimony];
+    const testimony = testimonyFilenames[client.testimonyID];
+    const resource = client.resources[testimony];
     if (!resource) {
       disposeTestimony();
       return;
@@ -208,304 +98,15 @@ const viewport = (masterClient: Client): Viewport => {
       testimonyUpdater = setTimeout(() => updateTestimony(), UPDATE_INTERVAL);
     }
   };
-
   /**
    * Dispose the testimony overlay
    */
   const disposeTestimony = () => {
-    masterClient.testimonyID = 0;
+    client.testimonyID = 0;
     testimonyTimer = 0;
     document.getElementById("client_testimony").style.opacity = "0";
     clearTimeout(testimonyUpdater);
   };
-
-  /**
-   * Sets a new emote.
-   * This sets up everything before the tick() loops starts
-   * a lot of things can probably be moved here, like starting the shout animation if there is one
-   * TODO: the preanim logic, on the other hand, should probably be moved to tick()
-   * @param {object} chatmsg the new chat message
-   */
-  const handle_ic_speaking = async (playerChatMsg: ChatMsg) => {
-    chatmsg = playerChatMsg;
-    client.viewport.chatmsg = playerChatMsg;
-
-    textnow = "";
-    sfxplayed = 0;
-    tickTimer = 0;
-    animating = true;
-    startFirstTickCheck = true;
-    startSecondTickCheck = false;
-    startThirdTickCheck = false;
-    let charLayers = document.getElementById("client_char");
-    let pairLayers = document.getElementById("client_pair_char");
-    // stop updater
-    clearTimeout(updater);
-
-    // stop last sfx from looping any longer
-    sfxAudio.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 (lastEvi !== chatmsg.evidence) {
-      eviBox.style.opacity = "0";
-      eviBox.style.height = "0%";
-    }
-    lastEvi = chatmsg.evidence;
-
-    const validSides: string[] = ["def", "pro", "wit"]; // these are for the full view pan, the other positions use 'client_char'
-    if (validSides.includes(chatmsg.side)) {
-      charLayers = document.getElementById(`client_${chatmsg.side}_char`);
-      pairLayers = document.getElementById(`client_${chatmsg.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 &&
-        chatmsg.showname !== ""
-        ? chatmsg.showname
-        : chatmsg.nameplate;
-
-    // Clear out the last message
-    chatBoxInner.innerText = textnow;
-    nameBoxInner.innerText = displayname;
-
-    if (lastChar !== chatmsg.name) {
-      charLayers.style.opacity = "0";
-      pairLayers.style.opacity = "0";
-    }
-
-    lastChar = chatmsg.name;
-    client.viewport.lastChar = chatmsg.name;
-
-    appendICLog(chatmsg.content, chatmsg.showname, chatmsg.nameplate);
-
-    checkCallword(chatmsg.content, sfxAudio);
-
-    setEmote(
-      AO_HOST,
-      client,
-      chatmsg.name.toLowerCase(),
-      chatmsg.sprite,
-      "(a)",
-      false,
-      chatmsg.side
-    );
-
-    if (chatmsg.other_name) {
-      setEmote(
-        AO_HOST,
-        client,
-        chatmsg.other_name.toLowerCase(),
-        chatmsg.other_emote,
-        "(a)",
-        false,
-        chatmsg.side
-      );
-    }
-
-    // gets which shout shall played
-    const shoutSprite = <HTMLImageElement>(
-      document.getElementById("client_shout")
-    );
-    const shout = SHOUTS[chatmsg.objection];
-    if (shout) {
-      // Hide message box
-      chatContainerBox.style.opacity = "0";
-      if (chatmsg.objection === 4) {
-        shoutSprite.src = `${AO_HOST}characters/${encodeURI(
-          chatmsg.name.toLowerCase()
-        )}/custom.gif`;
-      } else {
-        shoutSprite.src = masterClient.resources[shout].src;
-        shoutSprite.style.animation = "bubble 700ms steps(10, jump-both)";
-      }
-      shoutSprite.style.opacity = "1";
-
-      shoutaudio.src = `${AO_HOST}characters/${encodeURI(
-        chatmsg.name.toLowerCase()
-      )}/${shout}.opus`;
-      shoutaudio.play();
-      shoutTimer = masterClient.resources[shout].duration;
-    } else {
-      shoutTimer = 0;
-    }
-
-    chatmsg.startpreanim = true;
-    let gifLength = 0;
-
-    if (chatmsg.type === 1 && chatmsg.preanim !== "-") {
-      //we have a preanim
-      chatContainerBox.style.opacity = "0";
-      gifLength = await getAnimLength(
-        `${AO_HOST}characters/${encodeURI(
-          chatmsg.name.toLowerCase()
-        )}/${encodeURI(chatmsg.preanim)}`
-      );
-      console.debug("preanim is " + gifLength + " long");
-      chatmsg.startspeaking = false;
-    } else {
-      chatmsg.startspeaking = true;
-      if (chatmsg.content !== "") chatContainerBox.style.opacity = "1";
-    }
-    chatmsg.preanimdelay = gifLength;
-    const setAside = {
-      position: chatmsg.side,
-      showSpeedLines: false,
-      showDesk: false,
-    };
-    let skipoffset: boolean = false;
-    if (chatmsg.type === 5) {
-      setAside.showSpeedLines = true;
-      setAside.showDesk = false;
-      set_side(setAside);
-    } else {
-      switch (Number(chatmsg.deskmod)) {
-        case 0: //desk is hidden
-          setAside.showSpeedLines = false;
-          setAside.showDesk = false;
-          set_side(setAside);
-          break;
-        case 1: //desk is shown
-          setAside.showSpeedLines = false;
-          setAside.showDesk = true;
-          set_side(setAside);
-          break;
-        case 2: //desk is hidden during preanim, but shown during idle/talk
-          setAside.showSpeedLines = false;
-          setAside.showDesk = false;
-          set_side(setAside);
-          break;
-        case 3: //opposite of 2
-          setAside.showSpeedLines = false;
-          setAside.showDesk = false;
-          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;
-          set_side(setAside);
-          skipoffset = true;
-          break;
-        case 5: //opposite of 4
-          setAside.showSpeedLines = false;
-          setAside.showDesk = true;
-          set_side(setAside);
-          break;
-        default:
-          setAside.showSpeedLines = false;
-          setAside.showDesk = true;
-          set_side(setAside);
-          break;
-      }
-    }
-
-    setChatbox(chatmsg.chatbox);
-    resizeChatbox();
-
-    if (!skipoffset) {
-      // Flip the character
-      charLayers.style.transform =
-        chatmsg.flip === 1 ? "scaleX(-1)" : "scaleX(1)";
-      pairLayers.style.transform =
-        chatmsg.other_flip === 1 ? "scaleX(-1)" : "scaleX(1)";
-
-      // Shift by the horizontal offset
-      switch (chatmsg.side) {
-        case "wit":
-          pairLayers.style.left = `${200 + Number(chatmsg.other_offset[0])}%`;
-          charLayers.style.left = `${200 + Number(chatmsg.self_offset[0])}%`;
-          break;
-        case "pro":
-          pairLayers.style.left = `${400 + Number(chatmsg.other_offset[0])}%`;
-          charLayers.style.left = `${400 + Number(chatmsg.self_offset[0])}%`;
-          break;
-        default:
-          pairLayers.style.left = `${Number(chatmsg.other_offset[0])}%`;
-          charLayers.style.left = `${Number(chatmsg.self_offset[0])}%`;
-          break;
-      }
-
-      // New vertical offsets
-      pairLayers.style.top = `${Number(chatmsg.other_offset[1])}%`;
-      charLayers.style.top = `${Number(chatmsg.self_offset[1])}%`;
-    }
-
-    blipChannels.forEach(
-      (channel: HTMLAudioElement) =>
-      (channel.src = `${AO_HOST}sounds/general/sfx-blip${encodeURI(
-        chatmsg.blips.toLowerCase()
-      )}.opus`)
-    );
-
-    // process markup
-    if (chatmsg.content.startsWith("~~")) {
-      chatBoxInner.style.textAlign = "center";
-      chatmsg.content = chatmsg.content.substring(2, chatmsg.content.length);
-    } else {
-      chatBoxInner.style.textAlign = "inherit";
-    }
-
-    // apply effects
-    fg.style.animation = "";
-    const effectName = chatmsg.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++) {
-        let drop = document.createElement("p");
-        drop.style.left = (Math.random() * 100) + "%";
-        drop.style.animationDelay = String(Math.random()) + "s";
-        fg.appendChild(drop)
-      }
-    } else if (
-      chatmsg.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) => chatmsg.sound === check)) {
-      chatmsg.sound = chatmsg.effects[2];
-    }
-    chatmsg.parsed = await attorneyMarkdown.applyMarkdown(
-      chatmsg.content,
-      COLORS[chatmsg.color]
-    );
-    chat_tick();
-  };
-
   const handleTextTick = async (charLayers: HTMLImageElement) => {
     const chatBox = document.getElementById("client_chat");
     const waitingBox = document.getElementById("client_chatwaiting");
@@ -631,7 +232,8 @@ const viewport = (masterClient: Client): Viewport => {
   const chat_tick = async () => {
     // note: this is called fairly often
     // do not perform heavy operations here
-
+    console.log(textnow)
+    console.log(chatmsg.content)
     await delay(chatmsg.speed);
     if (textnow === chatmsg.content) {
       return;
@@ -696,14 +298,15 @@ const viewport = (masterClient: Client): Viewport => {
       } else {
         pairLayers.style.opacity = "0";
       }
+
       // Done with first check, move to second
-      startFirstTickCheck = false;
-      startSecondTickCheck = 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");
@@ -717,7 +320,7 @@ const viewport = (masterClient: Client): Viewport => {
         if (chatmsg.evidence > 0) {
           // Prepare evidence
           eviBox.src = safeTags(
-            masterClient.evidences[chatmsg.evidence - 1].icon
+            client.evidences[chatmsg.evidence - 1].icon
           );
 
           eviBox.style.width = "auto";
@@ -842,59 +445,53 @@ const viewport = (masterClient: Client): Viewport => {
         );
       }
     }
+    console.log(animating)
     if (animating) {
       chat_tick();
     }
     tickTimer += UPDATE_INTERVAL;
   };
-  /**
-   * Triggered by the theme selector.
-   */
-  function reloadTheme() {
-    theme = (<HTMLSelectElement>document.getElementById("client_themeselect"))
-      .value;
-
-    setCookie("theme", theme);
-    (<HTMLAnchorElement>(
-      document.getElementById("client_theme")
-    )).href = `styles/${theme}.css`;
-  }
-  window.reloadTheme = reloadTheme;
-
-  const changeMusicVolume = (volume: number = -1) => {
-    const clientVolume = Number(
-      (<HTMLInputElement>document.getElementById("client_mvolume")).value
-    );
-    let musicVolume = volume === -1 ? clientVolume : volume;
-    music.forEach(
-      (channel: HTMLAudioElement) => (channel.volume = musicVolume)
-    );
-    setCookie("musicVolume", String(musicVolume));
-  };
-  window.changeMusicVolume = changeMusicVolume;
 
   return {
+    getTextNow,
+    setTextNow,
+    getChatmsg,
+    setChatmsg,
+    getSfxPlayed,
+    setSfxPlayed,
+    setTickTimer,
+    getTickTimer,
+    setAnimating,
+    getAnimating,
+    getLastEvidence,
+    setLastEvidence,
+    setLastCharacter,
+    getLastCharacter,
+    getShoutTimer,
+    setShoutTimer,
+    setTheme,
+    getTheme,
+    setTestimonyTimer,
+    getTestimonyTimer,
+    setTestimonyUpdater,
+    getTestimonyUpdater,
+    testimonyAudio,
     chat_tick,
-    changeMusicVolume,
-    reloadTheme,
     playSFX,
     set_side,
     setBackgroundName,
-    initTestimonyUpdater,
     updateTestimony,
     disposeTestimony,
-    handle_ic_speaking,
     handleTextTick,
     getBackgroundFolder,
     getBackgroundName,
     getSfxAudio,
     setSfxAudio,
-    theme,
-    chatmsg,
     blipChannels,
-    lastChar,
     music,
     musicVolume,
+    shoutaudio,
+    updater,
   };
 };