AO web client

18 files changed, 1394 insertions, 0 deletions

diff --git a/.htaccess b/.htaccess
new file mode 100644
index 0000000..458a24c
--- /dev/null
+++ b/.htaccess
@@ -0,0 +1,12 @@
+ErrorDocument 404 "not found"
+Header always set Access-Control-Allow-Origin "*"                   
+Header always set Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, PATCH, DELETE" 
+Header always set Access-Control-Allow-Headers "X-Accept-Charset,X-Accept,Content-Type"
+RewriteEngine On   
+RewriteBase /
+RewriteCond %{REQUEST_METHOD} OPTIONS 
+RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]
+<IfModule mod_speling.c>
+  CheckCaseOnly On
+  CheckSpelling On
+</IfModule>
\ No newline at end of file
diff --git a/client.css b/client.css
new file mode 100644
index 0000000..89ff60a
--- /dev/null
+++ b/client.css
@@ -0,0 +1,254 @@
+body {	
+	font-family: "Ace Attorney","メイリオ",Meiryo,Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3",Osaka,"MS Gothic","ＭＳ Ｐゴシック",Tahoma,Sans;
+}
+
+img {
+	image-rendering: pixelated;
+}
+
+@keyframes error_blink {  
+    0% { color: red; }
+    100% { color: white; }
+}
+
+.error {
+	position: absolute;
+	width: 50vw;
+	height: 25vh;
+    top: 50%;
+    left: 50%;
+    margin-right: -50%;
+    transform: translate(-50%, -50%);
+	justify-content: center;
+	display: flex;
+	align-items: center;
+	background: red;
+	color: white;
+	font-size: 4em;
+	animation: error_blink 0.5s linear infinite;
+}
+
+#client_loading {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	overflow:hidden;
+	margin: 0 auto;
+	justify-content: center;
+	display: flex;
+	align-items: center;
+	background: black;
+	color: lightgreen;
+	font-size: 3em;
+	z-index: 100;
+}
+
+#client_gamewindow {
+	position: relative;
+	top: 0;
+	left: 0;
+  width: 100%;
+  padding-bottom: 75%;
+}
+
+#client_charselect {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	justify-content: center;
+	display: flex;
+	align-items: center;
+	vertical-align: middle;
+	margin: 0 auto;
+	background: rgba(70, 70, 70, 0.5);
+	z-index: 50;
+}
+
+#client_chartable {
+	height: 360px;
+	width: 320px;
+	margin: 0 auto;
+	vertical-align: middle;
+	background: #eeeeee;
+}
+
+.demothing {
+	height: 60px;
+	width: 60px;
+	margin: 3px;
+	border: 1px solid black;
+}
+
+#client_wrapper {
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-color: #888888;
+	height: 99%;
+	width: 256px;
+	margin: 0;
+	padding: 0;
+	float: left;
+	resize: horizontal;
+	overflow: auto;
+	overflow-y:hidden;
+	border: 1px solid;
+}
+
+#client_emo {
+	position: relative;
+	top: 10px;
+	width: 95%;
+}
+
+#client_settings {
+	position: relative;
+	top: 10px;
+	width: 95%;
+}
+
+.area_btn {
+	width: 20%;
+}
+
+#client_court {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	left: 0;
+}
+
+#client_char {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	bottom: 0;
+	left: 0;
+}
+
+#client_bench {
+	display: none;
+	position: absolute;
+	height: 20%;
+	width: 100%;
+	top: 80%;
+	left: 0;
+}
+
+#client_fg {
+	display: none;
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	bottom: 0;
+	left: 0;
+}
+
+#client_name {
+	display: none;
+	height: 7%;
+	border: 1px solid rgba(255,255,255,0.7);
+	background:rgba(73,0,254,0.5);
+	top: 63%;
+	border-radius: 3px;
+	position: absolute;
+}
+
+#client_name p {
+	opacity: 2;
+	color: white;
+	position: relative;
+	margin: 0;
+}
+
+#client_chat {
+	display: none;
+	width: 98%; /* fallback if needed */
+    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);
+	top: 70%;
+	border-radius: 4px;
+	position: absolute;
+	word-break: break-word;
+	word-wrap:break-word;
+	overflow-wrap: break-word;
+}
+
+#client_chat p {
+	margin: 3px;
+	color: white;
+}
+input {	
+	width: 97%;
+	background-color: #dddddd;
+	border: 1px solid #555555;
+}
+
+#client_chatlog {
+	display: none;
+	width: 244px;
+	height: 100%;
+	background: #dbdbdb url("misc/chat2.png") no-repeat;
+	padding: 0;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#client_log {
+	position: relative;
+	top: 3px;
+	left: 10px;
+	height: 310px;
+	width: 225px;
+	color: white;
+	word-break: break-word;
+	word-wrap:break-word;
+	overflow-wrap: break-word;
+	overflow-y: hidden;
+	font-size: 12px;
+	margin-bottom: 40px;
+}
+
+#client_ooclog {
+	width: 220px;
+	margin-top: 30px;
+	height: 50%;
+	position: relative;
+	background-color: #8b8b8b; 
+}
+
+#client_musiclist {
+	width: 244px;
+	margin-top: 30px;
+	height: 50%;
+	position: relative;
+	background-color: #ff0000; 
+}
+
+#client_bars {
+	position: relative;
+	margin-bottom: 30px;
+	text-align: center;
+}
+
+.client_defense {
+	position: absolute;
+	left: 30px;
+}
+
+.client_prosecutor {
+	position: absolute;
+	left: 130px;
+}
+
+
+}
\ No newline at end of file
diff --git a/client.js b/client.js
new file mode 100644
index 0000000..bc0f9e9
--- /dev/null
+++ b/client.js
@@ -0,0 +1,530 @@
+/*
+glorious webao
+made by sD
+credits to aleks for original idea and source
+*/
+var AO_HOST = "http://weedlan.de/";
+//var AO_HOST = "../client/base/";
+var MUSIC_HOST = AO_HOST + "sounds/music/";
+var BAR_WIDTH = 90;
+var BAR_HEIGHT = 20;
+var textnow = "";
+var chatmsg = {
+    "isnew": false
+};
+var blip = new Audio(AO_HOST + 'sounds/general/sfx-blipmale.wav');
+var womboblip = new Audio(AO_HOST + 'sounds/general/sfx-blipmale.wav');
+var comboblip = new Audio(AO_HOST + 'sounds/general/sfx-blipmale.wav');
+blip.volume = 0.5
+womboblip.volume = 0.5
+comboblip.volume = 0.5
+var music = new Audio();
+music.play();
+var combo = false;
+var musiclist = Object();
+var ex = false;
+var tempchars = [];
+var chars = [];
+var emotes = [];
+var charcheck;
+var pid = 1;
+var charsound = new Audio();
+var bgname = 'gs4';
+var bgfolder = AO_HOST + "background/" + bgname + "/";
+// 0 = objection shout, 1 = pre-anim, 2 = speaking, 3 = silent
+var chatstate = 3
+var position;
+var me = -1;
+var myemotion = -1;
+var myschar = -1;
+var updater;
+var serv;
+var carea = 0;
+var linifile;
+var pinifile;
+var queryDict = {};
+location.search.substr(1).split("&").forEach(function(item) {
+        queryDict[item.split("=")[0]] = item.split("=")[1]
+    })
+    //document.getElementById("client_wrapper").style = "width: 800px;";
+    /* Server magic */
+    //serv = new WebSocket("ws://51.255.160.217:50000");
+    //serv = new WebSocket("ws://85.25.196.172:5000");
+serv = new WebSocket("ws://" + queryDict.ip);
+serv.onopen = function(evt) {
+    onOpen(evt)
+};
+serv.onclose = function(evt) {
+    onClose(evt)
+};
+serv.onmessage = function(evt) {
+    onMessage(evt)
+};
+serv.onerror = function(evt) {
+    onError(evt)
+};
+/* Making elements undraggable - looks much nicer */
+function undrag() {
+    var a = document.getElementsByTagName("img");
+    for (var i = 0; i < a.length; i++) {
+        a[i].addEventListener("dragstart", function(ev) {
+            ev.preventDefault();
+        }, false);
+    }
+}
+undrag();
+
+function parseINI(data) {
+    var regex = {
+        section: /^\s*\[\s*([^\]]*)\s*\]\s*$/,
+        param: /^\s*([\w\.\-\_]+)\s*=\s*(.*?)\s*$/,
+        comment: /^\s*;.*$/
+    };
+    var value = {};
+    var lines = data.split(/\r\n|\r|\n/);
+    var section = null;
+    lines.forEach(function(line) {
+        if (regex.comment.test(line)) {
+            return;
+        } else if (regex.param.test(line)) {
+            var match = line.match(regex.param);
+            if (section) {
+                value[section][match[1]] = match[2];
+            } else {
+                value[match[1]] = match[2];
+            }
+        } else if (regex.section.test(line)) {
+            var match = line.match(regex.section);
+            value[match[1]] = {};
+            section = match[1];
+        } else if (line.length == 0 && section) {
+            section = null;
+        };
+    });
+    return value;
+}
+
+function onOOCEnter(event) {
+    if (event.keyCode == 13) {
+        serv.send("CT#web" + pid + "#" + document.getElementById("client_oocinputbox").value + "#%");
+        document.getElementById("client_oocinputbox").value = "";
+    }
+}
+
+function onEnter(event) {
+    if (event.keyCode == 13) {
+            mychar = chars[me]
+    myemo = emotes[myemotion]
+    serv.send("MS#chat#" + myemo.speaking + "#" + mychar.name + "#" + myemo.silent + "#" + document.getElementById("client_inputbox").value + "#def#0#0#0#0#0#0#0#0#0#0#0#0#0#%" );
+    document.getElementById("client_inputbox").value = '';
+    }
+}
+
+function musiclist_click(event) {
+	var playtrack = document.getElementById("client_musiclist").value;
+	serv.send("MC#"+playtrack+"#"+me+"#%");
+}
+
+function changeMusicVolume() {
+    music.volume = document.getElementById("client_mvolume").value / 100;
+}
+
+function changeSFXVolume() {
+    charsound.volume = document.getElementById("client_svolume").value / 100;
+}
+
+function changeBlipVolume() {
+    blip.volume = document.getElementById("client_bvolume").value / 100;
+    womboblip.volume = document.getElementById("client_bvolume").value / 100;
+    comboblip.volume = document.getElementById("client_bvolume").value / 100;
+}
+
+function imgError(image) {
+    image.onerror = "";
+    image.src = "/misc/placeholder.gif";
+    return true;
+}
+
+function ImageExist(url) {
+    var img = new Image();
+    console.log(url)
+    img.src = url;
+    return img.height != 0;
+}
+
+function changebg(position) {
+    bgfolder = AO_HOST + "background/" + bgname + "/";
+    document.getElementById("client_fg").style.display = "none";
+    document.getElementById("client_bench").style.display = "none";
+    //document.getElementById("client_bench").style.display = "block"
+    switch (position) {
+        case "def":
+            if (ImageExist(bgfolder + "defenseempty.gif")) {
+                document.getElementById("client_court").src = bgfolder + "defenseempty.gif"
+            } else if (ImageExist(bgfolder + "defenseempty.png")) {
+                document.getElementById("client_court").src = bgfolder + "defenseempty.png"
+            }
+            break;
+        case "pro":
+            if (ImageExist(bgfolder + "prosecutorempty.gif")) {
+                document.getElementById("client_court").src = bgfolder + "prosecutorempty.gif"
+            } else if (ImageExist(bgfolder + "prosecutorempty.png")) {
+                document.getElementById("client_court").src = bgfolder + "prosecutorempty.png"
+            }
+            break;
+        case "hld":
+            if (ImageExist(bgfolder + "helperstand.gif")) {
+                document.getElementById("client_court").src = bgfolder + "helperstand.gif"
+            } else if (ImageExist(bgfolder + "helperstand.png")) {
+                document.getElementById("client_court").src = bgfolder + "helperstand.png"
+            }
+            break;
+        case "hlp":
+            if (ImageExist(bgfolder + "prohelperstand.gif")) {
+                document.getElementById("client_court").src = bgfolder + "prohelperstand.gif"
+            } else if (ImageExist(bgfolder + "prohelperstand.png")) {
+                document.getElementById("client_court").src = bgfolder + "prohelperstand.png"
+            }
+            break;
+        case "wit":
+            if (ImageExist(bgfolder + "witnessempty.gif")) {
+                document.getElementById("client_court").src = bgfolder + "witnessempty.gif"
+            } else if (ImageExist(bgfolder + "witnessempty.png")) {
+                document.getElementById("client_court").src = bgfolder + "witnessempty.png"
+            }
+            break;
+        case "jud":
+            if (ImageExist(bgfolder + "judgestand.gif")) {
+                document.getElementById("client_court").src = bgfolder + "judgestand.gif"
+            } else if (ImageExist(bgfolder + "judgestand.png")) {
+                document.getElementById("client_court").src = bgfolder + "judgestand.png"
+            }
+            break;
+    }
+    switch (position) {
+        case "def":
+            document.getElementById("client_bench").style.display = "block";
+            if (ImageExist(bgfolder + "bancodefensa.gif")) {
+                document.getElementById("client_bench").src = bgfolder + "bancodefensa.gif"
+            } else if (ImageExist(bgfolder + "bancodefensa.png")) {
+                document.getElementById("client_bench").src = bgfolder + "bancodefensa.png"
+            }
+            break;
+        case "pro":
+            document.getElementById("client_bench").style.display = "block"
+            if (ImageExist(bgfolder + "bancoacusacion.gif")) {
+                document.getElementById("client_bench").src = bgfolder + "bancoacusacion.gif"
+            } else if (ImageExist(bgfolder + "bancoacusacion.png")) {
+                document.getElementById("client_bench").src = bgfolder + "bancoacusacion.png"
+            }
+            break;
+        case "wit":
+            document.getElementById("client_fg").style.display = "block"
+            if (ImageExist(bgfolder + "estrado.gif")) {
+                document.getElementById("client_fg").src = bgfolder + "estrado.gif"
+            } else if (ImageExist(bgfolder + "estrado.png")) {
+                document.getElementById("client_fg").src = bgfolder + "estrado.png"
+            }
+            break;
+    }
+}
+
+function updateText() {
+    console.log("updating");
+    if (chatmsg.content == "") {
+        document.getElementById("client_name").style.display = "none";
+        document.getElementById("client_chat").style.display = "none";
+    } else {
+        document.getElementById("client_name").style.display = "block";
+        document.getElementById("client_chat").style.display = "block";
+    }
+    if (chatmsg.isnew) {
+        console.log("new message")
+        document.getElementById("client_name").style.fontSize = (document.getElementById("client_name").offsetHeight * 0.7) + "px";
+        document.getElementById("client_chat").style.fontSize = (document.getElementById("client_chat").offsetHeight * 0.2) + "px";
+        document.getElementById("client_name").innerHTML = "<p>" + escapeHtml(chatmsg.nameplate) + "</p>";
+        chatmsg.isnew = false;
+        changebg(chatmsg.side);
+        document.getElementById("client_char").src = AO_HOST + "characters/" + chatmsg.name + "/(b)" + chatmsg.speaking + ".gif";
+    } else {
+        if (textnow != chatmsg.content) {
+            combo = (combo + 1) % 3;
+            switch (combo) {
+                case 0:
+                    blip.play()
+                    break;
+                case 1:
+                    womboblip.play()
+                    break;
+                case 2:
+                    comboblip.play()
+                    break;
+            }
+            console.log("magic");
+            textnow = chatmsg.content.substring(0, textnow.length + 1);
+            document.getElementById("client_inner_chat").innerHTML = escapeHtml(textnow);
+        } else {
+            document.getElementById("client_char").src = AO_HOST + "characters/" + chatmsg.name + "/(a)" + chatmsg.silent + ".gif";
+            chatstate = 3;
+            clearInterval(updater);
+        }
+    }
+}
+
+function onOpen(e) {
+    serv.send("HI#" + navigator.userAgent + "#%");
+};
+
+function onClose(e) {
+    var errorm = document.createElement("div");
+    errorm.setAttribute('class', 'error');
+    errorm.innerHTML = "CONNECTION LOST";
+    document.body.appendChild(errorm);
+};
+
+function onError(e) {
+    var errorm = document.createElement("div");
+    errorm.setAttribute('class', 'error');
+    errorm.innerHTML = "ERROR";
+    document.body.appendChild(errorm);
+};
+
+function onMessage(e) {
+    var musicname = "undefined";
+    msg = e.data;
+    console.log(msg)
+    lines = msg.split('%');
+    arguments = lines[0].split('#');
+    header = arguments[0];
+    switch (header) {
+        case "NMS":
+            if ( /*arguments[2] != chatmsg.content*/ true) {
+                document.getElementById("client_inner_chat").innerHTML = '';
+                chatmsg.character = arguments[0];
+                msgchar = chars[chatmsg.character]
+                msgemo = msgchar.emotions[arguments[1]]
+                chatmsg.pre = msgemo.pre;
+                chatmsg.speaking = msgemo.speaking
+                chatmsg.silent = msgemo.silent
+                chatmsg.side = msgchar.side;
+                chatmsg.sound = msgemo.soundn;
+                chatmsg.type = msgemo.type;
+                if (msgchar.hasOwnProperty("showname")) {
+                    chatmsg.nameplate = msgchar.showname;
+                } else {
+                    chatmsg.nameplate = msgchar.name;
+                }
+                chatmsg.snddelay = msgemo.soundt;
+                chatmsg.content = arguments[2];
+                chatmsg.objection = arguments[3];
+                chatmsg.evidence = arguments[4];
+                chatmsg.flash = arguments[5];
+                chatmsg.color = arguments[6];
+                chatmsg.isnew = true;
+                textnow = '';
+                addlog(chatmsg.nameplate + ": " + escapeHtml(chatmsg.content))
+                console.log("Message received: " + chatmsg.content);
+            }
+            break;
+        case "MS":
+            if (arguments[4] != chatmsg.content) {
+                document.getElementById("client_inner_chat").innerHTML = '';
+                chatmsg.pre = arguments[2];
+                chatmsg.character = -1;
+                for (var i = 0; i < chars.length; i++) {
+                    if (chars[i].name == arguments[3]) {
+                        chatmsg.character = i;
+                        break;
+                    }
+                }
+                chatmsg.speaking = arguments[2];
+                chatmsg.silent = arguments[4];
+                chatmsg.content = arguments[5];
+                chatmsg.side = arguments[6];
+                chatmsg.sound = arguments[7];
+                chatmsg.type = arguments[8];
+                console.log(arguments[8]);
+                chatmsg.nameplate = arguments[3];
+                chatmsg.name = arguments[3];
+                chatmsg.snddelay = arguments[9];
+                chatmsg.objection = arguments[10];
+                chatmsg.evidence = arguments[11];
+                chatmsg.flash = arguments[12];
+                chatmsg.color = arguments[13];
+                chatmsg.isnew = true;
+                changebg(chatmsg.side);
+                textnow = '';
+                addlog(chatmsg.nameplate + ": " + escapeHtml(arguments[5]))
+                console.log("Message received: " + arguments[5]);
+                updater = setInterval(updateText, 60);
+            }
+            break;
+        case "CT":
+            document.getElementById("client_ooclog").innerHTML = document.getElementById("client_ooclog").innerHTML + arguments[1] + ": " + arguments[2] + "\r\n"
+            break;
+        case "MC":
+            console.log(music.currentTime)
+            music.pause();
+            music = new Audio(MUSIC_HOST + arguments[1]);
+            music.play();
+            console.log("Now playing: " + arguments[1] + "(" + musiclist[arguments[1]] + ")");
+            musicname = chars[arguments[2]].name;
+            addlog(musicname + " changed music to " + arguments[1]);
+            break;
+        case "RMC":
+            music.pause();
+            music = new Audio(musiclist[arguments[0]]);
+            music.totime = arguments[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)
+            console.log("Now playing: " + arguments[0] + "(" + musiclist[arguments[0]] + ") from " + arguments[1]);
+            break;
+        case "CI":
+            document.getElementById("client_loadingtext").innerHTML = "Loading Character " + arguments[1];
+            serv.send("AN#" + ((arguments[1] / 10) + 1) + "#%");
+            for (var i = 2; i < arguments.length - 1; i++) {
+                if (i % 2 == 0) {
+                    charguments = arguments[i].split("&");
+                    console.log(charguments);
+                    chars[arguments[i - 1]] = {
+                        "name": charguments[0],
+                        "desc": charguments[1],
+                        "evidence": charguments[3],
+                        "icon": AO_HOST + "misc/DemoThings/" + charguments[0] + "_char_icon.png",
+                        "icon_chosen": AO_HOST + "misc/DemoThings/" + charguments[0] + "_char_icon_chosen.png"
+                    };
+                }
+            }
+            break;
+        case "EI":
+            document.getElementById("client_loadingtext").innerHTML = "Loading Evidence " + arguments[1];
+            serv.send("AE#" + (arguments[1] + 1) + "#%");
+            break;
+        case "EM":
+            document.getElementById("client_loadingtext").innerHTML = "Loading Music " + arguments[1];
+            serv.send("AM#" + ((arguments[1] / 10) + 1) + "#%");
+            var hmusiclist = document.getElementById("client_musiclist");
+            for (var i = 2; i < arguments.length - 1; i++) {
+                if (i % 2 == 0) {
+                    var newentry = document.createElement("OPTION");
+                    console.log(i);
+                    console.log(arguments[i]);
+                    newentry.text = arguments[i];
+                    hmusiclist.options.add(newentry);
+                }
+            }
+            break;
+        case "music":
+            for (var i = 0; i < arguments.length / 2; i++) {
+                musiclist[arguments[2 * i]] = arguments[2 * i + 1];
+            }
+            break;
+        case "DONE":
+		document.getElementById("client_loading").style.display = "none";
+            document.getElementById("client_chatlog").style.display = "block";
+            document.getElementById("client_wrapper").style.display = "block";
+			document.getElementById("client_charselect").style.display = "block";            
+            break;
+        case "BN":
+            bgname = arguments[1];
+            break;
+        case "NBG":
+            /* TODO */
+            break;
+        case "HP":
+            /* TODO */
+            if (arguments[1] == 1) {
+                document.getElementById("client_defense_hp").style.clip = "rect(0px," + BAR_WIDTH * arguments[2] / 10 + "px," + BAR_HEIGHT + "px,0px)";
+            } else {
+                document.getElementById("client_prosecutor_hp").style.clip = "rect(0px," + BAR_WIDTH * arguments[2] / 10 + "px," + BAR_HEIGHT + "px,0px)";
+            }
+            break;
+        case "ID":
+            pid = arguments[1];
+        case "PN":
+            serv.send("askchaa#%");
+            break;
+		case "SI":
+			serv.send("askchar2#%");
+            break;
+		case "CharsCheck":
+		for (var i=0; i < chars.length; i++){
+			if (i % 5 == 0){
+				var tr = document.createElement('TR');
+			}
+			var td = document.createElement('TD');
+			if (arguments[1+i]=="-1"){
+			var thispick = chars[i].icon_chosen;
+			} else {
+			var thispick = chars[i].icon;
+			}			
+			td.innerHTML = "<img class='demothing' id='demo_"+i+"' src='"+thispick + "' alt='"+chars[i].desc+"' onclick='pickchar(" + i + ")' >";
+			tr.appendChild(td);
+			if (i % 5 == 0){
+				document.getElementById("client_chartable").appendChild(tr);
+			}
+		}
+		break;
+        case "PV":
+            me = arguments[3]
+            document.getElementById("client_charselect").style.display = "none";  
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', AO_HOST + 'characters/' + chars[me].name + '/char.ini', true);
+            xhr.responseType = 'text';
+            xhr.onload = function(e) {
+                if (this.status == 200) {
+                    linifile = this.responseText;
+                    pinifile = parseINI(linifile);
+                    console.log(pinifile.Options.gender);
+                    console.log(pinifile.Emotions.number);
+                    for (var i = 1; i < pinifile.Emotions.number; i++) {
+						var emoteinfo = pinifile.Emotions[i].split('#');
+                        emotes[i] = { 
+						desc: emoteinfo[0],
+						speaking: emoteinfo[1],
+						silent: emoteinfo[2],
+						zoom: emoteinfo[3],
+						button_off: AO_HOST + 'characters/' + chars[me].name + '/emotions/button' + i + '_off.png',
+                        button_on: AO_HOST + 'characters/' + chars[me].name + '/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 + ")'>";
+                    }
+                }
+            };
+            xhr.send();
+            break;
+    }
+};
+
+function addlog(toadd) {
+    document.getElementById("client_log").innerHTML = toadd + "<br/>" + document.getElementById("client_log").innerHTML
+}
+
+function pickchar(ccharacter) {
+    serv.send("CC#" +pid + "#" + ccharacter + "#web#%")
+}
+
+function pickemotion(emo) {
+    if (myemotion != -1) {
+        document.getElementById("emo_" + myemotion).src = emotes[myemotion].button_off;
+    }
+    document.getElementById("emo_" + emo).src = emotes[emo].button_on;
+    myemotion = emo
+}
+
+function sendMusic(song) {
+    serv.send("MC#" + song);
+    console.log("Music sent!");
+}
+
+function escapeHtml(unsafe) {
+    var transfer = unsafe;
+    transfer.replace(/&/g, "&amp;");
+    transfer.replace(/</g, "&lt;");
+    transfer.replace(/>/g, "&gt;");
+    transfer.replace(/"/g, "&quot;");
+    transfer.replace(/'/g, "&#039;");
+    return transfer;
+}
\ No newline at end of file
diff --git a/images/background.png b/images/background.png
new file mode 100644
index 0000000..0048d20
--- /dev/null
+++ b/images/background.png
diff --git a/images/button.png b/images/button.png
new file mode 100644
index 0000000..8ca7dd5
--- /dev/null
+++ b/images/button.png
diff --git a/images/buttonH.png b/images/buttonH.png
new file mode 100644
index 0000000..e21d83c
--- /dev/null
+++ b/images/buttonH.png
diff --git a/images/desc.png b/images/desc.png
new file mode 100644
index 0000000..4d8ec37
--- /dev/null
+++ b/images/desc.png
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 0000000..b07cb99
--- /dev/null
+++ b/images/logo.png
diff --git a/images/sel.png b/images/sel.png
new file mode 100644
index 0000000..d8005f5
--- /dev/null
+++ b/images/sel.png
diff --git a/master.html b/master.html
new file mode 100644
index 0000000..f8e3750
--- /dev/null
+++ b/master.html
@@ -0,0 +1,63 @@
+<html>
+	<head>
+		<title>Attorney Online ONLINE</title>
+		<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
+		<link rel="icon" href="images/favicon.ico"/>
+		<script src="master.js"></script>
+	</head>
+<body>
+	<div id="logo">
+	<p>Mundi optimum</p>
+	<img src="images/logo.png"\>
+	<p>principium drama</p>
+</div>
+<div id="header">
+<p id="serverinfo">Masterserver version - ...</p>
+<p id="clientinfo">Client version - ...</p>
+<a class="button" href="support.html" class="button" id="hotlinebtn">
+	Contact Hotline AO
+</a>
+</div>
+
+<div id="menu">
+	<a class="button" href="index.html">
+		Index
+	</a>
+	<a class="button" href="about.html">
+		About AO
+	</a>
+	<a class="button" href="https://docs.google.com/uc?export=download&confirm=V7Av&id=0Byj32J4FCPtRdk9FSzBlcGx4VVU" target="_blank">
+		Download
+	</a>
+	<a class="button" href="master.html">
+		Play Online
+	</a>
+</div>
+		<div id="content">
+			<div id="serverthumb">
+				<div id="serverthumbC">
+					<img id="client_court" src="background/gs4/defenseempty.png"/>
+					<img id="client_char" src="characters/Phoenix/(a)handsondesk.gif"/>
+					<img id="client_fg" src="background/gs4/bancodefensa.png"/>
+					<div id="client_name"><p>Phoenix</p></div>
+					<div id="client_chat">
+						<p>Now this is a story all about how</p>
+						<p>My life got flipped-turned upside-down</p>
+						<p>And I'd rather take a minute</p>
+					</div>
+				</div>
+		
+			</div>
+			<div id="serverdesc">
+				
+				<p id="serverdescC">
+				
+				</p>
+			</div>
+			<ul class="servs" id="masterlist">
+			<li onmouseover="setServ(99)"><p>Localhost</p> <a class="button" href="watch.html?ip=127.0.0.1:27016">Watch</a></li>
+
+			</ul>
+		</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/master.js b/master.js
new file mode 100644
index 0000000..dc546f5
--- /dev/null
+++ b/master.js
@@ -0,0 +1,72 @@
+MASTERSERVER_IP = "51.255.160.217:27016"
+
+masterserver = new WebSocket("ws://" + MASTERSERVER_IP);
+masterserver.onopen = function(evt) { onOpen(evt) };
+masterserver.onclose = function(evt) { onClose(evt) };
+masterserver.onmessage = function(evt) { onMessage(evt) };
+masterserver.onerror = function(evt) { onError(evt) };
+var idnow;
+var descs = [];
+descs[99]="This is your computer. It probably sucks.";
+var serverpics = [];
+function UrlExists(url)
+{
+	var http = new XMLHttpRequest();
+	http.open('HEAD', url, false);
+	http.send();
+	return http.status!=404;
+}
+
+function setServ(ID) {
+	console.log(descs[ID]);
+	if (descs[ID] != undefined) {
+		document.getElementById("serverdescC").innerHTML = descs[ID];
+	}
+	else {
+		document.getElementById("serverdescC").innerHTML = "";
+	}
+//	idnow = ID;
+//	document.getElementById("serverthumbC").src = serverpics[ID];
+//	if (UrlExists(serverpics[ID])) {
+//		document.getElementById("serverthumbC").src = serverpics[ID];
+//	}
+//	else {
+//		document.getElementById("serverthumbC").src = "/images/static.gif";
+//	}
+}
+
+function onOpen(e) {
+	console.log("Open");
+	masterserver.send("askforservers#%")
+	masterserver.send("VC#%")
+};
+			
+function onMessage(e) {
+	msg = e.data;
+	console.log(msg)
+	header = msg.split('#', 2)[0];
+	arguments = msg.split('#').slice(1)
+	if (header == 'SN') {
+		document.getElementById('masterlist').innerHTML += '<li onmouseover="setServ(' + arguments[0] + ')"><p>' + arguments[4] + '</p> <a class=\"button\" href=\"watch.html?ip=' + arguments[1] + ':' + arguments[3] + '\">Watch</a></li><br/>'
+		serverpics[arguments[0]] = arguments[2];
+		descs[arguments[0]] = arguments[5];
+	}
+	else if (header == 'servercheok')
+	{
+		console.log(arguments);
+		document.getElementById('clientinfo').innerHTML = "Client version - "+arguments[0];
+	}
+	else if (header == 'SV')
+	{
+		console.log(arguments);
+		document.getElementById('serverinfo').innerHTML = "Masterserver version - "+arguments[0];
+	}
+};
+
+function onError(e) {
+	//Stub
+};
+
+function onClose(e) {
+	//Stub
+};
diff --git a/misc/advocat.png b/misc/advocat.png
new file mode 100644
index 0000000..8336b5d
--- /dev/null
+++ b/misc/advocat.png
diff --git a/misc/chat2.png b/misc/chat2.png
new file mode 100644
index 0000000..356eada
--- /dev/null
+++ b/misc/chat2.png
diff --git a/misc/placeholder.gif b/misc/placeholder.gif
new file mode 100644
index 0000000..e35aaf4
--- /dev/null
+++ b/misc/placeholder.gif
diff --git a/misc/procuror.png b/misc/procuror.png
new file mode 100644
index 0000000..5f793f2
--- /dev/null
+++ b/misc/procuror.png
diff --git a/misc/zdoh.png b/misc/zdoh.png
new file mode 100644
index 0000000..65026d7
--- /dev/null
+++ b/misc/zdoh.png
diff --git a/stylesheet.css b/stylesheet.css
new file mode 100644
index 0000000..b505212
--- /dev/null
+++ b/stylesheet.css
@@ -0,0 +1,405 @@
+body {
+	background-color: #FFF8F0;
+	background: url(images/background.png) no-repeat left top fixed;
+	background-size: cover;
+	background-attachment: fixed;
+	font-family: "Ace Attorney","Tahoma",Sans;
+}
+
+#content {
+	margin-left: 200px;
+	margin-top: 200px;
+	font-family: "Ace Attorney","Tahoma",Sans;
+}
+
+#content h1 {
+	text-align: center;
+	font-family: serif;
+}
+
+#logo {
+	background-color: rgba(0,0,0,0.5);
+	border: 2px solid rgba(255,255,255,0.7);
+	width: 200px;
+	height: 200px;
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	border-radius: 0px 0px 10px 0px;
+	z-index: 1;
+}
+
+#logo img {
+	width: 100px;
+	height: 100px;
+	vertical-align: center;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+#logo p {
+	color: #FFF;
+	text-align: center;
+}
+
+#header {
+	position: fixed;
+	display: block;
+	top: -3px;
+	left: 202px;
+	height: 100px;
+	width: 100%;
+	border: 2px solid rgba(255,255,255,0.7);
+	border-top-color: #FFF;
+	vertical-align: center;
+	color:white;
+	background: url('images/header.jpg') no-repeat;
+	background-color: rgba(0,0,0,0.5);
+        background-size: 100% 100%;
+	z-index: 1;
+}
+
+#header p {
+	display: inline;
+}
+
+#serverinfo {
+	margin-top: 75px;
+	margin-bottom: 0px;
+	float: left;
+	font-size:0.6em;
+}
+
+#clientinfo {
+	margin: 0px;
+	display: block;
+	float: left;
+	clear: both;
+	font-size:0.6em;
+}
+
+#hotlinebtn {
+	position: fixed;
+	top: 35px;
+	right: 10px;
+}
+
+#menu {
+	position: fixed;
+	display: block;
+	top: 202px;
+	left: 0px;
+	width: 150px;
+	height: 100%;
+	background-color: rgba(0,0,0,0.5);
+	border: 2px solid rgba(255,255,255,0.7);
+	z-index: 1;
+}
+
+.button {
+	padding: 5px;
+	vertical-align: middle;
+	text-decoration: none;
+	cursor: pointer;
+	background-image: url(images/button.png);
+	border: 1px solid #553e30;
+	border-radius: 5px;
+	box-shadow: 0 0 0 1px #FFFFFF; 
+	color: white;
+	text-align: center;
+    text-shadow:
+    0px -1px 0 #612000,
+    1px 0px 0 #612000,
+    -1px 0px 0 #612000,
+    0px 1px 0 #612000;
+	padding: 11px;
+	font-family: Times New Roman, sans;
+	font-weight: normal;
+}
+
+#menu .button {
+	margin: 15px;
+	padding: 11px;
+	display: block;
+	box-sizing: border-box;
+}
+
+.button:hover {
+	background-image: url(images/buttonH.png);
+	border: 1px solid #bdb521;
+}
+
+#menu .chosen:before {
+	height: 200px;
+	width: 200px;
+	border-image: url(images/sel.png) 11 stretch !important;
+	border-width:11px;
+	padding: 1px;
+}
+
+#serverthumb {
+	display: inline-block;
+	top: 35%;
+	left: 20%;
+	width: 200px;
+	height: 200px;
+	bottom: 100px;
+	perspective-origin: 400px;
+	perspective: 300px;
+	position: fixed;
+}
+
+#serverdesc {
+	display: inline-block;
+	position: fixed;
+	width: 185px;
+	height: 276px;
+	top: 35%;
+	right: 0px;
+	padding: 0px;
+	background: url('images/desc.png') no-repeat;
+	border: 2px solid #888;
+	border-radius: 5px;
+}
+
+#serverdescC {
+	width: 180px;
+	height: 270px;
+	position: relative;
+	color: white;
+	white-space: pre-line;
+	word-wrap: break-word;
+	text-align: center;
+	margin: 2px;
+	overflow-x: visible;
+	overflow-y: auto;
+}
+
+
+#serverthumbC {
+	position: relative;
+	top: 50px;
+	width: 200px;
+	height: 200px;
+	transform: rotateY( 15deg);
+	float: left;
+}
+
+.servs {
+	display: block;
+	margin: auto;
+	width: 300px;
+}
+
+.servs li {
+	position: relative;
+	left: -55px;
+	background-color: #FFF;
+	border: 2px solid #BBB;
+	border-radius: 5px;
+	padding: 0px;
+	padding-left: 10px;
+	display: block;
+	width: 350px;
+	height: 50px;
+	margin: 10px;
+	margin-left: auto;
+	margin-right: auto;
+	float: left;
+	text-align: center;
+	cursor: default;
+}
+.servs li:hover {
+	background-color: #FFFF6B;
+	border-color: #EFAD21;
+}
+
+.servs li p {
+	display: inline-block !important;
+}
+
+.servs li a {
+	float: right;
+}
+
+.servs .button {
+	position: relative;
+	top: 0px;
+	right: -2px;
+	height: 38px;
+	padding: 0px;
+	padding-top: 10px;
+	border-radius: 0px 5px 5px 0px;
+	width: 50px;
+	box-shadow: 0 0 0 2px #BBB; 
+}
+
+.servs .button:hover {
+	box-shadow: 0 0 0 1px #EFAD21; 
+}
+
+.hotline {
+	background-image: url(images/background1.png);
+	color: #C5B011;
+    text-shadow:
+    0px -1px 0 #000,
+    1px 0px 0 #000,
+    -1px 0px 0 #000,
+    0px 1px 0 #000;
+	font-weight: normal;
+	text-align: center;
+}
+
+.hotline #content .button {
+	display: block;
+	width: 100%;
+}
+
+.hotline #content table {
+	margin: auto;
+}
+
+.hotline #content th {
+	padding: 10px;
+}
+
+#content h2 {
+	vertical-align: top;
+	display: inline-block;
+	margin-top: 0px;
+	margin-left: auto;
+	margin-right: auto;
+}
+#content p {
+	vertical-align: top;
+	display: inline-block;
+}
+
+
+#client_name {
+	height: 12px;
+	border: 2px solid rgba(255,255,255,0.7);
+	background:rgba(73,0,254,0.5);
+	zoom: 1;
+	top: 114px;
+	margin: 0px;
+	display: inline;
+	border-radius: 2px;
+	position: absolute;
+	padding-left: 4px;
+	padding-right: 4px;
+	left: 0px;
+}
+
+#client_fg {
+	position: absolute;
+	width: 200px;
+	bottom: 0px;
+	left: 0px;
+}
+
+#client_court {
+	position: absolute;
+	display: inline;
+	width: 200px;
+	height: 200px;
+	top: 0px;
+	left: 0px;
+}
+
+#client_char {
+	position: absolute;
+	display: inline;
+	bottom: 0px;
+	left: 0px;
+}
+
+#client_name p {
+	margin: px;
+	opacity: 2;
+	font-size: 10px;
+	color: white;
+	font-family: Arial;
+	display: inline;
+	position: relative;
+}
+
+#client_chat {
+	width: 198px;
+	height: 68px;
+	border: 2px solid rgba(255,255,255,0.7);
+	background-color: rgba(0,0,0,0.5);
+	top: 128px;
+	margin: 0px;
+	display: block;
+	border-radius: 2px;
+	position: absolute;
+}
+
+#client_chat p {
+	margin: 3px;
+	font-size:10px;
+	color: white;
+	font-family: Arial;
+
+}
+
+.blogpost h2
+{
+	text-align: center;
+	height: 24px;
+	border: 2px solid rgba(255,255,255,0.7);
+	background:rgba(30,150,0,0.5);
+	zoom: 1;
+	top: -26px;
+	margin: auto;
+	display: inline;
+	border-radius: 2px;
+	position: absolute;
+	padding-left: 4px;
+	padding-right: 4px;
+	font-weight: normal;
+
+}
+
+.blogpost {
+	margin: 3px;
+	font-size:14px;
+	color: white;
+	display: block;
+	font-family: Arial;
+	min-height: 100px;
+	width: 50%;
+	border: 2px solid rgba(255,255,255,0.7);
+	background-color: rgba(0,0,0,0.5);
+	margin: 0px;
+	display: block;
+	border-radius: 2px;
+	position: relative;
+	margin: 50px;
+	padding-bottom: 20px;
+}
+
+.blogpost p {
+	padding-left: 20px;
+}
+
+.signature {
+	height: 16px;
+	border: 2px solid rgba(255,255,255,0.7);
+	background:rgba(73,0,254,0.5);
+	zoom: 1;
+	bottom: -18px;
+	right: 0px;
+	margin: 0px;
+	display: block;
+	border-radius: 2px;
+	position: absolute;
+	padding-left: 4px;
+	padding-right: 4px;
+}
+
+#content > p {
+	margin-right: 50px;
+}
diff --git a/watch.html b/watch.html
new file mode 100644
index 0000000..c558f49
--- /dev/null
+++ b/watch.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+
+<head>
+    <title>Attorney Online session</title>
+    <link rel="stylesheet" type="text/css" href="client.css">
+    <script src="client.js"></script>
+</head>
+
+<body>
+    <span id="sound"></span>
+    <div id="client_loading">
+	<h1 id="client_loadingtext">Loading</h1>
+    </div>
+	<div id="client_charselect">
+	<table id="client_chartable">
+	</table>
+	</div>
+    <div id="client_wrapper">
+        <div id="client_gamewindow">
+            <img id="client_court" onerror="imgError(this);" src="background/default/defenseempty.png" />
+            <img id="client_char" onerror="imgError(this);" />
+            <img id="client_bench" />
+            <img id="client_fg" onerror="imgError(this);" />
+            <div id="client_name">
+                <p>Dolan</p>
+            </div>
+            <div id="client_chat">
+                <p id="client_inner_chat"></p>
+            </div>
+        </div>
+		<input id="client_inputbox" type="text" onKeyPress="onEnter(event)" />
+        <div id="client_emo">
+		</div>
+		<div id="client_settings">
+			Music <input id="client_mvolume" type="range"  min="0" max="100" value="80" onChange="changeMusicVolume()"/>
+			SFX <input id="client_svolume" type="range"  min="0" max="100" value="70" onChange="changeSFXVolume()"/>
+			Blip <input id="client_bvolume" type="range"  min="0" max="100" value="60" onChange="changeBlipVolume()"/>
+        </div>
+    </div>
+
+    <div id="client_chatlog">
+        <div id="client_log">
+        </div>
+        <div id="client_bars">
+            <img class="client_defense" id="client_defense_bg" src="misc/zdoh.png">
+            <img class="client_defense" id="client_defense_hp" src="misc/advocat.png">
+
+            <img class="client_prosecutor" id="client_prosecutor_bg" src="misc/zdoh.png">
+            <img class="client_prosecutor" id="client_prosecutor_hp" src="misc/procuror.png">
+        </div>
+        <textarea id="client_ooclog"></textarea>
+        <input id="client_oocinputbox" type="text" onKeyPress="onOOCEnter(event)" />
+		<select id="client_musiclist" size="25" onclick="musiclist_click(event)"></select>
+    </div>
+</body>
+
+</html>
\ No newline at end of file