refactor part 1

4 files changed, 742 insertions, 654 deletions

diff --git a/webAO/client.css b/webAO/client.css
index d62bc6f..a76ef6f 100644
--- a/webAO/client.css
+++ b/webAO/client.css
@@ -1,13 +1,13 @@
-body {	
-	font-family: "Ace Attorney","メイリオ",Meiryo,Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3",Osaka,"MS Gothic","ＭＳ Ｐゴシック",Tahoma,Sans;
+body {
+	font-family: "Ace Attorney", "メイリオ", Meiryo, Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", Osaka, "MS Gothic", "ＭＳ Ｐゴシック", Tahoma, Sans;
 }
 
 img {
 	image-rendering: -moz-crisp-edges;
-    image-rendering: -o-crisp-edges;
-    image-rendering: -webkit-optimize-contrast;
-    image-rendering: crisp-edges;
-    -ms-interpolation-mode: nearest-neighbor;
+	image-rendering: -o-crisp-edges;
+	image-rendering: -webkit-optimize-contrast;
+	image-rendering: crisp-edges;
+	-ms-interpolation-mode: nearest-neighbor;
 }
 
 #about-logo {
@@ -16,20 +16,26 @@ img {
 	image-rendering: auto;
 }
 
-@keyframes error_blink {  
-	0% { color: white; }
-	50% { color: red; }
-	100% { color: white; }
+@keyframes error_blink {
+	0% {
+		color: white;
+	}
+	50% {
+		color: red;
+	}
+	100% {
+		color: white;
+	}
 }
 
 .error {
 	position: absolute;
 	width: 50vw;
 	height: 25vh;
-    top: 50%;
-    left: 50%;
-    margin-right: -50%;
-    transform: translate(-50%, -50%);
+	top: 50%;
+	left: 50%;
+	margin-right: -50%;
+	transform: translate(-50%, -50%);
 	display: flex;
 	margin: 0 auto;
 	justify-content: center;
@@ -47,10 +53,10 @@ img {
 	position: absolute;
 	width: 90vw;
 	height: 30vh;
-    top: 50%;
-    left: 50%;
-    margin-right: -50%;
-    transform: translate(-50%, -50%);
+	top: 50%;
+	left: 50%;
+	margin-right: -50%;
+	transform: translate(-50%, -50%);
 	justify-content: center;
 	display: flex;
 	align-items: center;
@@ -62,10 +68,7 @@ img {
 
 #client_gamewindow {
 	position: relative;
-	/*! top: 0; */
-	/*! left: 0; */
-  /*! width: 100%; */
-  padding-bottom: 75%;
+	padding-bottom: 75%;
 }
 
 #client_charselect {
@@ -99,19 +102,9 @@ img {
 }
 
 #client_wrapper {
-	/*! position: absolute; */
-	/*! top: 0; */
-	/*! left: 0; */
 	background-color: #888888;
-	/*! height: 99%; */
-	/*! width: 512px; */
-	/*! margin: 0; */
-	/*! padding: 0; */
-	/*! float: left; */
-	/*! resize: horizontal; */
 	overflow: auto;
-	overflow-y:hidden;
-	/*! border: 1px solid; */
+	overflow-y: hidden;
 	min-width: 256px;
 	resize: horizontal;
 }
@@ -129,11 +122,7 @@ img {
 }
 
 #client_settings {
-	/*! position: absolute; */
-	/*! top: 100%; */
 	width: 100%;
-	/*! grid-column: 1; */
-	/*! grid-row: 2; */
 }
 
 .area_btn {
@@ -161,8 +150,8 @@ img {
 	position: absolute;
 	height: auto;
 	width: 100%;
-    bottom: 0;
-    left: 0;
+	bottom: 0;
+	left: 0;
 }
 
 #client_fg {
@@ -178,7 +167,7 @@ img {
 	opacity: 0;
 	position: absolute;
 	background-repeat: no-repeat;
-    background-size: contain;
+	background-size: contain;
 	height: 0%;
 	width: auto;
 	top: 1.5em;
@@ -195,16 +184,16 @@ img {
 #client_background {
 	position: absolute;
 	background-color: transparent;
-	width:100%;
-	height:auto;
+	width: 100%;
+	height: auto;
 	padding-bottom: 75%;
 }
 
 #client_name {
 	display: none;
 	height: 7%;
-	border: 1px solid rgba(255,255,255,0.7);
-	background:rgba(73,0,254,0.5);
+	border: 1px solid rgba(255, 255, 255, 0.7);
+	background: rgba(73, 0, 254, 0.5);
 	top: 63%;
 	border-radius: 3px;
 	position: absolute;
@@ -222,12 +211,12 @@ img {
 #client_chat {
 	font-size: 1em;
 	display: none;
-	width: 98%; /* fallback if needed */
-    width: calc(100% - 4px);
+	width: 98%;
+	width: calc(100% - 4px);
 	margin: auto;
 	height: 30%;
-	border: 2px solid rgba(255,255,255,0.7);
-	background-color: rgba(0,0,0,0.5);
+	border: 2px solid rgba(255, 255, 255, 0.7);
+	background-color: rgba(0, 0, 0, 0.5);
 	top: 70%;
 	border-radius: 4px;
 	position: absolute;
@@ -243,6 +232,7 @@ img {
 	margin: 4px;
 	color: white;
 }
+
 .long {
 	width: 100%;
 	background-color: #dddddd;
@@ -253,40 +243,28 @@ img {
 }
 
 #client_chatlog {
-	/*! width: 244px; */
-	/*! height: 100%; */
-	/*! background: #dbdbdb url("misc/chat2.png") no-repeat; */
-	/*! padding: 0; */
-	/*! position: absolute; */
 	top: 0;
 	right: 0;
-	/* grid-column: 2; */
 	flex: 1;
 }
 
 #client_log {
 	position: relative;
-	/* top: 3px; */
-	/*! left: 10px; */
 	height: 100%;
-	/*! width: 99%; */
 	color: white;
 	word-break: keep-all;
-	word-wrap:break-word;
+	word-wrap: break-word;
 	overflow-wrap: break-word;
 	overflow-y: scroll;
 	font-size: medium;
-	/* margin-bottom: 10px; */
 	background-color: #242424;
 	border: black;
 	border-style: solid;
-	/* max-width: 50em; */
-	/* min-height: 30em; */
 	text-align: start;
 	line-height: .85em;
 }
 
-#client_log > p {
+#client_log>p {
 	line-height: 1.1em;
 }
 
@@ -302,9 +280,6 @@ img {
 }
 
 #client_ooclog {
-	/*! width: 99%; */
-	/* margin-top: 25px; */
-	/* height: 50%; */
 	position: relative;
 	background-color: #242424;
 	color: white;
@@ -320,8 +295,6 @@ img {
 
 #client_musiclist {
 	width: 99%;
-	/* margin-top: 20px; */
-	/*! height: 50%; */
 	background-color: #222;
 	color: white;
 }
@@ -329,21 +302,21 @@ img {
 #client_bars {
 	position: relative;
 	text-align: center;
-	display: flex; 
+	display: flex;
 	display: -webkit-flex;
 }
 
 #client_testimony {
 	display: block;
-    position: absolute;
-    width: 100%;
-    height: auto;
+	position: absolute;
+	width: 100%;
+	height: auto;
 }
 
 #evi_icon {
 	background-image: url('misc/empty.png');
 	background-repeat: no-repeat;
-    background-size: contain;
+	background-size: contain;
 }
 
 #bg_preview {
@@ -352,9 +325,9 @@ img {
 	width: 100%;
 	height: 100%;
 	border-style: double;
-    border-radius: 7px;
-    border-color: white;
-    border-width: 3px;
+	border-radius: 7px;
+	border-color: white;
+	border-width: 3px;
 }
 
 .slider {
@@ -365,35 +338,34 @@ img {
 	margin-right: auto;
 }
 
-#client_defense_hp{
+#client_defense_hp {
 	text-align: left;
 }
 
-#client_defense_hp > .health-bar{
+#client_defense_hp>.health-bar {
 	background-color: #169de0;
 }
 
-#client_prosecutor_hp{
+#client_prosecutor_hp {
 	text-align: right;
 }
 
-#client_prosecutor_hp > .health-bar{
+#client_prosecutor_hp>.health-bar {
 	background-color: #e01f5f;
 }
 
-
 .health-box {
 	background-color: #555;
 	height: 20px;
 	width: 50%;
-	margin: 0 auto;	
+	margin: 0 auto;
 	border: solid 2px #aaa;
 	border-radius: 5px;
-	box-sizing:border-box;
+	box-sizing: border-box;
 	display: block;
 }
 
-.health-bar {  
+.health-bar {
 	width: 100%;
 	height: 100%;
 	border-radius: 3px;
@@ -406,24 +378,24 @@ img {
 	padding: 1px;
 }
 
-.client_button.hover_button.inactive{	
+.client_button.hover_button.inactive {
 	display: none;
 }
 
-.client_button.hover_button:hover{	
-	margin:-2px;
+.client_button.hover_button:hover {
+	margin: -2px;
 	border-radius: 5px;
 	border-style: dashed;
-    border-width: 2px;
-    border-color: #FFD081;
+	border-width: 2px;
+	border-color: #FFD081;
 }
 
-.client_button.hover_button:hover{	
-	margin:-2px;
+.client_button.hover_button:hover {
+	margin: -2px;
 	border-radius: 5px;
 	border-style: dashed;
-    border-width: 2px;
-    border-color: #FFD081;
+	border-width: 2px;
+	border-color: #FFD081;
 }
 
 .dark {
@@ -458,51 +430,51 @@ img {
 	margin-right: -50%;
 }
 
-.menu_content{
-	margin: 15px 15px; 
+.menu_content {
+	margin: 15px 15px;
 	display: none;
 }
 
-.menu_content.active{
+.menu_content.active {
 	display: block;
 }
 
-.menu_icon{ 
+.menu_icon {
 	cursor: pointer;
-	line-height:15px; 
+	line-height: 15px;
 	display: inline-table;
 	margin: 10px 15px;
 	opacity: 1;
 }
 
-.menu_icon.active{
+.menu_icon.active {
 	opacity: 0.25;
 }
 
-.menu_icon:hover{
+.menu_icon:hover {
 	color: #FFD081;
 }
 
-.material-icons.em-3 { 
-	font-size: 3em; 
+.material-icons.em-3 {
+	font-size: 3em;
 }
 
-.material-icons.em-1-5 { 
-	font-size: 1.5em; 
+.material-icons.em-1-5 {
+	font-size: 1.5em;
 }
 
-.location-box{
+.location-box {
 	border-style: double;
 	background-color: #7B2900;
-    min-width: 120px;
-    margin: 5px;
-    display: inline-block;
-    padding: 10px;
-    border-radius: 7px;
-    border-color: white;
-    border-width: 3px;
+	min-width: 120px;
+	margin: 5px;
+	display: inline-block;
+	padding: 10px;
+	border-radius: 7px;
+	border-color: white;
+	border-width: 3px;
 }
 
-.location-box:hover{
+.location-box:hover {
 	border-color: #FFD081;
 }
\ No newline at end of file
diff --git a/webAO/client.html b/webAO/client.html
index 5a8bd0e..2343264 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -1,54 +1,56 @@
 <!DOCTYPE html>
-<html lang="en"><head>
-    <title>Attorney Online session</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="client.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<html lang="en">
+
+<head>
+	<title>Attorney Online session</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" type="text/css" href="client.css">
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 	<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
 	<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
-    <!--<script src="golden/js/goldenlayout.js"></script>-->
-    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+	<!--<script src="golden/js/goldenlayout.js"></script>-->
+	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 	<link type="text/css" rel="stylesheet" href="golden/css/goldenlayout.css" />
-    <link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" />
-    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+	<link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" />
+	<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 	<script src="lib/jquery.ui.touch-punch.min.js"></script>
 	<script src="lib/jdataview.min.js"></script>
 	<script src="lib/gify.min.js"></script>
 	<script src="backgrounds.min.js"></script>
 	<script src="evidences.min.js"></script>
 	<script src="ui.b.js"></script>
-    <script src="client.b.js"></script>
+	<script src="client.b.js"></script>
 </head>
 
 <template id="client_wrapper">
-    <meta name="frame-title" lang="en" content="Game">
+	<meta name="frame-title" lang="en" content="Game">
 	<div id="client_background"></div>
-    <div id="client_gamewindow">		
-        <img id="client_court" alt="Courtroom background" onerror="imgError(this);">
-        <img id="client_char" alt="Character sprite" onerror="imgError(this);">
-        <img id="client_bench" alt="Bench overlay">
-        <img id="client_fg" alt="Various overlay" onerror="imgError(this);">
+	<div id="client_gamewindow">
+		<img id="client_court" alt="Courtroom background" onerror="imgError(this);">
+		<img id="client_char" alt="Character sprite" onerror="imgError(this);">
+		<img id="client_bench" alt="Bench overlay">
+		<img id="client_fg" alt="Various overlay" onerror="imgError(this);">
 		<img id="client_evi" src="misc/evidence_selector.png" alt="Character Evidence" onerror="imgError(this);">
 		<img id="client_shout" alt="Effect overlay" src="misc/placeholder.gif" onerror="imgError(this);">
 		<div id="client_name">
-            <p>Dolan</p>
-        </div>        
+			<p>Dolan</p>
+		</div>
 		<div id="client_chat">
-            <p id="client_inner_chat"></p>
-        </div>
+			<p id="client_inner_chat"></p>
+		</div>
 		<img id="client_testimony" alt="Testimony overlay" onerror="imgError(this);">
-    </div>
-    <input id="client_inputbox" class="long" type="text" onkeypress="onEnter(event)" style="padding-left: 1px; padding-right: 1px;">
+	</div>
+	<input id="client_inputbox" class="long" type="text" onkeypress="onEnter(event)" style="padding-left: 1px; padding-right: 1px;">
 	<meta name="frame-title" lang="en" content="Miscellaneous">
-    <div id="client_bars">
+	<div id="client_bars">
 		<span id="client_defense_hp" class="health-box">
 			<div class="health-bar"></div>
 		</span>
 		<span id="client_prosecutor_hp" class="health-box">
 			<div class="health-bar"></div>
 		</span>
-    </div>
+	</div>
 	<div id="client_emo">
 	</div>
 	<br>
@@ -56,7 +58,8 @@
 		<img src="misc/holdit.png" id="button_1" alt="Hold it!" class="client_button" onclick="toggleshout(1)">
 		<img src="misc/objection.png" id="button_2" alt="OBJECTION!" class="client_button" onclick="toggleshout(2)">
 		<img src="misc/takethat.png" id="button_3" alt="Take That!" class="client_button" onclick="toggleshout(3)">
-		<br><br>		
+		<br>
+		<br>
 		<label for="textcolor">Text Color:</label>
 		<select id="textcolor" name="textcolor">
 			<option value="0">Default</option>
@@ -69,51 +72,87 @@
 		</select>
 		<label for="sendsfx">SFX</label>
 		<input type="checkbox" id="sendsfx" name="sendsfx" value="sendsfx">
-		<br><br>
+		<br>
+		<br>
 		<label>Flip: </label>
-		<img src="misc/flip.png"  id="button_flip" alt="Flip" class="client_button" onclick="toggleflip()">
+		<img src="misc/flip.png" id="button_flip" alt="Flip" class="client_button" onclick="toggleflip()">
 		<label>Effect: </label>
 		<img src="misc/flash.png" id="button_effect_1" alt="Flash" class="client_button" onclick="toggleaffect(1)">
 		<img src="misc/shake.png" id="button_effect_2" alt="Shake" class="client_button" onclick="toggleaffect(2)">
 	</div>
 	<fieldset style="margin:10px;">
 		<legend>Action Commands</legend>
-		<!----------- Judge Commands --------------->
+		<!-- Judge Commands -->
 		<span id="judge_action" style="display:none">
-			<span id="menu_wt" onclick="initwt()" class="menu_icon"><i class="material-icons em-3">record_voice_over</i><div>Witness<br>Testimony</div></span>
-			<span id="menu_ce" onclick="initce()" class="menu_icon"><i class="material-icons em-3">question_answer</i><div>Cross<br>Examination</div></span>
+			<span id="menu_wt" onclick="initwt()" class="menu_icon">
+				<i class="material-icons em-3">record_voice_over</i>
+				<div>Witness
+					<br>Testimony</div>
+			</span>
+			<span id="menu_ce" onclick="initce()" class="menu_icon">
+				<i class="material-icons em-3">question_answer</i>
+				<div>Cross
+					<br>Examination</div>
+			</span>
 			<br>
 			<span style="display:inline-block; vertical-align: middle;">
-				<span id="menu_ahpd" onclick="addHPD()" class="menu_icon" ><i class="material-icons em1-5">add_circle</i></span>
+				<span id="menu_ahpd" onclick="addHPD()" class="menu_icon">
+					<i class="material-icons em1-5">add_circle</i>
+				</span>
 				<span style="font-size: 1.25em">Defense</span>
-				<span id="menu_rhpd" onclick="redHPD()" class="menu_icon" ><i class="material-icons em1-5">remove_circle</i></span>
+				<span id="menu_rhpd" onclick="redHPD()" class="menu_icon">
+					<i class="material-icons em1-5">remove_circle</i>
+				</span>
 			</span>
 			<span style="display:inline-block; vertical-align: middle;">
-			<span id="menu_ahpp" onclick="addHPP()" class="menu_icon" ><i class="material-icons em-1-5">add_circle</i></span>
-			 <span style="font-size: 1.25em">Prosecution</span>
-			<span id="menu_rhpp" onclick="redHPP()" class="menu_icon" ><i class="material-icons em-1-5">remove_circle</i></span>
+				<span id="menu_ahpp" onclick="addHPP()" class="menu_icon">
+					<i class="material-icons em-1-5">add_circle</i>
+				</span>
+				<span style="font-size: 1.25em">Prosecution</span>
+				<span id="menu_rhpp" onclick="redHPP()" class="menu_icon">
+					<i class="material-icons em-1-5">remove_circle</i>
+				</span>
 			</span>
 		</span>
-		<!----------- No Commands --------------->
+		<!-- No Commands -->
 		<span id="no_action">
-			No action available for this role.
+			No actions available for this role.
 		</span>
 	</fieldset>
 	<br>
-	<span id="menu_cm" onclick="callmod()" class="menu_icon"><i class="material-icons em-3">report</i><div>Call Mod</div></span>			
+	<span id="menu_cm" onclick="callmod()" class="menu_icon">
+		<i class="material-icons em-3">report</i>
+		<div>Call Mod</div>
+	</span>
 </template>
 
 <template id="mainmenu">
-    <meta name="frame-title" lang="en" content="Log">
-    <div id="client_menu">
-        <div class="hrtext">↓ Main Menu ↓</div>
-		<span id="menu_1" onclick="togglemenu(1)" class="menu_icon active"><i class="material-icons em-3">work</i><div>Evidence</div></span>
-		<span id="menu_2" onclick="togglemenu(2)" class="menu_icon"><i class="material-icons em-3">room</i><div>Location</div></span>
-		<span id="menu_3" onclick="togglemenu(3)" class="menu_icon"><i class="material-icons em-3">settings</i><div>Settings</div></span>
-		<span id="menu_4" onclick="togglemenu(4)" class="menu_icon"><i class="material-icons em-3">description</i><div>Guide</div></span>
-		<span id="menu_5" onclick="togglemenu(5)" class="menu_icon"><i class="material-icons em-3">person</i><div>About</div></span>
-		<div class="hrtext">↓ <span id="content_name">Content</span> ↓</div>
-		<!--------  Evidence section  -------->
+	<meta name="frame-title" lang="en" content="Log">
+	<div id="client_menu">
+		<div class="hrtext">↓ Main Menu ↓</div>
+		<span id="menu_1" onclick="togglemenu(1)" class="menu_icon active">
+			<i class="material-icons em-3">work</i>
+			<div>Evidence</div>
+		</span>
+		<span id="menu_2" onclick="togglemenu(2)" class="menu_icon">
+			<i class="material-icons em-3">room</i>
+			<div>Location</div>
+		</span>
+		<span id="menu_3" onclick="togglemenu(3)" class="menu_icon">
+			<i class="material-icons em-3">settings</i>
+			<div>Settings</div>
+		</span>
+		<span id="menu_4" onclick="togglemenu(4)" class="menu_icon">
+			<i class="material-icons em-3">description</i>
+			<div>Guide</div>
+		</span>
+		<span id="menu_5" onclick="togglemenu(5)" class="menu_icon">
+			<i class="material-icons em-3">person</i>
+			<div>About</div>
+		</span>
+		<div class="hrtext">↓
+			<span id="content_name">Content</span> ↓</div>
+		<!--  Evidence section  -->
 		<span class="menu_content active" id="content_1">
 			<meta name="frame-title" lang="en" content="Evidence">
 			<fieldset style="text-align: left">
@@ -125,165 +164,206 @@
 					<label for="evi_filename">Icon:</label>
 					<select id="evi_select" name="evi_select" onchange="updateEvidenceIcon()"></select>
 					<input id="evi_filename" name="evi_filename" class="short" type="text">
-					<br><br>
+					<br>
+					<br>
 					<label for="evi_name">Name:</label>
 					<input id="evi_name" name="evi_name" class="short" type="text">
-					<br><br>
+					<br>
+					<br>
 					<label for="evi_desc">Description:</label>
 					<textarea id="evi_desc" name="evi_desc" rows="2" cols="20"></textarea>
 				</span>
-				<br><br>
+				<br>
+				<br>
 				<span style="display:block;text-align:center">
-				<img src="misc/evidence_add.png" id="evi_add" alt="Add Evidence" class="client_button hover_button" onclick="addevidence()">
-				<img src="misc/evidence_edit.png" id="evi_edit" alt="Edit Evidence" class="client_button hover_button inactive" onclick="editevidence()">
-				<img src="misc/evidence_cancel.png" id="evi_cancel" alt="Cancel Evidence" class="client_button hover_button inactive" onclick="cancelevidence()">
-				<img src="misc/evidence_remove.png" id="evi_del" alt="Remove Evidence" class="client_button hover_button inactive" onclick="delevidence()">
-				</span>				
-			</fieldset>			
+					<img src="misc/evidence_add.png" id="evi_add" alt="Add Evidence" class="client_button hover_button" onclick="addevidence()">
+					<img src="misc/evidence_edit.png" id="evi_edit" alt="Edit Evidence" class="client_button hover_button inactive" onclick="editevidence()">
+					<img src="misc/evidence_cancel.png" id="evi_cancel" alt="Cancel Evidence" class="client_button hover_button inactive" onclick="cancelevidence()">
+					<img src="misc/evidence_remove.png" id="evi_del" alt="Remove Evidence" class="client_button hover_button inactive" onclick="delevidence()">
+				</span>
+			</fieldset>
 			<br>
 			<div id="evidences"></div>
 			<br>
-			<img src="misc/present.png" id="button_present" alt="Present" class="client_button" onclick="togglepresent()"> 
+			<img src="misc/present.png" id="button_present" alt="Present" class="client_button" onclick="togglepresent()">
 		</span>
-		
-		<!--------  Location section  -------->
+
+		<!-- Location section -->
 		<span class="menu_content" id="content_2">
-			<div id="areas"></div><br>
+			<div id="areas"></div>
+			<br>
 			<fieldset style="text-align: left">
 				<legend>Current Area Background</legend>
 				<span>
 					<img id="bg_preview" src="misc/placeholder.gif" alt="Background Preview" onerror="imgError(this);">
 				</span>
-				<span style="display:inline-block">				
-					<label for="bg_filename">Background:</label><br>
+				<span style="display:inline-block">
+					<label for="bg_filename">Background:</label>
+					<br>
 					<select id="bg_select" name="bg_select" onchange="updateBackgroundPreview()" style="margin-top:10px"></select>
 					<br>
 					<input id="bg_filename" name="bg_filename" class="short" type="text" style="margin-top:10px">
-					<br><br>
+					<br>
+					<br>
 					<img src="misc/location_change.png" id="bg_change" alt="Change" class="client_button hover_button" onclick="changeBackgroundOOC()">
-				<span>
+					<span>
 			</fieldset>
-		</span>
-		
-		<!--------  Settings section  -------->
-		<span class="menu_content" id="content_3">
-			<meta name="frame-title" lang="en" content="Settings">
-			<label for="OOC_name">Server chat name:</label>
-			<input id="OOC_name" name="OOC_name" class="short" type="text">
-			<label for="role_select" >Role:</label>
-			<select id="role_select" name="role_select" onchange="changeRoleOOC()">
-				<option value="def">Defense</option>
-				<option value="pro">Prosecution</option>
-				<option value="jud">Judge</option>
-				<option value="wit">Witness</option>
-				<option value="hld">Helper Defense</option>
-				<option value="hlp">Helper Prosecution</option>
-			</select>			
-			<br><br>
-			<div class="slider">Music<input id="client_mvolume" class="long" type="range" min="0" max="100" value="80" onchange="changeMusicVolume()"></div>
-			<div class="slider">SFX <input id="client_svolume" class="long" type="range" min="0" max="100" value="70" onchange="changeSFXVolume()"></div>
-			<div class="slider">Blip <input id="client_bvolume" class="long" type="range" min="0" max="100" value="60" onchange="changeBlipVolume()"></div>
-			<br>
-			<img src="misc/character_change.png" id="char_change" alt="Change" class="client_button hover_button" onclick="changeCharacter()">
-			<img src="misc/character_random.png" id="char_change" alt="Change" class="client_button hover_button" onclick="randomCharacterOOC()">
-			<br><br>
-			<label for="client_encoding"> Client side chat encoding:</label>	
-			<select id="client_encoding" name="client_encoding">
-				  <option value="none">None</option>
-				  <option value="unicode">Unicode</option>
-				  <option value="utf16">UTF-16</option>
-			</select>
-			<br><br>
-			<label for="client_decoding"> Client side chat decoding:</label>	
-			<select id="client_decoding" name="client_decoding">
-				  <option value="none">None</option>
-				  <option value="unicode">Unicode</option>
-				  <option value="utf16">UTF-16</option>
-			</select>
-			<br><br>
-			<span style="color:red">* If you not sure what does this means, please don't change these following settings.</span>
-			<br><br>
-			<label for="bg_command">Change background command:</label>
-			<input id="bg_command" name="bg_command" class="short" type="text" value="bg $1">
-			<br><br>
-			<label for="role_command">Change role command:</label>
-			<input id="role_command" name="role_command" class="short" type="text" value="pos $1">
-			<br><br>
-			<label for="randomchar_command">Random character command:</label>
-			<input id="randomchar_command" name="randomchar_command" class="short" type="text" value="randomchar">
-		</span>
-		
-		<!--------  Guide section  -------->
-		<span class="menu_content" id="content_4">
-			<span style="text-align:left;margin-left:15px;display:block">
-			<b>BBcode</b> * Only work on webAO
-			<ol style="line-height:1.5em;">
-				<li>\n : new line</li>
-				<li>[b][/b] : <b>bolded text</b></li>
-				<li>[i][/i] : <i>italicized text</i></li>
-				<li>[u][/u] : <u>underlined text</u></li>
-				<li>[s][/s] : <del>strikethrough text</del></li>
-				<li>[sub][/sub] : <sub>subscript text</sub></li>
-				<li>[sup][/sup] : <sup>superscript text</sup></li>
-				<li>[m=#0f0][/m] : <mark style="background-color:#0f0">highlighted text</mark></li>
-				<li>[c=cyan][/c] : <span style="color:cyan">colorized text</span></li>
-			</ol>
 			</span>
-		</span>
-		
-		<!--------  About section  -------->		
-		<span class="menu_content" id="content_5">
-		    <meta name="frame-title" lang="en" content="About">
-		<img id="about-logo" src="images/logo-new.png" alt="Attorney Online logo">
-		<h1 style="line-height: .3em;">webAO</h1>
-		<h3>version 2.1.3</h3>
-		<p>Client created by <a href="https://github.com/stonedDiscord">@stonedDiscord</a> and fixed up by <a href="https://github.com/oldmud0">@oldmud0</a>.</p>
-		<p>Modified by <a href="https://github.com/qubrick">Qubrick</a></p>
-		<p>Special thanks to Aleks for reverse engineering the original Delphi client written by FanatSors.</p>
-		</span>
-    </div>
+
+			<!-- Settings section -->
+			<span class="menu_content" id="content_3">
+				<meta name="frame-title" lang="en" content="Settings">
+				<label for="OOC_name">Server chat name:</label>
+				<input id="OOC_name" name="OOC_name" class="short" type="text">
+				<label for="role_select">Role:</label>
+				<select id="role_select" name="role_select" onchange="changeRoleOOC()">
+					<option value="def">Defense</option>
+					<option value="pro">Prosecution</option>
+					<option value="jud">Judge</option>
+					<option value="wit">Witness</option>
+					<option value="hld">Helper Defense</option>
+					<option value="hlp">Helper Prosecution</option>
+				</select>
+				<br>
+				<br>
+				<div class="slider">Music
+					<input id="client_mvolume" class="long" type="range" min="0" max="100" value="80" onchange="changeMusicVolume()">
+				</div>
+				<div class="slider">SFX
+					<input id="client_svolume" class="long" type="range" min="0" max="100" value="70" onchange="changeSFXVolume()">
+				</div>
+				<div class="slider">Blip
+					<input id="client_bvolume" class="long" type="range" min="0" max="100" value="60" onchange="changeBlipVolume()">
+				</div>
+				<br>
+				<img src="misc/character_change.png" id="char_change" alt="Change" class="client_button hover_button" onclick="changeCharacter()">
+				<img src="misc/character_random.png" id="char_change" alt="Change" class="client_button hover_button" onclick="randomCharacterOOC()">
+				<br>
+				<br>
+				<label for="client_encoding"> Client side chat encoding:</label>
+				<select id="client_encoding" name="client_encoding">
+					<option value="none">None</option>
+					<option value="unicode">Unicode</option>
+					<option value="utf16">UTF-16</option>
+				</select>
+				<br>
+				<br>
+				<label for="client_decoding"> Client side chat decoding:</label>
+				<select id="client_decoding" name="client_decoding">
+					<option value="none">None</option>
+					<option value="unicode">Unicode</option>
+					<option value="utf16">UTF-16</option>
+				</select>
+				<br>
+				<br>
+				<span style="color:red">Only touch these settings if you know what you are doing.</span>
+				<br>
+				<br>
+				<label for="bg_command">Change background command:</label>
+				<input id="bg_command" name="bg_command" class="short" type="text" value="bg $1">
+				<br>
+				<br>
+				<label for="role_command">Change role command:</label>
+				<input id="role_command" name="role_command" class="short" type="text" value="pos $1">
+				<br>
+				<br>
+				<label for="randomchar_command">Random character command:</label>
+				<input id="randomchar_command" name="randomchar_command" class="short" type="text" value="randomchar">
+			</span>
+
+			<!--  Guide section  -->
+			<span class="menu_content" id="content_4">
+				<span style="text-align:left;margin-left:15px;display:block">
+					<b>BBcode</b>Only works on webAO
+					<ol style="line-height:1.5em;">
+						<li>\n : new line</li>
+						<li>[b][/b] :
+							<b>bolded text</b>
+						</li>
+						<li>[i][/i] :
+							<i>italicized text</i>
+						</li>
+						<li>[u][/u] :
+							<u>underlined text</u>
+						</li>
+						<li>[s][/s] :
+							<del>strikethrough text</del>
+						</li>
+						<li>[sub][/sub] :
+							<sub>subscript text</sub>
+						</li>
+						<li>[sup][/sup] :
+							<sup>superscript text</sup>
+						</li>
+						<li>[m=#0f0][/m] :
+							<mark style="background-color:#0f0">highlighted text</mark>
+						</li>
+						<li>[c=cyan][/c] :
+							<span style="color:cyan">colorized text</span>
+						</li>
+					</ol>
+				</span>
+			</span>
+
+			<!-- About section -->
+			<span class="menu_content" id="content_5">
+				<meta name="frame-title" lang="en" content="About">
+				<img id="about-logo" src="images/logo-new.png" alt="Attorney Online logo">
+				<h1 style="line-height: .3em;">webAO</h1>
+				<h3>version 2.3</h3>
+				<p>Client created by
+					<a href="https://github.com/stonedDiscord">@stonedDiscord</a> and fixed up by
+					<a href="https://github.com/oldmud0">@oldmud0</a> and
+					<a href="https://github.com/qubrick">Qubrick</a>.</p>
+				<p>Special thanks to Aleks for reverse engineering the original Delphi client written by FanatSors.</p>
+			</span>
+	</div>
 </template>
 
 <template id="log">
-    <meta name="frame-title" lang="en" content="Log">
-    <div id="client_log">
-        <div class="hrtext">↓ log starts here ↓</div>
-    </div>
+	<meta name="frame-title" lang="en" content="Log">
+	<div id="client_log">
+		<div class="hrtext">↓ log starts here ↓</div>
+	</div>
 </template>
 
 <template id="ooc">
-    <meta name="frame-title" lang="en" content="Server">
-    <div style="height: 100%; display: flex; flex-direction: column;">
-        <textarea id="client_ooclog" style="flex: 1 auto" readonly></textarea>
-        <input id="client_oocinputbox" class="long" type="text" onkeypress="onOOCEnter(event)">
-    </div>
+	<meta name="frame-title" lang="en" content="Server">
+	<div style="height: 100%; display: flex; flex-direction: column;">
+		<textarea id="client_ooclog" style="flex: 1 auto" readonly></textarea>
+		<input id="client_oocinputbox" class="long" type="text" onkeypress="onOOCEnter(event)">
+	</div>
 </template>
 
 <template id="music">
-    <meta name="frame-title" lang="en" content="Music">
-    <select id="client_musiclist" size="5" onclick="musiclist_click(event)" style="width: 100%; height: 100%;">
-    </select>
+	<meta name="frame-title" lang="en" content="Music">
+	<select id="client_musiclist" size="5" onclick="musiclist_click(event)" style="width: 100%; height: 100%;">
+	</select>
 </template>
 
 <div id="callmod_dialog" title="Are you sure to call mod?">
-  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>They might be very busy. Are you sure?</p>
+	<p>
+		<span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>They might be very busy. Are you sure?</p>
 </div>
 
 <body>
-    <span id="sound"></span>
-    <div id="here"></div>
-    <div id="client_loading">
-        <h1 id="client_loadingtext">Loading</h1>
-        <button onclick="RetryButton()">RETRY</button>
-    </div>
-        <div id="client_charselect">
-        <button onclick="pickchar(1001)">SPECTATE</button>
-        <table id="client_chartable"></table>
-    </div>
-    <div id="client_error" class="error" style="display: none">
-            <p>You were disconnected from the server.</p>
-            <p>Code: <span id="error_id">(none)</span></p>
-            <button onclick="ReconnectButton()">Reconnect</button>
-    </div>
+	<span id="sound"></span>
+	<div id="here"></div>
+	<div id="client_loading">
+		<h1 id="client_loadingtext">Loading</h1>
+		<button onclick="RetryButton()">RETRY</button>
+	</div>
+	<div id="client_charselect">
+		<button onclick="pickchar(1001)">SPECTATE</button>
+		<table id="client_chartable"></table>
+	</div>
+	<div id="client_error" class="error" style="display: none">
+		<p>You were disconnected from the server.</p>
+		<p>Code:
+			<span id="error_id">(none)</span>
+		</p>
+		<button onclick="ReconnectButton()">Reconnect</button>
+	</div>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/webAO/client.js b/webAO/client.js
index 18363aa..feafde3 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -1,11 +1,11 @@
 /*
  * Glorious webAO
- * made by sD, refactored by oldmud0
+ * made by sD, refactored by oldmud0 and Qubrick
  * credits to aleks for original idea and source
-*/
+ */
 
 let queryDict = {};
-location.search.substr(1).split("&").forEach(function(item) {
+location.search.substr(1).split("&").forEach(function (item) {
 	queryDict[item.split("=")[0]] = item.split("=")[1]
 });
 
@@ -35,43 +35,43 @@ class Client {
 	constructor(address) {
 		this.serv = new WebSocket("ws://" + address);
 
-		this.serv.onopen    = (evt) => this.onOpen(evt);
-		this.serv.onclose   = (evt) => this.onClose(evt);
+		this.serv.onopen = (evt) => this.onOpen(evt);
+		this.serv.onclose = (evt) => this.onClose(evt);
 		this.serv.onmessage = (evt) => this.onMessage(evt);
-		this.serv.onerror   = (evt) => this.onError(evt);
-		
+		this.serv.onerror = (evt) => this.onError(evt);
+
 		this.flip = false;
 		this.presentable = false;
-		
-		this.hp = [0,0];
+
+		this.hp = [0, 0];
 
 		this.playerID = 1;
 		this.charID = -1;
 		this.testimonyID = 0;
 
 		this.chars = [];
-		this.emotes = [];		
+		this.emotes = [];
 		this.evidences = [];
-		
+
 		this.resources = {
-			"holdit":{
+			"holdit": {
 				"src": "misc/holdit.gif",
 				"duration": 720
 			},
-			"objection":{
+			"objection": {
 				"src": "misc/objection.gif",
 				"duration": 720
 			},
-			"takethat":{
+			"takethat": {
 				"src": "misc/takethat.gif",
 				"duration": 840
 			},
-			"witnesstestimony":{
+			"witnesstestimony": {
 				"src": "misc/witnesstestimony.gif",
 				"duration": 1560,
 				"sfx": "sounds/general/sfx-testimony.wav"
 			},
-			"crossexamination":{
+			"crossexamination": {
 				"src": "misc/crossexamination.gif",
 				"duration": 1600,
 				"sfx": "sounds/general/sfx-testimony2.wav"
@@ -87,29 +87,29 @@ class Client {
 		this.musicList = Object();
 
 		this.handlers = {
-			"MS":         (args) => this.handleMS(args),
-			"CT":         (args) => this.handleCT(args),
-			"MC":         (args) => this.handleMC(args),
-			"RMC":        (args) => this.handleRMC(args),
-			"CI":         (args) => this.handleCI(args),
-			"SC":         (args) => this.handleSC(args),
-			"EI":         (args) => this.handleEI(args),
-			"LE":         (args) => this.handleLE(args),
-			"EM":         (args) => this.handleEM(args),
-			"SM":         (args) => this.handleSM(args),
-			"music":      (args) => this.handlemusic(args),
-			"DONE":       (args) => this.handleDONE(args),
-			"BN":         (args) => this.handleBN(args),			
-			"NBG":        (args) => this.handleNBG(args),
-			"HP":         (args) => this.handleHP(args),
-			"RT":         (args) => this.handleRT(args),
-			"ZZ":         (args) => this.handleZZ(args),
-			"ID":         (args) => this.handleID(args),
-			"PN":         (args) => this.handlePN(args),
-			"SI":         (args) => this.handleSI(args),
+			"MS": (args) => this.handleMS(args),
+			"CT": (args) => this.handleCT(args),
+			"MC": (args) => this.handleMC(args),
+			"RMC": (args) => this.handleRMC(args),
+			"CI": (args) => this.handleCI(args),
+			"SC": (args) => this.handleSC(args),
+			"EI": (args) => this.handleEI(args),
+			"LE": (args) => this.handleLE(args),
+			"EM": (args) => this.handleEM(args),
+			"SM": (args) => this.handleSM(args),
+			"music": (args) => this.handlemusic(args),
+			"DONE": (args) => this.handleDONE(args),
+			"BN": (args) => this.handleBN(args),
+			"NBG": (args) => this.handleNBG(args),
+			"HP": (args) => this.handleHP(args),
+			"RT": (args) => this.handleRT(args),
+			"ZZ": (args) => this.handleZZ(args),
+			"ID": (args) => this.handleID(args),
+			"PN": (args) => this.handlePN(args),
+			"SI": (args) => this.handleSI(args),
 			"CharsCheck": (args) => this.handleCharsCheck(args),
-			"PV":         (args) => this.handlePV(args),
-			"CHECK":      (args) => {}
+			"PV": (args) => this.handlePV(args),
+			"CHECK": (args) => {}
 		}
 
 		this._lastTimeICReceived = new Date(0);
@@ -128,12 +128,12 @@ class Client {
 	myEmote() {
 		return this.emotes[this.selectedEmote];
 	}
-	
+
 	/**
 	 * Gets the player's currently selected evidence if presentable.
 	 */
 	myEvidence() {
-		return (this.presentable)? this.selectedEvidence : 0;
+		return this.presentable ? this.selectedEvidence : 0;
 	}
 
 	/**
@@ -153,8 +153,12 @@ class Client {
 	 * @param {string} side the name of the side in the background
 	 * @param {string} ssfxname the name of the sound effect
 	 * @param {string} zoom whether or not to zoom
-	 * @param {string} ssfxdelay the delay (in milliseconds) to play the sound effect
+	 * @param {number} ssfxdelay the delay (in milliseconds) to play the sound effect
 	 * @param {string} objection the number of the shout to play
+	 * @param {string} evidence the filename of evidence to show
+	 * @param {number} flip change to 1 to reverse sprite for position changes
+	 * @param {string} flash screen flash effect
+	 * @param {string} color text color
 	 */
 	sendIC(speaking, name, silent, message, side, ssfxname, zoom, ssfxdelay, objection, evidence, flip, flash, color) {
 		this.serv.send(
@@ -163,7 +167,7 @@ class Client {
 			`#${this.charID}#${ssfxdelay}#${selectedShout}#${evidence}#${flip}#${flash}#${color}#%`
 		);
 	}
-	
+
 	/**
 	 * Sends add evidence command.
 	 * @param {string} evidence name
@@ -173,10 +177,10 @@ class Client {
 	sendPE(name, desc, img) {
 		this.serv.send(`PE#${escapeChat(encodeChat(name))}#${escapeChat(encodeChat(desc))}#${img}#%`);
 	}
-	
+
 	/**
 	 * Sends edit evidence command.
-	 * @param {string} evidence id
+	 * @param {number} evidence id
 	 * @param {string} evidence name
 	 * @param {string} evidence description
 	 * @param {string} evidence image filename
@@ -184,24 +188,24 @@ class Client {
 	sendEE(id, name, desc, img) {
 		this.serv.send(`EE#${id}#${escapeChat(encodeChat(name))}#${escapeChat(encodeChat(desc))}#${img}#%`);
 	}
-	
+
 	/**
 	 * Sends delete evidence command.
-	 * @param {string} evidence id
+	 * @param {number} evidence id
 	 */
 	sendDE(id) {
 		this.serv.send(`DE#${id}#%`);
 	}
-	
+
 	/**
 	 * Sends health point command.
-	 * @param {int} side the position
-	 * @param {int} hp the health point
+	 * @param {number} side the position
+	 * @param {number} hp the health point
 	 */
-	sendHP(side,hp) {
+	sendHP(side, hp) {
 		this.serv.send(`HP#${side}#${hp}#%`);
 	}
-	
+
 	/**
 	 * Sends call mod command.
 	 * @param {string} message to mod
@@ -209,13 +213,13 @@ class Client {
 	sendZZ(msg) {
 		this.serv.send(`ZZ#${msg}#%`);
 	}
-	
+
 	/**
 	 * Sends testimony command.
 	 * @param {string} testimony type
 	 */
 	sendRT(testimony) {
-		if(this.chars[this.charID].side == "jud"){
+		if (this.chars[this.charID].side == "jud") {
 			this.serv.send(`RT#${testimony}#%`);
 		}
 	}
@@ -247,7 +251,7 @@ class Client {
 		this.serv.send("ID#webAO#2.4.5#%");
 		this.checkUpdater = setInterval(() => this.sendCheck(), 5000);
 	}
-	
+
 	/**
 	 * Load game resources.
 	 */
@@ -255,37 +259,37 @@ class Client {
 		// Set to playerID to server chat name
 		document.getElementById("OOC_name").value = "web" + this.playerID;
 		// Load evidence array to select
-		var evidence_select = document.getElementById("evi_select");
+		const evidence_select = document.getElementById("evi_select");
 		evidence_select.add(new Option("Custom", 0));
-		for(let i = 1; i <= evidence_arr.length; i++) {
-		  evidence_select.add(new Option(evidence_arr[i - 1]));
-		}		
+		evidence_arr.forEach(evidence => {
+			evidence_select.add(new Option(evidence));
+		});
 		// Load background array to select
-		var background_select = document.getElementById("bg_select");
+		const background_select = document.getElementById("bg_select");
 		background_select.add(new Option("Custom", 0));
-		for(let i = 1; i <= background_arr.length; i++) {
-		  background_select.add(new Option(background_arr[i - 1]));
-		}
+		background_arr.forEach(background => {
+			background_select.add(new Option(background));
+		});
 		// Calculate gif duration of shouts
-		let shouts = ["holdit", "objection", "takethat"];
+		const shouts = ["holdit", "objection", "takethat"];
 		for (let i = 0; i < shouts.length; i++) {
 			let shout_src = AO_HOST + this.resources[shouts[i]]["src"];
-			FileExist(shout_src, this.callbackLoadImageResources, shouts[i]);		
+			FileExist(shout_src, this.callbackLoadImageResources, shouts[i]);
 		}
-		
+
 		// Calculate gif duration of testimony
-		let testimony = ["witnesstestimony", "crossexamination"];
+		const testimony = ["witnesstestimony", "crossexamination"];
 		for (let i = 0; i < testimony.length; i++) {
-			let testimony_src = AO_HOST + "themes/default/"+ testimony[i] +".gif";
-			// Check iamge existed
+			const testimony_src = `${AO_HOST}themes/default/${testimony[i]}.gif`;
+			// Check image existed
 			FileExist(testimony_src, this.callbackLoadImageResources, testimony[i]);
 			// Check sfx existed
 			FileExist(AO_HOST + this.resources[testimony[i]]["sfx"], this.callbackLoadSFXResources, testimony[i]);
-		}	
+		}
 		// TODO: Cache some resources
-		
+
 	}
-	
+
 	/**
 	 * Callback for image resources.
 	 * @param {boolean} result the image is existed or not
@@ -293,21 +297,21 @@ class Client {
 	 * @param {string} src the url of resource
 	 */
 	callbackLoadImageResources(result, resource, src) {
-		if(result){
+		if (result) {
 			client.resources[resource]["src"] = src;
-			viewport.getAnimLength(src,client.callbackGetResourceLength, resource);
-		}	
+			viewport.getAnimLength(src, client.callbackGetResourceLength, resource);
+		}
 	}
-	
+
 	/**
 	 * Callback for animation duration resource
 	 * @param {integer} length the animation length
 	 * @param {string} resource the resource name
 	 */
 	callbackGetResourceLength(length, resource) {
-		client.resources[resource]["duration"] = length; 
+		client.resources[resource]["duration"] = length;
 	}
-	
+
 	/**
 	 * Callback for sfx resources.
 	 * @param {boolean} result the audio is existed or not
@@ -315,38 +319,41 @@ class Client {
 	 * @param {string} src the url of resource
 	 */
 	callbackLoadSFXResources(result, resource, src) {
-		if(result){
+		if (result) {
 			client.resources[resource]["sfx"] = src;
-		}	
-	}	
-	
+		}
+	}
+
 	/**
 	 * Create observer to detect BBCode elements
 	 * then manipulate them.
 	 */
 	initialObservBBCode() {
-		var target = document.getElementById("client_inner_chat");
-		var observer = new MutationObserver(function(mutations) {
-		  mutations.forEach(function(mutation) {
-			var children = mutation.addedNodes;
-			if (children !== null) {
-				children.forEach( function(node) {
-					if (node.tagName == "C") {
-						node.style.color = node.getAttribute("a");
-					} else if(node.tagName == "M"){
-						if (node.hasAttribute('a')) {
-							node.style.backgroundColor = node.getAttribute("a");
-						} else {
-							node.style.backgroundColor = "yellow";
-							node.style.color = "black";
+		const target = document.getElementById("client_inner_chat");
+		const observer = new MutationObserver(function (mutations) {
+			mutations.forEach(function (mutation) {
+				var children = mutation.addedNodes;
+				if (children !== null) {
+					children.forEach(function (node) {
+						if (node.tagName == "C") {
+							node.style.color = node.getAttribute("a");
+						} else if (node.tagName == "M") {
+							if (node.hasAttribute('a')) {
+								node.style.backgroundColor = node.getAttribute("a");
+							} else {
+								node.style.backgroundColor = "yellow";
+								node.style.color = "black";
+							}
 						}
-					}
-				});
-			}
-		  });    
+					});
+				}
+			});
 		});
-		var config = {attributes: true,childList: true};
-		observer.observe(target,config);
+		const config = {
+			attributes: true,
+			childList: true
+		};
+		observer.observe(target, config);
 	}
 
 	/**
@@ -437,6 +444,15 @@ class Client {
 	}
 
 	/**
+	 * 
+	 * @param {string} msg chat message to prepare for display 
+	 */
+	prepChat(msg){
+		// TODO: make this less awful
+		return decodeBBCode(escapeHtml(decodeChat(unescapeChat(msg))));
+	}
+
+	/**
 	 * Handles an in-character chat message.
 	 * @param {*} args packet arguments
 	 */
@@ -452,7 +468,7 @@ class Client {
 				name: args[3],
 				speaking: "(b)" + escape(args[4]),
 				silent: "(a)" + escape(args[4]),
-				content: decodeBBCode(escapeHtml(decodeChat(unescapeChat(args[5])))), // Escape HTML tag, Use BBCode Only!
+				content: prepChat(args[5]), // Escape HTML tag, Use BBCode Only!
 				side: args[6],
 				sound: escape(args[7]),
 				type: args[8],
@@ -522,7 +538,7 @@ class Client {
 		// Music offset + drift from song loading
 		music.totime = args[1];
 		music.offset = new Date().getTime() / 1000;
-		music.addEventListener('loadedmetadata', function() {
+		music.addEventListener('loadedmetadata', function () {
 			music.currentTime += parseFloat(music.totime + (new Date().getTime() / 1000 - music.offset)).toFixed(3);
 			music.play();
 		}, false);
@@ -580,7 +596,7 @@ class Client {
 		//serv.send("AE#" + (args[1] + 1) + "#%");
 		this.serv.send("RM#%");
 	}
-	
+
 	/**
 	 * Handles incoming evidence list, all evidences at once
 	 * item per packet.
@@ -590,7 +606,7 @@ class Client {
 	handleLE(args) {
 		this.evidences = [];
 		for (let i = 1; i < args.length - 1; i++) {
-			var arg = args[i].split("&");
+			const arg = args[i].split("&");
 			this.evidences[i - 1] = {
 				"name": escapeHtml(decodeChat(unescapeChat(arg[0]))),
 				"desc": escapeHtml(decodeChat(unescapeChat(arg[1]))),
@@ -598,14 +614,15 @@ class Client {
 				"icon": AO_HOST + "evidence/" + escape(arg[2])
 			}
 		}
-		
-		var evidence_box = document.getElementById("evidences");
+
+		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="client_button" ' +
-				'onclick="pickevidence('+ i +')">';								
+		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="client_button"
+				onclick="pickevidence(${i})">`;
 		}
 	}
 
@@ -634,38 +651,41 @@ class Client {
 	 */
 	handleSM(args) {
 		document.getElementById("client_loadingtext").innerHTML = "Loading Music ";
-		let hmusiclist = document.getElementById("client_musiclist"), flagAudio = false;
-		
+		const hmusiclist = document.getElementById("client_musiclist");
+		let flagAudio = false;
+
 		for (let i = 1; i < args.length - 1; i++) {
 			// Check when found the song for the first time
-			if(/\.(?:wav|mp3|mp4|ogg|mid)$/i.test(args[i]) && !flagAudio){
+			if (/\.(?:wav|mp3|mp4|ogg|opus)$/i.test(args[i]) && !flagAudio) {
 				flagAudio = true;
 			}
-			
-			if(flagAudio) {
+
+			if (flagAudio) {
 				// After reached the audio put everything in the music list
 				let newentry = document.createElement("OPTION");
 				newentry.text = args[i];
 				hmusiclist.options.add(newentry);
-			
+
 			} else {
 				// Create area button
 				let newarea = document.createElement("SPAN");
 				newarea.className = "location-box";
-				newarea.textContent = args[i]; 
-				newarea.onclick = function(){ area_click(this) };
+				newarea.textContent = args[i];
+				newarea.onclick = function () {
+					area_click(this)
+				};
 				document.getElementById("areas").appendChild(newarea);
 			}
 		}
-		
+
 		// Move first audio title from area box to music list
 		let area_box = document.getElementById("areas");
 		let audio_title = document.createElement("OPTION");
 		audio_title.text = area_box.lastChild.textContent;
 		hmusiclist.insertBefore(audio_title, hmusiclist.firstChild);
 		area_box.removeChild(area_box.lastChild); // Remove from arae box
-				
-		this.serv.send("RD#%");		
+
+		this.serv.send("RD#%");
 	}
 
 	/**
@@ -696,19 +716,19 @@ class Client {
 	 */
 	handleBN(args) {
 		viewport.bgname = escape(args[1]);
-		let bg_index = getIndexFromSelect("bg_select", escape(args[1]));
+		const bg_index = getIndexFromSelect("bg_select", escape(args[1]));
 		document.getElementById("bg_select").selectedIndex = bg_index;
 		updateBackgroundPreview();
-		if(bg_index == 0){
+		if (bg_index == 0) {
 			document.getElementById("bg_filename").value = args[1];
 		}
 		document.getElementById("bg_preview").src = AO_HOST + 'background/' + escape(args[1]) + "/defenseempty.png";
-		if(this.charID == -1){
+		if (this.charID == -1) {
 			changeBackground("jud");
 		} else {
 			changeBackground(this.chars[this.charID].side);
 		}
-		
+
 	}
 
 	handleNBG(args) {
@@ -720,18 +740,22 @@ class Client {
 	 * @param {Array} args packet arguments
 	 */
 	handleHP(args) {
-		let percent_hp = args[2] * 10;
+		const percent_hp = args[2] * 10;
 		if (args[1] == 1) {
 			// Def hp
 			this.hp[0] = args[2];
-			$("#client_defense_hp > .health-bar").animate({ 'width': percent_hp + "%" }, 500);
+			$("#client_defense_hp > .health-bar").animate({
+				'width': percent_hp + "%"
+			}, 500);
 		} else {
 			// Pro hp
 			this.hp[1] = args[2];
-			$("#client_prosecutor_hp > .health-bar").animate({ 'width': percent_hp + "%" }, 500);
-		}		
+			$("#client_prosecutor_hp > .health-bar").animate({
+				'width': percent_hp + "%"
+			}, 500);
+		}
 	}
-	
+
 	/**
 	 * Handles a testimony states.
 	 * @param {Array} args packet arguments
@@ -746,7 +770,7 @@ class Client {
 		}
 		viewport.initTestimonyUpdater();
 	}
-	
+
 	/**
 	 * Handles a call mod message.
 	 * @param {Array} args packet arguments
@@ -758,7 +782,7 @@ class Client {
 			oocLog.scrollTop = oocLog.scrollHeight;
 		}
 	}
-	
+
 	/**
 	 * Handles the issuance of a player ID by the server.
 	 * @param {Array} args packet arguments
@@ -809,7 +833,7 @@ class Client {
 			if (i % CHAR_SELECT_WIDTH == 0) {
 				document.getElementById("client_chartable").appendChild(tr);
 			}
-		}		
+		}
 		//changeBackground("def");
 	}
 
@@ -823,7 +847,6 @@ class Client {
 		let me = this.me();
 		let emotes = this.emotes;
 		let xhr = new XMLHttpRequest();
-		let isOfficialAssets = (AO_HOST == "http://assets.aceattorneyonline.com/base/");
 		xhr.withCredentials = false;
 		document.getElementById("client_emo").innerHTML = ""; // Clear emote box
 		xhr.open('GET', AO_HOST + 'characters/' + escape(this.me().name) + '/char.ini', true);
@@ -844,23 +867,29 @@ class Client {
 					if (typeof pinifile.SoundT !== 'undefined') {
 						esfxd = pinifile.SoundT[i];
 					}
+					// Make sure the asset server is case insensitive, or that everything on it is lowercase
 					emotes[i] = {
-						desc: (isOfficialAssets)? emoteinfo[0].toLowerCase() : emoteinfo[0],
-						speaking: (isOfficialAssets)? emoteinfo[1].toLowerCase() : emoteinfo[1],
-						silent: (isOfficialAssets)? emoteinfo[2].toLowerCase() : emoteinfo[2],
+						desc: emoteinfo[0].toLowerCase(),
+						speaking: emoteinfo[1].toLowerCase(),
+						silent: emoteinfo[2].toLowerCase(),
 						zoom: emoteinfo[3],
-						sfx: (isOfficialAssets)? esfx.toLowerCase() : esfx,
+						sfx: esfx.toLowerCase(),
 						sfxdelay: esfxd,
-						button_off: AO_HOST + 'characters/' + ((isOfficialAssets)? escape(me.name).toLowerCase() : escape(me.name)) + '/emotions/button' + i + '_off.png',
-						button_on: AO_HOST + 'characters/' + ((isOfficialAssets)? escape(me.name).toLowerCase() : escape(me.name)) + '/emotions/button' + i + '_on.png'
+						button_off: AO_HOST + `characters/${escape(me.name).toLowerCase()}/emotions/button${i}_off.png`,
+						button_on: AO_HOST + `'characters/${escape(me.name).toLowerCase()}/emotions/button${i}_on.png`
 					};
-					document.getElementById("client_emo").innerHTML += "<img src='" + emotes[i].button_off + "' id='emo_" + i + "' alt='" + emotes[i].desc + "' class='client_button' onclick='pickemotion(" + i + ")'>";
+					document.getElementById("client_emo").innerHTML += 
+						`<img src=${emotes[i].button_off}
+						 id="emo_${i}"
+						 alt="${emotes[i].desc}"
+						 class="client_button"
+						 onclick="pickemotion(${i})">`;
 				}
 				pickemotion(1);
 			}
 		};
 		xhr.send();
-	}		
+	}
 }
 
 class Viewport {
@@ -901,7 +930,7 @@ class Viewport {
 		this.testimonyUpdater = null;
 
 		this.bgname = "gs4";
-		
+
 		this.testimonyTimer = 0;
 		this.shoutTimer = 0;
 		this.textTimer = 0;
@@ -949,39 +978,39 @@ class Viewport {
 		clearTimeout(this.updater);
 		//If preanim existed then determine the length
 		if (chatmsg.preanim != "-") {
-			chatmsg.preanimdelay = this.getAnimLength(AO_HOST + 'characters/' + escape(chatmsg.name) + '/' + chatmsg.preanim + '.gif',this.initUpdater);
+			chatmsg.preanimdelay = this.getAnimLength(`${AO_HOST}characters/${escape(chatmsg.name)}/${chatmsg.preanim}.gif`, this.initUpdater);
 		} else {
-			this.initUpdater(0)
+			this.initUpdater(0);
 		}
 	}
-	
+
 	/**
 	 * Intialize updater
-	 * @param {int} animdelay the length of pre-animation 
+	 * @param {number} animdelay the length of pre-animation 
 	 */
-	initUpdater(animdelay){
-		viewport.chatmsg.preanimdelay = parseInt(animdelay); 
+	initUpdater(animdelay) {
+		viewport.chatmsg.preanimdelay = parseInt(animdelay);
 		viewport.updater = setTimeout(() => viewport.updateText(), UPDATE_INTERVAL);
 	}
-	
+
 	/**
 	 * Intialize testimony updater 
 	 */
-	initTestimonyUpdater(){		
-		if(client.testimonyID > 0){			
+	initTestimonyUpdater() {
+		if (client.testimonyID > 0) {
 			let testimony = "";
 			if (client.testimonyID == 1) {
-				testimony = "witnesstestimony";				
+				testimony = "witnesstestimony";
 			} else if (client.testimonyID == 2) {
 				testimony = "crossexamination";
 			}
 			(new Audio(client.resources[testimony]["sfx"])).play();
 			this.testimonyTimer = 0;
 			document.getElementById("client_testimony").src = client.resources[testimony]["src"];
-			this.testimonyUpdater = setTimeout(() => this.updateTestimony(), UPDATE_INTERVAL);						
+			this.testimonyUpdater = setTimeout(() => this.updateTestimony(), UPDATE_INTERVAL);
 		}
 	}
-	
+
 	/**
 	 * Gets animation length.
 	 * @param {string} filename the animation file name
@@ -1002,25 +1031,25 @@ class Viewport {
 		});
 		request.send();
 	}
-	
+
 	/**
 	 * Updates the testimony overaly
 	 */
-	updateTestimony(){
+	updateTestimony() {
 		//Update timer
 		this.testimonyTimer = this.testimonyTimer + UPDATE_INTERVAL;
-		
+
 		if (client.testimonyID == 1) {
 			//Witness Testimony
-			if (this.testimonyTimer >= client.resources["witnesstestimony"]["duration"]){
+			if (this.testimonyTimer >= client.resources["witnesstestimony"]["duration"]) {
 				//Finish
 				this.disposeTestimony();
 			} else {
 				this.testimonyUpdater = setTimeout(() => this.updateTestimony(), UPDATE_INTERVAL);
-			}			
+			}
 		} else if (client.testimonyID == 2) {
 			//Cross Examination
-			if (this.testimonyTimer >= client.resources["crossexamination"]["duration"]){
+			if (this.testimonyTimer >= client.resources["crossexamination"]["duration"]) {
 				//Finish
 				this.disposeTestimony();
 			} else {
@@ -1030,17 +1059,17 @@ class Viewport {
 			this.disposeTestimony();
 		}
 	}
-	
+
 	/**
 	 * Dispose the testimony overlay
 	 */
-	 disposeTestimony(){
+	disposeTestimony() {
 		client.testimonyID = 0;
 		this.testimonyTimer = 0;
 		document.getElementById("client_testimony").src = "misc/placeholder.gif";
 		clearTimeout(this.testimonyUpdater);
-	 }
-	 
+	}
+
 	/**
 	 * Updates the chatbox based on the given text.
 	 * 
@@ -1048,12 +1077,12 @@ class Viewport {
 	 */
 	updateText() {
 		// Flip the character
-		if (this.chatmsg.flip == 1){
-			document.getElementById("client_char").style.transform = "scaleX(-1)"; 
+		if (this.chatmsg.flip == 1) {
+			document.getElementById("client_char").style.transform = "scaleX(-1)";
 		} else {
 			document.getElementById("client_char").style.transform = "scaleX(1)";
 		}
-			
+
 		if (this._animating) {
 			this.updater = setTimeout(() => this.updateText(), UPDATE_INTERVAL);
 		}
@@ -1085,15 +1114,17 @@ class Viewport {
 			this.chatmsg.startpreanim = true;
 		}
 
-		if(this.textTimer >= this.shoutTimer && this.chatmsg.startpreanim) {
+		if (this.textTimer >= this.shoutTimer && this.chatmsg.startpreanim) {
 			// Effect stuff
-			if (this.chatmsg.flash == 2){
+			if (this.chatmsg.flash == 2) {
 				//Shake screen
 				this.sfxaudio.pause();
 				this.sfxplayed = 1;
 				this.sfxaudio.src = AO_HOST + "sounds/general/sfx-stab.wav";
 				this.sfxaudio.play();
-				$('#client_gamewindow').effect( "shake",{"direction":"up"});
+				$('#client_gamewindow').effect("shake", {
+					"direction": "up"
+				});
 			} else if (this.chatmsg.flash == 1) {
 				//Flash screen
 				document.getElementById("client_background").style.backgroundColor = "white";
@@ -1103,9 +1134,9 @@ class Viewport {
 				this.sfxaudio.play();
 				$('#client_gamewindow').effect("pulsate");
 			}
-			
+
 			//Pre-animation stuff
-			if(this.chatmsg.preanimdelay > 0){
+			if (this.chatmsg.preanimdelay > 0) {
 				document.getElementById("client_shout").src = "misc/placeholder.gif";
 				changeBackground(this.chatmsg.side);
 				document.getElementById("client_char").src = AO_HOST + "characters/" + escape(this.chatmsg.name) + "/" + this.chatmsg.preanim + ".gif";
@@ -1114,31 +1145,33 @@ class Viewport {
 			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){
+				if (this.chatmsg.evidence > 0) {
 					// Prepare evidence
-					document.getElementById("client_evi").style.backgroundImage = "url('"+ client.evidences[this.chatmsg.evidence - 1].icon +"')";
-				
-					if (this.chatmsg.side == 'def'){
+					document.getElementById("client_evi").style.backgroundImage = "url('" + client.evidences[this.chatmsg.evidence - 1].icon + "')";
+
+					if (this.chatmsg.side == 'def') {
 						// Only def show evidence on right
 						document.getElementById("client_evi").style.right = "1.5em";
 						document.getElementById("client_evi").style.left = "initial";
-						$( "#client_evi" ).animate({
+						$("#client_evi").animate({
 							height: "30%",
 							opacity: 1
-						}, 250 );
+						}, 250);
 					} else {
 						document.getElementById("client_evi").style.right = "initial";
 						document.getElementById("client_evi").style.left = "1.5em";
-						$( "#client_evi" ).animate({
+						$("#client_evi").animate({
 							height: "30%",
 							opacity: 1
-						}, 250 );
+						}, 250);
 					}
 				}
-				
-				$("#client_name").toggle( "fade" );
-				$("#client_chat").toggle("drop",{"direction":"down"});
-				if(this.chatmsg.preanimdelay == 0){
+
+				$("#client_name").toggle("fade");
+				$("#client_chat").toggle("drop", {
+					"direction": "down"
+				});
+				if (this.chatmsg.preanimdelay == 0) {
 					document.getElementById("client_shout").src = "misc/placeholder.gif";
 					changeBackground(this.chatmsg.side);
 				}
@@ -1183,7 +1216,7 @@ class Viewport {
 				}
 			}
 		}
-		
+
 		if (!this.sfxplayed && this.chatmsg.snddelay + this.shoutTimer >= this.textTimer) {
 			this.sfxaudio.pause();
 			this.sfxplayed = 1;
@@ -1206,7 +1239,7 @@ class INI {
 		let value = {};
 		let lines = data.split(/\r\n|\r|\n/);
 		let section = null;
-		lines.forEach(function(line) {
+		lines.forEach(function (line) {
 			if (regex.comment.test(line)) {
 				return;
 			} else if (line.length == 0) {
@@ -1249,7 +1282,7 @@ export function onEnter(event) {
 		let mychar = client.me();
 		let myemo = client.myEmote();
 		let myevi = client.myEvidence();
-		let myflip = ((client.flip)? 1:0);
+		let myflip = ((client.flip) ? 1 : 0);
 		let mycolor = document.getElementById("textcolor").value;
 		let ssfxname = "0";
 		let ssfxdelay = "0";
@@ -1276,7 +1309,7 @@ function resetICParams() {
 	if (selectedShout) {
 		document.getElementById("button_" + selectedShout).className = "client_button";
 		selectedShout = 0;
-	}		
+	}
 }
 
 /**
@@ -1294,7 +1327,7 @@ window.musiclist_click = musiclist_click;
  * @param {MouseEvent} event
  */
 export function area_click(el) {
-	let playtrack =  el.textContent;
+	let playtrack = el.textContent;
 	client.sendMusicChange(playtrack);
 }
 window.area_click = area_click;
@@ -1357,14 +1390,14 @@ export function demoError(image) {
 window.demoError = demoError;
 
 /**
- * Checks if an file exists at the specified URI.
+ * Checks if a file exists at the specified URI.
  * @param {string} url the URI to be checked
  * @param {function} callback the function to be called when finished
  * @param {object} param 
  */
-function FileExist(url,callback,param) {
+function fileExists(url, callback, param) {
 	var xhttp = new XMLHttpRequest();
-	xhttp.onreadystatechange = function() {
+	xhttp.onreadystatechange = function () {
 		if (this.readyState == 4 && this.status == 200) {
 			callback(true, param, url);
 		} else {
@@ -1431,20 +1464,20 @@ function changeBackground(position) {
  * @param {boolean} result the image is existed or not
  * @param {string} position the position to change into
  */
-function callbackChangeBackground(result,position) {
+function callbackChangeBackground(result, position) {
 	let bgfolder = viewport.bgFolder();
-	if (position == "def"){
-		if(result){
+	if (position == "def") {
+		if (result) {
 			document.getElementById("client_bench").src = bgfolder + "defensedesk.png"
-		}else{
+		} else {
 			document.getElementById("client_bench").src = bgfolder + "bancodefensa.png"
 		}
 	} else {
-		if(result){
+		if (result) {
 			document.getElementById("client_bench").src = bgfolder + "prosecutiondesk.png"
 		} else {
 			document.getElementById("client_bench").src = bgfolder + "bancoacusacion.png"
-		}			
+		}
 	}
 }
 
@@ -1507,7 +1540,7 @@ function appendICLog(toadd, name = "", time = new Date()) {
  * Requests to play as a character.
  * @param {number} ccharacter the character ID; if this is a large number, then spectator is chosen instead.
  */
-export function pickchar(ccharacter) {
+export function pickChar(ccharacter) {
 	if (ccharacter < 1000) {
 		client.sendCharacter(ccharacter);
 	} else {
@@ -1517,46 +1550,46 @@ export function pickchar(ccharacter) {
 		document.getElementById("client_emo").style.display = "none";
 	}
 }
-window.pickchar = pickchar;
+window.pickChar = pickChar;
 
 /**
  * Highlights and selects an emotion for in-character chat.
  * @param {string} emo the new emotion to be selected
  */
-export function pickemotion(emo) {
+export function pickEmotion(emo) {
 	if (client.selectedEmote != -1) {
 		document.getElementById("emo_" + client.selectedEmote).src = client.myEmote().button_off;
 	}
 	client.selectedEmote = emo
 	document.getElementById("emo_" + emo).src = client.myEmote().button_on;
 }
-window.pickemotion = pickemotion;
+window.pickEmotion = pickEmotion;
 
 /**
  * Highlights and selects an evidence for in-character chat.
  * @param {string} evidence the evidence to be presented
  */
-export function pickevidence(evidence) {
-	if (client.selectedEvidence != evidence) {
+export function pickEvidence(evidence) {
+	if (client.selectedEvidence !== evidence) {
 		//Update selected evidence		
-		if(client.selectedEvidence > 0){
+		if (client.selectedEvidence > 0) {
 			document.getElementById("evi_" + client.selectedEvidence).className = "client_button";
 		}
 		document.getElementById("evi_" + evidence).className = "client_button 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
-		let icon_id  = getIndexFromSelect("evi_select", client.evidences[evidence - 1].filename);
+		let icon_id = getIndexFromSelect("evi_select", client.evidences[evidence - 1].filename);
 		document.getElementById("evi_select").selectedIndex = icon_id;
-		if (icon_id == 0){			
+		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";
@@ -1566,60 +1599,60 @@ export function pickevidence(evidence) {
 		cancelevidence();
 	}
 }
-window.pickevidence = pickevidence;
+window.pickEvidence = pickEvidence;
 
 /**
  * Add evidence.
  */
-export function addevidence() {
+export function addEvidence() {
 	let evidence_select = document.getElementById('evi_select');
-	client.sendPE( document.getElementById('evi_name').value,
+	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   
-		);
+		(evidence_select.selectedIndex == 0) ?
+		document.getElementById('evi_filename').value :
+		evidence_select.options[evidence_select.selectedIndex].text
+	);
 	cancelevidence();
 }
-window.addevidence = addevidence;
+window.addEvidence = addEvidence;
 
 /**
  * Edit selected evidence.
  */
-export function editevidence() {
+export function editEvidence() {
 	let evidence_select = document.getElementById('evi_select');
 	let id = parseInt(client.selectedEvidence) - 1;
-	client.sendEE( id, 
+	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   
-		);
+		(evidence_select.selectedIndex == 0) ?
+		document.getElementById('evi_filename').value :
+		evidence_select.options[evidence_select.selectedIndex].text
+	);
 	cancelevidence();
 }
-window.editevidence = editevidence;
+window.editEvidence = editEvidence;
 
 /**
  * Delete selected evidence.
  */
-export function delevidence() {
+export function deleteEvidence() {
 	let id = parseInt(client.selectedEvidence) - 1;
 	client.sendDE(id);
 	cancelevidence();
 }
-window.delevidence = delevidence;
+window.deleteEvidence = deleteEvidence;
 
 /**
  * Cancel evidence selection.
  */
-export function cancelevidence() {
+export function cancelEvidence() {
 	//Clear evidence data
-	if(client.selectedEvidence > 0){
+	if (client.selectedEvidence > 0) {
 		document.getElementById("evi_" + client.selectedEvidence).className = "client_button";
 	}
 	client.selectedEvidence = 0;
-	
+
 	// Clear evidence on information window
 	document.getElementById("evi_select").selectedIndex = 0;
 	updateEvidenceIcon(); // Update icon widget
@@ -1627,14 +1660,14 @@ export function cancelevidence() {
 	document.getElementById("evi_name").value = "";
 	document.getElementById("evi_desc").value = "";
 	document.getElementById("evi_icon").style.backgroundImage = "url('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;
+window.cancelEvidence = cancelEvidence;
 
 /**
  * Find index of anything in select box.
@@ -1642,14 +1675,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
-		let select_element = document.getElementById(select_box);
-		for (let i = 1; i < select_element.length; ++i){
-			if (select_element.options[i].value == value){
-				return i;
-			}
+	//Find if icon alraedy existed in select box
+	let 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;
+	}
+	return 0;
 }
 window.getIndexFromSelect = getIndexFromSelect;
 
@@ -1660,13 +1693,13 @@ export function updateEvidenceIcon() {
 	let evidence_select = document.getElementById("evi_select");
 	let evidence_filename = document.getElementById("evi_filename");
 	let evidence_iconbox = document.getElementById("evi_icon");
-	
-	if (evidence_select.selectedIndex == 0) {
+
+	if (evidence_select.selectedIndex === 0) {
 		evidence_filename.style.display = "initial";
-		evidence_iconbox.style.backgroundImage = "url('" + AO_HOST + 'evidence/' + evidence_filename.value + "')";
-	} else {		
+		evidence_iconbox.style.backgroundImage = `url(${AO_HOST}evidence/${evidence_filename.value})`;
+	} else {
 		evidence_filename.style.display = "none";
-		evidence_iconbox.style.backgroundImage = "url('" + AO_HOST + 'evidence/' + evidence_select.value + "')" ;
+		evidence_iconbox.style.backgroundImage = `url(${AO_HOST}evidence/${evidence_select.value})`;
 	}
 }
 window.updateEvidenceIcon = updateEvidenceIcon;
@@ -1675,7 +1708,7 @@ window.updateEvidenceIcon = updateEvidenceIcon;
  * Update evidence icon.
  */
 export function updateActionCommands(side) {
-	if(side == "jud"){
+	if (side == "jud") {
 		document.getElementById("judge_action").style.display = "inline-table";
 		document.getElementById("no_action").style.display = "none";
 	} else {
@@ -1683,11 +1716,11 @@ export function updateActionCommands(side) {
 		document.getElementById("judge_action").style.display = "none";
 	}
 	//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;
-			}
+	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;
@@ -1696,14 +1729,15 @@ window.updateActionCommands = updateActionCommands;
  * Change background via OOC.
  */
 export function changeBackgroundOOC() {
-	let filename = "", background_select = document.getElementById("bg_select")
-		, bg_command = document.getElementById("bg_command").value;
+	let filename = "",
+		background_select = document.getElementById("bg_select"),
+		bg_command = document.getElementById("bg_command").value;
 	if (background_select.selectedIndex == 0) {
-		filename = document.getElementById("bg_filename").value; 
-	} else{
+		filename = document.getElementById("bg_filename").value;
+	} else {
 		filename = background_select.value;
 	}
-	client.sendOOC("/" + bg_command.replace("$1",filename));
+	client.sendOOC("/" + bg_command.replace("$1", filename));
 }
 window.changeBackgroundOOC = changeBackgroundOOC;
 
@@ -1711,10 +1745,10 @@ window.changeBackgroundOOC = changeBackgroundOOC;
  * Change role via OOC.
  */
 export function changeRoleOOC() {
-	let role_select = document.getElementById("role_select")
-		, role_command = document.getElementById("role_command").value;
-		
-	client.sendOOC("/" + role_command.replace("$1",role_select.value));
+	let role_select = document.getElementById("role_select"),
+		role_command = document.getElementById("role_command").value;
+
+	client.sendOOC("/" + role_command.replace("$1", role_select.value));
 	updateActionCommands(role_select.value);
 }
 window.changeRoleOOC = changeRoleOOC;
@@ -1722,7 +1756,7 @@ window.changeRoleOOC = changeRoleOOC;
 /**
  * Random character via OOC.
  */
-export function randomCharacterOOC() {		
+export function randomCharacterOOC() {
 	client.sendOOC("/" + document.getElementById("randomchar_command").value);
 }
 window.randomCharacterOOC = randomCharacterOOC;
@@ -1730,56 +1764,56 @@ window.randomCharacterOOC = randomCharacterOOC;
 /**
  * Call mod.
  */
-export function callmod() {	
-	$( "#callmod_dialog" ).dialog( "open" );	
+export function callMod() {
+	$("#callmod_dialog").dialog("open");
 }
-window.callmod = callmod;
+window.callMod = callMod;
 
 /**
- * Decalre witness testimony.
+ * Declare witness testimony.
  */
-export function initwt() {		
+export function initWT() {
 	client.sendRT("testimony1");
 }
-window.initwt = initwt;
+window.initWT = initWT;
 
 /**
- * Decalre cross examination.
+ * Declare cross examination.
  */
-export function initce() {		
+export function initCE() {
 	client.sendRT("testimony2");
 }
-window.initce = initce;
+window.initCE = initCE;
 
 /**
- * Add defense health point.
+ * Increment defense health point.
  */
-export function addHPD() {		
-	client.sendHP(1,String(parseInt(client.hp[0]) + 1));
+export function addHPD() {
+	client.sendHP(1, String(parseInt(client.hp[0]) + 1));
 }
 window.addHPD = addHPD;
 
 /**
- * Reduce defense health point.
+ * Decrement defense health point.
  */
-export function redHPD() {		
-	client.sendHP(1,String(parseInt(client.hp[0]) - 1));
+export function redHPD() {
+	client.sendHP(1, String(parseInt(client.hp[0]) - 1));
 }
 window.redHPD = redHPD;
 
 /**
- * Add prosecution health point.
+ * Increment prosecution health point.
  */
-export function addHPP() {		
-	client.sendHP(2,String(parseInt(client.hp[1]) + 1));
+export function addHPP() {
+	client.sendHP(2, String(parseInt(client.hp[1]) + 1));
 }
 window.addHPP = addHPP;
 
 /**
- * Reduce prosecution health point.
+ * Decrement prosecution health point.
  */
-export function redHPP() {		
-	client.sendHP(2,String(parseInt(client.hp[1]) - 1));
+export function redHPP() {
+	client.sendHP(2, String(parseInt(client.hp[1]) - 1));
 }
 window.redHPP = redHPP;
 
@@ -1790,7 +1824,7 @@ export function updateBackgroundPreview() {
 	let background_select = document.getElementById("bg_select");
 	let background_filename = document.getElementById("bg_filename");
 	let background_preview = document.getElementById("bg_preview");
-	
+
 	if (background_select.selectedIndex == 0) {
 		background_filename.style.display = "initial";
 		background_preview.src = AO_HOST + 'background/' + background_filename.value + "/defenseempty.png";
@@ -1806,7 +1840,7 @@ window.updateBackgroundPreview = updateBackgroundPreview;
  * If the same effect button is selected, then the effect is canceled.
  * @param {string} effect the new effect to be selected
  */
-export function toggleaffect(effect) {
+export function toggleEffect(effect) {
 	if (effect == selectedEffect) {
 		document.getElementById("button_effect_" + effect).className = "client_button";
 		selectedEffect = 0;
@@ -1818,12 +1852,12 @@ export function toggleaffect(effect) {
 		selectedEffect = effect;
 	}
 }
-window.toggleaffect = toggleaffect;
+window.toggleEffect = toggleEffect;
 
 /**
  * Toggle flip for in-character chat.
  */
-export function toggleflip() {
+export function toggleFlip() {
 	if (client.flip) {
 		document.getElementById("button_flip").className = "client_button";
 	} else {
@@ -1831,12 +1865,12 @@ export function toggleflip() {
 	}
 	client.flip = !client.flip;
 }
-window.toggleflip = toggleflip;
+window.toggleFlip = toggleFlip;
 
 /**
  * Toggle presentable for presenting evidence in-character chat.
  */
-export function togglepresent() {
+export function togglePresent() {
 	if (client.presentable) {
 		document.getElementById("button_present").className = "client_button";
 	} else {
@@ -1844,13 +1878,13 @@ export function togglepresent() {
 	}
 	client.presentable = !client.presentable;
 }
-window.togglepresent = togglepresent;
+window.togglePresent = togglePresent;
 
 /**
  * Highlights and selects a menu.
  * @param {string} menu the menu to be selected
  */
-export function togglemenu(menu) {
+export function toggleMenu(menu) {
 	if (menu != selectedMenu) {
 		document.getElementById("menu_" + menu).className = "menu_icon active";
 		document.getElementById("content_" + menu).className = "menu_content active";
@@ -1859,14 +1893,14 @@ export function togglemenu(menu) {
 		selectedMenu = menu;
 	}
 }
-window.togglemenu = togglemenu;
+window.toggleMenu = toggleMenu;
 
 /**
  * Highlights and selects a shout for in-character chat.
  * If the same shout button is selected, then the shout is canceled.
  * @param {string} shout the new shout to be selected
  */
-export function toggleshout(shout) {
+export function toggleShout(shout) {
 	if (shout == selectedShout) {
 		document.getElementById("button_" + shout).className = "client_button";
 		selectedShout = 0;
@@ -1878,7 +1912,7 @@ export function toggleshout(shout) {
 		selectedShout = shout;
 	}
 }
-window.toggleshout = toggleshout;
+window.toggleShout = toggleShout;
 
 /**
  * Escapes a string to be HTML-safe.
@@ -1927,13 +1961,14 @@ function encodeChat(estring) {
 	let selectedEncoding = document.getElementById("client_encoding").value;
 	if (selectedEncoding == "unicode") {
 		//Source: https://gist.github.com/mathiasbynens/1243213
-		return estring.replace(/[^\0-~]/g, function(ch) {
-			return "\\u" + ("000" + ch.charCodeAt().toString(16)).slice(-4); });
-	} else if (selectedEncoding == "utf16"){
+		return estring.replace(/[^\0-~]/g, function (ch) {
+			return "\\u" + ("000" + ch.charCodeAt().toString(16)).slice(-4);
+		});
+	} else if (selectedEncoding == "utf16") {
 		//Source: https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
-		var buffer = new ArrayBuffer(estring.length*2);
+		var buffer = new ArrayBuffer(estring.length * 2);
 		var result = new Uint16Array(buffer);
-		for (var i=0, strLen=estring.length; i < strLen; i++) {
+		for (var i = 0, strLen = estring.length; i < strLen; i++) {
 			result[i] = estring.charCodeAt(i);
 		}
 		return String(result);
@@ -1950,9 +1985,10 @@ function decodeChat(estring) {
 	let selectedDecoding = document.getElementById("client_decoding").value;
 	if (selectedDecoding == "unicode") {
 		//Source: https://stackoverflow.com/questions/7885096/how-do-i-decode-a-string-with-escaped-unicode
-        return estring.replace(/\\u([\d\w]{1,})/gi, function (match, group) {
-			return String.fromCharCode(parseInt(group, 16)); } );
-	} else if (selectedDecoding == "utf16"){	
+		return estring.replace(/\\u([\d\w]{1,})/gi, function (match, group) {
+			return String.fromCharCode(parseInt(group, 16));
+		});
+	} else if (selectedDecoding == "utf16") {
 		//Source: https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
 		return String.fromCharCode.apply(null, new Uint16Array(estring.split(",")));
 	} else {
@@ -1981,22 +2017,21 @@ function decodeBBCode(estring) {
 
 
 // TODO: Possibly safe to remove, since we are using a transpiler.
-if (typeof(String.prototype.trim) === "undefined")
-{
-    String.prototype.trim = function() 
-    {
-        return String(this).replace(/^\s+|\s+$/g, '');
-    };
+if (typeof (String.prototype.trim) === "undefined") {
+	String.prototype.trim = function () {
+		return String(this).replace(/^\s+|\s+$/g, '');
+	};
 }
 
 // Used for HDID calculation.
-String.prototype.hashCode = function() {
-	var hash = 0, i, chr;
+String.prototype.hashCode = function () {
+	var hash = 0,
+		i, chr;
 	if (this.length === 0) return hash;
 	for (i = 0; i < this.length; i++) {
-	  chr   = this.charCodeAt(i);
-	  hash  = ((hash << 5) - hash) + chr;
-	  hash |= 0; // Convert to 32bit integer
+		chr = this.charCodeAt(i);
+		hash = ((hash << 5) - hash) + chr;
+		hash |= 0; // Convert to 32bit integer
 	}
 	return hash;
 };
@@ -2009,37 +2044,37 @@ String.prototype.hashCode = function() {
 let client = new Client(serverIP);
 let viewport = new Viewport();
 
-$(document).ready(function(){
+$(document).ready(function () {
 	client.initialObservBBCode();
-	client.loadResources(); 
-	
+	client.loadResources();
+
 });
 
 // Create dialog and link to button	
-$( function() {
-	$( "#callmod_dialog" ).dialog({
+$(function () {
+	$("#callmod_dialog").dialog({
 		autoOpen: false,
 		resizable: false,
 		show: {
 			effect: "drop",
-			direction:"down",
+			direction: "down",
 			duration: 500
 		},
 		hide: {
 			effect: "drop",
-			direction:"down",
+			direction: "down",
 			duration: 500
 		},
 		height: "auto",
 		width: 400,
 		modal: true,
 		buttons: {
-			"Sure": function() {
+			Sure: function () {
 				client.sendZZ("");
-				$( this ).dialog( "close" );
+				$(this).dialog("close");
 			},
-			Cancel: function() {
-				$( this ).dialog( "close" );
+			Cancel: function () {
+				$(this).dialog("close");
 			}
 		}
 	});
diff --git a/webAO/ui.js b/webAO/ui.js
index 56e0dcd..557ca4a 100644
--- a/webAO/ui.js
+++ b/webAO/ui.js
@@ -8,65 +8,66 @@ var config = {
     dimensions: {
         minItemHeight: 40
     },
-    content: [
-    {
+    content: [{
         type: "row",
-        content: [
-            {
+        content: [{
                 type: "column",
                 width: 40,
-                content: [
-                    {
-                        type: "component",
-                        componentName: "template",
-                        title: "Game",
-                        componentState: { id: "client_wrapper" }
+                content: [{
+                    type: "component",
+                    componentName: "template",
+                    title: "Game",
+                    componentState: {
+                        id: "client_wrapper"
                     }
-                ]
+                }]
             },
             {
                 type: "column",
-                content: [
-                    {
+                content: [{
                         type: "row",
-						height: 65,
-						content: [
-							{
-								type: "stack",
-								content: [
-									{
-										type: "component",
-										title: "Main",
-										componentName: "template",
-										componentState: { id: "mainmenu" }
-									},
-									{
-										type: "component",
-										title: "Log",
-										componentName: "template",
-										componentState: { id: "log" }
-									}
-								]
-							},
-							{
+                        height: 65,
+                        content: [{
+                                type: "stack",
+                                content: [{
+                                        type: "component",
+                                        title: "Main",
+                                        componentName: "template",
+                                        componentState: {
+                                            id: "mainmenu"
+                                        }
+                                    },
+                                    {
+                                        type: "component",
+                                        title: "Log",
+                                        componentName: "template",
+                                        componentState: {
+                                            id: "log"
+                                        }
+                                    }
+                                ]
+                            },
+                            {
                                 type: "component",
                                 title: "Music",
-								width: 30,
+                                width: 30,
                                 componentName: "template",
-                                componentState: { id: "music" }
-                            }							
-						]
+                                componentState: {
+                                    id: "music"
+                                }
+                            }
+                        ]
                     },
                     {
                         type: "row",
-                        content: [
-                            {
-								type: "component",
-								title: "Server chat",
-								componentName: "template",
-								componentState: { id: "ooc" }
-							}
-                        ]
+                        content: [{
+                            type: "component",
+                            title: "Server chat",
+                            componentName: "template",
+                            componentState: {
+                                id: "ooc"
+                            }
+                        }]
                     }
                 ]
             }
@@ -75,7 +76,7 @@ var config = {
 };
 
 var golden = new GoldenLayout(config);
-golden.registerComponent("template", function(container, componentState) {
+golden.registerComponent("template", function (container, componentState) {
     let template = document.querySelector(`#${componentState.id}`);
     container.getElement().html(template.content);
     // TODO: support multiple locales