added spectator mode

6 files changed, 43 insertions, 27 deletions

diff --git a/client.css b/client.css
index 89ff60a..a2c66e5 100644
--- a/client.css
+++ b/client.css
@@ -29,11 +29,13 @@ img {
 }
 
 #client_loading {
-	position: fixed;
-	width: 100%;
-	height: 100%;
-	overflow:hidden;
-	margin: 0 auto;
+	position: absolute;
+	width: 90vw;
+	height: 30vh;
+    top: 50%;
+    left: 50%;
+    margin-right: -50%;
+    transform: translate(-50%, -50%);
 	justify-content: center;
 	display: flex;
 	align-items: center;
@@ -52,14 +54,13 @@ img {
 }
 
 #client_charselect {
-	position: fixed;
+	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
-	height: 100%;
 	overflow: hidden;
 	justify-content: center;
-	display: flex;
+	display: none;
 	align-items: center;
 	vertical-align: middle;
 	margin: 0 auto;
@@ -83,7 +84,6 @@ img {
 }
 
 #client_wrapper {
-	display: none;
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -106,9 +106,9 @@ img {
 }
 
 #client_settings {
-	position: relative;
-	top: 10px;
-	width: 95%;
+	position: absolute;
+	top: 100%;
+	width: 60%;
 }
 
 .area_btn {
@@ -193,7 +193,6 @@ input {
 }
 
 #client_chatlog {
-	display: none;
 	width: 244px;
 	height: 100%;
 	background: #dbdbdb url("misc/chat2.png") no-repeat;
diff --git a/watch.html b/client.html
index c558f49..eee9f23 100644
--- a/watch.html
+++ b/client.html
@@ -13,6 +13,7 @@
 	<h1 id="client_loadingtext">Loading</h1>
     </div>
 	<div id="client_charselect">
+	<button onclick="pickchar(1001)">SPECTATE</button>
 	<table id="client_chartable">
 	</table>
 	</div>
@@ -31,13 +32,13 @@
         </div>
 		<input id="client_inputbox" type="text" onKeyPress="onEnter(event)" />
         <div id="client_emo">
-		</div>
-		<div id="client_settings">
+		</div>		
+    </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">
diff --git a/client.js b/client.js
index bc0f9e9..944ed2e 100644
--- a/client.js
+++ b/client.js
@@ -51,6 +51,7 @@ location.search.substr(1).split("&").forEach(function(item) {
     //serv = new WebSocket("ws://51.255.160.217:50000");
     //serv = new WebSocket("ws://85.25.196.172:5000");
 serv = new WebSocket("ws://" + queryDict.ip);
+var mode = queryDict.mode;
 serv.onopen = function(evt) {
     onOpen(evt)
 };
@@ -115,7 +116,7 @@ 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#%" );
+    serv.send("MS#chat#" + myemo.speaking + "#" + mychar.name + "#" + myemo.silent + "#" + document.getElementById("client_inputbox").value + "#"+mychar.side+"#0#0#0#0#0#0#0#0#0#0#0#0#0#%" );
     document.getElementById("client_inputbox").value = '';
     }
 }
@@ -145,6 +146,12 @@ function imgError(image) {
     return true;
 }
 
+function demoError(image) {
+    image.onerror = "";
+    image.src = "/misc/placeholder.png";
+    return true;
+}
+
 function ImageExist(url) {
     var img = new Image();
     console.log(url)
@@ -230,7 +237,6 @@ function changebg(position) {
 }
 
 function updateText() {
-    console.log("updating");
     if (chatmsg.content == "") {
         document.getElementById("client_name").style.display = "none";
         document.getElementById("client_chat").style.display = "none";
@@ -260,7 +266,6 @@ function updateText() {
                     comboblip.play()
                     break;
             }
-            console.log("magic");
             textnow = chatmsg.content.substring(0, textnow.length + 1);
             document.getElementById("client_inner_chat").innerHTML = escapeHtml(textnow);
         } else {
@@ -272,7 +277,11 @@ function updateText() {
 }
 
 function onOpen(e) {
+	if(mode=="join"){
     serv.send("HI#" + navigator.userAgent + "#%");
+	} else {
+		document.getElementById("client_loading").style.display = "none";
+	}
 };
 
 function onClose(e) {
@@ -356,7 +365,7 @@ function onMessage(e) {
                 textnow = '';
                 addlog(chatmsg.nameplate + ": " + escapeHtml(arguments[5]))
                 console.log("Message received: " + arguments[5]);
-                updater = setInterval(updateText, 60);
+                updater = setInterval(updateText, 80);
             }
             break;
         case "CT":
@@ -461,7 +470,7 @@ function onMessage(e) {
 			} else {
 			var thispick = chars[i].icon;
 			}			
-			td.innerHTML = "<img class='demothing' id='demo_"+i+"' src='"+thispick + "' alt='"+chars[i].desc+"' onclick='pickchar(" + i + ")' >";
+			td.innerHTML = "<img class='demothing' id='demo_"+i+"' src='"+thispick + "' alt='"+chars[i].desc+"' onclick='pickchar(" + i + ")' onerror='demoError(this);'>";
 			tr.appendChild(td);
 			if (i % 5 == 0){
 				document.getElementById("client_chartable").appendChild(tr);
@@ -478,8 +487,7 @@ function onMessage(e) {
                 if (this.status == 200) {
                     linifile = this.responseText;
                     pinifile = parseINI(linifile);
-                    console.log(pinifile.Options.gender);
-                    console.log(pinifile.Emotions.number);
+                    chars[me].side = pinifile.Options.side;
                     for (var i = 1; i < pinifile.Emotions.number; i++) {
 						var emoteinfo = pinifile.Emotions[i].split('#');
                         emotes[i] = { 
@@ -503,7 +511,15 @@ function addlog(toadd) {
 }
 
 function pickchar(ccharacter) {
-    serv.send("CC#" +pid + "#" + ccharacter + "#web#%")
+	console.log(ccharacter);
+	if (ccharacter<1000){
+    serv.send("CC#" +pid + "#" + ccharacter + "#web#%");
+} else {
+	//spectator
+	document.getElementById("client_charselect").style.display = "none";
+	document.getElementById("client_inputbox").style.display = "none";
+	document.getElementById("client_emo").style.display = "none";
+}
 }
 
 function pickemotion(emo) {
diff --git a/master.html b/master.html
index f8e3750..3ba7c32 100644
--- a/master.html
+++ b/master.html
@@ -55,7 +55,7 @@
 				</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>
+			<li onmouseover="setServ(99)"><p>Localhost</p> <a class="button" href="client.html?ip=127.0.0.1:27016">Watch</a><a class="button" href="client.html?ip=127.0.0.1:27016">Join</a></li>
 
 			</ul>
 		</div>
diff --git a/master.js b/master.js
index dc546f5..c23a1b0 100644
--- a/master.js
+++ b/master.js
@@ -47,7 +47,7 @@ function onMessage(e) {
 	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/>'
+		document.getElementById('masterlist').innerHTML += '<li onmouseover="setServ(' + arguments[0] + ')"><p>' + arguments[4] + '</p> <a class=\"button\" href=\"client.html?mode=watch&ip=' + arguments[1] + ':' + arguments[3] + '\">Watch</a><a class=\"button\" href=\"client.html?mode=join&ip=' + arguments[1] + ':' + arguments[3] + '\">Join</a></li><br/>'
 		serverpics[arguments[0]] = arguments[2];
 		descs[arguments[0]] = arguments[5];
 	}
diff --git a/stylesheet.css b/stylesheet.css
index b505212..bc598de 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -201,7 +201,7 @@ body {
 	padding: 0px;
 	padding-left: 10px;
 	display: block;
-	width: 350px;
+	width: 400px;
 	height: 50px;
 	margin: 10px;
 	margin-left: auto;