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