aboutsummaryrefslogtreecommitdiff
path: root/chatserver.html
diff options
context:
space:
mode:
Diffstat (limited to 'chatserver.html')
-rw-r--r--chatserver.html211
1 files changed, 211 insertions, 0 deletions
diff --git a/chatserver.html b/chatserver.html
new file mode 100644
index 0000000..073ae2d
--- /dev/null
+++ b/chatserver.html
@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Chatserver</title>
+<script>
+var ws,nick;
+ws=new WebSocket("ws://"+location.hostname+":8000");
+ws.addEventListener("message",function(msg){
+ var cmd=msg.data.split(" ");
+ //console.log(msg);
+ if(msg.data[0]=="<")addMessageLine(cmd[0].slice(1),msg.data.slice(cmd[0].length+1));
+ else if(cmd[0]=="#yournick")nick=cmd[1];
+ else if(cmd[0]=="#lobbylist")updateLobbyList(cmd.slice(1));
+ else if(cmd[0]=="#nicklist")updateNickList(cmd.slice(1));
+ else if(cmd[0]=="#nick"){
+ addMessageLine("--","<"+cmd[1]+"> is now known as <"+cmd[2]+">");
+ if(cmd[1]==nick)nick=cmd[2];
+ } else if(cmd[0]=="#join")addMessageLine("--","<"+cmd[1]+"> joined the lobby");
+ else if(cmd[0]=="#part")addMessageLine("--","<"+cmd[1]+"> left the lobby");
+ else if(cmd[0]=="#lobby")highlightLobby(cmd[1]);
+ else if(cmd[0]=="#historystart")clearMessageHistory();
+ else if(cmd[0]=="#history"){
+ if(cmd[1]==">")addMessageLine(cmd[2],cmd.slice(3).join(" "),true);
+ else if(cmd[1]=="join")addMessageLine("--","<"+cmd[2]+"> joined the lobby",true);
+ else if(cmd[1]=="part")addMessageLine("--","<"+cmd[2]+"> left the lobby",true);
+ else addMessageLine("-?-","UNKNOWN HISTORY EVENT "+cmd[2]);
+ } else if(cmd[0]=="#historyend");
+ else if(cmd[0]=="#error")alert("Error: "+msg.data.slice(7));
+});
+ws.addEventListener("open",function(){
+ ws.send("#lobbylist");
+});
+
+function highlightLobby(id){
+ var i,l=document.querySelectorAll("#lobbylistdiv>div");
+ for(i=0;i<l.length;i++){
+ if(l[i].getAttribute("lobbyid")==id)l[i].classList.add("selected");
+ else l[i].classList.remove("selected");
+ }
+}
+
+function updateLobbyList(list){
+ var container=document.getElementById("lobbylistdiv"),div,i;
+ container.innerHTML="";
+ for(i=0;i<list.length;i++){
+ (function(i){
+ div=document.createElement("div");
+ div.appendChild(document.createTextNode(list[i].slice(list[i].indexOf(":")+1)));
+ div.setAttribute("lobbyid",list[i].slice(0,list[i].indexOf(":")));
+ div.addEventListener("click",function(ev){
+ ws.send("#lobby "+ev.target.getAttribute("lobbyid"));
+ },false);
+ container.appendChild(div);
+ })(i);
+ }
+}
+
+function clearMessageHistory(){
+ var tb=document.getElementById("lobbylogtb"),
+ l=document.querySelectorAll("#lobbylogtb>tr"),
+ i;
+ for(i=0;i<l.length;i++)tb.removeChild(l[i]);
+}
+
+function addMessageLine(from,msg,isHistory){
+ var tr,td,table,tbody,tr2,td2;
+ tr=document.createElement("tr");
+ td=document.createElement("td");
+ table=document.createElement("table");
+ tbody=document.createElement("tbody");
+ tr2=document.createElement("tr");
+
+ td2=document.createElement("td");
+ td2.appendChild(document.createTextNode(from=="--"||from=="*"?from:"<"+from+">"));
+ if(from==nick)td.style.color="#00f";
+ tr2.appendChild(td2);
+
+ td2=document.createElement("td");
+ td2.appendChild(document.createTextNode(msg));
+ tr2.appendChild(td2);
+
+ tbody.appendChild(tr2);
+ table.appendChild(tbody);
+ td.appendChild(table);
+ tr.appendChild(td);
+
+ if(isHistory)tr.style.backgroundColor="#ccc";
+
+ document.getElementById("lobbylogtb").appendChild(tr);
+
+ if(tr.getBoundingClientRect&&document.documentElement&&document.documentElement.clientHeight&&tr.getBoundingClientRect().top<document.documentElement.clientHeight+200)
+ tr.scrollIntoView({block:"end",smooth:true});
+}
+
+function sendMessage(text){
+ ws.send(">"+text);
+}
+
+function changeNickPrompt(){
+ var newnick=prompt("If you want to change your nick, please enter your new choice here.");
+ if(newnick!=null)ws.send("#nick "+newnick.replace(/[\x00-\x20\x7F]/g,""));
+}
+</script>
+<style>
+html{height:calc(100% - 8px);}
+body{
+ height:calc(100% - 8px);
+ margin:8px;
+}
+table#maintable,
+table#maintable > tbody,
+table#maintable > tbody > tr{
+ width:800px;
+ height:100%;
+ display:block;
+ margin:0;
+ padding:0;
+}
+td#lobbylist,
+td#lobbylog{
+ display:inline-block;
+ height:calc(100% - 8px);
+ border:1px #ccc solid;
+ border-radius:10px;
+ padding:0;
+ font-family:Monaco,"Courier New",Monospace;
+}
+td#lobbylist{width:120px;}
+td#lobbylog{
+ width:672px;
+ word-wrap:break-word;
+}
+div#lobbylistdiv{
+ width:100%;
+ height:calc(100% - 30px);
+}
+div#lobbylistdiv > div{
+ cursor:pointer;
+}
+div#lobbylistdiv > div.selected{
+ color:#00a;
+ background-color:#eef;
+}
+td#lobbylog > div,
+tbody#lobbtlobtb{
+ overflow:scroll;
+}
+tbody#lobbylogtb,
+tbody#lobbylogtb > tr{
+ width:100%;
+}
+td#lobbylog > div{
+ height:calc(100% - 22px);
+}
+tbody#lobbylogtb td{
+ padding:0;
+}
+td#lobbylog table{
+ border-collapse:collapse;
+}
+tbody#lobbylogtb > tr > td > table > tbody > tr > td:first-child{
+ display:inline-block;
+ padding-right:6px;
+ width:100px;
+ text-align:right;
+ margin-bottom:5px;
+}
+tbody#lobbylogtb > tr > td > table > tbody > tr > td:last-child{
+ /*display:inline-block;*/
+ padding-left:6px;
+ width:calc(100% - 100px);
+ max-width:calc(100% - 100px);
+ margin-bottom:5px;
+ word-wrap:break-word;
+ border-left:1px #eee solid;
+}
+div#nickbtn{
+ display:inline-block;
+ background-color:#bbb;
+ border:1px #ddd solid;
+ border-radius:5px;
+ font-size:12px;
+ cursor:pointer;
+}
+
+.textinput{
+ bottom:0;
+ width:664px;
+ height:15px;
+ border:none;
+ border-top:1px #aaa solid;
+ font-size:14px;
+}
+</style>
+</head>
+<body>
+<table id="maintable"><tbody><tr>
+ <td id="lobbylist">
+ <div id="lobbylistdiv"></div>
+ <div>
+ <div id="nickbtn" onclick="changeNickPrompt()">change nick</div>
+ </div>
+ </td>
+ <td id="lobbylog">
+ <div><table><tbody id="lobbylogtb"></tbody></table></div>
+ <input type="text" class="textinput" placeholder="..." onkeypress="if(event.keyCode==13){sendMessage(this.value);this.value='';}">
+ </td>
+</tr></tbody></table>
+</body>
+</html> \ No newline at end of file