Merge branch 'master' of https://github.com/AttorneyOnline/webAO into refactor-constants

1 files changed, 2476 insertions, 2510 deletions

diff --git a/webAO/client.js b/webAO/client.js
index ecdd9dc..a041b7a 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -6,7 +6,10 @@
 
 import Fingerprint2 from 'fingerprintjs2';
 
-import { escapeChat, encodeChat, prepChat, safe_tags } from './encoding.js';
+import { EventEmitter } from 'events';
+import {
+  escapeChat, encodeChat, prepChat, safe_tags,
+} from './encoding.js';
 
 // Load some defaults for the background and evidence dropdowns
 import vanilla_character_arr from "./constants/characters.js";
@@ -14,32 +17,31 @@ import vanilla_music_arr from "./constants/music.js";
 import vanilla_background_arr from "./constants/backgrounds.js";
 import vanilla_evidence_arr from "./constants/evidence.js";
 
-import chatbox_arr from "./styles/chatbox/chatboxes.js";
+import chatbox_arr from './styles/chatbox/chatboxes.js';
+import iniParse from './iniParse';
 
-import { EventEmitter } from "events";
-
-import { version } from '../package.json';
+const version = process.env.npm_package_version;
 
 let client;
 let viewport;
 
 // Get the arguments from the URL bar
 const queryDict = {};
-location.search.substr(1).split("&").forEach(function (item) {
-	queryDict[item.split("=")[0]] = item.split("=")[1];
+location.search.substr(1).split('&').forEach((item) => {
+  queryDict[item.split('=')[0]] = item.split('=')[1];
 });
 
 const serverIP = queryDict.ip;
-let mode = queryDict.mode;
+let { mode } = queryDict;
 
 // Unless there is an asset URL specified, use the wasabi one
-const DEFAULT_HOST = "http://attorneyoffline.de/base/";
+const DEFAULT_HOST = 'http://attorneyoffline.de/base/';
 let AO_HOST = queryDict.asset || DEFAULT_HOST;
-const THEME = queryDict.theme || "default";
+const THEME = queryDict.theme || 'default';
 
 const UPDATE_INTERVAL = 60;
 
-const transparentPNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+const transparentPNG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 /**
  * Toggles AO1-style loading using paginated music packets for mobile platforms.
  * The old loading uses more smaller packets instead of a single big one,
@@ -48,245 +50,243 @@ const transparentPNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA
 let oldLoading = false;
 
 // presettings
-let selectedEffect = 0;
+const selectedEffect = 0;
 let selectedMenu = 1;
 let selectedShout = 0;
 
 let extrafeatures = [];
 
 let hdid;
-const options = { fonts: { extendedJsFonts: true, userDefinedFonts: ["Ace Attorney", "8bitoperator", "DINEngschrift"] }, excludes: { userAgent: true, enumerateDevices: true } };
+const options = { fonts: { extendedJsFonts: true, userDefinedFonts: ['Ace Attorney', '8bitoperator', 'DINEngschrift'] }, excludes: { userAgent: true, enumerateDevices: true } };
 
 function isLowMemory() {
-	if (/webOS|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|PlayStation|Nintendo|Opera Mini/i.test(navigator.userAgent)) {
-				oldLoading = true;
-			}
+  if (/webOS|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|PlayStation|Nintendo|Opera Mini/i.test(navigator.userAgent)) {
+    oldLoading = true;
+  }
 }
 
 if (window.requestIdleCallback) {
-	requestIdleCallback(function () {
-		Fingerprint2.get(options, function (components) {
-			hdid = Fingerprint2.x64hash128(components.reduce((a, b) => `${a.value || a}, ${b.value}`), 31);
-			client = new Client(serverIP);
-			viewport = new Viewport();
-
-			isLowMemory();
-			client.loadResources();
-		});
-	});
+  requestIdleCallback(() => {
+    Fingerprint2.get(options, (components) => {
+      hdid = Fingerprint2.x64hash128(components.reduce((a, b) => `${a.value || a}, ${b.value}`), 31);
+      client = new Client(serverIP);
+      viewport = new Viewport();
+
+      isLowMemory();
+      client.loadResources();
+    });
+  });
 } else {
-	setTimeout(function () {
-		Fingerprint2.get(options, function (components) {
-			hdid = Fingerprint2.x64hash128(components.reduce((a, b) => `${a.value || a}, ${b.value}`), 31);
-			client = new Client(serverIP);
-			viewport = new Viewport();
+  setTimeout(() => {
+    Fingerprint2.get(options, (components) => {
+      hdid = Fingerprint2.x64hash128(components.reduce((a, b) => `${a.value || a}, ${b.value}`), 31);
+      client = new Client(serverIP);
+      viewport = new Viewport();
 
-			isLowMemory();
-			client.loadResources();
-		});
-	}, 500);
+      isLowMemory();
+      client.loadResources();
+    });
+  }, 500);
 }
 
-
 let lastICMessageTime = new Date(0);
 
 class Client extends EventEmitter {
-	constructor(address) {
-		super();
-		console.log("mode: " + mode);
-		if (mode !== "replay") {
-			this.serv = new WebSocket("ws://" + address);
-			// Assign the websocket events
-			this.serv.addEventListener("open", this.emit.bind(this, "open"));
-			this.serv.addEventListener("close", this.emit.bind(this, "close"));
-			this.serv.addEventListener("message", this.emit.bind(this, "message"));
-			this.serv.addEventListener("error", this.emit.bind(this, "error"));
-		} else {
-			this.joinServer();
-		}
-
-		this.on("open", this.onOpen.bind(this));
-		this.on("close", this.onClose.bind(this));
-		this.on("message", this.onMessage.bind(this));
-		this.on("error", this.onError.bind(this));
-
-		// Preset some of the variables
-
-		this.hp = [0, 0];
-
-		this.playerID = 1;
-		this.charID = -1;
-		this.char_list_length = 0;
-		this.evidence_list_length = 0;
-		this.music_list_length = 0;
-		this.testimonyID = 0;
-
-		this.chars = [];
-		this.emotes = [];
-		this.evidences = [];
-		this.areas = [];
-		this.musics = [];
-		
-		this.musics_time = false;
-
-		this.callwords = [];
-
-		this.banned = false;
-
-		this.resources = {
-			"holdit": {
-				"src": AO_HOST + "misc/default/holdit_bubble.png",
-				"duration": 720
-			},
-			"objection": {
-				"src": AO_HOST + "misc/default/objection_bubble.png",
-				"duration": 720
-			},
-			"takethat": {
-				"src": AO_HOST + "misc/default/takethat_bubble.png",
-				"duration": 840
-			},
-			"custom": {
-				"src": "",
-				"duration": 840
-			},
-			"witnesstestimony": {
-				"src": AO_HOST + "themes/" + THEME + "/witnesstestimony.gif",
-				"duration": 1560,
-				"sfx": AO_HOST + "sounds/general/sfx-testimony.opus"
-			},
-			"crossexamination": {
-				"src": AO_HOST + "themes/" + THEME + "/crossexamination.gif",
-				"duration": 1600,
-				"sfx": AO_HOST + "sounds/general/sfx-testimony2.opus"
-			},
-			"guilty": {
-				"src": AO_HOST + "themes/" + THEME + "/guilty.gif",
-				"duration": 2870,
-				"sfx": AO_HOST + "sounds/general/sfx-guilty.opus"
-			},
-			"notguilty": {
-				"src": AO_HOST + "themes/" + THEME + "/notguilty.gif",
-				"duration": 2440,
-				"sfx": AO_HOST + "sounds/general/sfx-notguilty.opus"
-			},
-		};
-
-		this.selectedEmote = -1;
-		this.selectedEvidence = 0;
-
-		this.checkUpdater = null;
-
-		/**
+  constructor(address) {
+    super();
+    console.log(`mode: ${mode}`);
+    if (mode !== 'replay') {
+      this.serv = new WebSocket(`ws://${address}`);
+      // Assign the websocket events
+      this.serv.addEventListener('open', this.emit.bind(this, 'open'));
+      this.serv.addEventListener('close', this.emit.bind(this, 'close'));
+      this.serv.addEventListener('message', this.emit.bind(this, 'message'));
+      this.serv.addEventListener('error', this.emit.bind(this, 'error'));
+    } else {
+      this.joinServer();
+    }
+
+    this.on('open', this.onOpen.bind(this));
+    this.on('close', this.onClose.bind(this));
+    this.on('message', this.onMessage.bind(this));
+    this.on('error', this.onError.bind(this));
+
+    // Preset some of the variables
+
+    this.hp = [0, 0];
+
+    this.playerID = 1;
+    this.charID = -1;
+    this.char_list_length = 0;
+    this.evidence_list_length = 0;
+    this.music_list_length = 0;
+    this.testimonyID = 0;
+
+    this.chars = [];
+    this.emotes = [];
+    this.evidences = [];
+    this.areas = [];
+    this.musics = [];
+
+    this.musics_time = false;
+
+    this.callwords = [];
+
+    this.banned = false;
+
+    this.resources = {
+      holdit: {
+        src: `${AO_HOST}misc/default/holdit_bubble.png`,
+        duration: 720,
+      },
+      objection: {
+        src: `${AO_HOST}misc/default/objection_bubble.png`,
+        duration: 720,
+      },
+      takethat: {
+        src: `${AO_HOST}misc/default/takethat_bubble.png`,
+        duration: 840,
+      },
+      custom: {
+        src: '',
+        duration: 840,
+      },
+      witnesstestimony: {
+        src: `${AO_HOST}themes/${THEME}/witnesstestimony.gif`,
+        duration: 1560,
+        sfx: `${AO_HOST}sounds/general/sfx-testimony.opus`,
+      },
+      crossexamination: {
+        src: `${AO_HOST}themes/${THEME}/crossexamination.gif`,
+        duration: 1600,
+        sfx: `${AO_HOST}sounds/general/sfx-testimony2.opus`,
+      },
+      guilty: {
+        src: `${AO_HOST}themes/${THEME}/guilty.gif`,
+        duration: 2870,
+        sfx: `${AO_HOST}sounds/general/sfx-guilty.opus`,
+      },
+      notguilty: {
+        src: `${AO_HOST}themes/${THEME}/notguilty.gif`,
+        duration: 2440,
+        sfx: `${AO_HOST}sounds/general/sfx-notguilty.opus`,
+      },
+    };
+
+    this.selectedEmote = -1;
+    this.selectedEvidence = 0;
+
+    this.checkUpdater = null;
+
+    /**
 		 * Assign handlers for all commands
 		 * If you implement a new command, you need to add it here
 		 */
-		this.on("MS", this.handleMS.bind(this));
-		this.on("CT", this.handleCT.bind(this));
-		this.on("MC", this.handleMC.bind(this));
-		this.on("RMC", this.handleRMC.bind(this));
-		this.on("CI", this.handleCI.bind(this));
-		this.on("SC", this.handleSC.bind(this));
-		this.on("EI", this.handleEI.bind(this));
-		this.on("FL", this.handleFL.bind(this));
-		this.on("LE", this.handleLE.bind(this));
-		this.on("EM", this.handleEM.bind(this));
-		this.on("FM", this.handleFM.bind(this));
-		this.on("FA", this.handleFA.bind(this));
-		this.on("SM", this.handleSM.bind(this));
-		this.on("MM", this.handleMM.bind(this));
-		this.on("BD", this.handleBD.bind(this));
-		this.on("BB", this.handleBB.bind(this));
-		this.on("KB", this.handleKB.bind(this));
-		this.on("KK", this.handleKK.bind(this));
-		this.on("DONE", this.handleDONE.bind(this));
-		this.on("BN", this.handleBN.bind(this));
-		this.on("HP", this.handleHP.bind(this));
-		this.on("RT", this.handleRT.bind(this));
-        this.on("TI", this.handleTI.bind(this));
-		this.on("ZZ", this.handleZZ.bind(this));
-		this.on("HI", this.handleHI.bind(this));
-		this.on("ID", this.handleID.bind(this));
-		this.on("PN", this.handlePN.bind(this));
-		this.on("SI", this.handleSI.bind(this));
-		this.on("ARUP", this.handleARUP.bind(this));
-		this.on("askchaa", this.handleaskchaa.bind(this));
-		this.on("CC", this.handleCC.bind(this));
-		this.on("RC", this.handleRC.bind(this));
-		this.on("RM", this.handleRM.bind(this));
-		this.on("RD", this.handleRD.bind(this));
-		this.on("CharsCheck", this.handleCharsCheck.bind(this));
-		this.on("PV", this.handlePV.bind(this));
-		this.on("ASS", this.handleASS.bind(this));
-		this.on("CHECK", () => { });
-		this.on("CH", () => { });
-
-		this._lastTimeICReceived = new Date(0);
-	}
-
-	/**
+    this.on('MS', this.handleMS.bind(this));
+    this.on('CT', this.handleCT.bind(this));
+    this.on('MC', this.handleMC.bind(this));
+    this.on('RMC', this.handleRMC.bind(this));
+    this.on('CI', this.handleCI.bind(this));
+    this.on('SC', this.handleSC.bind(this));
+    this.on('EI', this.handleEI.bind(this));
+    this.on('FL', this.handleFL.bind(this));
+    this.on('LE', this.handleLE.bind(this));
+    this.on('EM', this.handleEM.bind(this));
+    this.on('FM', this.handleFM.bind(this));
+    this.on('FA', this.handleFA.bind(this));
+    this.on('SM', this.handleSM.bind(this));
+    this.on('MM', this.handleMM.bind(this));
+    this.on('BD', this.handleBD.bind(this));
+    this.on('BB', this.handleBB.bind(this));
+    this.on('KB', this.handleKB.bind(this));
+    this.on('KK', this.handleKK.bind(this));
+    this.on('DONE', this.handleDONE.bind(this));
+    this.on('BN', this.handleBN.bind(this));
+    this.on('HP', this.handleHP.bind(this));
+    this.on('RT', this.handleRT.bind(this));
+    this.on('TI', this.handleTI.bind(this));
+    this.on('ZZ', this.handleZZ.bind(this));
+    this.on('HI', this.handleHI.bind(this));
+    this.on('ID', this.handleID.bind(this));
+    this.on('PN', this.handlePN.bind(this));
+    this.on('SI', this.handleSI.bind(this));
+    this.on('ARUP', this.handleARUP.bind(this));
+    this.on('askchaa', this.handleaskchaa.bind(this));
+    this.on('CC', this.handleCC.bind(this));
+    this.on('RC', this.handleRC.bind(this));
+    this.on('RM', this.handleRM.bind(this));
+    this.on('RD', this.handleRD.bind(this));
+    this.on('CharsCheck', this.handleCharsCheck.bind(this));
+    this.on('PV', this.handlePV.bind(this));
+    this.on('ASS', this.handleASS.bind(this));
+    this.on('CHECK', () => { });
+    this.on('CH', () => { });
+
+    this._lastTimeICReceived = new Date(0);
+  }
+
+  /**
 	 * Gets the current player's character.
 	 */
-	get character() {
-		return this.chars[this.charID];
-	}
+  get character() {
+    return this.chars[this.charID];
+  }
 
-	/**
+  /**
 	 * Gets the player's currently selected emote.
 	 */
-	get emote() {
-		return this.emotes[this.selectedEmote];
-	}
+  get emote() {
+    return this.emotes[this.selectedEmote];
+  }
 
-	/**
+  /**
 	 * Gets the current evidence ID unless the player doesn't want to present any evidence
 	 */
-	get evidence() {
-		return (document.getElementById("button_present").classList.contains("dark")) ? this.selectedEvidence : 0;
-	}
+  get evidence() {
+    return (document.getElementById('button_present').classList.contains('dark')) ? this.selectedEvidence : 0;
+  }
 
-	/**
+  /**
 	 * Hook for sending messages to the server
 	 * @param {string} message the message to send
 	 */
-	sendServer(message) {
-		console.debug("C: " + message);
-		if (mode === "replay") {
-			this.sendSelf(message);
-		} else {
-			this.serv.send(message);
-		}
-	}
+  sendServer(message) {
+    console.debug(`C: ${message}`);
+    if (mode === 'replay') {
+      this.sendSelf(message);
+    } else {
+      this.serv.send(message);
+    }
+  }
 
-	/**
+  /**
 	 * Hook for sending messages to the client
 	 * @param {string} message the message to send
 	 */
-	handleSelf(message) {
-		const message_event = new MessageEvent('websocket', { data: message });
-		setTimeout(() => this.onMessage(message_event), 1);
-	}	
+  handleSelf(message) {
+    const message_event = new MessageEvent('websocket', { data: message });
+    setTimeout(() => this.onMessage(message_event), 1);
+  }
 
-	/**
+  /**
 	 * Hook for sending messages to the client
 	 * @param {string} message the message to send
 	 */
-	sendSelf(message) {
-		document.getElementById("client_ooclog").value += message + "\r\n";
-		this.handleSelf(message);
-	}
-
+  sendSelf(message) {
+    document.getElementById('client_ooclog').value += `${message}\r\n`;
+    this.handleSelf(message);
+  }
 
-	/**
+  /**
 	 * Sends an out-of-character chat message.
 	 * @param {string} message the message to send
 	 */
-	sendOOC(message) {
-		setCookie("OOC_name", document.getElementById("OOC_name").value);
-		this.sendServer(`CT#${escapeChat(encodeChat(document.getElementById("OOC_name").value))}#${escapeChat(encodeChat(message))}#%`);
-	}
+  sendOOC(message) {
+    setCookie('OOC_name', document.getElementById('OOC_name').value);
+    this.sendServer(`CT#${escapeChat(encodeChat(document.getElementById('OOC_name').value))}#${escapeChat(encodeChat(message))}#%`);
+  }
 
-	/**
+  /**
 	 * Sends an in-character chat message.
 	 * @param {string} deskmod currently unused
 	 * @param {string} speaking who is speaking
@@ -307,1950 +307,1945 @@ class Client extends EventEmitter {
 	 * @param {number} self_offset offset to paired character (optional)
 	 * @param {number} noninterrupting_preanim play the full preanim (optional)
 	 */
-	sendIC(deskmod, preanim, name, emote, message, side, sfx_name, emote_modifier, sfx_delay, objection_modifier, evidence, flip,
-			realization, text_color, showname, other_charid, self_hoffset, self_yoffset, noninterrupting_preanim, looping_sfx, screenshake,
-			frame_screenshake, frame_realization, frame_sfx, additive, effect) {
-		let extra_cccc = ``;
-		let other_emote = ``;
-		let other_offset = ``;
-		let extra_27 = ``;
-		let extra_28 = ``;
-
-		if (extrafeatures.includes("cccc_ic_support")) {
-			const self_offset = extrafeatures.includes("y_offset") ? self_hoffset+'<and>'+self_yoffset : self_hoffset;	// HACK: this should be an & but client fucked it up and all the servers adopted it
-			if (mode === "replay") {
-				other_emote = `##`;
-		    	other_offset = `#0#0`;
-			}
-			extra_cccc = `${showname}#${other_charid}${other_emote}#${self_offset}${other_offset}#${noninterrupting_preanim}#`;		
-
-			if (extrafeatures.includes("looping_sfx")) {
-				extra_27 = `${looping_sfx}#${screenshake}#${frame_screenshake}#${frame_realization}#${frame_sfx}#`;
-				if (extrafeatures.includes("effects")) {
-					extra_28 = `${additive}#${effect}#`;
-				}
-			}
-		}
-		
-		const serverMessage = `MS#${deskmod}#${preanim}#${name}#${emote}` +
-			`#${escapeChat(encodeChat(message))}#${side}#${sfx_name}#${emote_modifier}` +
-			`#${this.charID}#${sfx_delay}#${objection_modifier}#${evidence}#${flip}#${realization}#${text_color}#${extra_cccc}${extra_27}${extra_28}%`;
-		
-		this.sendServer(serverMessage);
-		if (mode === "replay") {
-			document.getElementById("client_ooclog").value += "wait#" + document.getElementById("client_replaytimer").value + "#%\r\n";
-		}
-	}
-
-	/**
+  sendIC(
+    deskmod,
+    preanim,
+    name,
+    emote,
+    message,
+    side,
+    sfx_name,
+    emote_modifier,
+    sfx_delay,
+    objection_modifier,
+    evidence,
+    flip,
+    realization,
+    text_color,
+    showname,
+    other_charid,
+    self_hoffset,
+    self_yoffset,
+    noninterrupting_preanim,
+    looping_sfx,
+    screenshake,
+    frame_screenshake,
+    frame_realization,
+    frame_sfx,
+    additive,
+    effect,
+  ) {
+    let extra_cccc = '';
+    let other_emote = '';
+    let other_offset = '';
+    let extra_27 = '';
+    let extra_28 = '';
+
+    if (extrafeatures.includes('cccc_ic_support')) {
+      const self_offset = extrafeatures.includes('y_offset') ? `${self_hoffset}<and>${self_yoffset}` : self_hoffset;	// HACK: this should be an & but client fucked it up and all the servers adopted it
+      if (mode === 'replay') {
+        other_emote = '##';
+		    	other_offset = '#0#0';
+      }
+      extra_cccc = `${showname}#${other_charid}${other_emote}#${self_offset}${other_offset}#${noninterrupting_preanim}#`;
+
+      if (extrafeatures.includes('looping_sfx')) {
+        extra_27 = `${looping_sfx}#${screenshake}#${frame_screenshake}#${frame_realization}#${frame_sfx}#`;
+        if (extrafeatures.includes('effects')) {
+          extra_28 = `${additive}#${effect}#`;
+        }
+      }
+    }
+
+    const serverMessage = `MS#${deskmod}#${preanim}#${name}#${emote}`
+			+ `#${escapeChat(encodeChat(message))}#${side}#${sfx_name}#${emote_modifier}`
+			+ `#${this.charID}#${sfx_delay}#${objection_modifier}#${evidence}#${flip}#${realization}#${text_color}#${extra_cccc}${extra_27}${extra_28}%`;
+
+    this.sendServer(serverMessage);
+    if (mode === 'replay') {
+      document.getElementById('client_ooclog').value += `wait#${document.getElementById('client_replaytimer').value}#%\r\n`;
+    }
+  }
+
+  /**
 	 * Sends add evidence command.
 	 * @param {string} evidence name
 	 * @param {string} evidence description
 	 * @param {string} evidence image filename
 	 */
-	sendPE(name, desc, img) {
-		this.sendServer(`PE#${escapeChat(encodeChat(name))}#${escapeChat(encodeChat(desc))}#${img}#%`);
-	}
+  sendPE(name, desc, img) {
+    this.sendServer(`PE#${escapeChat(encodeChat(name))}#${escapeChat(encodeChat(desc))}#${img}#%`);
+  }
 
-	/**
+  /**
 	 * Sends edit evidence command.
 	 * @param {number} evidence id
 	 * @param {string} evidence name
 	 * @param {string} evidence description
 	 * @param {string} evidence image filename
 	 */
-	sendEE(id, name, desc, img) {
-		this.sendServer(`EE#${id}#${escapeChat(encodeChat(name))}#${escapeChat(encodeChat(desc))}#${img}#%`);
-	}
+  sendEE(id, name, desc, img) {
+    this.sendServer(`EE#${id}#${escapeChat(encodeChat(name))}#${escapeChat(encodeChat(desc))}#${img}#%`);
+  }
 
-	/**
+  /**
 	 * Sends delete evidence command.
 	 * @param {number} evidence id
 	 */
-	sendDE(id) {
-		this.sendServer(`DE#${id}#%`);
-	}
+  sendDE(id) {
+    this.sendServer(`DE#${id}#%`);
+  }
 
-	/**
+  /**
 	 * Sends health point command.
 	 * @param {number} side the position
 	 * @param {number} hp the health point
 	 */
-	sendHP(side, hp) {
-		this.sendServer(`HP#${side}#${hp}#%`);
-	}
+  sendHP(side, hp) {
+    this.sendServer(`HP#${side}#${hp}#%`);
+  }
 
-	/**
+  /**
 	 * Sends call mod command.
 	 * @param {string} message to mod
 	 */
-	sendZZ(msg) {
-		if (extrafeatures.includes("modcall_reason")) {
-			this.sendServer(`ZZ#${msg}#%`);
-		} else {
-			this.sendServer(`ZZ#%`);
-		}
-	}
+  sendZZ(msg) {
+    if (extrafeatures.includes('modcall_reason')) {
+      this.sendServer(`ZZ#${msg}#%`);
+    } else {
+      this.sendServer('ZZ#%');
+    }
+  }
 
-	/**
+  /**
 	 * Sends testimony command.
 	 * @param {string} testimony type
 	 */
-	sendRT(testimony) {
-		if (this.chars[this.charID].side === "jud") {
-			this.sendServer(`RT#${testimony}#%`);
-		}
-	}
+  sendRT(testimony) {
+    if (this.chars[this.charID].side === 'jud') {
+      this.sendServer(`RT#${testimony}#%`);
+    }
+  }
 
-	/**
+  /**
 	 * Requests to change the music to the specified track.
 	 * @param {string} track the track ID
 	 */
-	sendMusicChange(track) {
-		this.sendServer(`MC#${track}#${this.charID}#%`);
-	}
+  sendMusicChange(track) {
+    this.sendServer(`MC#${track}#${this.charID}#%`);
+  }
 
-	/**
+  /**
 	 * Begins the handshake process by sending an identifier
 	 * to the server.
 	 */
-	joinServer() {
-		console.log(`Your emulated HDID is ${hdid}`);
+  joinServer() {
+    console.log(`Your emulated HDID is ${hdid}`);
 
-		this.sendServer(`HI#${hdid}#%`);
-		this.sendServer(`ID#webAO#webAO#%`);
-		if (mode !== "replay")
-			this.checkUpdater = setInterval(() => this.sendCheck(), 5000);
-		}
+    this.sendServer(`HI#${hdid}#%`);
+    this.sendServer('ID#webAO#webAO#%');
+    if (mode !== 'replay') { this.checkUpdater = setInterval(() => this.sendCheck(), 5000); }
+  }
 
-	/**
+  /**
 	 * Load game resources and stored settings.
 	 */
-	loadResources() {
-		document.getElementById("client_version").innerText = "version " + version;
+  loadResources() {
+    document.getElementById('client_version').innerText = `version ${version}`;
 
-		// Load background array to select
-		const background_select = document.getElementById("bg_select");
-		background_select.add(new Option("Custom", 0));
-		vanilla_background_arr.forEach(background => {
-			background_select.add(new Option(background));
-		});
+    // Load background array to select
+    const background_select = document.getElementById('bg_select');
+    background_select.add(new Option('Custom', 0));
+    vanilla_background_arr.forEach((background) => {
+      background_select.add(new Option(background));
+    });
 
-		// Load evidence array to select
-		const evidence_select = document.getElementById("evi_select");
-		evidence_select.add(new Option("Custom", 0));
-		vanilla_evidence_arr.forEach(evidence => {
-			evidence_select.add(new Option(evidence));
-		});
+    // Load evidence array to select
+    const evidence_select = document.getElementById('evi_select');
+    evidence_select.add(new Option('Custom', 0));
+    vanilla_evidence_arr.forEach((evidence) => {
+      evidence_select.add(new Option(evidence));
+    });
 
-		// Read cookies and set the UI to its values
-		document.getElementById("OOC_name").value = getCookie("OOC_name") || "web"+parseInt(Math.random()*100+10);
+    // Read cookies and set the UI to its values
+    document.getElementById('OOC_name').value = getCookie('OOC_name') || `web${parseInt(Math.random() * 100 + 10)}`;
 
-		// Read cookies and set the UI to its values
-		var cookietheme = getCookie("theme") || "default";
+    // Read cookies and set the UI to its values
+    const cookietheme = getCookie('theme') || 'default';
 
-		document.querySelector('#client_themeselect [value="' + cookietheme + '"]').selected = true;
-		reloadTheme();
+    document.querySelector(`#client_themeselect [value="${cookietheme}"]`).selected = true;
+    reloadTheme();
 
-		var cookiechatbox = getCookie("chatbox") || "dynamic";
+    const cookiechatbox = getCookie('chatbox') || 'dynamic';
 
-		document.querySelector('#client_chatboxselect [value="' + cookiechatbox + '"]').selected = true;
-		setChatbox(cookiechatbox);
+    document.querySelector(`#client_chatboxselect [value="${cookiechatbox}"]`).selected = true;
+    setChatbox(cookiechatbox);
 
-		document.getElementById("client_mvolume").value = getCookie("musicVolume") || 1;
-		changeMusicVolume();
-		document.getElementById("client_sfxaudio").volume = getCookie("sfxVolume") || 1;
-		changeSFXVolume();
-		document.getElementById("client_shoutaudio").volume = getCookie("shoutVolume") || 1;
-		changeShoutVolume();
-		document.getElementById("client_testimonyaudio").volume = getCookie("testimonyVolume") || 1;
-		changeTestimonyVolume();
-		document.getElementById("client_bvolume").value = getCookie("blipVolume") || 1;
-		changeBlipVolume();
+    document.getElementById('client_mvolume').value = getCookie('musicVolume') || 1;
+    changeMusicVolume();
+    document.getElementById('client_sfxaudio').volume = getCookie('sfxVolume') || 1;
+    changeSFXVolume();
+    document.getElementById('client_shoutaudio').volume = getCookie('shoutVolume') || 1;
+    changeShoutVolume();
+    document.getElementById('client_testimonyaudio').volume = getCookie('testimonyVolume') || 1;
+    changeTestimonyVolume();
+    document.getElementById('client_bvolume').value = getCookie('blipVolume') || 1;
+    changeBlipVolume();
 
-		document.getElementById("ic_chat_name").value = getCookie("ic_chat_name");
-		document.getElementById("showname").checked = getCookie("showname");
-		showname_click();
+    document.getElementById('ic_chat_name').value = getCookie('ic_chat_name');
+    document.getElementById('showname').checked = getCookie('showname');
+    showname_click();
 
-		document.getElementById("client_callwords").value = getCookie("callwords");
-	}
+    document.getElementById('client_callwords').value = getCookie('callwords');
+  }
 
-	/**
+  /**
 	 * Requests to play as a specified character.
 	 * @param {number} character the character ID
 	 */
-	sendCharacter(character) {
-		if (this.chars[character].name)
-			this.sendServer(`CC#${this.playerID}#${character}#web#%`);
-	}
+  sendCharacter(character) {
+    if (this.chars[character].name) { this.sendServer(`CC#${this.playerID}#${character}#web#%`); }
+  }
 
-	/**
+  /**
 	 * Requests to select a music track.
 	 * @param {number?} song the song to be played
 	 */
-	sendMusic(song) {
-		this.sendServer(`MC#${song}#${this.charID}#%`);
-	}
+  sendMusic(song) {
+    this.sendServer(`MC#${song}#${this.charID}#%`);
+  }
 
-	/**
+  /**
 	 * Sends a keepalive packet.
 	 */
-	sendCheck() {
-		this.sendServer(`CH#${this.charID}#%`);
-	}
+  sendCheck() {
+    this.sendServer(`CH#${this.charID}#%`);
+  }
 
-	/**
+  /**
 	 * Triggered when a connection is established to the server.
 	 */
-	onOpen(_e) {
-		client.joinServer();
-	}
+  onOpen(_e) {
+    client.joinServer();
+  }
 
-	/**
+  /**
 	 * Triggered when the connection to the server closes.
 	 * @param {CloseEvent} e
 	 */
-	onClose(e) {
-		console.error(`The connection was closed: ${e.reason} (${e.code})`);
-		if (extrafeatures.length == 0 && this.banned === false) {
-			document.getElementById("client_errortext").textContent = "Could not connect to the server";
-		}
-			document.getElementById("client_error").style.display = "flex";
-			document.getElementById("client_loading").style.display = "none";
-			document.getElementById("error_id").textContent = e.code;
-			this.cleanup();		
-	}
-
-	/**
+  onClose(e) {
+    console.error(`The connection was closed: ${e.reason} (${e.code})`);
+    if (extrafeatures.length == 0 && this.banned === false) {
+      document.getElementById('client_errortext').textContent = 'Could not connect to the server';
+    }
+    document.getElementById('client_error').style.display = 'flex';
+    document.getElementById('client_loading').style.display = 'none';
+    document.getElementById('error_id').textContent = e.code;
+    this.cleanup();
+  }
+
+  /**
 	 * Triggered when a packet is received from the server.
 	 * @param {MessageEvent} e
 	 */
-	onMessage(e) {
-		const msg = e.data;
-		console.debug("S: " + msg);
-
-		const lines = msg.split("%");
-
-		for (const msg of lines) {
-			if(msg === "")
-				break;
-			
-			const args = msg.split("#");
-			const header = args[0];
-	
-			if (!this.emit(header, args)) {
-				console.warn(`Invalid packet header ${header}`);
-			}
-		}
-	}
-
-	/**
+  onMessage(e) {
+    const msg = e.data;
+    console.debug(`S: ${msg}`);
+
+    const lines = msg.split('%');
+
+    for (const msg of lines) {
+      if (msg === '') { break; }
+
+      const args = msg.split('#');
+      const header = args[0];
+
+      if (!this.emit(header, args)) {
+        console.warn(`Invalid packet header ${header}`);
+      }
+    }
+  }
+
+  /**
 	 * Triggered when an network error occurs.
-	 * @param {ErrorEvent} e 
+	 * @param {ErrorEvent} e
 	 */
-	onError(e) {
-		console.error(`A network error occurred: ${e.reason} (${e.code})`);
-		document.getElementById("client_error").style.display = "flex";
-		document.getElementById("error_id").textContent = e.code;
-		this.cleanup();
-	}
+  onError(e) {
+    console.error(`A network error occurred: ${e.reason} (${e.code})`);
+    document.getElementById('client_error').style.display = 'flex';
+    document.getElementById('error_id').textContent = e.code;
+    this.cleanup();
+  }
 
-	/**
+  /**
 	 * Stop sending keepalives to the server.
 	 */
-	cleanup() {
-		clearInterval(this.checkUpdater);
+  cleanup() {
+    clearInterval(this.checkUpdater);
 
-		// the connection got rekt, get rid of the old musiclist
-		this.resetMusicList();
-		document.getElementById("client_chartable").innerHTML = "";
-	}
+    // the connection got rekt, get rid of the old musiclist
+    this.resetMusicList();
+    document.getElementById('client_chartable').innerHTML = '';
+  }
 
-	/**
+  /**
 	 * Parse the lines in the OOC and play them
 	 * @param {*} args packet arguments
 	 */
-	handleReplay() {
-		const ooclog = document.getElementById("client_ooclog");
-		const rawLog = false;
-		let rtime = document.getElementById("client_replaytimer").value;
-
-		const clines = ooclog.value.split(/\r?\n/);
-		if (clines[0]) {
-			const currentLine = String(clines[0]);
-			this.handleSelf(currentLine);
-			ooclog.value = clines.slice(1).join("\r\n");
-			if (currentLine.substr(0,4)==="wait" && rawLog === false) {
-				rtime = currentLine.split("#")[1];
-			} else if (currentLine.substr(0,2)!=="MS"){
-				rtime = 0;
-			}
-
-			setTimeout(() => onReplayGo(""), rtime);
-		}
-	}
-
-	/**
+  handleReplay() {
+    const ooclog = document.getElementById('client_ooclog');
+    const rawLog = false;
+    let rtime = document.getElementById('client_replaytimer').value;
+
+    const clines = ooclog.value.split(/\r?\n/);
+    if (clines[0]) {
+      const currentLine = String(clines[0]);
+      this.handleSelf(currentLine);
+      ooclog.value = clines.slice(1).join('\r\n');
+      if (currentLine.substr(0, 4) === 'wait' && rawLog === false) {
+        rtime = currentLine.split('#')[1];
+      } else if (currentLine.substr(0, 2) !== 'MS') {
+        rtime = 0;
+      }
+
+      setTimeout(() => onReplayGo(''), rtime);
+    }
+  }
+
+  /**
 	 * Handles an in-character chat message.
 	 * @param {*} args packet arguments
 	 */
-	handleMS(args) {
-		// TODO: this if-statement might be a bug.
-		if (args[4] !== viewport.chatmsg.content) {
-			document.getElementById("client_inner_chat").innerHTML = "";
-
-			const char_id = Number(args[9]);
-			const char_name = safe_tags(args[3]);
-
-			let msg_nameplate = args[3];
-			let msg_blips = "male";
-			let char_chatbox = "default";
-			let char_muted = false;
-
-			try {
-				msg_nameplate = this.chars[char_id].showname;
-				msg_blips = this.chars[char_id].blips;
-				char_chatbox = this.chars[char_id].chat;
-				char_muted = this.chars[char_id].muted;
-
-				if (this.chars[char_id].name !== char_name) {
-					console.info(this.chars[char_id].name + " is iniediting to " + char_name);
-					const chargs = (char_name + "&" + "iniediter").split("&");
-					this.handleCharacterInfo(chargs, char_id);
-				}
-			} catch (e) {
-				msg_nameplate = args[3];
-				msg_blips = "male";
-				char_chatbox = "default";
-				char_muted = false;
-				console.error("we're still missing some character data");
-			}
-
-			if (char_muted === false) {
-
-				let chatmsg = {
-					deskmod: safe_tags(args[1]).toLowerCase(),
-					preanim: safe_tags(args[2]).toLowerCase(), // get preanim
-					nameplate: msg_nameplate,
-					chatbox: char_chatbox,
-					name: char_name,
-					sprite: safe_tags(args[4]).toLowerCase(),
-					content: prepChat(args[5]), // Escape HTML tags
-					side: args[6].toLowerCase(),
-					sound: safe_tags(args[7]).toLowerCase(),
-					blips: safe_tags(msg_blips),
-					type: Number(args[8]),
-					charid: char_id,
-					snddelay: Number(args[10]),
-					objection: Number(args[11]),
-					evidence: safe_tags(args[12]),
-					flip: Number(args[13]),
-					flash: Number(args[14]),
-					color: Number(args[15])
-				};
-
-				if (extrafeatures.includes("cccc_ic_support")) {
-					const extra_cccc = {
-						showname: safe_tags(args[16]),
-						other_charid: Number(args[17]),
-						other_name: safe_tags(args[18]),
-						other_emote: safe_tags(args[19]),
-						self_offset: args[20].split('<and>'), // HACK: here as well, client is fucked and uses this instead of &
-						other_offset: args[21].split('<and>'),
-						other_flip: Number(args[22]),
-						noninterrupting_preanim: Number(args[23])
-					};
-					chatmsg = Object.assign(extra_cccc, chatmsg);
-
-					if (extrafeatures.includes("looping_sfx")) {
-						const extra_27 = {
-							looping_sfx: Number(args[24]),
-							screenshake: Number(args[25]),
-							frame_screenshake: safe_tags(args[26]),
-							frame_realization: safe_tags(args[27]),
-							frame_sfx: safe_tags(args[28])
-						};
-						chatmsg = Object.assign(extra_27, chatmsg);
-
-						if (extrafeatures.includes("effects")) {
-							const extra_28 = {
-								additive: Number(args[29]),
-								effects: args[30].split('|')
-							};
-							chatmsg = Object.assign(extra_28, chatmsg);
-						} else {
-							const extra_28 = {
-								additive: 0,
-								effects: ['','','']
-							};
-							chatmsg = Object.assign(extra_28, chatmsg);
-						}
-
-					} else {
-						const extra_27 = {
-							looping_sfx: 0,
-							screenshake: 0,
-							frame_screenshake: "",
-							frame_realization: "",
-							frame_sfx: ""
-						};
-						chatmsg = Object.assign(extra_27, chatmsg);
-						const extra_28 = {
-							additive: 0,
-							effects: ['','','']
-						};
-						chatmsg = Object.assign(extra_28, chatmsg);
-					}
-				} else {
-					const extra_cccc = {
-						showname: "",
-						other_charid: 0,
-						other_name: "",
-						other_emote: "",
-						self_offset: [0,0],
-						other_offset: [0,0],
-						other_flip: 0,
-						noninterrupting_preanim: 0
-					};
-					chatmsg = Object.assign(extra_cccc, chatmsg);
-					const extra_27 = {
-						looping_sfx: 0,
-						screenshake: 0,
-						frame_screenshake: "",
-						frame_realization: "",
-						frame_sfx: ""
-					};
-					chatmsg = Object.assign(extra_27, chatmsg);
-					const extra_28 = {
-						additive: 0,
-						effects: ['','','']
-					};
-					chatmsg = Object.assign(extra_28, chatmsg);
-				}
-
-				// our own message appeared, reset the buttons
-				if (chatmsg.charid === this.charID) {
-					resetICParams();
-				}
-
-				viewport.say(chatmsg); // no await
-			}
-		}
-	}
-
-	/**
+  handleMS(args) {
+    // TODO: this if-statement might be a bug.
+    if (args[4] !== viewport.chatmsg.content) {
+      document.getElementById('client_inner_chat').innerHTML = '';
+
+      const char_id = Number(args[9]);
+      const char_name = safe_tags(args[3]);
+
+      let msg_nameplate = args[3];
+      let msg_blips = 'male';
+      let char_chatbox = 'default';
+      let char_muted = false;
+
+      try {
+        msg_nameplate = this.chars[char_id].showname;
+        msg_blips = this.chars[char_id].blips;
+        char_chatbox = this.chars[char_id].chat;
+        char_muted = this.chars[char_id].muted;
+
+        if (this.chars[char_id].name !== char_name) {
+          console.info(`${this.chars[char_id].name} is iniediting to ${char_name}`);
+          const chargs = (`${char_name}&` + 'iniediter').split('&');
+          this.handleCharacterInfo(chargs, char_id);
+        }
+      } catch (e) {
+        msg_nameplate = args[3];
+        msg_blips = 'male';
+        char_chatbox = 'default';
+        char_muted = false;
+        console.error("we're still missing some character data");
+      }
+
+      if (char_muted === false) {
+        let chatmsg = {
+          deskmod: safe_tags(args[1]).toLowerCase(),
+          preanim: safe_tags(args[2]).toLowerCase(), // get preanim
+          nameplate: msg_nameplate,
+          chatbox: char_chatbox,
+          name: char_name,
+          sprite: safe_tags(args[4]).toLowerCase(),
+          content: prepChat(args[5]), // Escape HTML tags
+          side: args[6].toLowerCase(),
+          sound: safe_tags(args[7]).toLowerCase(),
+          blips: safe_tags(msg_blips),
+          type: Number(args[8]),
+          charid: char_id,
+          snddelay: Number(args[10]),
+          objection: Number(args[11]),
+          evidence: safe_tags(args[12]),
+          flip: Number(args[13]),
+          flash: Number(args[14]),
+          color: Number(args[15]),
+        };
+
+        if (extrafeatures.includes('cccc_ic_support')) {
+          const extra_cccc = {
+            showname: safe_tags(args[16]),
+            other_charid: Number(args[17]),
+            other_name: safe_tags(args[18]),
+            other_emote: safe_tags(args[19]),
+            self_offset: args[20].split('<and>'), // HACK: here as well, client is fucked and uses this instead of &
+            other_offset: args[21].split('<and>'),
+            other_flip: Number(args[22]),
+            noninterrupting_preanim: Number(args[23]),
+          };
+          chatmsg = Object.assign(extra_cccc, chatmsg);
+
+          if (extrafeatures.includes('looping_sfx')) {
+            const extra_27 = {
+              looping_sfx: Number(args[24]),
+              screenshake: Number(args[25]),
+              frame_screenshake: safe_tags(args[26]),
+              frame_realization: safe_tags(args[27]),
+              frame_sfx: safe_tags(args[28]),
+            };
+            chatmsg = Object.assign(extra_27, chatmsg);
+
+            if (extrafeatures.includes('effects')) {
+              const extra_28 = {
+                additive: Number(args[29]),
+                effects: args[30].split('|'),
+              };
+              chatmsg = Object.assign(extra_28, chatmsg);
+            } else {
+              const extra_28 = {
+                additive: 0,
+                effects: ['', '', ''],
+              };
+              chatmsg = Object.assign(extra_28, chatmsg);
+            }
+          } else {
+            const extra_27 = {
+              looping_sfx: 0,
+              screenshake: 0,
+              frame_screenshake: '',
+              frame_realization: '',
+              frame_sfx: '',
+            };
+            chatmsg = Object.assign(extra_27, chatmsg);
+            const extra_28 = {
+              additive: 0,
+              effects: ['', '', ''],
+            };
+            chatmsg = Object.assign(extra_28, chatmsg);
+          }
+        } else {
+          const extra_cccc = {
+            showname: '',
+            other_charid: 0,
+            other_name: '',
+            other_emote: '',
+            self_offset: [0, 0],
+            other_offset: [0, 0],
+            other_flip: 0,
+            noninterrupting_preanim: 0,
+          };
+          chatmsg = Object.assign(extra_cccc, chatmsg);
+          const extra_27 = {
+            looping_sfx: 0,
+            screenshake: 0,
+            frame_screenshake: '',
+            frame_realization: '',
+            frame_sfx: '',
+          };
+          chatmsg = Object.assign(extra_27, chatmsg);
+          const extra_28 = {
+            additive: 0,
+            effects: ['', '', ''],
+          };
+          chatmsg = Object.assign(extra_28, chatmsg);
+        }
+
+        // our own message appeared, reset the buttons
+        if (chatmsg.charid === this.charID) {
+          resetICParams();
+        }
+
+        viewport.say(chatmsg); // no await
+      }
+    }
+  }
+
+  /**
 	 * Handles an out-of-character chat message.
 	 * @param {Array} args packet arguments
 	 */
-	handleCT(args) {
-		if (mode !== "replay") {
-		const oocLog = document.getElementById("client_ooclog");
-		oocLog.innerHTML += `${prepChat(args[1])}: ${prepChat(args[2])}\r\n`;
-		if (oocLog.scrollTop > oocLog.scrollHeight - 600) {
-			oocLog.scrollTop = oocLog.scrollHeight;
-		}
-		}
-	}
-
-	/**
+  handleCT(args) {
+    if (mode !== 'replay') {
+      const oocLog = document.getElementById('client_ooclog');
+      oocLog.innerHTML += `${prepChat(args[1])}: ${prepChat(args[2])}\r\n`;
+      if (oocLog.scrollTop > oocLog.scrollHeight - 600) {
+        oocLog.scrollTop = oocLog.scrollHeight;
+      }
+    }
+  }
+
+  /**
 	 * Handles a music change to an arbitrary resource.
 	 * @param {Array} args packet arguments
 	 */
-	handleMC(args) {
-		const track = prepChat(args[1]);
-		let charID = Number(args[2]);
-		const showname = args[3] || "";
-		const looping = Boolean(args[4]);
-		const channel = Number(args[5]) || 0;
-		// const fading = Number(args[6]) || 0; // unused in web
-   
-		const music = viewport.music[channel];
-		let musicname;
-		music.pause();
-		if(track.startsWith("http")) {
-			music.src = track;
-		} else {
-			music.src = AO_HOST + "sounds/music/" + encodeURI(track.toLowerCase());
-		}
-		music.loop = looping;
-		music.play();
-
-		try {
-			musicname = this.chars[charID].name;
-		} catch(e) {
-			charID = -1;
-		}
-
-		if (charID >= 0) {
-			musicname = this.chars[charID].name;
-			appendICLog(`${musicname} changed music to ${track}`);
-		} else {
-			appendICLog(`The music was changed to ${track}`);
-		}
-
-		document.getElementById("client_trackstatustext").innerText = track;
-	}
-
-	/**
+  handleMC(args) {
+    const track = prepChat(args[1]);
+    let charID = Number(args[2]);
+    const showname = args[3] || '';
+    const looping = Boolean(args[4]);
+    const channel = Number(args[5]) || 0;
+    // const fading = Number(args[6]) || 0; // unused in web
+
+    const music = viewport.music[channel];
+    let musicname;
+    music.pause();
+    if (track.startsWith('http')) {
+      music.src = track;
+    } else {
+      music.src = `${AO_HOST}sounds/music/${encodeURI(track.toLowerCase())}`;
+    }
+    music.loop = looping;
+    music.play();
+
+    try {
+      musicname = this.chars[charID].name;
+    } catch (e) {
+      charID = -1;
+    }
+
+    if (charID >= 0) {
+      musicname = this.chars[charID].name;
+      appendICLog(`${musicname} changed music to ${track}`);
+    } else {
+      appendICLog(`The music was changed to ${track}`);
+    }
+
+    document.getElementById('client_trackstatustext').innerText = track;
+  }
+
+  /**
 	 * Handles a music change to an arbitrary resource, with an offset in seconds.
 	 * @param {Array} args packet arguments
 	 */
-	handleRMC(args) {
-		viewport.music.pause();
-		const music = viewport.music;
-		// Music offset + drift from song loading
-		music.totime = args[1];
-		music.offset = new Date().getTime() / 1000;
-		music.addEventListener("loadedmetadata", function () {
-			music.currentTime += parseFloat(music.totime + (new Date().getTime() / 1000 - music.offset)).toFixed(3);
-			music.play();
-		}, false);
-	}
-
-	/**
+  handleRMC(args) {
+    viewport.music.pause();
+    const { music } = viewport;
+    // Music offset + drift from song loading
+    music.totime = args[1];
+    music.offset = new Date().getTime() / 1000;
+    music.addEventListener('loadedmetadata', () => {
+      music.currentTime += parseFloat(music.totime + (new Date().getTime() / 1000 - music.offset)).toFixed(3);
+      music.play();
+    }, false);
+  }
+
+  /**
 	 * Handles the incoming character information, and downloads the sprite + ini for it
 	 * @param {Array} chargs packet arguments
 	 * @param {Number} charid character ID
 	 */
-	async handleCharacterInfo(chargs, charid) {
-		if (chargs[0]) {
-			let cini = {};
-			let cswap = {};
-			let icon = AO_HOST + "characters/" + encodeURI(chargs[0].toLowerCase()) + "/char_icon.png";
-			let img = document.getElementById(`demo_${charid}`);
-			img.alt = chargs[0];
-			img.src = icon;	// seems like a good time to load the icon
-
-			// If the ini doesn't exist on the server this will throw an error
-			try {
-				const cinidata = await request(AO_HOST + "characters/" + encodeURI(chargs[0].toLowerCase()) + "/char.ini");
-				cini = INI.parse(cinidata);
-			} catch (err) {
-				cini = {};
-				img.classList.add("noini");
-				console.warn("character " + chargs[0] + " is missing from webAO");
-				// If it does, give the user a visual indication that the character is unusable
-			}
-
-			const mute_select = document.getElementById("mute_select");
-			mute_select.add(new Option(safe_tags(chargs[0]), charid));
-			const pair_select = document.getElementById("pair_select");
-			pair_select.add(new Option(safe_tags(chargs[0]), charid));
-
-			// sometimes ini files lack important settings
-			const default_options = {
-				name: chargs[0],
-				showname: chargs[0],
-				side: "def",
-				blips: "male",
-				chat: "",
-				category: ""
-			};
-			cini.options = Object.assign(default_options, cini.options);
-
-			// sometimes ini files lack important settings
-			const default_emotions = {
-				number: 0
-			};
-			cini.emotions = Object.assign(default_emotions, cini.emotions);
-
-			this.chars[charid] = {
-				name: safe_tags(chargs[0]),
-				showname: safe_tags(cini.options.showname),
-				desc: safe_tags(chargs[1]),
-				blips: safe_tags(cini.options.blips).toLowerCase(),
-				gender: safe_tags(cini.options.gender).toLowerCase(),
-				side: safe_tags(cini.options.side).toLowerCase(),
-				chat: (cini.options.chat==="") ? safe_tags(cini.options.chat).toLowerCase() : safe_tags(cini.options.category).toLowerCase(),
-				evidence: chargs[3],
-				icon: icon,
-				inifile: cini,
-				muted: false
-			};
-
-            if(this.chars[charid].blips === "")
-                this.chars[charid].blips = this.chars[charid].gender;
-
-			const iniedit_select = document.getElementById("client_ininame");
-			iniedit_select.add(new Option(safe_tags(chargs[0])));
-
-		} else {
-			console.warn("missing charid " + charid);
-			let img = document.getElementById(`demo_${charid}`);
-			img.style.display = "none";
-		}
-
-
-	}
-
-	/**
+  async handleCharacterInfo(chargs, charid) {
+    if (chargs[0]) {
+      let cini = {};
+      const cswap = {};
+      const icon = `${AO_HOST}characters/${encodeURI(chargs[0].toLowerCase())}/char_icon.png`;
+      const img = document.getElementById(`demo_${charid}`);
+      img.alt = chargs[0];
+      img.src = icon;	// seems like a good time to load the icon
+
+      // If the ini doesn't exist on the server this will throw an error
+      try {
+        const cinidata = await request(`${AO_HOST}characters/${encodeURI(chargs[0].toLowerCase())}/char.ini`);
+        cini = iniParse(cinidata);
+      } catch (err) {
+        cini = {};
+        img.classList.add('noini');
+        console.warn(`character ${chargs[0]} is missing from webAO`);
+        // If it does, give the user a visual indication that the character is unusable
+      }
+
+      const mute_select = document.getElementById('mute_select');
+      mute_select.add(new Option(safe_tags(chargs[0]), charid));
+      const pair_select = document.getElementById('pair_select');
+      pair_select.add(new Option(safe_tags(chargs[0]), charid));
+
+      // sometimes ini files lack important settings
+      const default_options = {
+        name: chargs[0],
+        showname: chargs[0],
+        side: 'def',
+        blips: 'male',
+        chat: '',
+        category: '',
+      };
+      cini.options = Object.assign(default_options, cini.options);
+
+      // sometimes ini files lack important settings
+      const default_emotions = {
+        number: 0,
+      };
+      cini.emotions = Object.assign(default_emotions, cini.emotions);
+
+      this.chars[charid] = {
+        name: safe_tags(chargs[0]),
+        showname: safe_tags(cini.options.showname),
+        desc: safe_tags(chargs[1]),
+        blips: safe_tags(cini.options.blips).toLowerCase(),
+        gender: safe_tags(cini.options.gender).toLowerCase(),
+        side: safe_tags(cini.options.side).toLowerCase(),
+        chat: (cini.options.chat === '') ? safe_tags(cini.options.chat).toLowerCase() : safe_tags(cini.options.category).toLowerCase(),
+        evidence: chargs[3],
+        icon,
+        inifile: cini,
+        muted: false,
+      };
+
+      if (this.chars[charid].blips === '') { this.chars[charid].blips = this.chars[charid].gender; }
+
+      const iniedit_select = document.getElementById('client_ininame');
+      iniedit_select.add(new Option(safe_tags(chargs[0])));
+    } else {
+      console.warn(`missing charid ${charid}`);
+      const img = document.getElementById(`demo_${charid}`);
+      img.style.display = 'none';
+    }
+  }
+
+  /**
 	 * Handles incoming character information, bundling multiple characters
 	 * per packet.
 	 * CI#0#Phoenix&description&&&&&#1#Miles ...
 	 * @param {Array} args packet arguments
 	 */
-	handleCI(args) {
-		// Loop through the 10 characters that were sent
-		for (let i = 2; i <= args.length - 2; i++) {
-			if (i % 2 === 0) {
-				document.getElementById("client_loadingtext").innerHTML = `Loading Character ${args[1]}/${this.char_list_length}`;
-				const chargs = args[i].split("&");
-				const charid = args[i - 1];
-				setTimeout(() => this.handleCharacterInfo(chargs, charid), charid*10);
-			}
-		}
-		// Request the next pack
-		this.sendServer("AN#" + ((args[1] / 10) + 1) + "#%");
-	}
-
-	/**
+  handleCI(args) {
+    // Loop through the 10 characters that were sent
+    for (let i = 2; i <= args.length - 2; i++) {
+      if (i % 2 === 0) {
+        document.getElementById('client_loadingtext').innerHTML = `Loading Character ${args[1]}/${this.char_list_length}`;
+        const chargs = args[i].split('&');
+        const charid = args[i - 1];
+        setTimeout(() => this.handleCharacterInfo(chargs, charid), charid * 10);
+      }
+    }
+    // Request the next pack
+    this.sendServer(`AN#${(args[1] / 10) + 1}#%`);
+  }
+
+  /**
 	 * Handles incoming character information, containing all characters
 	 * in one packet.
 	 * @param {Array} args packet arguments
 	 */
-	handleSC(args) {
-		document.getElementById("client_loadingtext").innerHTML = "Loading Characters";
-		for (let i = 1; i < args.length; i++) {
-			document.getElementById("client_loadingtext").innerHTML = `Loading Character ${i}/${this.char_list_length}`;
-			const chargs = args[i].split("&");
-			const charid = i - 1;
-			setTimeout(() => this.handleCharacterInfo(chargs, charid), charid*10);
-		}
-		// We're done with the characters, request the music
-		this.sendServer("RM#%");
-	}
-
-	/**
+  handleSC(args) {
+    document.getElementById('client_loadingtext').innerHTML = 'Loading Characters';
+    for (let i = 1; i < args.length; i++) {
+      document.getElementById('client_loadingtext').innerHTML = `Loading Character ${i}/${this.char_list_length}`;
+      const chargs = args[i].split('&');
+      const charid = i - 1;
+      setTimeout(() => this.handleCharacterInfo(chargs, charid), charid * 10);
+    }
+    // We're done with the characters, request the music
+    this.sendServer('RM#%');
+  }
+
+  /**
 	 * Handles incoming evidence information, containing only one evidence
 	 * item per packet.
-	 * 
+	 *
 	 * Mostly unimplemented in webAO.
 	 * @param {Array} args packet arguments
 	 */
-	handleEI(args) {
-		document.getElementById("client_loadingtext").innerHTML = `Loading Evidence ${args[1]}/${this.evidence_list_length}`;
-		this.sendServer("RM#%");
-	}
+  handleEI(args) {
+    document.getElementById('client_loadingtext').innerHTML = `Loading Evidence ${args[1]}/${this.evidence_list_length}`;
+    this.sendServer('RM#%');
+  }
 
-	/**
+  /**
 	 * Handles incoming evidence list, all evidences at once
 	 * item per packet.
-	 * 
+	 *
 	 * @param {Array} args packet arguments
 	 */
-	handleLE(args) {
-		this.evidences = [];
-		for (let i = 1; i < args.length - 1; i++) {
-			const arg = args[i].split("&");
-			this.evidences[i - 1] = {
-				name: prepChat(arg[0]),
-				desc: prepChat(arg[1]),
-				filename: safe_tags(arg[2]),
-				icon: AO_HOST + "evidence/" + encodeURI(arg[2].toLowerCase())
-			};
-		}
-
-		const evidence_box = document.getElementById("evidences");
-		evidence_box.innerHTML = "";
-		for (let i = 1; i <= this.evidences.length; i++) {
-			evidence_box.innerHTML += `<img src="${this.evidences[i - 1].icon}" 
+  handleLE(args) {
+    this.evidences = [];
+    for (let i = 1; i < args.length - 1; i++) {
+      const arg = args[i].split('&');
+      this.evidences[i - 1] = {
+        name: prepChat(arg[0]),
+        desc: prepChat(arg[1]),
+        filename: safe_tags(arg[2]),
+        icon: `${AO_HOST}evidence/${encodeURI(arg[2].toLowerCase())}`,
+      };
+    }
+
+    const evidence_box = document.getElementById('evidences');
+    evidence_box.innerHTML = '';
+    for (let i = 1; i <= this.evidences.length; i++) {
+      evidence_box.innerHTML += `<img src="${this.evidences[i - 1].icon}" 
 				id="evi_${i}" 
 				alt="${this.evidences[i - 1].name}"
 				class="evi_icon"
 				onclick="pickEvidence(${i})">`;
-		}
-	}
-
-	resetMusicList() {
-		this.musics = [];		
-		document.getElementById("client_musiclist").innerHTML = "";	
-	}
-
-	resetAreaList() {
-		this.areas = [];
-		document.getElementById("areas").innerHTML = "";
-
-		this.fetchBackgroundList();
-		this.fetchEvidenceList();
-	}
-
-	async fetchBackgroundList() {
-		try {
-			const bgdata = await request(AO_HOST + "backgrounds.json");
-			const bg_array = JSON.parse(bgdata);
-			// the try catch will fail before here when there is no file
-
-			const bg_select = document.getElementById("bg_select");
-			bg_select.innerHTML = "";
-
-			bg_select.add(new Option("Custom", 0));
-			bg_array.forEach(background => {
-				bg_select.add(new Option(background));
-			});
-		} catch (err) {
-			console.warn("there was no backgrounds.json file");
-		}		
-	}
-
-	async fetchCharacterList() {
-		try {
-			const chardata = await request(AO_HOST + "characters.json");
-			const char_array = JSON.parse(chardata);
-			// the try catch will fail before here when there is no file
-
-			const char_select = document.getElementById("client_ininame");
-			char_select.innerHTML = "";
-
-			char_array.forEach(character => {
-				char_select.add(new Option(character));
-			});
-		} catch (err) {
-			console.warn("there was no characters.json file");
-		}		
-	}
-
-	async fetchEvidenceList() {
-		try {
-			const evidata = await request(AO_HOST + "evidence.json");
-			const evi_array = JSON.parse(evidata);
-			// the try catch will fail before here when there is no file
-
-			const evi_select = document.getElementById("evi_select");
-			evi_select.innerHTML = "";
-
-			evi_array.forEach(evi => {
-				evi_select.add(new Option(evi));
-			});
-			evidence_select.add(new Option("Custom", 0));
-
-		} catch (err) {
-			console.warn("there was no evidence.json file");
-		}		
-	}
-
-	isAudio(trackname) {
-		if (trackname.endsWith(".wav") ||
-            trackname.endsWith(".mp3") ||
-            trackname.endsWith(".mp4") ||
-            trackname.endsWith(".ogg") ||
-            trackname.endsWith(".opus"))  // NOT category markers
-		{
-			return true;
-		} else {
-			return false;
-		}
-	}
-
-	addTrack(trackname) {
-		const newentry = document.createElement("OPTION");
-		newentry.text = trackname;
-		document.getElementById("client_musiclist").options.add(newentry);
-		this.musics.push(trackname);
-	}
-
-	createArea(id,name) {
-		const thisarea = {
-			name: name,
-			players: 0,
-			status: "IDLE",
-			cm: "",
-			locked: "FREE"
-		};
-
-		this.areas.push(thisarea);
-
-		// Create area button
-		let newarea = document.createElement("SPAN");
-		newarea.classList = "area-button area-default";
-		newarea.id = "area" + id;
-		newarea.innerText = thisarea.name;
-		newarea.title = `Players: ${thisarea.players}\n` +
-						`Status: ${thisarea.status}\n` +
-						`CM: ${thisarea.cm}\n` +
-						`Area lock: ${thisarea.locked}`;
-		newarea.onclick = function () {
-			area_click(this);
-		};
-
-		document.getElementById("areas").appendChild(newarea);
-	}
-
-
-	/**
+    }
+  }
+
+  resetMusicList() {
+    this.musics = [];
+    document.getElementById('client_musiclist').innerHTML = '';
+  }
+
+  resetAreaList() {
+    this.areas = [];
+    document.getElementById('areas').innerHTML = '';
+
+    this.fetchBackgroundList();
+    this.fetchEvidenceList();
+  }
+
+  async fetchBackgroundList() {
+    try {
+      const bgdata = await request(`${AO_HOST}backgrounds.json`);
+      const bg_array = JSON.parse(bgdata);
+      // the try catch will fail before here when there is no file
+
+      const bg_select = document.getElementById('bg_select');
+      bg_select.innerHTML = '';
+
+      bg_select.add(new Option('Custom', 0));
+      bg_array.forEach((background) => {
+        bg_select.add(new Option(background));
+      });
+    } catch (err) {
+      console.warn('there was no backgrounds.json file');
+    }
+  }
+
+  async fetchCharacterList() {
+    try {
+      const chardata = await request(`${AO_HOST}characters.json`);
+      const char_array = JSON.parse(chardata);
+      // the try catch will fail before here when there is no file
+
+      const char_select = document.getElementById('client_ininame');
+      char_select.innerHTML = '';
+
+      char_array.forEach((character) => {
+        char_select.add(new Option(character));
+      });
+    } catch (err) {
+      console.warn('there was no characters.json file');
+    }
+  }
+
+  async fetchEvidenceList() {
+    try {
+      const evidata = await request(`${AO_HOST}evidence.json`);
+      const evi_array = JSON.parse(evidata);
+      // the try catch will fail before here when there is no file
+
+      const evi_select = document.getElementById('evi_select');
+      evi_select.innerHTML = '';
+
+      evi_array.forEach((evi) => {
+        evi_select.add(new Option(evi));
+      });
+      evidence_select.add(new Option('Custom', 0));
+    } catch (err) {
+      console.warn('there was no evidence.json file');
+    }
+  }
+
+  isAudio(trackname) {
+    if (trackname.endsWith('.wav')
+            || trackname.endsWith('.mp3')
+            || trackname.endsWith('.mp4')
+            || trackname.endsWith('.ogg')
+            || trackname.endsWith('.opus')) // NOT category markers
+    {
+      return true;
+    }
+    return false;
+  }
+
+  addTrack(trackname) {
+    const newentry = document.createElement('OPTION');
+    newentry.text = trackname;
+    document.getElementById('client_musiclist').options.add(newentry);
+    this.musics.push(trackname);
+  }
+
+  createArea(id, name) {
+    const thisarea = {
+      name,
+      players: 0,
+      status: 'IDLE',
+      cm: '',
+      locked: 'FREE',
+    };
+
+    this.areas.push(thisarea);
+
+    // Create area button
+    const newarea = document.createElement('SPAN');
+    newarea.classList = 'area-button area-default';
+    newarea.id = `area${id}`;
+    newarea.innerText = thisarea.name;
+    newarea.title = `Players: ${thisarea.players}\n`
+						+ `Status: ${thisarea.status}\n`
+						+ `CM: ${thisarea.cm}\n`
+						+ `Area lock: ${thisarea.locked}`;
+    newarea.onclick = function () {
+      area_click(this);
+    };
+
+    document.getElementById('areas').appendChild(newarea);
+  }
+
+  /**
 	 * Area list fuckery
 	 */
-	fix_last_area() {
-        if (this.areas.length > 0) {
-            let malplaced = this.areas.pop().name;
-            const areas = document.getElementById("areas");
-            areas.removeChild(areas.lastChild);
-            this.addTrack(malplaced);
-        }
+  fix_last_area() {
+    if (this.areas.length > 0) {
+      const malplaced = this.areas.pop().name;
+      const areas = document.getElementById('areas');
+      areas.removeChild(areas.lastChild);
+      this.addTrack(malplaced);
     }
+  }
 
-	/**
+  /**
 	 * Handles incoming music information, containing multiple entries
 	 * per packet.
 	 * @param {Array} args packet arguments
 	 */
-	handleEM(args) {
-		document.getElementById("client_loadingtext").innerHTML = "Loading Music";
-		if(args[1] === "0") {
-			this.resetMusicList();
-			this.resetAreaList();
-			this.musics_time = false;
-		}
-
-		for (let i = 2; i < args.length - 1; i++) {
-			if (i % 2 === 0) {
-				document.getElementById("client_loadingtext").innerHTML = `Loading Music ${args[1]}/${this.music_list_length}`;
-                const trackname = safe_tags(args[i]);
-                const trackindex = args[i-1];
-                if (this.musics_time) {
+  handleEM(args) {
+    document.getElementById('client_loadingtext').innerHTML = 'Loading Music';
+    if (args[1] === '0') {
+      this.resetMusicList();
+      this.resetAreaList();
+      this.musics_time = false;
+    }
+
+    for (let i = 2; i < args.length - 1; i++) {
+      if (i % 2 === 0) {
+        document.getElementById('client_loadingtext').innerHTML = `Loading Music ${args[1]}/${this.music_list_length}`;
+        const trackname = safe_tags(args[i]);
+        const trackindex = args[i - 1];
+        if (this.musics_time) {
                 	this.addTrack(trackname);
             	} else if (this.isAudio(trackname)) {
                 	this.musics_time = true;
                 	this.fix_last_area();
                 	this.addTrack(trackname);
             	} else {
-                	this.createArea(trackindex,trackname);
+                	this.createArea(trackindex, trackname);
             	}
-			}
-		}
+      }
+    }
 
-		// get the next batch of tracks
-		this.sendServer("AM#" + ((args[1] / 10) + 1) + "#%");
-	}
+    // get the next batch of tracks
+    this.sendServer(`AM#${(args[1] / 10) + 1}#%`);
+  }
 
-	/**
+  /**
 	 * Handles incoming music information, containing all music in one packet.
 	 * @param {Array} args packet arguments
 	 */
-	handleSM(args) {
-		document.getElementById("client_loadingtext").innerHTML = "Loading Music ";
-		this.resetMusicList();
-		this.resetAreaList();
-
-        this.musics_time = false;
-
-		for (let i = 1; i < args.length - 1; i++) {
-			// Check when found the song for the first time
-            const trackname = safe_tags(args[i]);
-            const trackindex = i-1;
-			document.getElementById("client_loadingtext").innerHTML = `Loading Music ${i}/${this.music_list_length}`;
-            if (this.musics_time) {
-                this.addTrack(trackname);
-            } else if (this.isAudio(trackname)) {
-                this.musics_time = true;
-                this.fix_last_area();
-                this.addTrack(trackname);
-            } else {
-                this.createArea(trackindex,trackname);
-            }
-		}
+  handleSM(args) {
+    document.getElementById('client_loadingtext').innerHTML = 'Loading Music ';
+    this.resetMusicList();
+    this.resetAreaList();
+
+    this.musics_time = false;
+
+    for (let i = 1; i < args.length - 1; i++) {
+      // Check when found the song for the first time
+      const trackname = safe_tags(args[i]);
+      const trackindex = i - 1;
+      document.getElementById('client_loadingtext').innerHTML = `Loading Music ${i}/${this.music_list_length}`;
+      if (this.musics_time) {
+        this.addTrack(trackname);
+      } else if (this.isAudio(trackname)) {
+        this.musics_time = true;
+        this.fix_last_area();
+        this.addTrack(trackname);
+      } else {
+        this.createArea(trackindex, trackname);
+      }
+    }
 
-		// Music done, carry on
-		this.sendServer("RD#%");
-	}
+    // Music done, carry on
+    this.sendServer('RD#%');
+  }
 
-	/**
+  /**
 	 * Handles updated music list
 	 * @param {Array} args packet arguments
 	 */
-	handleFM(args) {
-		this.resetMusicList();
+  handleFM(args) {
+    this.resetMusicList();
 
-		for (let i = 1; i < args.length - 1; i++) {
-			// Check when found the song for the first time
-			this.addTrack(safe_tags(args[i]));
-		}
-	}
+    for (let i = 1; i < args.length - 1; i++) {
+      // Check when found the song for the first time
+      this.addTrack(safe_tags(args[i]));
+    }
+  }
 
-	/**
+  /**
 	 * Handles updated area list
 	 * @param {Array} args packet arguments
 	 */
-	handleFA(args) {
-		this.resetAreaList();
+  handleFA(args) {
+    this.resetAreaList();
 
-		for (let i = 1; i < args.length - 1; i++) {
-			this.createArea(i-1,safe_tags(args[i]));
-		}
-	}
+    for (let i = 1; i < args.length - 1; i++) {
+      this.createArea(i - 1, safe_tags(args[i]));
+    }
+  }
 
-	/**
+  /**
 	 * Handles the "MusicMode" packet
 	 * @param {Array} args packet arguments
 	 */
-	handleMM(_args) {
-		// It's unused nowadays, as preventing people from changing the music is now serverside
-	}
+  handleMM(_args) {
+    // It's unused nowadays, as preventing people from changing the music is now serverside
+  }
 
-	/**
+  /**
 	 * Handles the kicked packet
 	 * @param {String} type is it a kick or a ban
 	 * @param {String} reason why
 	 */
-	handleBans(type, reason) {
-		document.getElementById("client_error").style.display = "flex";
-		document.getElementById("client_errortext").innerHTML = type + ":<br>" + reason.replace(/\n/g, "<br />");
-		document.getElementsByClassName("client_reconnect")[0].style.display = "none";
-		document.getElementsByClassName("client_reconnect")[1].style.display = "none";
-	}
+  handleBans(type, reason) {
+    document.getElementById('client_error').style.display = 'flex';
+    document.getElementById('client_errortext').innerHTML = `${type}:<br>${reason.replace(/\n/g, '<br />')}`;
+    document.getElementsByClassName('client_reconnect')[0].style.display = 'none';
+    document.getElementsByClassName('client_reconnect')[1].style.display = 'none';
+  }
 
-	/**
+  /**
 	 * Handles the kicked packet
 	 * @param {Array} args kick reason
 	 */
-	handleKK(args) {
-		this.handleBans("Kicked", safe_tags(args[1]));
-	}
+  handleKK(args) {
+    this.handleBans('Kicked', safe_tags(args[1]));
+  }
 
-	/**
+  /**
 	 * Handles the banned packet
 	 * this one is sent when you are kicked off the server
 	 * @param {Array} args ban reason
 	 */
-	handleKB(args) {
-		this.handleBans("Banned", safe_tags(args[1]));
-		this.banned = true;
-	}
+  handleKB(args) {
+    this.handleBans('Banned', safe_tags(args[1]));
+    this.banned = true;
+  }
 
-	/**
+  /**
 	 * Handles the warning packet
 	 * on client this spawns a message box you can't close for 2 seconds
 	 * @param {Array} args ban reason
 	 */
 		 handleBB(args) {
-			alert(safe_tags(args[1]));
-		}
+    alert(safe_tags(args[1]));
+  }
 
-	/**
+  /**
 	 * Handles the banned packet
 	 * this one is sent when you try to reconnect but you're banned
 	 * @param {Array} args ban reason
 	 */
-	handleBD(args) {
-		this.handleBans("Banned", safe_tags(args[1]));
-		this.banned = true;
-	}
+  handleBD(args) {
+    this.handleBans('Banned', safe_tags(args[1]));
+    this.banned = true;
+  }
 
-	/**
+  /**
 	 * Handles the handshake completion packet, meaning the player
 	 * is ready to select a character.
-	 * 
+	 *
 	 * @param {Array} args packet arguments
 	 */
-	handleDONE(_args) {
-		document.getElementById("client_loading").style.display = "none";
-		if (mode === "watch") {		// Spectators don't need to pick a character
-			document.getElementById("client_charselect").style.display = "none";
-		} else {
-			document.getElementById("client_charselect").style.display = "block";
-		}
-	}
+  handleDONE(_args) {
+    document.getElementById('client_loading').style.display = 'none';
+    if (mode === 'watch') {		// Spectators don't need to pick a character
+      document.getElementById('client_charselect').style.display = 'none';
+    } else {
+      document.getElementById('client_charselect').style.display = 'block';
+    }
+  }
 
-	/**
+  /**
 	 * Handles a background change.
 	 * @param {Array} args packet arguments
 	 */
-	handleBN(args) {
-		viewport.bgname = safe_tags(args[1]);
-		const bgfolder = viewport.bgFolder;
-		const bg_index = getIndexFromSelect("bg_select", viewport.bgname);
-		document.getElementById("bg_select").selectedIndex = bg_index;
-		updateBackgroundPreview();
-		if (bg_index === 0) {
-			document.getElementById("bg_filename").value = viewport.bgname;
-		}
-		document.getElementById("bg_preview").src = AO_HOST + "background/" + encodeURI(args[1].toLowerCase()) + "/defenseempty.png";
-		
-		document.getElementById("client_def_bench").src = bgfolder + "defensedesk.png"
-		document.getElementById("client_wit_bench").src = bgfolder + "stand.png"
-		document.getElementById("client_pro_bench").src = bgfolder + "prosecutiondesk.png"
-
-		document.getElementById("client_court").src = bgfolder + "full.png"
-
-		document.getElementById("client_court_def").src = bgfolder + "defenseempty.png"
-		document.getElementById("client_court_deft").src = bgfolder + "transition_def.png"
-		document.getElementById("client_court_wit").src = bgfolder + "witnessempty.png"
-		document.getElementById("client_court_prot").src = bgfolder + "transition_pro.png"
-		document.getElementById("client_court_pro").src = bgfolder + "prosecutorempty.png"
-		
-		if (this.charID === -1) {
-			viewport.changeBackground("jud");
-		} else {
-			viewport.changeBackground(this.chars[this.charID].side);
-		}
-
-	}
-
-	/**
+  handleBN(args) {
+    viewport.bgname = safe_tags(args[1]);
+    const bgfolder = viewport.bgFolder;
+    const bg_index = getIndexFromSelect('bg_select', viewport.bgname);
+    document.getElementById('bg_select').selectedIndex = bg_index;
+    updateBackgroundPreview();
+    if (bg_index === 0) {
+      document.getElementById('bg_filename').value = viewport.bgname;
+    }
+    document.getElementById('bg_preview').src = `${AO_HOST}background/${encodeURI(args[1].toLowerCase())}/defenseempty.png`;
+
+    document.getElementById('client_def_bench').src = `${bgfolder}defensedesk.png`;
+    document.getElementById('client_wit_bench').src = `${bgfolder}stand.png`;
+    document.getElementById('client_pro_bench').src = `${bgfolder}prosecutiondesk.png`;
+
+    document.getElementById('client_court').src = `${bgfolder}full.png`;
+
+    document.getElementById('client_court_def').src = `${bgfolder}defenseempty.png`;
+    document.getElementById('client_court_deft').src = `${bgfolder}transition_def.png`;
+    document.getElementById('client_court_wit').src = `${bgfolder}witnessempty.png`;
+    document.getElementById('client_court_prot').src = `${bgfolder}transition_pro.png`;
+    document.getElementById('client_court_pro').src = `${bgfolder}prosecutorempty.png`;
+
+    if (this.charID === -1) {
+      viewport.changeBackground('jud');
+    } else {
+      viewport.changeBackground(this.chars[this.charID].side);
+    }
+  }
+
+  /**
 	 * Handles a change in the health bars' states.
 	 * @param {Array} args packet arguments
 	 */
-	handleHP(args) {
-		const percent_hp = Number(args[2]) * 10;
-		let healthbox;
-		if (args[1] === "1") {
-			// Def hp
-			this.hp[0] = args[2];
-			healthbox = document.getElementById("client_defense_hp");
-		} else {
-			// Pro hp
-			this.hp[1] = args[2];
-			healthbox = document.getElementById("client_prosecutor_hp");
-		}
-		healthbox.getElementsByClassName("health-bar")[0].style.width = percent_hp + "%";
-	}
-
-	/**
+  handleHP(args) {
+    const percent_hp = Number(args[2]) * 10;
+    let healthbox;
+    if (args[1] === '1') {
+      // Def hp
+      this.hp[0] = args[2];
+      healthbox = document.getElementById('client_defense_hp');
+    } else {
+      // Pro hp
+      this.hp[1] = args[2];
+      healthbox = document.getElementById('client_prosecutor_hp');
+    }
+    healthbox.getElementsByClassName('health-bar')[0].style.width = `${percent_hp}%`;
+  }
+
+  /**
 	 * Handles a testimony states.
 	 * @param {Array} args packet arguments
 	 */
-	handleRT(args) {
-		const judgeid = Number(args[2]);
-		switch (args[1]) {
-			case "testimony1":
-				this.testimonyID = 1;
-				break;
-			case "testimony2":
-				//Cross Examination
-				this.testimonyID = 2;
-				break;
-			case "judgeruling":
-				this.testimonyID = 3 + judgeid;
-				break;
-			default:
-				console.warn("Invalid testimony");
-		}
-		viewport.initTestimonyUpdater();
-	}
-
-	/**
+  handleRT(args) {
+    const judgeid = Number(args[2]);
+    switch (args[1]) {
+      case 'testimony1':
+        this.testimonyID = 1;
+        break;
+      case 'testimony2':
+        // Cross Examination
+        this.testimonyID = 2;
+        break;
+      case 'judgeruling':
+        this.testimonyID = 3 + judgeid;
+        break;
+      default:
+        console.warn('Invalid testimony');
+    }
+    viewport.initTestimonyUpdater();
+  }
+
+  /**
 	 * Handles a timer update
 	 * @param {Array} args packet arguments
 	 */
-	handleTI(args) {
-		const timerid = Number(args[1]);
-		const type = Number(args[2]);
-        const timer_value = Number(args[3]);
-        switch (type) {
-            case 0:
-                //
-            case 1:
-                document.getElementById("client_timer"+timerid).innerText = timer_value;
-            case 2:
-                document.getElementById("client_timer"+timerid).style.display = "";
-            case 3:
-                document.getElementById("client_timer"+timerid).style.display = "none";
-        }
-	}
+  handleTI(args) {
+    const timerid = Number(args[1]);
+    const type = Number(args[2]);
+    const timer_value = Number(args[3]);
+    switch (type) {
+      case 0:
+        //
+      case 1:
+        document.getElementById(`client_timer${timerid}`).innerText = timer_value;
+      case 2:
+        document.getElementById(`client_timer${timerid}`).style.display = '';
+      case 3:
+        document.getElementById(`client_timer${timerid}`).style.display = 'none';
+    }
+  }
 
-	/**
+  /**
 	 * Handles a modcall
 	 * @param {Array} args packet arguments
 	 */
-	handleZZ(args) {
-		const oocLog = document.getElementById("client_ooclog");
-		oocLog.innerHTML += `$Alert: ${prepChat(args[1])}\r\n`;
-		if (oocLog.scrollTop > oocLog.scrollHeight - 60) {
-			oocLog.scrollTop = oocLog.scrollHeight;
-		}
-		viewport.sfxaudio.pause();
-		const oldvolume = viewport.sfxaudio.volume;
-		viewport.sfxaudio.volume = 1;
-		viewport.sfxaudio.src = AO_HOST + "sounds/general/sfx-gallery.opus";
-		viewport.sfxaudio.play();
-		viewport.sfxaudio.volume = oldvolume;
-	}
-
-	/**
+  handleZZ(args) {
+    const oocLog = document.getElementById('client_ooclog');
+    oocLog.innerHTML += `$Alert: ${prepChat(args[1])}\r\n`;
+    if (oocLog.scrollTop > oocLog.scrollHeight - 60) {
+      oocLog.scrollTop = oocLog.scrollHeight;
+    }
+    viewport.sfxaudio.pause();
+    const oldvolume = viewport.sfxaudio.volume;
+    viewport.sfxaudio.volume = 1;
+    viewport.sfxaudio.src = `${AO_HOST}sounds/general/sfx-gallery.opus`;
+    viewport.sfxaudio.play();
+    viewport.sfxaudio.volume = oldvolume;
+  }
+
+  /**
 	 * Handle the player
 	 * @param {Array} args packet arguments
 	 */
-	handleHI(args) {
-		this.sendSelf("ID#1#webAO#" + version + "#%");
-		this.sendSelf("FL#fastloading#yellowtext#cccc_ic_support#flipping#looping_sfx#effects#%");
-	}
+  handleHI(args) {
+    this.sendSelf(`ID#1#webAO#${version}#%`);
+    this.sendSelf('FL#fastloading#yellowtext#cccc_ic_support#flipping#looping_sfx#effects#%');
+  }
 
-	/**
+  /**
 	 * Identifies the server and issues a playerID
 	 * @param {Array} args packet arguments
 	 */
-	handleID(args) {
-		this.playerID = Number(args[1]);
-		this.serverSoftware = args[2].split("&")[0];
-		if (this.serverSoftware === "serverD")
-			this.serverVersion = args[2].split("&")[1];
-		else if (this.serverSoftware === "webAO") {
-			oldLoading = false;
-			this.sendSelf("PN#0#1#%");
-		} else
-			this.serverVersion = args[3];
-
-		if (this.serverSoftware === "serverD" && this.serverVersion === "1377.152")
-			oldLoading = true; // bugged version
-	}
-
-	/**
+  handleID(args) {
+    this.playerID = Number(args[1]);
+    this.serverSoftware = args[2].split('&')[0];
+    if (this.serverSoftware === 'serverD') { this.serverVersion = args[2].split('&')[1]; } else if (this.serverSoftware === 'webAO') {
+      oldLoading = false;
+      this.sendSelf('PN#0#1#%');
+    } else { this.serverVersion = args[3]; }
+
+    if (this.serverSoftware === 'serverD' && this.serverVersion === '1377.152') { oldLoading = true; } // bugged version
+  }
+
+  /**
 	 * Indicates how many users are on this server
 	 * @param {Array} args packet arguments
 	 */
-	handlePN(_args) {
-		this.sendServer("askchaa#%");
-	}
+  handlePN(_args) {
+    this.sendServer('askchaa#%');
+  }
 
-	/**
+  /**
 	 * What? you want a character??
 	 * @param {Array} args packet arguments
 	 */
-	handleCC(args) {
-		this.sendSelf("PV#1#CID#" + args[2] + "#%");
-	}
+  handleCC(args) {
+    this.sendSelf(`PV#1#CID#${args[2]}#%`);
+  }
 
-	/**
+  /**
 	 * What? you want a character list from me??
 	 * @param {Array} args packet arguments
 	 */
-	handleaskchaa(_args) {
-		this.sendSelf("SI#" + vanilla_character_arr.length + "#0#0#%");
-	}
+  handleaskchaa(_args) {
+    this.sendSelf(`SI#${vanilla_character_arr.length}#0#0#%`);
+  }
 
-	/**
+  /**
 	 * Handle the change of players in an area.
 	 * @param {Array} args packet arguments
 	 */
-	handleARUP(args) {
-		args = args.slice(1);
-		for (let i = 0; i < args.length - 2; i++) {
-			if (this.areas[i]) { // the server sends us ARUP before we even get the area list
-				const thisarea = document.getElementById("area" + i);
-				switch (Number(args[0])) {
-					case 0: // playercount				
-						this.areas[i].players = Number(args[i+1]);
-						break;
-					case 1: // status
-						this.areas[i].status = safe_tags(args[i+1]);
-						break;
-					case 2:
-						this.areas[i].cm = safe_tags(args[i+1]);
-						break;
-					case 3:
-						this.areas[i].locked = safe_tags(args[i+1]);
-						break;
-				}
-
-				thisarea.classList = "area-button area-" + this.areas[i].status.toLowerCase();
-
-				thisarea.innerText = `${this.areas[i].name} (${this.areas[i].players}) [${this.areas[i].status}]`;
-
-				thisarea.title = `Players: ${this.areas[i].players}\n` +
-					`Status: ${this.areas[i].status}\n` +
-					`CM: ${this.areas[i].cm}\n` +
-					`Area lock: ${this.areas[i].locked}`;
-			}
-		}
-	}
-
-	/**
+  handleARUP(args) {
+    args = args.slice(1);
+    for (let i = 0; i < args.length - 2; i++) {
+      if (this.areas[i]) { // the server sends us ARUP before we even get the area list
+        const thisarea = document.getElementById(`area${i}`);
+        switch (Number(args[0])) {
+          case 0: // playercount
+            this.areas[i].players = Number(args[i + 1]);
+            break;
+          case 1: // status
+            this.areas[i].status = safe_tags(args[i + 1]);
+            break;
+          case 2:
+            this.areas[i].cm = safe_tags(args[i + 1]);
+            break;
+          case 3:
+            this.areas[i].locked = safe_tags(args[i + 1]);
+            break;
+        }
+
+        thisarea.classList = `area-button area-${this.areas[i].status.toLowerCase()}`;
+
+        thisarea.innerText = `${this.areas[i].name} (${this.areas[i].players}) [${this.areas[i].status}]`;
+
+        thisarea.title = `Players: ${this.areas[i].players}\n`
+					+ `Status: ${this.areas[i].status}\n`
+					+ `CM: ${this.areas[i].cm}\n`
+					+ `Area lock: ${this.areas[i].locked}`;
+      }
+    }
+  }
+
+  /**
 	 * With this the server tells us which features it supports
 	 * @param {Array} args list of features
 	 */
-	handleFL(args) {
-		console.info("Server-supported features:");
-		console.info(args);
-		extrafeatures = args;
+  handleFL(args) {
+    console.info('Server-supported features:');
+    console.info(args);
+    extrafeatures = args;
 
-		if (args.includes("yellowtext")) {
-			let colorselect = document.getElementById("textcolor");
+    if (args.includes('yellowtext')) {
+      const colorselect = document.getElementById('textcolor');
 
-			colorselect.options[colorselect.options.length] = new Option("Yellow", 5);
-			colorselect.options[colorselect.options.length] = new Option("Grey", 6);
-			colorselect.options[colorselect.options.length] = new Option("Pink", 7);
-			colorselect.options[colorselect.options.length] = new Option("Cyan", 8);
-		}
+      colorselect.options[colorselect.options.length] = new Option('Yellow', 5);
+      colorselect.options[colorselect.options.length] = new Option('Grey', 6);
+      colorselect.options[colorselect.options.length] = new Option('Pink', 7);
+      colorselect.options[colorselect.options.length] = new Option('Cyan', 8);
+    }
 
-		if (args.includes("cccc_ic_support")) {
-			document.getElementById("cccc").style.display = "";
-			document.getElementById("pairing").style.display = "";
-		}
+    if (args.includes('cccc_ic_support')) {
+      document.getElementById('cccc').style.display = '';
+      document.getElementById('pairing').style.display = '';
+    }
 
-		if (args.includes("flipping")) {
-			document.getElementById("button_flip").style.display = "";
-		}
+    if (args.includes('flipping')) {
+      document.getElementById('button_flip').style.display = '';
+    }
 
-		if (args.includes("looping_sfx")) {
-			document.getElementById("button_shake").style.display = "";
-			document.getElementById("2.7").style.display = "";
-		}
+    if (args.includes('looping_sfx')) {
+      document.getElementById('button_shake').style.display = '';
+      document.getElementById('2.7').style.display = '';
+    }
 
-		if (args.includes("effects")) {
-			document.getElementById("2.8").style.display = "";
-		}
+    if (args.includes('effects')) {
+      document.getElementById('2.8').style.display = '';
+    }
 
-		if (args.includes("y_offset")) {
-			document.getElementById("y_offset").style.display = "";
-		}
-	}
+    if (args.includes('y_offset')) {
+      document.getElementById('y_offset').style.display = '';
+    }
+  }
 
-	/**
+  /**
 	 * Received when the server announces its server info,
 	 * but we use it as a cue to begin retrieving characters.
 	 * @param {Array} args packet arguments
 	 */
-	handleSI(args) {
-		this.char_list_length = Number(args[1]);
-		this.char_list_length += 1; // some servers count starting from 0 some from 1...
-		this.evidence_list_length = Number(args[2]);
-		this.music_list_length = Number(args[3]);
+  handleSI(args) {
+    this.char_list_length = Number(args[1]);
+    this.char_list_length += 1; // some servers count starting from 0 some from 1...
+    this.evidence_list_length = Number(args[2]);
+    this.music_list_length = Number(args[3]);
 
-		// create the charselect grid, to be filled by the character loader
-		document.getElementById("client_chartable").innerHTML = "";
+    // create the charselect grid, to be filled by the character loader
+    document.getElementById('client_chartable').innerHTML = '';
 
-		for (let i = 0; i < this.char_list_length; i++) {
-			const demothing = document.createElement("img");
+    for (let i = 0; i < this.char_list_length; i++) {
+      const demothing = document.createElement('img');
 
-			demothing.className = "demothing";
-			demothing.id = `demo_${i}`;
-			const demoonclick = document.createAttribute("onclick");
-			demoonclick.value = `pickChar(${i})`;
-			demothing.setAttributeNode(demoonclick);
+      demothing.className = 'demothing';
+      demothing.id = `demo_${i}`;
+      const demoonclick = document.createAttribute('onclick');
+      demoonclick.value = `pickChar(${i})`;
+      demothing.setAttributeNode(demoonclick);
 
-			document.getElementById("client_chartable").appendChild(demothing);
-		}
+      document.getElementById('client_chartable').appendChild(demothing);
+    }
 
-		// this is determined at the top of this file
-		if (!oldLoading && extrafeatures.includes("fastloading")) {
-			this.sendServer("RC#%");
-		} else {
-			this.sendServer("askchar2#%");
-		}
-	}
+    // this is determined at the top of this file
+    if (!oldLoading && extrafeatures.includes('fastloading')) {
+      this.sendServer('RC#%');
+    } else {
+      this.sendServer('askchar2#%');
+    }
+  }
 
-	/**
+  /**
 	 * Handles the list of all used and vacant characters.
 	 * @param {Array} args list of all characters represented as a 0 for free or a -1 for taken
 	 */
-	handleCharsCheck(args) {
-		for (let i = 0; i < this.char_list_length; i++) {
-			let img = document.getElementById(`demo_${i}`);
+  handleCharsCheck(args) {
+    for (let i = 0; i < this.char_list_length; i++) {
+      const img = document.getElementById(`demo_${i}`);
 
-			if (args[i + 1] === "-1")
-				img.style.opacity = 0.25;
-			else if (args[i + 1] === "0")
-				img.style.opacity = 1;			
-		}
-	}
+      if (args[i + 1] === '-1') { img.style.opacity = 0.25; } else if (args[i + 1] === '0') { img.style.opacity = 1; }
+    }
+  }
 
-	/**
+  /**
 	 * Handles the server's assignment of a character for the player to use.
 	 * PV # playerID (unused) # CID # character ID
 	 * @param {Array} args packet arguments
 	 */
-	async handlePV(args) {
-		this.charID = Number(args[3]);
-		document.getElementById("client_charselect").style.display = "none";
-
-		const me = this.character;
-		this.selectedEmote = -1;
-		const emotes = this.emotes;
-		const emotesList = document.getElementById("client_emo");
-		emotesList.style.display = "";
-		emotesList.innerHTML = ""; // Clear emote box
-		const ini = me.inifile;
-		me.side = ini.options.side;
-		updateActionCommands(me.side);
-		if(ini.emotions.number === 0) {
-			emotesList.innerHTML =
-					`<span
+  async handlePV(args) {
+    this.charID = Number(args[3]);
+    document.getElementById('client_charselect').style.display = 'none';
+
+    const me = this.character;
+    this.selectedEmote = -1;
+    const { emotes } = this;
+    const emotesList = document.getElementById('client_emo');
+    emotesList.style.display = '';
+    emotesList.innerHTML = ''; // Clear emote box
+    const ini = me.inifile;
+    me.side = ini.options.side;
+    updateActionCommands(me.side);
+    if (ini.emotions.number === 0) {
+      emotesList.innerHTML =					`<span
 					id="emo_0"
 					alt="unavailable"
 					class="emote_button">No emotes available</span>`;
-		}else{
-		for (let i = 1; i <= ini.emotions.number; i++) {
-			try {
-				const emoteinfo = ini.emotions[i].split("#");
-				let esfx;
-				let esfxd;
-				try {
-					esfx = ini.soundn[i] || "0";
-					esfxd = Number(ini.soundt[i]) || 0;
-				} catch (e) {
-					console.warn("ini sound is completly missing");
-					esfx = "0";
-					esfxd = 0;
-				}
-				// Make sure the asset server is case insensitive, or that everything on it is lowercase
-				emotes[i] = {
-					desc: emoteinfo[0].toLowerCase(),
-					preanim: emoteinfo[1].toLowerCase(),
-					emote: emoteinfo[2].toLowerCase(),
-					zoom: Number(emoteinfo[3]) || 0,
-					sfx: esfx.toLowerCase(),
-					sfxdelay: esfxd,
-					frame_screenshake: "",
-					frame_realization: "",
-					frame_sfx: "",
-					button: AO_HOST + `characters/${encodeURI(me.name.toLowerCase())}/emotions/button${i}_off.png`
-				};
-				emotesList.innerHTML +=
-					`<img src=${emotes[i].button}
+    } else {
+      for (let i = 1; i <= ini.emotions.number; i++) {
+        try {
+          const emoteinfo = ini.emotions[i].split('#');
+          let esfx;
+          let esfxd;
+          try {
+            esfx = ini.soundn[i] || '0';
+            esfxd = Number(ini.soundt[i]) || 0;
+          } catch (e) {
+            console.warn('ini sound is completly missing');
+            esfx = '0';
+            esfxd = 0;
+          }
+          // Make sure the asset server is case insensitive, or that everything on it is lowercase
+          emotes[i] = {
+            desc: emoteinfo[0].toLowerCase(),
+            preanim: emoteinfo[1].toLowerCase(),
+            emote: emoteinfo[2].toLowerCase(),
+            zoom: Number(emoteinfo[3]) || 0,
+            sfx: esfx.toLowerCase(),
+            sfxdelay: esfxd,
+            frame_screenshake: '',
+            frame_realization: '',
+            frame_sfx: '',
+            button: `${AO_HOST}characters/${encodeURI(me.name.toLowerCase())}/emotions/button${i}_off.png`,
+          };
+          emotesList.innerHTML
+					+= `<img src=${emotes[i].button}
 					id="emo_${i}"
 					alt="${emotes[i].desc}"
 					class="emote_button"
 					onclick="pickEmotion(${i})">`;
+        } catch (e) {
+          console.error(`missing emote ${i}`);
+        }
+      }
+      pickEmotion(1);
+    }
 
-			} catch (e) {
-				console.error("missing emote " + i);
-			}
-		}
-		pickEmotion(1);
-		}
-
-		if(await fileExists(AO_HOST + "characters/" + encodeURI(me.name.toLowerCase()) + "/custom.gif"))
-			document.getElementById("button_4").style.display = "";
-		else
-			document.getElementById("button_4").style.display = "none";
-
-		const iniedit_select = document.getElementById("client_ininame");
-
-		// Load iniswaps if there are any
-		try {
-			const cswapdata = await request(AO_HOST + "characters/" + encodeURI(me.name.toLowerCase()) + "/iniswaps.ini");
-			const cswap = cswapdata.split("\n");
-
-			// most iniswaps don't list their original char
-			if (cswap.length > 0) {
-				iniedit_select.innerHTML = "";
-
-				function addIniswap(value) {
-					iniedit_select.add(new Option(safe_tags(value)));
-				}
-
-				addIniswap(me.name);
-				cswap.forEach(addIniswap);
-			}
-		} catch (err) {
-			console.info("character doesn't have iniswaps");
-			this.fetchCharacterList();
-		}		
-	}
-
-	/**
+    if (await fileExists(`${AO_HOST}characters/${encodeURI(me.name.toLowerCase())}/custom.gif`)) { document.getElementById('button_4').style.display = ''; } else { document.getElementById('button_4').style.display = 'none'; }
+
+    const iniedit_select = document.getElementById('client_ininame');
+
+    // Load iniswaps if there are any
+    try {
+      const cswapdata = await request(`${AO_HOST}characters/${encodeURI(me.name.toLowerCase())}/iniswaps.ini`);
+      const cswap = cswapdata.split('\n');
+
+      // most iniswaps don't list their original char
+      if (cswap.length > 0) {
+        iniedit_select.innerHTML = '';
+
+        function addIniswap(value) {
+          iniedit_select.add(new Option(safe_tags(value)));
+        }
+
+        addIniswap(me.name);
+        cswap.forEach(addIniswap);
+      }
+    } catch (err) {
+      console.info("character doesn't have iniswaps");
+      this.fetchCharacterList();
+    }
+  }
+
+  /**
 	 * new asset url!!
 	 * @param {Array} args packet arguments
 	 */
 	 handleASS(args) {
-		AO_HOST = args[1];
-	}
+    AO_HOST = args[1];
+  }
 
-	/**
+  /**
 	 * we are asking ourselves what characters there are
 	 * @param {Array} args packet arguments
 	 */
-	handleRC(_args) {
-		this.sendSelf("SC#" + vanilla_character_arr.join("#") + "#%");
-	}
+  handleRC(_args) {
+    this.sendSelf(`SC#${vanilla_character_arr.join('#')}#%`);
+  }
 
-	/**
+  /**
 	 * we are asking ourselves what characters there are
 	 * @param {Array} args packet arguments
 	 */
-	handleRM(_args) {
-		this.sendSelf("SM#" + vanilla_music_arr.join("#") + "#%");
-	}
+  handleRM(_args) {
+    this.sendSelf(`SM#${vanilla_music_arr.join('#')}#%`);
+  }
 
-	/**
+  /**
 	 * we are asking ourselves what characters there are
 	 * @param {Array} args packet arguments
 	 */
-	handleRD(_args) {
-		this.sendSelf("BN#gs4#%");
-		this.sendSelf("DONE#%");
-		const ooclog = document.getElementById("client_ooclog");
-		ooclog.value = "";
-		ooclog.readOnly = false;
+  handleRD(_args) {
+    this.sendSelf('BN#gs4#%');
+    this.sendSelf('DONE#%');
+    const ooclog = document.getElementById('client_ooclog');
+    ooclog.value = '';
+    ooclog.readOnly = false;
 
-		document.getElementById("client_oocinput").style.display = "none";
-		document.getElementById("client_replaycontrols").style.display = "inline-block";
-	}
+    document.getElementById('client_oocinput').style.display = 'none';
+    document.getElementById('client_replaycontrols').style.display = 'inline-block';
+  }
 }
 
 class Viewport {
-	constructor() {
-		this.textnow = "";
-		this.chatmsg = {
-			"content": "",
-			"objection": 0,
-			"sound": "",
-			"startpreanim": true,
-			"startspeaking": false,
-			"side": null,
-			"color": 0,
-			"snddelay": 0,
-			"preanimdelay": 0
-		};
-
-		this.shouts = [
-			undefined,
-			"holdit",
-			"objection",
-			"takethat",
-			"custom"
-		];
-
-		this.colors = [
-			"white",
-			"green",
-			"red",
-			"orange",
-			"blue",
-			"yellow",
-			"pink",
-			"cyan",
-			"grey"
-		];
-
-		// Allocate multiple blip audio channels to make blips less jittery
-
-		this.blipChannels = new Array(  new Audio(AO_HOST + "sounds/general/sfx-blipmale.opus"),
-										new Audio(AO_HOST + "sounds/general/sfx-blipmale.opus"),
-										new Audio(AO_HOST + "sounds/general/sfx-blipmale.opus"),
-										new Audio(AO_HOST + "sounds/general/sfx-blipmale.opus"),
-										new Audio(AO_HOST + "sounds/general/sfx-blipmale.opus"),
-										new Audio(AO_HOST + "sounds/general/sfx-blipmale.opus"));
-		this.blipChannels.forEach(channel => channel.volume = 0.5);
-		this.blipChannels.forEach(channel => channel.onerror = opusCheck(channel));
-		this.currentBlipChannel = 0;
-
-		this.sfxaudio = document.getElementById("client_sfxaudio");
-		this.sfxaudio.src = `${AO_HOST}sounds/general/sfx-realization.opus`;
-
-		this.sfxplayed = 0;
-
-		this.shoutaudio = document.getElementById("client_shoutaudio");
-		this.shoutaudio.src = `${AO_HOST}misc/default/objection.opus`;
-
-		this.testimonyAudio = document.getElementById("client_testimonyaudio");
-		this.testimonyAudio.src = `${AO_HOST}sounds/general/sfx-guilty.opus`;
-
-		this.music = new Array( new Audio(`${AO_HOST}sounds/music/trial (aa).opus`),
-								new Audio(`${AO_HOST}sounds/music/trial (aa).opus`),
-								new Audio(`${AO_HOST}sounds/music/trial (aa).opus`),
-								new Audio(`${AO_HOST}sounds/music/trial (aa).opus`));
-		this.music.forEach(channel => channel.volume = 0.5);
-		this.music.forEach(channel => channel.onerror = opusCheck(channel));
-
-		this.updater = null;
-		this.testimonyUpdater = null;
-
-		this.bgname = "gs4";
-
-		this.lastChar = "";
-		this.lastEvi = 0;
-
-		this.testimonyTimer = 0;
-		this.shoutTimer = 0;
-		this.textTimer = 0;
-
-		this._animating = false;
-	}
-
-	/**
+  constructor() {
+    this.textnow = '';
+    this.chatmsg = {
+      content: '',
+      objection: 0,
+      sound: '',
+      startpreanim: true,
+      startspeaking: false,
+      side: null,
+      color: 0,
+      snddelay: 0,
+      preanimdelay: 0,
+    };
+
+    this.shouts = [
+      undefined,
+      'holdit',
+      'objection',
+      'takethat',
+      'custom',
+    ];
+
+    this.colors = [
+      'white',
+      'green',
+      'red',
+      'orange',
+      'blue',
+      'yellow',
+      'pink',
+      'cyan',
+      'grey',
+    ];
+
+    // Allocate multiple blip audio channels to make blips less jittery
+
+    this.blipChannels = new Array(
+      new Audio(`${AO_HOST}sounds/general/sfx-blipmale.opus`),
+      new Audio(`${AO_HOST}sounds/general/sfx-blipmale.opus`),
+      new Audio(`${AO_HOST}sounds/general/sfx-blipmale.opus`),
+      new Audio(`${AO_HOST}sounds/general/sfx-blipmale.opus`),
+      new Audio(`${AO_HOST}sounds/general/sfx-blipmale.opus`),
+      new Audio(`${AO_HOST}sounds/general/sfx-blipmale.opus`),
+    );
+    this.blipChannels.forEach((channel) => channel.volume = 0.5);
+    this.blipChannels.forEach((channel) => channel.onerror = opusCheck(channel));
+    this.currentBlipChannel = 0;
+
+    this.sfxaudio = document.getElementById('client_sfxaudio');
+    this.sfxaudio.src = `${AO_HOST}sounds/general/sfx-realization.opus`;
+
+    this.sfxplayed = 0;
+
+    this.shoutaudio = document.getElementById('client_shoutaudio');
+    this.shoutaudio.src = `${AO_HOST}misc/default/objection.opus`;
+
+    this.testimonyAudio = document.getElementById('client_testimonyaudio');
+    this.testimonyAudio.src = `${AO_HOST}sounds/general/sfx-guilty.opus`;
+
+    this.music = new Array(
+      new Audio(`${AO_HOST}sounds/music/trial (aa).opus`),
+      new Audio(`${AO_HOST}sounds/music/trial (aa).opus`),
+      new Audio(`${AO_HOST}sounds/music/trial (aa).opus`),
+      new Audio(`${AO_HOST}sounds/music/trial (aa).opus`),
+    );
+    this.music.forEach((channel) => channel.volume = 0.5);
+    this.music.forEach((channel) => channel.onerror = opusCheck(channel));
+
+    this.updater = null;
+    this.testimonyUpdater = null;
+
+    this.bgname = 'gs4';
+
+    this.lastChar = '';
+    this.lastEvi = 0;
+
+    this.testimonyTimer = 0;
+    this.shoutTimer = 0;
+    this.textTimer = 0;
+
+    this._animating = false;
+  }
+
+  /**
 	 * Returns whether or not the viewport is busy
 	 * performing a task (animating).
 	 */
-	get isAnimating() {
-		return this._animating;
-	}
+  get isAnimating() {
+    return this._animating;
+  }
 
-	/**
+  /**
 	 * Sets the volume of the blip sounds.
 	 * @param {number} volume
 	 */
-	set blipVolume(volume) {
-		this.blipChannels.forEach(channel => channel.volume = volume);
-	}
+  set blipVolume(volume) {
+    this.blipChannels.forEach((channel) => channel.volume = volume);
+  }
 
-	/**
+  /**
 	 * Sets the volume of the music.
 	 * @param {number} volume
 	 */
-	set musicVolume(volume) {
-		this.music.forEach(channel => channel.volume = volume);
-	}
+  set musicVolume(volume) {
+    this.music.forEach((channel) => channel.volume = volume);
+  }
 
-	/**
+  /**
 	 * Returns the path which the background is located in.
 	 */
-	get bgFolder() {
-		return `${AO_HOST}background/${encodeURI(this.bgname.toLowerCase())}/`;
-	}
-
+  get bgFolder() {
+    return `${AO_HOST}background/${encodeURI(this.bgname.toLowerCase())}/`;
+  }
 
-	/**
+  /**
 	 * Play any SFX
-	 * 
+	 *
 	 * @param {string} sfxname
 	 */
-	async playSFX(sfxname, looping) {
-		this.sfxaudio.pause();
-		this.sfxaudio.loop = looping;
-		this.sfxaudio.src = sfxname;
-		this.sfxaudio.play();
-	}
+  async playSFX(sfxname, looping) {
+    this.sfxaudio.pause();
+    this.sfxaudio.loop = looping;
+    this.sfxaudio.src = sfxname;
+    this.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
  */
-async changeBackground(position) {
-	const bgfolder = viewport.bgFolder;
-
-	const view = document.getElementById("client_fullview");
-	const bench = document.getElementById("client_bench_classic");
-	const court = document.getElementById("client_court_classic");
-
-	const positions = {
-		def: {
-			bg: "defenseempty.png",
-			desk: { ao2: "defensedesk.png", ao1: "bancodefensa.png" },
-			speedLines: "defense_speedlines.gif"
-		},
-		pro: {
-			bg: "prosecutionempty.png",
-			desk: { ao2: "prosecutiondesk.png", ao1: "bancoacusacion.png" },
-			speedLines: "prosecution_speedlines.gif"
-		},
-		hld: {
-			bg: "helperstand.png",
-			desk: null,
-			speedLines: "defense_speedlines.gif"
-		},
-		hlp: {
-			bg: "prohelperstand.png",
-			desk: null,
-			speedLines: "prosecution_speedlines.gif"
-		},
-		wit: {
-			bg: "witnessempty.png",
-			desk: { ao2: "stand.png", ao1: "estrado.png" },
-			speedLines: "prosecution_speedlines.gif"
-		},
-		jud: {
-			bg: "judgestand.png",
-			desk: { ao2: "judgedesk.png", ao1: "judgedesk.gif" },
-			speedLines: "prosecution_speedlines.gif"
-		},
-		jur: {
-			bg: "jurystand.png",
-			desk: { ao2: "jurydesk.png", ao1: "estrado.png" },
-			speedLines: "defense_speedlines.gif"
-		},
-		sea: {
-			bg: "seancestand.png",
-			desk: { ao2: "seancedesk.png", ao1: "estrado.png" },
-			speedLines: "prosecution_speedlines.gif"
-		}
-	};
-
-	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 + ".png";
-		desk = { ao2: position + "_overlay.png", ao1: "_overlay.png" };
-		speedLines = "defense_speedlines.gif";
-	}
-
-	if (viewport.chatmsg.type === 5) {
-		court.src = `${AO_HOST}themes/default/${encodeURI(speedLines)}`;
-		bench.style.opacity = 0;
-	} else {
-		court.src = bgfolder + bg;
-		if (desk) {
-			const deskFilename = await fileExists(bgfolder + desk.ao2) ? desk.ao2 : desk.ao1;
-			bench.src = bgfolder + deskFilename;
-			bench.style.opacity = 1;
-		} else {
-			bench.style.opacity = 0;
-		}
-	}
-
-	if ( "def,pro,wit".includes(position)) {
-		bench.style.display = "none";
-		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 {
-		bench.style.display = "";
-		view.style.display = "none";	
-		document.getElementById("client_classicview").style.display = "";
-	}
-}
-
-	/**
-	 * Intialize testimony updater 
-	 */
-	initTestimonyUpdater() {
-		const testimonyFilenames = {
-			1: "witnesstestimony",
-			2: "crossexamination",
-			3: "notguilty",
-			4: "guilty"
-		};
-
-		const testimony = testimonyFilenames[client.testimonyID];
-		if (!testimony) {
-			console.warn(`Invalid testimony ID ${client.testimonyID}`);
-			return;
-		}
-
-		this.testimonyAudio.src = client.resources[testimony].sfx;
-		this.testimonyAudio.play();
-
-		const testimonyOverlay = document.getElementById("client_testimony");
-		testimonyOverlay.src = client.resources[testimony].src;
-		testimonyOverlay.style.opacity = 1;
-
-		this.testimonyTimer = 0;
-		this.testimonyUpdater = setTimeout(() => this.updateTestimony(), UPDATE_INTERVAL);
-	}
-
-	/**
+  async changeBackground(position) {
+    const bgfolder = viewport.bgFolder;
+
+    const view = document.getElementById('client_fullview');
+    const bench = document.getElementById('client_bench_classic');
+    const court = document.getElementById('client_court_classic');
+
+    const positions = {
+      def: {
+        bg: 'defenseempty.png',
+        desk: { ao2: 'defensedesk.png', ao1: 'bancodefensa.png' },
+        speedLines: 'defense_speedlines.gif',
+      },
+      pro: {
+        bg: 'prosecutionempty.png',
+        desk: { ao2: 'prosecutiondesk.png', ao1: 'bancoacusacion.png' },
+        speedLines: 'prosecution_speedlines.gif',
+      },
+      hld: {
+        bg: 'helperstand.png',
+        desk: null,
+        speedLines: 'defense_speedlines.gif',
+      },
+      hlp: {
+        bg: 'prohelperstand.png',
+        desk: null,
+        speedLines: 'prosecution_speedlines.gif',
+      },
+      wit: {
+        bg: 'witnessempty.png',
+        desk: { ao2: 'stand.png', ao1: 'estrado.png' },
+        speedLines: 'prosecution_speedlines.gif',
+      },
+      jud: {
+        bg: 'judgestand.png',
+        desk: { ao2: 'judgedesk.png', ao1: 'judgedesk.gif' },
+        speedLines: 'prosecution_speedlines.gif',
+      },
+      jur: {
+        bg: 'jurystand.png',
+        desk: { ao2: 'jurydesk.png', ao1: 'estrado.png' },
+        speedLines: 'defense_speedlines.gif',
+      },
+      sea: {
+        bg: 'seancestand.png',
+        desk: { ao2: 'seancedesk.png', ao1: 'estrado.png' },
+        speedLines: 'prosecution_speedlines.gif',
+      },
+    };
+
+    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}.png`;
+      desk = { ao2: `${position}_overlay.png`, ao1: '_overlay.png' };
+      speedLines = 'defense_speedlines.gif';
+    }
+
+    if (viewport.chatmsg.type === 5) {
+      court.src = `${AO_HOST}themes/default/${encodeURI(speedLines)}`;
+      bench.style.opacity = 0;
+    } else {
+      court.src = bgfolder + bg;
+      if (desk) {
+        const deskFilename = await fileExists(bgfolder + desk.ao2) ? desk.ao2 : desk.ao1;
+        bench.src = bgfolder + deskFilename;
+        bench.style.opacity = 1;
+      } else {
+        bench.style.opacity = 0;
+      }
+    }
+
+    if ('def,pro,wit'.includes(position)) {
+      bench.style.display = 'none';
+      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 {
+      bench.style.display = '';
+      view.style.display = 'none';
+      document.getElementById('client_classicview').style.display = '';
+    }
+  }
+
+  /**
+	 * Intialize testimony updater
+	 */
+  initTestimonyUpdater() {
+    const testimonyFilenames = {
+      1: 'witnesstestimony',
+      2: 'crossexamination',
+      3: 'notguilty',
+      4: 'guilty',
+    };
+
+    const testimony = testimonyFilenames[client.testimonyID];
+    if (!testimony) {
+      console.warn(`Invalid testimony ID ${client.testimonyID}`);
+      return;
+    }
+
+    this.testimonyAudio.src = client.resources[testimony].sfx;
+    this.testimonyAudio.play();
+
+    const testimonyOverlay = document.getElementById('client_testimony');
+    testimonyOverlay.src = client.resources[testimony].src;
+    testimonyOverlay.style.opacity = 1;
+
+    this.testimonyTimer = 0;
+    this.testimonyUpdater = setTimeout(() => this.updateTestimony(), UPDATE_INTERVAL);
+  }
+
+  /**
 	 * Gets animation length. If the animation cannot be found, it will
 	 * silently fail and return 0 instead.
 	 * @param {string} filename the animation file name
 	 */
-	async getAnimLength(filename) {
-		try {
-			const file = await requestBuffer(filename);
-			return this.calculateGifLength(file);
-		} catch (err) {
-			return 0;
-		}
-	}
-
-	oneSuccess(promises){
-		return Promise.all(promises.map(p => {
-		// If a request fails, count that as a resolution so it will keep
-		// waiting for other possible successes. If a request succeeds,
-		// treat it as a rejection so Promise.all immediately bails out.
-		return p.then(
-			val => Promise.reject(val),
-			err => Promise.resolve(err)
-		);
-		})).then(
-		// If '.all' resolved, we've just got an array of errors.
-		errors => Promise.reject(errors),
-		// If '.all' rejected, we've got the result we wanted.
-		val => Promise.resolve(val)
-		);
-	}
-
-	rejectOnError(f) {
-		return new Promise((resolve, reject) =>
-			f.then((res) => {
-				if (res.ok) resolve(f);
-				else reject(f);
-			})
-		);
-	}
-
-	/**
+  async getAnimLength(filename) {
+    try {
+      const file = await requestBuffer(filename);
+      return this.calculateGifLength(file);
+    } catch (err) {
+      return 0;
+    }
+  }
+
+  oneSuccess(promises) {
+    return Promise.all(promises.map((p) =>
+    // If a request fails, count that as a resolution so it will keep
+    // waiting for other possible successes. If a request succeeds,
+    // treat it as a rejection so Promise.all immediately bails out.
+		 p.then(
+        (val) => Promise.reject(val),
+        (err) => Promise.resolve(err),
+      ))).then(
+      // If '.all' resolved, we've just got an array of errors.
+      (errors) => Promise.reject(errors),
+      // If '.all' rejected, we've got the result we wanted.
+      (val) => Promise.resolve(val),
+    );
+  }
+
+  rejectOnError(f) {
+    return new Promise((resolve, reject) => f.then((res) => {
+      if (res.ok) resolve(f);
+      else reject(f);
+    }));
+  }
+
+  /**
 	 * Adds up the frame delays to find out how long a GIF is
 	 * I totally didn't steal this
 	 * @param {data} gifFile the GIF data
 	 */
-	calculateGifLength(gifFile) {
-		let d = new Uint8Array(gifFile);
-		// Thanks to http://justinsomnia.org/2006/10/gif-animation-duration-calculation/
-		// And http://www.w3.org/Graphics/GIF/spec-gif89a.txt
-		let duration = 0;
-		for (var i = 0; i < d.length; i++) {
-			// Find a Graphic Control Extension hex(21F904__ ____ __00)
-			if (d[i] === 0x21
+  calculateGifLength(gifFile) {
+    const d = new Uint8Array(gifFile);
+    // Thanks to http://justinsomnia.org/2006/10/gif-animation-duration-calculation/
+    // And http://www.w3.org/Graphics/GIF/spec-gif89a.txt
+    let duration = 0;
+    for (let i = 0; i < d.length; i++) {
+      // Find a Graphic Control Extension hex(21F904__ ____ __00)
+      if (d[i] === 0x21
 				&& d[i + 1] === 0xF9
 				&& d[i + 2] === 0x04
 				&& d[i + 7] === 0x00) {
-				// Swap 5th and 6th bytes to get the delay per frame
-				let delay = (d[i + 5] << 8) | (d[i + 4] & 0xFF);
-
-				// Should be aware browsers have a minimum frame delay 
-				// e.g. 6ms for IE, 2ms modern browsers (50fps)
-				duration += delay < 2 ? 10 : delay;
-			}
-		}
-		return duration * 10;
-	}
-
-	/**
+        // Swap 5th and 6th bytes to get the delay per frame
+        const delay = (d[i + 5] << 8) | (d[i + 4] & 0xFF);
+
+        // Should be aware browsers have a minimum frame delay
+        // e.g. 6ms for IE, 2ms modern browsers (50fps)
+        duration += delay < 2 ? 10 : delay;
+      }
+    }
+    return duration * 10;
+  }
+
+  /**
 	 * Updates the testimony overaly
 	 */
-	updateTestimony() {
-		const testimonyFilenames = {
-			1: "witnesstestimony",
-			2: "crossexamination",
-			3: "notguilty",
-			4: "guilty"
-		};
-
-		// Update timer
-		this.testimonyTimer = this.testimonyTimer + UPDATE_INTERVAL;
-
-		const testimony = testimonyFilenames[client.testimonyID];
-		const resource = client.resources[testimony];
-		if (!resource) {
-			this.disposeTestimony();
-			return;
-		}
-
-		if (this.testimonyTimer >= resource.duration) {
-			this.disposeTestimony();
-		} else {
-			this.testimonyUpdater = setTimeout(() => this.updateTestimony(), UPDATE_INTERVAL);
-		}
-	}
-
-	/**
+  updateTestimony() {
+    const testimonyFilenames = {
+      1: 'witnesstestimony',
+      2: 'crossexamination',
+      3: 'notguilty',
+      4: 'guilty',
+    };
+
+    // Update timer
+    this.testimonyTimer += UPDATE_INTERVAL;
+
+    const testimony = testimonyFilenames[client.testimonyID];
+    const resource = client.resources[testimony];
+    if (!resource) {
+      this.disposeTestimony();
+      return;
+    }
+
+    if (this.testimonyTimer >= resource.duration) {
+      this.disposeTestimony();
+    } else {
+      this.testimonyUpdater = setTimeout(() => this.updateTestimony(), UPDATE_INTERVAL);
+    }
+  }
+
+  /**
 	 * Dispose the testimony overlay
 	 */
-	disposeTestimony() {
-		client.testimonyID = 0;
-		this.testimonyTimer = 0;
-		document.getElementById("client_testimony").style.opacity = 0;
-		clearTimeout(this.testimonyUpdater);
-	}
+  disposeTestimony() {
+    client.testimonyID = 0;
+    this.testimonyTimer = 0;
+    document.getElementById('client_testimony').style.opacity = 0;
+    clearTimeout(this.testimonyUpdater);
+  }
 
-	/**
+  /**
 	 * Sets all the img tags to the right sources
-	 * @param {*} chatmsg 
-	 */
-	setEmote(charactername, emotename, prefix, pair, side) {
-		const pairID = pair ? "pair" : "char";
-		const characterFolder = AO_HOST + "characters/";
-		const position = "def,pro,wit".includes(side) ? side+"_" : ""
-
-		const  gif_s = document.getElementById("client_" + position + pairID + "_gif");
-		const  png_s = document.getElementById("client_" + position + pairID + "_png");
-		const apng_s = document.getElementById("client_" + position + pairID +"_apng");
-		const webp_s = document.getElementById("client_" + position + pairID +"_webp");
-
-		if (this.lastChar !== this.chatmsg.name) {
-			//hide the last sprite
-			gif_s.src = transparentPNG;
-			png_s.src = transparentPNG;
-			apng_s.src = transparentPNG;
-			webp_s.src = transparentPNG;
-		}
-
-		gif_s.src = characterFolder + `${encodeURI(charactername)}/${encodeURI(prefix)}${encodeURI(emotename)}.gif`;
-		png_s.src = characterFolder + `${encodeURI(charactername)}/${encodeURI(emotename)}.png`;
-		apng_s.src = characterFolder + `${encodeURI(charactername)}/${encodeURI(prefix)}${encodeURI(emotename)}.apng`;
-		webp_s.src = characterFolder + `${encodeURI(charactername)}/${encodeURI(prefix)}${encodeURI(emotename)}.webp`;
-	}
-
-	/**
+	 * @param {*} chatmsg
+	 */
+  setEmote(charactername, emotename, prefix, pair, side) {
+    const pairID = pair ? 'pair' : 'char';
+    const characterFolder = `${AO_HOST}characters/`;
+    const position = 'def,pro,wit'.includes(side) ? `${side}_` : '';
+
+    const gif_s = document.getElementById(`client_${position}${pairID}_gif`);
+    const png_s = document.getElementById(`client_${position}${pairID}_png`);
+    const apng_s = document.getElementById(`client_${position}${pairID}_apng`);
+    const webp_s = document.getElementById(`client_${position}${pairID}_webp`);
+
+    if (this.lastChar !== this.chatmsg.name) {
+      // hide the last sprite
+      gif_s.src = transparentPNG;
+      png_s.src = transparentPNG;
+      apng_s.src = transparentPNG;
+      webp_s.src = transparentPNG;
+    }
+
+    gif_s.src = `${characterFolder}${encodeURI(charactername)}/${encodeURI(prefix)}${encodeURI(emotename)}.gif`;
+    png_s.src = `${characterFolder}${encodeURI(charactername)}/${encodeURI(emotename)}.png`;
+    apng_s.src = `${characterFolder}${encodeURI(charactername)}/${encodeURI(prefix)}${encodeURI(emotename)}.apng`;
+    webp_s.src = `${characterFolder}${encodeURI(charactername)}/${encodeURI(prefix)}${encodeURI(emotename)}.webp`;
+  }
+
+  /**
 	 * 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
 	 */
-	async say(chatmsg) {
-		this.chatmsg = chatmsg;
-		this.textnow = "";
-		this.sfxplayed = 0;
-		this.textTimer = 0;
-		this._animating = true;
-		let charLayers = document.getElementById("client_char");
-		let pairLayers = document.getElementById("client_pair_char");
-
-		// stop updater
-		clearTimeout(this.updater);
-
-		// stop last sfx from looping any longer
-		this.sfxaudio.loop = false;
-
-		const fg = 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 (this.lastEvi !== this.chatmsg.evidence) {
-			eviBox.style.opacity = "0";
-			eviBox.style.height = "0%";	
-		}
-		this.lastEvi = this.chatmsg.evidence;
-
-		if ( "def,pro,wit".includes(this.chatmsg.side)) {
-			charLayers = document.getElementById("client_"+this.chatmsg.side+"_char");
-			pairLayers = document.getElementById("client_"+this.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 = (document.getElementById("showname").checked && this.chatmsg.showname !== "") ? this.chatmsg.showname : this.chatmsg.nameplate;
-
-		//Clear out the last message
-		chatBoxInner.innerText = this.textnow;
-		nameBoxInner.innerText = displayname;
-		
-		if (this.lastChar !== this.chatmsg.name) {
-			charLayers.style.opacity = 0;
-			pairLayers.style.opacity = 0;
-		}
-		this.lastChar = this.chatmsg.name;
-
-		appendICLog(this.chatmsg.content, this.chatmsg.showname, this.chatmsg.nameplate);
-
-		checkCallword(this.chatmsg.content);		
-
-		this.setEmote(this.chatmsg.name.toLowerCase(), this.chatmsg.sprite, "(a)", false, this.chatmsg.side);
-
-		if (this.chatmsg.other_name) {
-			this.setEmote(this.chatmsg.other_name.toLowerCase(), this.chatmsg.other_emote, "(a)", false, this.chatmsg.side);
-		}
-
-		// gets which shout shall played
-		const shoutSprite = document.getElementById("client_shout");
-		const shout = this.shouts[this.chatmsg.objection];
-		if (shout) {
-			// Hide message box
-			chatContainerBox.style.opacity = 0;
-			if (this.chatmsg.objection === 4) {
-				shoutSprite.src = `${AO_HOST}characters/${encodeURI(this.chatmsg.name.toLowerCase())}/custom.gif`;
-			} else {
-				shoutSprite.src = client.resources[shout]["src"];
-				shoutSprite.style.animation = "bubble 700ms steps(10, jump-both)";
-			}
-			shoutSprite.style.opacity = 1;
-			
-
-			this.shoutaudio.src = `${AO_HOST}characters/${encodeURI(this.chatmsg.name.toLowerCase())}/${shout}.opus`;
-			this.shoutaudio.play();
-			this.shoutTimer = client.resources[shout]["duration"];
-		} else {
-			this.shoutTimer = 0;
-		}
-
-		this.chatmsg.startpreanim = true;
-		let gifLength = 0;
-		switch (this.chatmsg.type) {
-			// case 0:
-			// normal emote, no preanim
-			case 1:
-				// play preanim
-				// Hide message box
-				chatContainerBox.style.opacity = 0;
-				// If preanim existed then determine the length
-				gifLength = await this.getAnimLength(`${AO_HOST}characters/${encodeURI(this.chatmsg.name.toLowerCase())}/${encodeURI(this.chatmsg.preanim)}.gif`);
-				this.chatmsg.startspeaking = false;
-				break;
-			// case 5:
-			// zoom
-			default:
-				this.chatmsg.startspeaking = true;
-				break;
-		}
-		this.chatmsg.preanimdelay = parseInt(gifLength);
-
-		this.changeBackground(chatmsg.side);
-
-		setChatbox(chatmsg.chatbox);
-		resizeChatbox();
-
-		// Flip the character
-		if (this.chatmsg.flip === 1) {
-			charLayers.style.transform = "scaleX(-1)";
-		} else {
-			charLayers.style.transform = "scaleX(1)";
-		}
-
-		// Shift by the horizontal offset
-		switch(this.chatmsg.side) {
-			case "wit":
-				pairLayers.style.left = (200+Number(this.chatmsg.other_offset[0])) + "%";
-				charLayers.style.left = (200+Number(this.chatmsg.self_offset[0])) + "%";
-				break;
-			case "pro":
-				pairLayers.style.left = (400+Number(this.chatmsg.other_offset[0])) + "%";
-				charLayers.style.left = (400+Number(this.chatmsg.self_offset[0])) + "%";
-				break;
-			default:
-				pairLayers.style.left = Number(this.chatmsg.other_offset[0]) + "%";
-				charLayers.style.left = Number(this.chatmsg.self_offset[0]) + "%";
-				break;
-		}
-
-		// New vertical offsets
-		pairLayers.style.top = Number(this.chatmsg.other_offset[1]) + "%";
-		charLayers.style.top = Number(this.chatmsg.self_offset[1]) + "%";
-
-		// flip the paired character
-		if (this.chatmsg.other_flip === 1) {
-			pairLayers.style.transform = "scaleX(-1)";
-		} else {
-			pairLayers.style.transform = "scaleX(1)";
-		}
-
-		this.blipChannels.forEach(channel => channel.src = `${AO_HOST}sounds/general/sfx-blip${encodeURI(this.chatmsg.blips.toLowerCase())}.opus`);
-
-		// process markup
-		if(this.chatmsg.content.startsWith("~~")) {
-			chatBoxInner.style.textAlign = "center";
-			this.chatmsg.content = this.chatmsg.content.substring(2, this.chatmsg.content.length);
-		} else {
-			chatBoxInner.style.textAlign = "inherit";
-		}
-
-		// apply effects
-		fg.style.animation = "";
-
-		if (this.chatmsg.effects[0] && this.chatmsg.effects[0] !== "-")
-			fg.src = `${AO_HOST}themes/default/effects/${encodeURI(this.chatmsg.effects[0].toLowerCase())}.webp`;
-		else
-			fg.src = transparentPNG;
-
-		if (this.chatmsg.sound === "0" || this.chatmsg.sound === "1" || this.chatmsg.sound === "" || this.chatmsg.sound === undefined)
-			this.chatmsg.sound = this.chatmsg.effects[2];
-
-		this.tick();
-	}
-
-	/**
+  async say(chatmsg) {
+    this.chatmsg = chatmsg;
+    this.textnow = '';
+    this.sfxplayed = 0;
+    this.textTimer = 0;
+    this._animating = true;
+    let charLayers = document.getElementById('client_char');
+    let pairLayers = document.getElementById('client_pair_char');
+
+    // stop updater
+    clearTimeout(this.updater);
+
+    // stop last sfx from looping any longer
+    this.sfxaudio.loop = false;
+
+    const fg = 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 (this.lastEvi !== this.chatmsg.evidence) {
+      eviBox.style.opacity = '0';
+      eviBox.style.height = '0%';
+    }
+    this.lastEvi = this.chatmsg.evidence;
+
+    if ('def,pro,wit'.includes(this.chatmsg.side)) {
+      charLayers = document.getElementById(`client_${this.chatmsg.side}_char`);
+      pairLayers = document.getElementById(`client_${this.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 = (document.getElementById('showname').checked && this.chatmsg.showname !== '') ? this.chatmsg.showname : this.chatmsg.nameplate;
+
+    // Clear out the last message
+    chatBoxInner.innerText = this.textnow;
+    nameBoxInner.innerText = displayname;
+
+    if (this.lastChar !== this.chatmsg.name) {
+      charLayers.style.opacity = 0;
+      pairLayers.style.opacity = 0;
+    }
+    this.lastChar = this.chatmsg.name;
+
+    appendICLog(this.chatmsg.content, this.chatmsg.showname, this.chatmsg.nameplate);
+
+    checkCallword(this.chatmsg.content);
+
+    this.setEmote(this.chatmsg.name.toLowerCase(), this.chatmsg.sprite, '(a)', false, this.chatmsg.side);
+
+    if (this.chatmsg.other_name) {
+      this.setEmote(this.chatmsg.other_name.toLowerCase(), this.chatmsg.other_emote, '(a)', false, this.chatmsg.side);
+    }
+
+    // gets which shout shall played
+    const shoutSprite = document.getElementById('client_shout');
+    const shout = this.shouts[this.chatmsg.objection];
+    if (shout) {
+      // Hide message box
+      chatContainerBox.style.opacity = 0;
+      if (this.chatmsg.objection === 4) {
+        shoutSprite.src = `${AO_HOST}characters/${encodeURI(this.chatmsg.name.toLowerCase())}/custom.gif`;
+      } else {
+        shoutSprite.src = client.resources[shout].src;
+        shoutSprite.style.animation = 'bubble 700ms steps(10, jump-both)';
+      }
+      shoutSprite.style.opacity = 1;
+
+      this.shoutaudio.src = `${AO_HOST}characters/${encodeURI(this.chatmsg.name.toLowerCase())}/${shout}.opus`;
+      this.shoutaudio.play();
+      this.shoutTimer = client.resources[shout].duration;
+    } else {
+      this.shoutTimer = 0;
+    }
+
+    this.chatmsg.startpreanim = true;
+    let gifLength = 0;
+    switch (this.chatmsg.type) {
+      // case 0:
+      // normal emote, no preanim
+      case 1:
+        // play preanim
+        // Hide message box
+        chatContainerBox.style.opacity = 0;
+        // If preanim existed then determine the length
+        gifLength = await this.getAnimLength(`${AO_HOST}characters/${encodeURI(this.chatmsg.name.toLowerCase())}/${encodeURI(this.chatmsg.preanim)}.gif`);
+        this.chatmsg.startspeaking = false;
+        break;
+        // case 5:
+        // zoom
+      default:
+        this.chatmsg.startspeaking = true;
+        break;
+    }
+    this.chatmsg.preanimdelay = parseInt(gifLength);
+
+    this.changeBackground(chatmsg.side);
+
+    setChatbox(chatmsg.chatbox);
+    resizeChatbox();
+
+    // Flip the character
+    if (this.chatmsg.flip === 1) {
+      charLayers.style.transform = 'scaleX(-1)';
+    } else {
+      charLayers.style.transform = 'scaleX(1)';
+    }
+
+    // Shift by the horizontal offset
+    switch (this.chatmsg.side) {
+      case 'wit':
+        pairLayers.style.left = `${200 + Number(this.chatmsg.other_offset[0])}%`;
+        charLayers.style.left = `${200 + Number(this.chatmsg.self_offset[0])}%`;
+        break;
+      case 'pro':
+        pairLayers.style.left = `${400 + Number(this.chatmsg.other_offset[0])}%`;
+        charLayers.style.left = `${400 + Number(this.chatmsg.self_offset[0])}%`;
+        break;
+      default:
+        pairLayers.style.left = `${Number(this.chatmsg.other_offset[0])}%`;
+        charLayers.style.left = `${Number(this.chatmsg.self_offset[0])}%`;
+        break;
+    }
+
+    // New vertical offsets
+    pairLayers.style.top = `${Number(this.chatmsg.other_offset[1])}%`;
+    charLayers.style.top = `${Number(this.chatmsg.self_offset[1])}%`;
+
+    // flip the paired character
+    if (this.chatmsg.other_flip === 1) {
+      pairLayers.style.transform = 'scaleX(-1)';
+    } else {
+      pairLayers.style.transform = 'scaleX(1)';
+    }
+
+    this.blipChannels.forEach((channel) => channel.src = `${AO_HOST}sounds/general/sfx-blip${encodeURI(this.chatmsg.blips.toLowerCase())}.opus`);
+
+    // process markup
+    if (this.chatmsg.content.startsWith('~~')) {
+      chatBoxInner.style.textAlign = 'center';
+      this.chatmsg.content = this.chatmsg.content.substring(2, this.chatmsg.content.length);
+    } else {
+      chatBoxInner.style.textAlign = 'inherit';
+    }
+
+    // apply effects
+    fg.style.animation = '';
+
+    if (this.chatmsg.effects[0] && this.chatmsg.effects[0] !== '-') { fg.src = `${AO_HOST}themes/default/effects/${encodeURI(this.chatmsg.effects[0].toLowerCase())}.webp`; } else { fg.src = transparentPNG; }
+
+    if (this.chatmsg.sound === '0' || this.chatmsg.sound === '1' || this.chatmsg.sound === '' || this.chatmsg.sound === undefined) { this.chatmsg.sound = this.chatmsg.effects[2]; }
+
+    this.tick();
+  }
+
+  /**
 	 * Updates the chatbox based on the given text.
-	 * 
+	 *
 	 * OK, here's the documentation on how this works:
-	 * 
+	 *
 	 * 1 _animating
 	 * If we're not done with this characters animation, i.e. his text isn't fully there, set a timeout for the next tick/step to happen
-	 * 
+	 *
 	 * 2 startpreanim
 	 * If the shout timer is over it starts with the preanim
 	 * The first thing it checks for is the shake effect (TODO on client this is handled by the @ symbol and not a flag )
@@ -2258,200 +2253,162 @@ async changeBackground(position) {
 	 * After that, the shout image set to be transparent
 	 * and the main characters preanim gif is loaded
 	 * If pairing is supported the paired character will just stand around with his idle sprite
-	 * 
+	 *
 	 * 3 preanimdelay over
 	 * this animates the evidence popup and finally shows the character name and message box
 	 * it sets the text color and the character speaking sprite
-	 * 
+	 *
 	 * 4 textnow != content
 	 * this adds a character to the textbox and stops the animations if the entire message is present in the textbox
-	 * 
+	 *
 	 * 5 sfx
 	 * independent of the stuff above, this will play any sound effects specified by the emote the character sent.
 	 * happens after the shout delay + an sfx delay that comes with the message packet
-	 * 
+	 *
 	 * XXX: This relies on a global variable `this.chatmsg`!
 	 */
-	tick() {
-		if (this._animating) {
-			this.updater = setTimeout(() => this.tick(), UPDATE_INTERVAL);
-		}
-
-		const gamewindow = document.getElementById("client_gamewindow");
-		const waitingBox = document.getElementById("client_chatwaiting");
-		const eviBox = document.getElementById("client_evi");
-		const shoutSprite = document.getElementById("client_shout");
-		const chatBoxInner = document.getElementById("client_inner_chat");
-		const chatBox = document.getElementById("client_chat");
-		const effectlayer = document.getElementById("client_fg");
-		let charLayers = document.getElementById("client_char");
-		let pairLayers = document.getElementById("client_pair_char");
-
-		if ( "def,pro,wit".includes(this.chatmsg.side)) {
-			charLayers = document.getElementById("client_"+this.chatmsg.side+"_char");
-			pairLayers = document.getElementById("client_"+this.chatmsg.side+"_pair_char");
-		}
-
-		const charName = this.chatmsg.name.toLowerCase();
-		const charEmote = this.chatmsg.sprite.toLowerCase();
-
-		const pairName = this.chatmsg.other_name.toLowerCase();
-		const pairEmote = this.chatmsg.other_emote.toLowerCase();
-
-		// TODO: preanims sometimes play when they're not supposed to
-		if (this.textTimer >= this.shoutTimer && this.chatmsg.startpreanim) {
-			// Effect stuff
-			if (this.chatmsg.screenshake === 1) {
-				// Shake screen
-				this.playSFX(AO_HOST + "sounds/general/sfx-stab.opus", false);
-				gamewindow.style.animation = "shake 0.2s 1";
-			}
-			if (this.chatmsg.flash === 1) {
-				// Flash screen
-				this.playSFX(AO_HOST + "sounds/general/sfx-realization.opus", false);
-				effectlayer.style.animation = "flash 0.4s 1";
-			}
-
-			// Pre-animation stuff
-			if (this.chatmsg.preanimdelay > 0) {
-				shoutSprite.style.opacity = 0;
-				shoutSprite.style.animation = "";				
-				const preanim = this.chatmsg.preanim.toLowerCase();
-				this.setEmote(charName,preanim,"",false,this.chatmsg.side);
-				charLayers.style.opacity = 1;
-			}
-
-			if (this.chatmsg.other_name) {
-				pairLayers.style.opacity = 1;
-			} else {
-				pairLayers.style.opacity = 0;
-			}
-
-			this.chatmsg.startpreanim = false;
-			this.chatmsg.startspeaking = true;
-		} else if (this.textTimer >= this.shoutTimer + this.chatmsg.preanimdelay && !this.chatmsg.startpreanim) {
-			if (this.chatmsg.startspeaking) {
-				if (this.chatmsg.evidence > 0) {
-					// Prepare evidence
-					eviBox.src = safe_tags(client.evidences[this.chatmsg.evidence - 1].icon);
-
-					eviBox.style.width = "auto";
-					eviBox.style.height = "36.5%";
-					eviBox.style.opacity = 1;
-
-					this.testimonyAudio.src = AO_HOST + "sounds/general/sfx-evidenceshoop.opus";
-					this.testimonyAudio.play();
-
-					if (this.chatmsg.side === "def") {
-						// Only def show evidence on right
-						eviBox.style.right = "1em";
-						eviBox.style.left = "initial";
-					} else {
-						eviBox.style.right = "initial";
-						eviBox.style.left = "1em";
-					}
-				}
-
-				resizeChatbox();
-
-				const chatContainerBox = document.getElementById("client_chatcontainer");
-				chatContainerBox.style.opacity = 1;
-
-				chatBoxInner.className = "text_" + this.colors[this.chatmsg.color];
-
-				this.chatmsg.startspeaking = false;
-
-				if (this.chatmsg.preanimdelay === 0) {
-					shoutSprite.style.opacity = 0;
-					shoutSprite.style.animation = "";
-				}
-
-				if (this.chatmsg.other_name) {
-					this.setEmote(pairName,pairEmote,"(a)",true,this.chatmsg.side);
-					pairLayers.style.opacity = 1;
-				} else {
-					pairLayers.style.opacity = 0;
-				}
-
-				this.setEmote(charName,charEmote,"(b)",false,this.chatmsg.side);
-				charLayers.style.opacity = 1;
-
-				if (this.textnow === this.chatmsg.content) {
-					this.setEmote(charName,charEmote,"(a)",false,this.chatmsg.side);
-					charLayers.style.opacity = 1;
-					waitingBox.style.opacity = 1;
-					this._animating = false;
-					clearTimeout(this.updater);
-				}
-			} else {
-				if (this.textnow !== this.chatmsg.content) {
-					if (this.chatmsg.content.charAt(this.textnow.length) !== " ") {
-						this.blipChannels[this.currentBlipChannel].play();
-						this.currentBlipChannel++;
-						this.currentBlipChannel %= this.blipChannels.length;
-					}
-					this.textnow = this.chatmsg.content.substring(0, this.textnow.length + 1);
-
-					chatBoxInner.innerText = this.textnow;
-
-					// scroll to bottom
-					chatBox.scrollTop = chatBox.scrollHeight;
-
-					if (this.textnow === this.chatmsg.content) {
-						this._animating = false;
-						this.setEmote(charName,charEmote,"(a)",false,this.chatmsg.side);
-						charLayers.style.opacity = 1;
-						waitingBox.style.opacity = 1;
-						clearTimeout(this.updater);
-					}
-				}
-			}
-		}
-
-		if (!this.sfxplayed && this.chatmsg.snddelay + this.shoutTimer >= this.textTimer) {
-			this.sfxplayed = 1;
-			if (this.chatmsg.sound !== "0" && this.chatmsg.sound !== "1" && this.chatmsg.sound !== "" && this.chatmsg.sound !== undefined && (this.chatmsg.type == 1 || this.chatmsg.type == 2 || this.chatmsg.type == 6)) {
-				this.playSFX(AO_HOST + "sounds/general/" + encodeURI(this.chatmsg.sound.toLowerCase()) + ".opus", this.chatmsg.looping_sfx);
-			}
-		}
-		this.textTimer = this.textTimer + UPDATE_INTERVAL;
-	}
-}
-
-class INI {
-	static parse(data) {
-		const regex = {
-			section: /^\s*\[\s*([^\]]*)\s*\]\s*$/,
-			param: /^\s*([\w.\-_]+)\s*=\s*(.*?)\s*$/,
-			comment: /^\s*;.*$/
-		};
-		const value = {};
-		const lines = data.split(/\r\n|\r|\n/);
-		let section;
-		lines.forEach(function (line) {
-			if (regex.comment.test(line)) {
-				return;
-			} else if (line.length === 0) {
-				return;
-			} else if (regex.param.test(line)) {
-				const match = line.match(regex.param);
-				if (section) {
-					if (match[1].toLowerCase() === "showname") {	//don't lowercase the showname
-						value[section]["showname"] = match[2];
-					} else {
-						value[section][match[1].toLowerCase()] = match[2].toLowerCase();
-					}
-					//} else { // we don't care about attributes without a section
-					//	value[match[1]] = match[2];
-				}
-			} else if (regex.section.test(line)) {
-				const match = line.match(regex.section);
-				value[match[1].toLowerCase()] = {};				//lowercase everything else
-				section = match[1].toLowerCase();
-			}
-		});
-		return value;
-	}
+  tick() {
+    if (this._animating) {
+      this.updater = setTimeout(() => this.tick(), UPDATE_INTERVAL);
+    }
+
+    const gamewindow = document.getElementById('client_gamewindow');
+    const waitingBox = document.getElementById('client_chatwaiting');
+    const eviBox = document.getElementById('client_evi');
+    const shoutSprite = document.getElementById('client_shout');
+    const chatBoxInner = document.getElementById('client_inner_chat');
+    const chatBox = document.getElementById('client_chat');
+    const effectlayer = document.getElementById('client_fg');
+    let charLayers = document.getElementById('client_char');
+    let pairLayers = document.getElementById('client_pair_char');
+
+    if ('def,pro,wit'.includes(this.chatmsg.side)) {
+      charLayers = document.getElementById(`client_${this.chatmsg.side}_char`);
+      pairLayers = document.getElementById(`client_${this.chatmsg.side}_pair_char`);
+    }
+
+    const charName = this.chatmsg.name.toLowerCase();
+    const charEmote = this.chatmsg.sprite.toLowerCase();
+
+    const pairName = this.chatmsg.other_name.toLowerCase();
+    const pairEmote = this.chatmsg.other_emote.toLowerCase();
+
+    // TODO: preanims sometimes play when they're not supposed to
+    if (this.textTimer >= this.shoutTimer && this.chatmsg.startpreanim) {
+      // Effect stuff
+      if (this.chatmsg.screenshake === 1) {
+        // Shake screen
+        this.playSFX(`${AO_HOST}sounds/general/sfx-stab.opus`, false);
+        gamewindow.style.animation = 'shake 0.2s 1';
+      }
+      if (this.chatmsg.flash === 1) {
+        // Flash screen
+        this.playSFX(`${AO_HOST}sounds/general/sfx-realization.opus`, false);
+        effectlayer.style.animation = 'flash 0.4s 1';
+      }
+
+      // Pre-animation stuff
+      if (this.chatmsg.preanimdelay > 0) {
+        shoutSprite.style.opacity = 0;
+        shoutSprite.style.animation = '';
+        const preanim = this.chatmsg.preanim.toLowerCase();
+        this.setEmote(charName, preanim, '', false, this.chatmsg.side);
+        charLayers.style.opacity = 1;
+      }
+
+      if (this.chatmsg.other_name) {
+        pairLayers.style.opacity = 1;
+      } else {
+        pairLayers.style.opacity = 0;
+      }
+
+      this.chatmsg.startpreanim = false;
+      this.chatmsg.startspeaking = true;
+    } else if (this.textTimer >= this.shoutTimer + this.chatmsg.preanimdelay && !this.chatmsg.startpreanim) {
+      if (this.chatmsg.startspeaking) {
+        if (this.chatmsg.evidence > 0) {
+          // Prepare evidence
+          eviBox.src = safe_tags(client.evidences[this.chatmsg.evidence - 1].icon);
+
+          eviBox.style.width = 'auto';
+          eviBox.style.height = '36.5%';
+          eviBox.style.opacity = 1;
+
+          this.testimonyAudio.src = `${AO_HOST}sounds/general/sfx-evidenceshoop.opus`;
+          this.testimonyAudio.play();
+
+          if (this.chatmsg.side === 'def') {
+            // Only def show evidence on right
+            eviBox.style.right = '1em';
+            eviBox.style.left = 'initial';
+          } else {
+            eviBox.style.right = 'initial';
+            eviBox.style.left = '1em';
+          }
+        }
+
+        resizeChatbox();
+
+        const chatContainerBox = document.getElementById('client_chatcontainer');
+        chatContainerBox.style.opacity = 1;
+
+        chatBoxInner.className = `text_${this.colors[this.chatmsg.color]}`;
+
+        this.chatmsg.startspeaking = false;
+
+        if (this.chatmsg.preanimdelay === 0) {
+          shoutSprite.style.opacity = 0;
+          shoutSprite.style.animation = '';
+        }
+
+        if (this.chatmsg.other_name) {
+          this.setEmote(pairName, pairEmote, '(a)', true, this.chatmsg.side);
+          pairLayers.style.opacity = 1;
+        } else {
+          pairLayers.style.opacity = 0;
+        }
+
+        this.setEmote(charName, charEmote, '(b)', false, this.chatmsg.side);
+        charLayers.style.opacity = 1;
+
+        if (this.textnow === this.chatmsg.content) {
+          this.setEmote(charName, charEmote, '(a)', false, this.chatmsg.side);
+          charLayers.style.opacity = 1;
+          waitingBox.style.opacity = 1;
+          this._animating = false;
+          clearTimeout(this.updater);
+        }
+      } else if (this.textnow !== this.chatmsg.content) {
+        if (this.chatmsg.content.charAt(this.textnow.length) !== ' ') {
+          this.blipChannels[this.currentBlipChannel].play();
+          this.currentBlipChannel++;
+          this.currentBlipChannel %= this.blipChannels.length;
+        }
+        this.textnow = this.chatmsg.content.substring(0, this.textnow.length + 1);
+
+        chatBoxInner.innerText = this.textnow;
+
+        // scroll to bottom
+        chatBox.scrollTop = chatBox.scrollHeight;
+
+        if (this.textnow === this.chatmsg.content) {
+          this._animating = false;
+          this.setEmote(charName, charEmote, '(a)', false, this.chatmsg.side);
+          charLayers.style.opacity = 1;
+          waitingBox.style.opacity = 1;
+          clearTimeout(this.updater);
+        }
+      }
+    }
+
+    if (!this.sfxplayed && this.chatmsg.snddelay + this.shoutTimer >= this.textTimer) {
+      this.sfxplayed = 1;
+      if (this.chatmsg.sound !== '0' && this.chatmsg.sound !== '1' && this.chatmsg.sound !== '' && this.chatmsg.sound !== undefined && (this.chatmsg.type == 1 || this.chatmsg.type == 2 || this.chatmsg.type == 6)) {
+        this.playSFX(`${AO_HOST}sounds/general/${encodeURI(this.chatmsg.sound.toLowerCase())}.opus`, this.chatmsg.looping_sfx);
+      }
+    }
+    this.textTimer += UPDATE_INTERVAL;
+  }
 }
 
 /**
@@ -2461,23 +2418,23 @@ class INI {
  * @param {String} cname The name of the cookie to return
  */
 function getCookie(cname) {
-	try {
-		const name = cname + "=";
-		const decodedCookie = decodeURIComponent(document.cookie);
-		const ca = decodedCookie.split(';');
-		for (var i = 0; i < ca.length; i++) {
-			var c = ca[i];
-			while (c.charAt(0) === ' ') {
-				c = c.substring(1);
-			}
-			if (c.indexOf(name) === 0) {
-				return c.substring(name.length, c.length);
-			}
-		}
-		return "";
-	} catch (error) {
-		return "";
-	}
+  try {
+    const name = `${cname}=`;
+    const decodedCookie = decodeURIComponent(document.cookie);
+    const ca = decodedCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) === ' ') {
+        c = c.substring(1);
+      }
+      if (c.indexOf(name) === 0) {
+        return c.substring(name.length, c.length);
+      }
+    }
+    return '';
+  } catch (error) {
+    return '';
+  }
 }
 
 /**
@@ -2487,7 +2444,7 @@ function getCookie(cname) {
  * @param {String} value The value of that cookie option
  */
 function setCookie(cname, value) {
-	document.cookie = cname + "=" + value;
+  document.cookie = `${cname}=${value}`;
 }
 
 /**
@@ -2495,10 +2452,10 @@ function setCookie(cname, value) {
  * @param {KeyboardEvent} event
  */
 export function onOOCEnter(event) {
-	if (event.keyCode === 13) {
-		client.sendOOC(document.getElementById("client_oocinputbox").value);
-		document.getElementById("client_oocinputbox").value = "";
-	}
+  if (event.keyCode === 13) {
+    client.sendOOC(document.getElementById('client_oocinputbox').value);
+    document.getElementById('client_oocinputbox').value = '';
+  }
 }
 window.onOOCEnter = onOOCEnter;
 
@@ -2507,7 +2464,7 @@ window.onOOCEnter = onOOCEnter;
  * @param {KeyboardEvent} event
  */
 export function onReplayGo(_event) {
-	client.handleReplay();
+  client.handleReplay();
 }
 window.onReplayGo = onReplayGo;
 
@@ -2516,45 +2473,67 @@ window.onReplayGo = onReplayGo;
  * @param {KeyboardEvent} event
  */
 export function onEnter(event) {
-	if (event.keyCode === 13) {
-		const mychar = client.character;
-		const myemo = client.emote;
-		const evi = client.evidence;
-		const flip = ((document.getElementById("button_flip").classList.contains("dark")) ? 1 : 0);
-		const flash = ((document.getElementById("button_flash").classList.contains("dark")) ? 1 : 0);
-		const screenshake = ((document.getElementById("button_shake").classList.contains("dark")) ? 1 : 0);
-		const noninterrupting_preanim = ((document.getElementById("check_nonint").checked) ? 1 : 0);
-		const looping_sfx = ((document.getElementById("check_loopsfx").checked) ? 1 : 0);
-		const color = document.getElementById("textcolor").value;
-		const showname = document.getElementById("ic_chat_name").value;
-		const text = document.getElementById("client_inputbox").value;
-		const pairchar = document.getElementById("pair_select").value;
-		const pairoffset = document.getElementById("pair_offset").value;
-		const pairyoffset = document.getElementById("pair_y_offset").value;
-		const myrole = document.getElementById("role_select").value ? document.getElementById("role_select").value : mychar.side;
-		const additive = ((document.getElementById("check_additive").checked) ? 1 : 0);
-		const effect = document.getElementById("effect_select").value;
-
-		let sfxname = "0";
-		let sfxdelay = 0;
-		let emote_mod = myemo.zoom;
-		if (document.getElementById("sendsfx").checked) {
-			sfxname = myemo.sfx;
-			sfxdelay = myemo.sfxdelay;
-		}
-
-		// not to overwrite a 5 from the ini or anything else
-		if (document.getElementById("sendpreanim").checked) {
-			if (emote_mod === 0)
-				emote_mod = 1;
-		} else if (emote_mod === 1)
-			emote_mod = 0;		
-
-		client.sendIC("chat", myemo.preanim, mychar.name, myemo.emote,
-			text, myrole,
-			sfxname, emote_mod, sfxdelay, selectedShout, evi, flip,
-			flash, color, showname, pairchar, pairoffset, pairyoffset, noninterrupting_preanim, looping_sfx, screenshake, "-", "-", "-", additive, effect);
-	}
+  if (event.keyCode === 13) {
+    const mychar = client.character;
+    const myemo = client.emote;
+    const evi = client.evidence;
+    const flip = ((document.getElementById('button_flip').classList.contains('dark')) ? 1 : 0);
+    const flash = ((document.getElementById('button_flash').classList.contains('dark')) ? 1 : 0);
+    const screenshake = ((document.getElementById('button_shake').classList.contains('dark')) ? 1 : 0);
+    const noninterrupting_preanim = ((document.getElementById('check_nonint').checked) ? 1 : 0);
+    const looping_sfx = ((document.getElementById('check_loopsfx').checked) ? 1 : 0);
+    const color = document.getElementById('textcolor').value;
+    const showname = document.getElementById('ic_chat_name').value;
+    const text = document.getElementById('client_inputbox').value;
+    const pairchar = document.getElementById('pair_select').value;
+    const pairoffset = document.getElementById('pair_offset').value;
+    const pairyoffset = document.getElementById('pair_y_offset').value;
+    const myrole = document.getElementById('role_select').value ? document.getElementById('role_select').value : mychar.side;
+    const additive = ((document.getElementById('check_additive').checked) ? 1 : 0);
+    const effect = document.getElementById('effect_select').value;
+
+    let sfxname = '0';
+    let sfxdelay = 0;
+    let emote_mod = myemo.zoom;
+    if (document.getElementById('sendsfx').checked) {
+      sfxname = myemo.sfx;
+      sfxdelay = myemo.sfxdelay;
+    }
+
+    // not to overwrite a 5 from the ini or anything else
+    if (document.getElementById('sendpreanim').checked) {
+      if (emote_mod === 0) { emote_mod = 1; }
+    } else if (emote_mod === 1) { emote_mod = 0; }
+
+    client.sendIC(
+      'chat',
+      myemo.preanim,
+      mychar.name,
+      myemo.emote,
+      text,
+      myrole,
+      sfxname,
+      emote_mod,
+      sfxdelay,
+      selectedShout,
+      evi,
+      flip,
+      flash,
+      color,
+      showname,
+      pairchar,
+      pairoffset,
+      pairyoffset,
+      noninterrupting_preanim,
+      looping_sfx,
+      screenshake,
+      '-',
+      '-',
+      '-',
+      additive,
+      effect,
+    );
+  }
 }
 window.onEnter = onEnter;
 
@@ -2564,21 +2543,21 @@ window.onEnter = onEnter;
  * was successfully sent/presented.
  */
 function resetICParams() {
-	document.getElementById("client_inputbox").value = "";
-	document.getElementById("button_flash").className = "client_button";
-	document.getElementById("button_shake").className = "client_button";
+  document.getElementById('client_inputbox').value = '';
+  document.getElementById('button_flash').className = 'client_button';
+  document.getElementById('button_shake').className = 'client_button';
 
-	document.getElementById("sendpreanim").checked = false;
+  document.getElementById('sendpreanim').checked = false;
 
-	if (selectedShout) {
-		document.getElementById("button_" + selectedShout).className = "client_button";
-		selectedShout = 0;
-	}	
+  if (selectedShout) {
+    document.getElementById(`button_${selectedShout}`).className = 'client_button';
+    selectedShout = 0;
+  }
 }
 
 export function resetOffset(_event) {
-	document.getElementById("pair_offset").value = 0;
-	document.getElementById("pair_y_offset").value = 0;
+  document.getElementById('pair_offset').value = 0;
+  document.getElementById('pair_y_offset').value = 0;
 }
 window.resetOffset = resetOffset;
 
@@ -2587,18 +2566,18 @@ window.resetOffset = resetOffset;
  * @param {MouseEvent} event
  */
 export function musiclist_filter(_event) {
-	const musiclist_element = document.getElementById("client_musiclist");
-	const searchname = document.getElementById("client_musicsearch").value;
+  const musiclist_element = document.getElementById('client_musiclist');
+  const searchname = document.getElementById('client_musicsearch').value;
 
-	musiclist_element.innerHTML = "";
+  musiclist_element.innerHTML = '';
 
-	for (const trackname of client.musics){
-		if (trackname.toLowerCase().indexOf(searchname.toLowerCase()) !== -1) { 
-			const newentry = document.createElement("OPTION");
-			newentry.text = trackname;
-			musiclist_element.options.add(newentry);
-		}
-	}		
+  for (const trackname of client.musics) {
+    if (trackname.toLowerCase().indexOf(searchname.toLowerCase()) !== -1) {
+      const newentry = document.createElement('OPTION');
+      newentry.text = trackname;
+      musiclist_element.options.add(newentry);
+    }
+  }
 }
 window.musiclist_filter = musiclist_filter;
 
@@ -2607,15 +2586,15 @@ window.musiclist_filter = musiclist_filter;
  * @param {MouseEvent} event
  */
 export function musiclist_click(_event) {
-	const playtrack = document.getElementById("client_musiclist").value;
-	client.sendMusicChange(playtrack);
+  const playtrack = document.getElementById('client_musiclist').value;
+  client.sendMusicChange(playtrack);
 
-	// This is here so you can't actually select multiple tracks,
-	// even though the select tag has the multiple option to render differently
-	let musiclist_elements = document.getElementById("client_musiclist").selectedOptions;
-	for (let i = 0; i < musiclist_elements.length; i++) {
-		musiclist_elements[i].selected = false;
-	}
+  // This is here so you can't actually select multiple tracks,
+  // even though the select tag has the multiple option to render differently
+  const musiclist_elements = document.getElementById('client_musiclist').selectedOptions;
+  for (let i = 0; i < musiclist_elements.length; i++) {
+    musiclist_elements[i].selected = false;
+  }
 }
 window.musiclist_click = musiclist_click;
 
@@ -2624,17 +2603,17 @@ window.musiclist_click = musiclist_click;
  * @param {MouseEvent} event
  */
 export function mutelist_click(_event) {
-	const mutelist = document.getElementById("mute_select");
-	const selected_character = mutelist.options[mutelist.selectedIndex];
-
-	if (client.chars[selected_character.value].muted === false) {
-		client.chars[selected_character.value].muted = true;
-		selected_character.text = client.chars[selected_character.value].name + " (muted)";
-		console.info("muted " + client.chars[selected_character.value].name);
-	} else {
-		client.chars[selected_character.value].muted = false;
-		selected_character.text = client.chars[selected_character.value].name;
-	}
+  const mutelist = document.getElementById('mute_select');
+  const selected_character = mutelist.options[mutelist.selectedIndex];
+
+  if (client.chars[selected_character.value].muted === false) {
+    client.chars[selected_character.value].muted = true;
+    selected_character.text = `${client.chars[selected_character.value].name} (muted)`;
+    console.info(`muted ${client.chars[selected_character.value].name}`);
+  } else {
+    client.chars[selected_character.value].muted = false;
+    selected_character.text = client.chars[selected_character.value].name;
+  }
 }
 window.mutelist_click = mutelist_click;
 
@@ -2643,15 +2622,12 @@ window.mutelist_click = mutelist_click;
  * @param {MouseEvent} event
  */
 export function showname_click(_event) {
-	setCookie("showname", document.getElementById("showname").checked);
-	setCookie("ic_chat_name", document.getElementById("ic_chat_name").value);
+  setCookie('showname', document.getElementById('showname').checked);
+  setCookie('ic_chat_name', document.getElementById('ic_chat_name').value);
 
-	const css_s = document.getElementById("nameplate_setting");
+  const css_s = document.getElementById('nameplate_setting');
 
-	if (document.getElementById("showname").checked)
-		css_s.href = "styles/shownames.css";
-	else
-		css_s.href = "styles/nameplates.css";
+  if (document.getElementById('showname').checked) { css_s.href = 'styles/shownames.css'; } else { css_s.href = 'styles/nameplates.css'; }
 }
 window.showname_click = showname_click;
 
@@ -2660,13 +2636,13 @@ window.showname_click = showname_click;
  * @param {MouseEvent} event
  */
 export function area_click(el) {
-	const area = client.areas[el.id.substr(4)].name;
-	client.sendMusicChange(area);
+  const area = client.areas[el.id.substr(4)].name;
+  client.sendMusicChange(area);
 
-	const areaHr = document.createElement("div");
-	areaHr.className = "hrtext";
-	areaHr.textContent = `switched to ${el.textContent}`;
-	document.getElementById("client_log").appendChild(areaHr);
+  const areaHr = document.createElement('div');
+  areaHr.className = 'hrtext';
+  areaHr.textContent = `switched to ${el.textContent}`;
+  document.getElementById('client_log').appendChild(areaHr);
 }
 window.area_click = area_click;
 
@@ -2674,8 +2650,8 @@ window.area_click = area_click;
  * Triggered by the music volume slider.
  */
 export function changeMusicVolume() {
-	viewport.musicVolume = document.getElementById("client_mvolume").value;
-	setCookie("musicVolume", document.getElementById("client_mvolume").value);
+  viewport.musicVolume = document.getElementById('client_mvolume').value;
+  setCookie('musicVolume', document.getElementById('client_mvolume').value);
 }
 window.changeMusicVolume = changeMusicVolume;
 
@@ -2683,7 +2659,7 @@ window.changeMusicVolume = changeMusicVolume;
  * Triggered by the sound effect volume slider.
  */
 export function changeSFXVolume() {
-	setCookie("sfxVolume", document.getElementById("client_sfxaudio").volume);
+  setCookie('sfxVolume', document.getElementById('client_sfxaudio').volume);
 }
 window.changeSFXVolume = changeSFXVolume;
 
@@ -2691,7 +2667,7 @@ window.changeSFXVolume = changeSFXVolume;
  * Triggered by the shout volume slider.
  */
 export function changeShoutVolume() {
-	setCookie("shoutVolume", document.getElementById("client_shoutaudio").volume);
+  setCookie('shoutVolume', document.getElementById('client_shoutaudio').volume);
 }
 window.changeShoutVolume = changeShoutVolume;
 
@@ -2699,7 +2675,7 @@ window.changeShoutVolume = changeShoutVolume;
  * Triggered by the testimony volume slider.
  */
 export function changeTestimonyVolume() {
-	setCookie("testimonyVolume", document.getElementById("client_testimonyaudio").volume);
+  setCookie('testimonyVolume', document.getElementById('client_testimonyaudio').volume);
 }
 window.changeTestimonyVolume = changeTestimonyVolume;
 
@@ -2707,8 +2683,8 @@ window.changeTestimonyVolume = changeTestimonyVolume;
  * Triggered by the blip volume slider.
  */
 export function changeBlipVolume() {
-	viewport.blipVolume = document.getElementById("client_bvolume").value;
-	setCookie("blipVolume", document.getElementById("client_bvolume").value);
+  viewport.blipVolume = document.getElementById('client_bvolume').value;
+  setCookie('blipVolume', document.getElementById('client_bvolume').value);
 }
 window.changeBlipVolume = changeBlipVolume;
 
@@ -2716,9 +2692,9 @@ window.changeBlipVolume = changeBlipVolume;
  * Triggered by the theme selector.
  */
 export function reloadTheme() {
-	viewport.theme = document.getElementById("client_themeselect").value;
-	setCookie("theme", viewport.theme);
-	document.getElementById("client_theme").href = "styles/" + viewport.theme + ".css";
+  viewport.theme = document.getElementById('client_themeselect').value;
+  setCookie('theme', viewport.theme);
+  document.getElementById('client_theme').href = `styles/${viewport.theme}.css`;
 }
 window.reloadTheme = reloadTheme;
 
@@ -2726,8 +2702,8 @@ window.reloadTheme = reloadTheme;
  * Triggered by a changed callword list
  */
 export function changeCallwords() {
-	client.callwords = document.getElementById("client_callwords").value.split('\n');
-	setCookie("callwords",client.callwords);
+  client.callwords = document.getElementById('client_callwords').value.split('\n');
+  setCookie('callwords', client.callwords);
 }
 window.changeCallwords = changeCallwords;
 
@@ -2735,7 +2711,7 @@ window.changeCallwords = changeCallwords;
  * Triggered by the modcall sfx dropdown
  */
 export function modcall_test() {
-	client.handleZZ("test#test".split("#"));
+  client.handleZZ('test#test'.split('#'));
 }
 window.modcall_test = modcall_test;
 
@@ -2743,28 +2719,28 @@ window.modcall_test = modcall_test;
  * Triggered by the ini button.
  */
 export async function iniedit() {
-	const ininame = document.getElementById("client_ininame").value;
-	const inicharID = client.charID;
-	await client.handleCharacterInfo(ininame.split("&"), inicharID);
-	client.handlePV(("PV#0#CID#" + inicharID).split("#"));
+  const ininame = document.getElementById('client_ininame').value;
+  const inicharID = client.charID;
+  await client.handleCharacterInfo(ininame.split('&'), inicharID);
+  client.handlePV((`PV#0#CID#${inicharID}`).split('#'));
 }
 window.iniedit = iniedit;
 
 /**
  * Triggered by the pantilt checkbox
  */
- export async function switchPanTilt(addcheck) {
-	const background = document.getElementById("client_fullview");
-	if (addcheck === 1) {
-		document.getElementById("client_pantilt").checked = true;
-	} else if (addcheck === 2) {
-		document.getElementById("client_pantilt").checked = false;
-	}
-	if(document.getElementById("client_pantilt").checked) {
-		background.style.transition = "0.5s ease-in-out";		
-	} else {
-		background.style.transition = "none"
-	}
+export async function switchPanTilt(addcheck) {
+  const background = document.getElementById('client_fullview');
+  if (addcheck === 1) {
+    document.getElementById('client_pantilt').checked = true;
+  } else if (addcheck === 2) {
+    document.getElementById('client_pantilt').checked = false;
+  }
+  if (document.getElementById('client_pantilt').checked) {
+    background.style.transition = '0.5s ease-in-out';
+  } else {
+    background.style.transition = 'none';
+  }
 }
 window.switchPanTilt = switchPanTilt;
 
@@ -2772,15 +2748,15 @@ window.switchPanTilt = switchPanTilt;
  * Triggered by the change aspect ratio checkbox
  */
 export async function switchAspectRatio() {
-	const background = document.getElementById("client_background");
-	const offsetCheck = document.getElementById("client_hdviewport_offset");
-	if(document.getElementById("client_hdviewport").checked) {
-		background.style.paddingBottom = "56.25%";
-		offsetCheck.disabled = false;
-	} else {
-		background.style.paddingBottom = "75%";
-		offsetCheck.disabled = true;
-	}
+  const background = document.getElementById('client_background');
+  const offsetCheck = document.getElementById('client_hdviewport_offset');
+  if (document.getElementById('client_hdviewport').checked) {
+    background.style.paddingBottom = '56.25%';
+    offsetCheck.disabled = false;
+  } else {
+    background.style.paddingBottom = '75%';
+    offsetCheck.disabled = true;
+  }
 }
 window.switchAspectRatio = switchAspectRatio;
 
@@ -2788,14 +2764,14 @@ window.switchAspectRatio = switchAspectRatio;
  * Triggered by the change aspect ratio checkbox
  */
 export async function switchChatOffset() {
-	const container = document.getElementById("client_chatcontainer");
-	if(document.getElementById("client_hdviewport_offset").checked) {
-		container.style.width = "80%";
-		container.style.left = "10%";
-	} else {
-		container.style.width = "100%";
-		container.style.left = 0;
-	}
+  const container = document.getElementById('client_chatcontainer');
+  if (document.getElementById('client_hdviewport_offset').checked) {
+    container.style.width = '80%';
+    container.style.left = '10%';
+  } else {
+    container.style.width = '100%';
+    container.style.left = 0;
+  }
 }
 window.switchChatOffset = switchChatOffset;
 
@@ -2804,8 +2780,8 @@ window.switchChatOffset = switchChatOffset;
  * @param {MouseEvent} event
  */
 export function changeCharacter(_event) {
-	document.getElementById("client_charselect").style.display = "block";
-	document.getElementById("client_emo").innerHTML = "";
+  document.getElementById('client_charselect').style.display = 'block';
+  document.getElementById('client_emo').innerHTML = '';
 }
 window.changeCharacter = changeCharacter;
 
@@ -2814,9 +2790,9 @@ window.changeCharacter = changeCharacter;
  * @param {HTMLImageElement} image the element containing the missing image
  */
 export function charError(image) {
-	console.warn(image.src + " is missing from webAO");
-	image.src = transparentPNG;
-	return true;
+  console.warn(`${image.src} is missing from webAO`);
+  image.src = transparentPNG;
+  return true;
 }
 window.charError = charError;
 
@@ -2825,9 +2801,9 @@ window.charError = charError;
  * @param {HTMLImageElement} image the element containing the missing image
  */
 export function imgError(image) {
-	image.onerror = "";
-	image.src = ""; //unload so the old sprite doesn't persist
-	return true;
+  image.onerror = '';
+  image.src = ''; // unload so the old sprite doesn't persist
+  return true;
 }
 window.imgError = imgError;
 
@@ -2835,16 +2811,16 @@ window.imgError = imgError;
  * Triggered when there was an error loading a sound
  * @param {HTMLImageElement} image the element containing the missing sound
  */
- export function opusCheck(channel) {
-	console.info(channel)
-	console.info("failed to load sound "+channel.src)
-	let oldsrc = ""
-	oldsrc = channel.src
-	if(!oldsrc.endsWith(".opus")) {
-		newsrc = oldsrc.replace(".mp3",".opus")
-		newsrc = newsrc.replace(".wav",".opus")
-		channel.src = newsrc; //unload so the old sprite doesn't persist
-	}
+export function opusCheck(channel) {
+  console.info(channel);
+  console.info(`failed to load sound ${channel.src}`);
+  let oldsrc = '';
+  oldsrc = channel.src;
+  if (!oldsrc.endsWith('.opus')) {
+    newsrc = oldsrc.replace('.mp3', '.opus');
+    newsrc = newsrc.replace('.wav', '.opus');
+    channel.src = newsrc; // unload so the old sprite doesn't persist
+  }
 }
 window.opusCheck = opusCheck;
 
@@ -2855,31 +2831,31 @@ window.opusCheck = opusCheck;
  * @throws {Error} if status code is not 2xx, or a network error occurs
  */
 async function requestBuffer(url) {
-	return new Promise((resolve, reject) => {
-		const xhr = new XMLHttpRequest();
-		xhr.responseType = "arraybuffer";
-		xhr.addEventListener("error", () => {
-			const err = new Error(`Request for ${url} failed: ${xhr.statusText}`);
-			err.code = xhr.status;
-			reject(err);
-		});
-		xhr.addEventListener("abort", () => {
-			const err = new Error(`Request for ${url} was aborted!`);
-			err.code = xhr.status;
-			reject(err);
-		});
-		xhr.addEventListener("load", () => {
-			if (xhr.status < 200 || xhr.status >= 300) {
-				const err = new Error(`Request for ${url} failed with status code ${xhr.status}`);
-				err.code = xhr.status;
-				reject(err);
-			} else {
-				resolve(xhr.response);
-			}
-		});
-		xhr.open("GET", url, true);
-		xhr.send();
-	});
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.responseType = 'arraybuffer';
+    xhr.addEventListener('error', () => {
+      const err = new Error(`Request for ${url} failed: ${xhr.statusText}`);
+      err.code = xhr.status;
+      reject(err);
+    });
+    xhr.addEventListener('abort', () => {
+      const err = new Error(`Request for ${url} was aborted!`);
+      err.code = xhr.status;
+      reject(err);
+    });
+    xhr.addEventListener('load', () => {
+      if (xhr.status < 200 || xhr.status >= 300) {
+        const err = new Error(`Request for ${url} failed with status code ${xhr.status}`);
+        err.code = xhr.status;
+        reject(err);
+      } else {
+        resolve(xhr.response);
+      }
+    });
+    xhr.open('GET', url, true);
+    xhr.send();
+  });
 }
 
 /**
@@ -2889,31 +2865,31 @@ async function requestBuffer(url) {
  * @throws {Error} if status code is not 2xx, or a network error occurs
  */
 async function request(url) {
-	return new Promise((resolve, reject) => {
-		const xhr = new XMLHttpRequest();
-		xhr.responseType = "text";
-		xhr.addEventListener("error", () => {
-			const err = new Error(`Request for ${url} failed: ${xhr.statusText}`);
-			err.code = xhr.status;
-			reject(err);
-		});
-		xhr.addEventListener("abort", () => {
-			const err = new Error(`Request for ${url} was aborted!`);
-			err.code = xhr.status;
-			reject(err);
-		});
-		xhr.addEventListener("load", () => {
-			if (xhr.status < 200 || xhr.status >= 300) {
-				const err = new Error(`Request for ${url} failed with status code ${xhr.status}`);
-				err.code = xhr.status;
-				reject(err);
-			} else {
-				resolve(xhr.response);
-			}
-		});
-		xhr.open("GET", url, true);
-		xhr.send();
-	});
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.responseType = 'text';
+    xhr.addEventListener('error', () => {
+      const err = new Error(`Request for ${url} failed: ${xhr.statusText}`);
+      err.code = xhr.status;
+      reject(err);
+    });
+    xhr.addEventListener('abort', () => {
+      const err = new Error(`Request for ${url} was aborted!`);
+      err.code = xhr.status;
+      reject(err);
+    });
+    xhr.addEventListener('load', () => {
+      if (xhr.status < 200 || xhr.status >= 300) {
+        const err = new Error(`Request for ${url} failed with status code ${xhr.status}`);
+        err.code = xhr.status;
+        reject(err);
+      } else {
+        resolve(xhr.response);
+      }
+    });
+    xhr.open('GET', url, true);
+    xhr.send();
+  });
 }
 
 /**
@@ -2921,26 +2897,25 @@ async function request(url) {
  * @param {string} url the URI to be checked
  */
 async function fileExists(url) {
-	try {
-		await request(url);
-		return true;
-	} catch (err) {
-		return false;
-	}
+  try {
+    await request(url);
+    return true;
+  } catch (err) {
+    return false;
+  }
 }
 
 /**
  * Triggered when the reconnect button is pushed.
  */
 export function ReconnectButton() {
-	client.cleanup();
-	client = new Client(serverIP);
-	if (client) {
-		mode = "join"; // HACK: see client.onOpen
+  client.cleanup();
+  client = new Client(serverIP);
+  if (client) {
+    mode = 'join'; // HACK: see client.onOpen
 
-		document.getElementById("client_error").style.display = "none";
-
-	}
+    document.getElementById('client_error').style.display = 'none';
+  }
 }
 window.ReconnectButton = ReconnectButton;
 
@@ -2949,47 +2924,44 @@ window.ReconnectButton = ReconnectButton;
  * @param {string} msg the string to be added
  * @param {string} name the name of the sender
  */
-function appendICLog(msg, showname = "", nameplate = "", time = new Date()) {
-	const entry = document.createElement("p");
-	const shownameField = document.createElement("span");
-	const nameplateField = document.createElement("span");
-	const textField = document.createElement("span");	
-	nameplateField.classList = "iclog_name iclog_nameplate";
-	nameplateField.appendChild(document.createTextNode(nameplate));
-
-	shownameField.classList = "iclog_name iclog_showname";
-	if (showname === "" || !showname)
-		shownameField.appendChild(document.createTextNode(nameplate));
-	else
-		shownameField.appendChild(document.createTextNode(showname));
-
-	textField.className = "iclog_text";
-	textField.appendChild(document.createTextNode(msg));
-
-	entry.appendChild(shownameField);
-	entry.appendChild(nameplateField);
-	entry.appendChild(textField);
-
-	// Only put a timestamp if the minute has changed.
-	if (lastICMessageTime.getMinutes() !== time.getMinutes()) {
-		const timeStamp = document.createElement("span");
-		timeStamp.className = "iclog_time";
-		timeStamp.innerText = time.toLocaleTimeString(undefined, {
-			hour: "numeric",
-			minute: "2-digit"
-		});
-		entry.appendChild(timeStamp);
-	}
-
-	const clientLog = document.getElementById("client_log");
-	clientLog.appendChild(entry);
-
-	/* This is a little buggy - some troubleshooting might be desirable */
-	if (clientLog.scrollTop > clientLog.scrollHeight - 800) {
-		clientLog.scrollTop = clientLog.scrollHeight;
-	}
-
-	lastICMessageTime = new Date();
+function appendICLog(msg, showname = '', nameplate = '', time = new Date()) {
+  const entry = document.createElement('p');
+  const shownameField = document.createElement('span');
+  const nameplateField = document.createElement('span');
+  const textField = document.createElement('span');
+  nameplateField.classList = 'iclog_name iclog_nameplate';
+  nameplateField.appendChild(document.createTextNode(nameplate));
+
+  shownameField.classList = 'iclog_name iclog_showname';
+  if (showname === '' || !showname) { shownameField.appendChild(document.createTextNode(nameplate)); } else { shownameField.appendChild(document.createTextNode(showname)); }
+
+  textField.className = 'iclog_text';
+  textField.appendChild(document.createTextNode(msg));
+
+  entry.appendChild(shownameField);
+  entry.appendChild(nameplateField);
+  entry.appendChild(textField);
+
+  // Only put a timestamp if the minute has changed.
+  if (lastICMessageTime.getMinutes() !== time.getMinutes()) {
+    const timeStamp = document.createElement('span');
+    timeStamp.className = 'iclog_time';
+    timeStamp.innerText = time.toLocaleTimeString(undefined, {
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+    entry.appendChild(timeStamp);
+  }
+
+  const clientLog = document.getElementById('client_log');
+  clientLog.appendChild(entry);
+
+  /* This is a little buggy - some troubleshooting might be desirable */
+  if (clientLog.scrollTop > clientLog.scrollHeight - 800) {
+    clientLog.scrollTop = clientLog.scrollHeight;
+  }
+
+  lastICMessageTime = new Date();
 }
 
 /**
@@ -2997,36 +2969,32 @@ function appendICLog(msg, showname = "", nameplate = "", time = new Date()) {
  * @param {String} message
  */
 export function checkCallword(message) {
-	client.callwords.forEach(testCallword);
+  client.callwords.forEach(testCallword);
 
-	function testCallword(item)
-	{
-		if(item !== "" && message.toLowerCase().includes(item.toLowerCase()))
-		{
-			viewport.sfxaudio.pause();
-			viewport.sfxaudio.src = AO_HOST + "sounds/general/sfx-gallery.opus";
-			viewport.sfxaudio.play();
-		}
-	}
+  function testCallword(item) {
+    if (item !== '' && message.toLowerCase().includes(item.toLowerCase())) {
+      viewport.sfxaudio.pause();
+      viewport.sfxaudio.src = `${AO_HOST}sounds/general/sfx-gallery.opus`;
+      viewport.sfxaudio.play();
+    }
+  }
 }
 
-
-
 /**
  * Triggered when the music search bar is changed
  * @param {MouseEvent} event
  */
 export function chartable_filter(_event) {
-	const searchname = document.getElementById("client_charactersearch").value;
-
-	client.chars.forEach(function (character, charid) {
-		const demothing = document.getElementById(`demo_${charid}`);
-		if (character.name.toLowerCase().indexOf(searchname.toLowerCase()) === -1) { 
-			demothing.style.display = "none";
-		} else {
-			demothing.style.display = "inline-block";
-		}
-	});
+  const searchname = document.getElementById('client_charactersearch').value;
+
+  client.chars.forEach((character, charid) => {
+    const demothing = document.getElementById(`demo_${charid}`);
+    if (character.name.toLowerCase().indexOf(searchname.toLowerCase()) === -1) {
+      demothing.style.display = 'none';
+    } else {
+      demothing.style.display = 'inline-block';
+    }
+  });
 }
 window.chartable_filter = chartable_filter;
 
@@ -3036,12 +3004,12 @@ window.chartable_filter = chartable_filter;
  * then spectator is chosen instead.
  */
 export function pickChar(ccharacter) {
-	if (ccharacter===-1) {
-		// Spectator
-		document.getElementById("client_charselect").style.display = "none";		
-	} else {
-		client.sendCharacter(ccharacter);
-	}
+  if (ccharacter === -1) {
+    // Spectator
+    document.getElementById('client_charselect').style.display = 'none';
+  } else {
+    client.sendCharacter(ccharacter);
+  }
 }
 window.pickChar = pickChar;
 
@@ -3050,20 +3018,19 @@ window.pickChar = pickChar;
  * @param {string} emo the new emotion to be selected
  */
 export function pickEmotion(emo) {
-	try {
-		if (client.selectedEmote !== -1) {
-			document.getElementById("emo_" + client.selectedEmote).classList="emote_button";
-		}
-	} catch (err) {
-		// do nothing
-	}
-	client.selectedEmote = emo;
-	document.getElementById("emo_" + emo).classList="emote_button dark";
-
-	document.getElementById("sendsfx").checked = (client.emote.sfx.length > 1) ? true : false;
+  try {
+    if (client.selectedEmote !== -1) {
+      document.getElementById(`emo_${client.selectedEmote}`).classList = 'emote_button';
+    }
+  } catch (err) {
+    // do nothing
+  }
+  client.selectedEmote = emo;
+  document.getElementById(`emo_${emo}`).classList = 'emote_button dark';
 
-	document.getElementById("sendpreanim").checked = (client.emote.zoom == 1) ? true : false;
+  document.getElementById('sendsfx').checked = (client.emote.sfx.length > 1);
 
+  document.getElementById('sendpreanim').checked = (client.emote.zoom == 1);
 }
 window.pickEmotion = pickEmotion;
 
@@ -3072,35 +3039,35 @@ window.pickEmotion = pickEmotion;
  * @param {string} evidence the evidence to be presented
  */
 export function pickEvidence(evidenceID) {
-	const evidence = Number(evidenceID);
-	if (client.selectedEvidence !== evidence) {
-		//Update selected evidence		
-		if (client.selectedEvidence > 0) {
-			document.getElementById("evi_" + client.selectedEvidence).className = "evi_icon";
-		}
-		document.getElementById("evi_" + evidence).className = "evi_icon dark";
-		client.selectedEvidence = evidence;
-
-		// Show evidence on information window
-		document.getElementById("evi_name").value = client.evidences[evidence - 1].name;
-		document.getElementById("evi_desc").value = client.evidences[evidence - 1].desc;
-
-		// Update icon
-		const icon_id = getIndexFromSelect("evi_select", client.evidences[evidence - 1].filename);
-		document.getElementById("evi_select").selectedIndex = icon_id;
-		if (icon_id === 0) {
-			document.getElementById("evi_filename").value = client.evidences[evidence - 1].filename;
-		}
-		updateEvidenceIcon();
-
-		// Update button
-		document.getElementById("evi_add").className = "client_button hover_button inactive";
-		document.getElementById("evi_edit").className = "client_button hover_button";
-		document.getElementById("evi_cancel").className = "client_button hover_button";
-		document.getElementById("evi_del").className = "client_button hover_button";
-	} else {
-		cancelEvidence();
-	}
+  const evidence = Number(evidenceID);
+  if (client.selectedEvidence !== evidence) {
+    // Update selected evidence
+    if (client.selectedEvidence > 0) {
+      document.getElementById(`evi_${client.selectedEvidence}`).className = 'evi_icon';
+    }
+    document.getElementById(`evi_${evidence}`).className = 'evi_icon dark';
+    client.selectedEvidence = evidence;
+
+    // Show evidence on information window
+    document.getElementById('evi_name').value = client.evidences[evidence - 1].name;
+    document.getElementById('evi_desc').value = client.evidences[evidence - 1].desc;
+
+    // Update icon
+    const icon_id = getIndexFromSelect('evi_select', client.evidences[evidence - 1].filename);
+    document.getElementById('evi_select').selectedIndex = icon_id;
+    if (icon_id === 0) {
+      document.getElementById('evi_filename').value = client.evidences[evidence - 1].filename;
+    }
+    updateEvidenceIcon();
+
+    // Update button
+    document.getElementById('evi_add').className = 'client_button hover_button inactive';
+    document.getElementById('evi_edit').className = 'client_button hover_button';
+    document.getElementById('evi_cancel').className = 'client_button hover_button';
+    document.getElementById('evi_del').className = 'client_button hover_button';
+  } else {
+    cancelEvidence();
+  }
 }
 window.pickEvidence = pickEvidence;
 
@@ -3108,14 +3075,15 @@ window.pickEvidence = pickEvidence;
  * Add evidence.
  */
 export function addEvidence() {
-	const evidence_select = document.getElementById("evi_select");
-	client.sendPE(document.getElementById("evi_name").value,
-		document.getElementById("evi_desc").value,
-		evidence_select.selectedIndex === 0 ?
-			document.getElementById("evi_filename").value :
-			evidence_select.options[evidence_select.selectedIndex].text
-	);
-	cancelEvidence();
+  const evidence_select = document.getElementById('evi_select');
+  client.sendPE(
+    document.getElementById('evi_name').value,
+    document.getElementById('evi_desc').value,
+    evidence_select.selectedIndex === 0
+      ? document.getElementById('evi_filename').value
+      : evidence_select.options[evidence_select.selectedIndex].text,
+  );
+  cancelEvidence();
 }
 window.addEvidence = addEvidence;
 
@@ -3123,16 +3091,17 @@ window.addEvidence = addEvidence;
  * Edit selected evidence.
  */
 export function editEvidence() {
-	const evidence_select = document.getElementById("evi_select");
-	const id = parseInt(client.selectedEvidence) - 1;
-	client.sendEE(id,
-		document.getElementById("evi_name").value,
-		document.getElementById("evi_desc").value,
-		evidence_select.selectedIndex === 0 ?
-			document.getElementById("evi_filename").value :
-			evidence_select.options[evidence_select.selectedIndex].text
-	);
-	cancelEvidence();
+  const evidence_select = document.getElementById('evi_select');
+  const id = parseInt(client.selectedEvidence) - 1;
+  client.sendEE(
+    id,
+    document.getElementById('evi_name').value,
+    document.getElementById('evi_desc').value,
+    evidence_select.selectedIndex === 0
+      ? document.getElementById('evi_filename').value
+      : evidence_select.options[evidence_select.selectedIndex].text,
+  );
+  cancelEvidence();
 }
 window.editEvidence = editEvidence;
 
@@ -3140,9 +3109,9 @@ window.editEvidence = editEvidence;
  * Delete selected evidence.
  */
 export function deleteEvidence() {
-	const id = parseInt(client.selectedEvidence) - 1;
-	client.sendDE(id);
-	cancelEvidence();
+  const id = parseInt(client.selectedEvidence) - 1;
+  client.sendDE(id);
+  cancelEvidence();
 }
 window.deleteEvidence = deleteEvidence;
 
@@ -3150,25 +3119,25 @@ window.deleteEvidence = deleteEvidence;
  * Cancel evidence selection.
  */
 export function cancelEvidence() {
-	//Clear evidence data
-	if (client.selectedEvidence > 0) {
-		document.getElementById("evi_" + client.selectedEvidence).className = "evi_icon";
-	}
-	client.selectedEvidence = 0;
-
-	// Clear evidence on information window
-	document.getElementById("evi_select").selectedIndex = 0;
-	updateEvidenceIcon(); // Update icon widget
-	document.getElementById("evi_filename").value = "";
-	document.getElementById("evi_name").value = "";
-	document.getElementById("evi_desc").value = "";
-	document.getElementById("evi_preview").src = AO_HOST + "misc/empty.png"; //Clear icon
-
-	// Update button
-	document.getElementById("evi_add").className = "client_button hover_button";
-	document.getElementById("evi_edit").className = "client_button hover_button inactive";
-	document.getElementById("evi_cancel").className = "client_button hover_button inactive";
-	document.getElementById("evi_del").className = "client_button hover_button inactive";
+  // Clear evidence data
+  if (client.selectedEvidence > 0) {
+    document.getElementById(`evi_${client.selectedEvidence}`).className = 'evi_icon';
+  }
+  client.selectedEvidence = 0;
+
+  // Clear evidence on information window
+  document.getElementById('evi_select').selectedIndex = 0;
+  updateEvidenceIcon(); // Update icon widget
+  document.getElementById('evi_filename').value = '';
+  document.getElementById('evi_name').value = '';
+  document.getElementById('evi_desc').value = '';
+  document.getElementById('evi_preview').src = `${AO_HOST}misc/empty.png`; // Clear icon
+
+  // Update button
+  document.getElementById('evi_add').className = 'client_button hover_button';
+  document.getElementById('evi_edit').className = 'client_button hover_button inactive';
+  document.getElementById('evi_cancel').className = 'client_button hover_button inactive';
+  document.getElementById('evi_del').className = 'client_button hover_button inactive';
 }
 window.cancelEvidence = cancelEvidence;
 
@@ -3178,14 +3147,14 @@ window.cancelEvidence = cancelEvidence;
  * @param {string} value the value that need to be compared
  */
 export function getIndexFromSelect(select_box, value) {
-	//Find if icon alraedy existed in select box
-	const select_element = document.getElementById(select_box);
-	for (let i = 1; i < select_element.length; ++i) {
-		if (select_element.options[i].value === value) {
-			return i;
-		}
-	}
-	return 0;
+  // Find if icon alraedy existed in select box
+  const select_element = document.getElementById(select_box);
+  for (let i = 1; i < select_element.length; ++i) {
+    if (select_element.options[i].value === value) {
+      return i;
+    }
+  }
+  return 0;
 }
 window.getIndexFromSelect = getIndexFromSelect;
 
@@ -3193,18 +3162,18 @@ window.getIndexFromSelect = getIndexFromSelect;
  * Set the style of the chatbox
  */
 export function setChatbox(style) {
-	const chatbox_theme = document.getElementById("chatbox_theme");
-	const selected_theme = document.getElementById("client_chatboxselect").value;
-	setCookie("chatbox", selected_theme);
-	if(selected_theme === "dynamic") {
-		if (chatbox_arr.includes(style)) {
-			chatbox_theme.href = "styles/chatbox/" + style + ".css";
-		} else {
-			chatbox_theme.href = "styles/chatbox/aa.css";
-		}
-	} else {
-		chatbox_theme.href = "styles/chatbox/" + selected_theme + ".css";
-	}
+  const chatbox_theme = document.getElementById('chatbox_theme');
+  const selected_theme = document.getElementById('client_chatboxselect').value;
+  setCookie('chatbox', selected_theme);
+  if (selected_theme === 'dynamic') {
+    if (chatbox_arr.includes(style)) {
+      chatbox_theme.href = `styles/chatbox/${style}.css`;
+    } else {
+      chatbox_theme.href = 'styles/chatbox/aa.css';
+    }
+  } else {
+    chatbox_theme.href = `styles/chatbox/${selected_theme}.css`;
+  }
 }
 window.setChatbox = setChatbox;
 
@@ -3212,10 +3181,10 @@ window.setChatbox = setChatbox;
  * Set the font size for the chatbox
  */
 export function resizeChatbox() {
-	const chatContainerBox = document.getElementById("client_chatcontainer");
-	const gameHeight = document.getElementById("client_background").offsetHeight;
-                
-	chatContainerBox.style.fontSize = (gameHeight * 0.0521).toFixed(1) + "px";
+  const chatContainerBox = document.getElementById('client_chatcontainer');
+  const gameHeight = document.getElementById('client_background').offsetHeight;
+
+  chatContainerBox.style.fontSize = `${(gameHeight * 0.0521).toFixed(1)}px`;
 }
 window.resizeChatbox = resizeChatbox;
 
@@ -3223,17 +3192,17 @@ window.resizeChatbox = resizeChatbox;
  * Update evidence icon.
  */
 export function updateEvidenceIcon() {
-	const evidence_select = document.getElementById("evi_select");
-	const evidence_filename = document.getElementById("evi_filename");
-	const evidence_iconbox = document.getElementById("evi_preview");
-
-	if (evidence_select.selectedIndex === 0) {
-		evidence_filename.style.display = "initial";
-		evidence_iconbox.src = AO_HOST + "evidence/" + encodeURI(evidence_filename.value.toLowerCase());
-	} else {
-		evidence_filename.style.display = "none";
-		evidence_iconbox.src = AO_HOST + "evidence/" + encodeURI(evidence_select.value.toLowerCase());
-	}
+  const evidence_select = document.getElementById('evi_select');
+  const evidence_filename = document.getElementById('evi_filename');
+  const evidence_iconbox = document.getElementById('evi_preview');
+
+  if (evidence_select.selectedIndex === 0) {
+    evidence_filename.style.display = 'initial';
+    evidence_iconbox.src = `${AO_HOST}evidence/${encodeURI(evidence_filename.value.toLowerCase())}`;
+  } else {
+    evidence_filename.style.display = 'none';
+    evidence_iconbox.src = `${AO_HOST}evidence/${encodeURI(evidence_select.value.toLowerCase())}`;
+  }
 }
 window.updateEvidenceIcon = updateEvidenceIcon;
 
@@ -3241,21 +3210,21 @@ window.updateEvidenceIcon = updateEvidenceIcon;
  * Update evidence icon.
  */
 export function updateActionCommands(side) {
-	if (side === "jud") {
-		document.getElementById("judge_action").style.display = "inline-table";
-		document.getElementById("no_action").style.display = "none";
-	} else {
-		document.getElementById("judge_action").style.display = "none";
-		document.getElementById("no_action").style.display = "inline-table";
-	}
-
-	// Update role selector
-	for (let i = 0, role_select = document.getElementById("role_select").options; i < role_select.length; i++) {
-		if (side === role_select[i].value) {
-			role_select.selectedIndex = i;
-			return;
-		}
-	}
+  if (side === 'jud') {
+    document.getElementById('judge_action').style.display = 'inline-table';
+    document.getElementById('no_action').style.display = 'none';
+  } else {
+    document.getElementById('judge_action').style.display = 'none';
+    document.getElementById('no_action').style.display = 'inline-table';
+  }
+
+  // Update role selector
+  for (let i = 0, role_select = document.getElementById('role_select').options; i < role_select.length; i++) {
+    if (side === role_select[i].value) {
+      role_select.selectedIndex = i;
+      return;
+    }
+  }
 }
 window.updateActionCommands = updateActionCommands;
 
@@ -3263,21 +3232,18 @@ window.updateActionCommands = updateActionCommands;
  * Change background via OOC.
  */
 export function changeBackgroundOOC() {
-	const selectedBG = document.getElementById("bg_select");
-	const changeBGCommand = document.getElementById("bg_command").value;
-	const bgFilename = document.getElementById("bg_filename");
-
-	let filename = "";
-	if (selectedBG.selectedIndex === 0) {
-		filename = bgFilename.value;
-	} else {
-		filename = selectedBG.value;
-	}
-
-	if (mode==="join")
-		client.sendOOC("/" + changeBGCommand.replace("$1", filename));
-	else if (mode==="replay")
-		client.sendSelf("BN#" + filename + "#%");
+  const selectedBG = document.getElementById('bg_select');
+  const changeBGCommand = document.getElementById('bg_command').value;
+  const bgFilename = document.getElementById('bg_filename');
+
+  let filename = '';
+  if (selectedBG.selectedIndex === 0) {
+    filename = bgFilename.value;
+  } else {
+    filename = selectedBG.value;
+  }
+
+  if (mode === 'join') { client.sendOOC(`/${changeBGCommand.replace('$1', filename)}`); } else if (mode === 'replay') { client.sendSelf(`BN#${filename}#%`); }
 }
 window.changeBackgroundOOC = changeBackgroundOOC;
 
@@ -3285,11 +3251,11 @@ window.changeBackgroundOOC = changeBackgroundOOC;
  * Change role via OOC.
  */
 export function changeRoleOOC() {
-	const new_role = document.getElementById("role_select").value;
+  const new_role = document.getElementById('role_select').value;
 
-	client.sendOOC("/pos " + new_role);
-	client.sendServer("SP#" + new_role + "#%");
-	updateActionCommands(new_role);
+  client.sendOOC(`/pos ${new_role}`);
+  client.sendServer(`SP#${new_role}#%`);
+  updateActionCommands(new_role);
 }
 window.changeRoleOOC = changeRoleOOC;
 
@@ -3297,7 +3263,7 @@ window.changeRoleOOC = changeRoleOOC;
  * Random character via OOC.
  */
 export function randomCharacterOOC() {
-	client.sendOOC("/" + document.getElementById("randomchar_command").value);
+  client.sendOOC(`/${document.getElementById('randomchar_command').value}`);
 }
 window.randomCharacterOOC = randomCharacterOOC;
 
@@ -3305,15 +3271,15 @@ window.randomCharacterOOC = randomCharacterOOC;
  * Call mod.
  */
 export function callMod() {
-	let modcall;
-	if (extrafeatures.includes("modcall_reason")) {
-	modcall = prompt("Please enter the reason for the modcall", "");
-	}
-	if (modcall == null || modcall === "") {
-		// cancel
-	} else {
-		client.sendZZ(modcall);
-	}
+  let modcall;
+  if (extrafeatures.includes('modcall_reason')) {
+    modcall = prompt('Please enter the reason for the modcall', '');
+  }
+  if (modcall == null || modcall === '') {
+    // cancel
+  } else {
+    client.sendZZ(modcall);
+  }
 }
 window.callMod = callMod;
 
@@ -3321,7 +3287,7 @@ window.callMod = callMod;
  * Declare witness testimony.
  */
 export function initWT() {
-	client.sendRT("testimony1");
+  client.sendRT('testimony1');
 }
 window.initWT = initWT;
 
@@ -3329,7 +3295,7 @@ window.initWT = initWT;
  * Declare cross examination.
  */
 export function initCE() {
-	client.sendRT("testimony2");
+  client.sendRT('testimony2');
 }
 window.initCE = initCE;
 
@@ -3337,7 +3303,7 @@ window.initCE = initCE;
  * Declare the defendant not guilty
  */
 export function notguilty() {
-	client.sendRT("judgeruling#0");
+  client.sendRT('judgeruling#0');
 }
 window.notguilty = notguilty;
 
@@ -3345,7 +3311,7 @@ window.notguilty = notguilty;
  * Declare the defendant not guilty
  */
 export function guilty() {
-	client.sendRT("judgeruling#1");
+  client.sendRT('judgeruling#1');
 }
 window.guilty = guilty;
 
@@ -3353,7 +3319,7 @@ window.guilty = guilty;
  * Increment defense health point.
  */
 export function addHPD() {
-	client.sendHP(1, String(parseInt(client.hp[0]) + 1));
+  client.sendHP(1, String(parseInt(client.hp[0]) + 1));
 }
 window.addHPD = addHPD;
 
@@ -3361,7 +3327,7 @@ window.addHPD = addHPD;
  * Decrement defense health point.
  */
 export function redHPD() {
-	client.sendHP(1, String(parseInt(client.hp[0]) - 1));
+  client.sendHP(1, String(parseInt(client.hp[0]) - 1));
 }
 window.redHPD = redHPD;
 
@@ -3369,7 +3335,7 @@ window.redHPD = redHPD;
  * Increment prosecution health point.
  */
 export function addHPP() {
-	client.sendHP(2, String(parseInt(client.hp[1]) + 1));
+  client.sendHP(2, String(parseInt(client.hp[1]) + 1));
 }
 window.addHPP = addHPP;
 
@@ -3377,7 +3343,7 @@ window.addHPP = addHPP;
  * Decrement prosecution health point.
  */
 export function redHPP() {
-	client.sendHP(2, String(parseInt(client.hp[1]) - 1));
+  client.sendHP(2, String(parseInt(client.hp[1]) - 1));
 }
 window.redHPP = redHPP;
 
@@ -3385,17 +3351,17 @@ window.redHPP = redHPP;
  * Update background preview.
  */
 export function updateBackgroundPreview() {
-	const background_select = document.getElementById("bg_select");
-	const background_filename = document.getElementById("bg_filename");
-	const background_preview = document.getElementById("bg_preview");
-
-	if (background_select.selectedIndex === 0) {
-		background_filename.style.display = "initial";
-		background_preview.src = AO_HOST + "background/" + encodeURI(background_filename.value.toLowerCase()) + "/defenseempty.png";
-	} else {
-		background_filename.style.display = "none";
-		background_preview.src = AO_HOST + "background/" + encodeURI(background_select.value.toLowerCase()) + "/defenseempty.png";
-	}
+  const background_select = document.getElementById('bg_select');
+  const background_filename = document.getElementById('bg_filename');
+  const background_preview = document.getElementById('bg_preview');
+
+  if (background_select.selectedIndex === 0) {
+    background_filename.style.display = 'initial';
+    background_preview.src = `${AO_HOST}background/${encodeURI(background_filename.value.toLowerCase())}/defenseempty.png`;
+  } else {
+    background_filename.style.display = 'none';
+    background_preview.src = `${AO_HOST}background/${encodeURI(background_select.value.toLowerCase())}/defenseempty.png`;
+  }
 }
 window.updateBackgroundPreview = updateBackgroundPreview;
 
@@ -3405,11 +3371,11 @@ window.updateBackgroundPreview = updateBackgroundPreview;
  * @param {string} effect the new effect to be selected
  */
 export function toggleEffect(button) {
-	if (button.classList.contains("dark")) {
-		button.className = "client_button";
-	} else {
-		button.className = "client_button dark";
-	}
+  if (button.classList.contains('dark')) {
+    button.className = 'client_button';
+  } else {
+    button.className = 'client_button dark';
+  }
 }
 window.toggleEffect = toggleEffect;
 
@@ -3418,13 +3384,13 @@ window.toggleEffect = toggleEffect;
  * @param {string} menu the menu to be selected
  */
 export function toggleMenu(menu) {
-	if (menu !== selectedMenu) {
-		document.getElementById("menu_" + menu).className = "menu_button active";
-		document.getElementById("content_" + menu).className = "menu_content active";
-		document.getElementById("menu_" + selectedMenu).className = "menu_button";
-		document.getElementById("content_" + selectedMenu).className = "menu_content";
-		selectedMenu = menu;
-	}
+  if (menu !== selectedMenu) {
+    document.getElementById(`menu_${menu}`).className = 'menu_button active';
+    document.getElementById(`content_${menu}`).className = 'menu_content active';
+    document.getElementById(`menu_${selectedMenu}`).className = 'menu_button';
+    document.getElementById(`content_${selectedMenu}`).className = 'menu_content';
+    selectedMenu = menu;
+  }
 }
 window.toggleMenu = toggleMenu;
 
@@ -3434,15 +3400,15 @@ window.toggleMenu = toggleMenu;
  * @param {string} shout the new shout to be selected
  */
 export function toggleShout(shout) {
-	if (shout === selectedShout) {
-		document.getElementById("button_" + shout).className = "client_button";
-		selectedShout = 0;
-	} else {
-		document.getElementById("button_" + shout).className = "client_button dark";
-		if (selectedShout) {
-			document.getElementById("button_" + selectedShout).className = "client_button";
-		}
-		selectedShout = shout;
-	}
+  if (shout === selectedShout) {
+    document.getElementById(`button_${shout}`).className = 'client_button';
+    selectedShout = 0;
+  } else {
+    document.getElementById(`button_${shout}`).className = 'client_button dark';
+    if (selectedShout) {
+      document.getElementById(`button_${selectedShout}`).className = 'client_button';
+    }
+    selectedShout = shout;
+  }
 }
 window.toggleShout = toggleShout;