From c227260e83781b890cd8508376534f2298ca3e04 Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Mon, 30 May 2016 13:51:31 +0200 Subject: added spectator mode --- client.css | 25 ++++++++++++------------- client.html | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ client.js | 32 +++++++++++++++++++++++-------- master.html | 2 +- master.js | 2 +- stylesheet.css | 2 +- watch.html | 58 --------------------------------------------------------- 7 files changed, 98 insertions(+), 82 deletions(-) create mode 100644 client.html delete mode 100644 watch.html 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/client.html b/client.html new file mode 100644 index 0000000..eee9f23 --- /dev/null +++ b/client.html @@ -0,0 +1,59 @@ + + + + + Attorney Online session + + + + + + +
+

Loading

+
+
+ + +
+
+
+
+ + + + +
+

Dolan

+
+
+

+
+
+ +
+
+
+
+ Music + SFX + Blip +
+ +
+
+
+
+ + + + + +
+ + + +
+ + + \ No newline at end of file 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 = ""+chars[i].desc+""; + td.innerHTML = ""+chars[i].desc+""; 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 @@

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 += '

  • ' + arguments[4] + '

    Watch

    • ' + document.getElementById('masterlist').innerHTML += '

  • ' + arguments[4] + '

    WatchJoin

    • ' 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; diff --git a/watch.html b/watch.html deleted file mode 100644 index c558f49..0000000 --- a/watch.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - Attorney Online session - - - - - - -
    -

    Loading

    -
    -
    - -
    -
    -
    -
    - - - - -
    -

    Dolan

    -
    -
    -

    -
    -
    - -
    -
    -
    - Music - SFX - Blip -
    -
    - -
    -
    -
    -
    - - - - - -
    - - - -
    - - - \ No newline at end of file -- cgit