<!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>