1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chatserver</title>
<link rel="stylesheet" href="night.css">
<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.classList.add("message-ownmessage");
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>
</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>
|
