1
|
|
|
(function () { |
2
|
|
|
let websocket; |
3
|
|
|
let connect = document.getElementById("connect"); |
4
|
|
|
let nickname = document.getElementById('nickname'); |
5
|
|
|
let clientlist = document.getElementById("clientarea"); |
6
|
|
|
let output = document.getElementById("msgarea"); |
7
|
|
|
let sendmessage = document.getElementById("messagebtn"); |
8
|
|
|
let startgame = document.getElementById("startgame"); |
9
|
|
|
let nextturnbtn = document.getElementById("nextturnbtn"); |
10
|
|
|
let clientmessage = document.getElementById("message"); |
11
|
|
|
let close = document.getElementById("disconnectbtn"); |
12
|
|
|
var player; |
13
|
|
|
|
14
|
|
|
player = { |
15
|
|
|
nickname: 'anon', |
16
|
|
|
colorclass: 'blackplayer' |
17
|
|
|
}; |
18
|
|
|
|
19
|
|
|
/** |
20
|
|
|
* Check nickname inputfield. If empty disable connectionbtn. |
21
|
|
|
*/ |
22
|
|
|
function doCheck() { |
23
|
|
|
var nicknamevalue; |
24
|
|
|
|
25
|
|
|
if (nicknamevalue === '') { |
|
|
|
|
26
|
|
|
document.getElementById("connect").disabled = true; |
27
|
|
|
} else { |
28
|
|
|
document.getElementById("connect").disabled = false; |
29
|
|
|
} |
30
|
|
|
} |
31
|
|
|
|
32
|
|
|
// Checking nickname inputfield when keyup or when focusout |
33
|
|
|
$('#nickname').keyup(doCheck).focusout(doCheck); |
34
|
|
|
|
35
|
|
|
function renderClientArea(jsonmsg) { |
36
|
|
|
var HTMLlist = ""; |
37
|
|
|
var yourturn = ""; |
38
|
|
|
|
39
|
|
|
if (jsonmsg.playersturn == undefined) { |
40
|
|
|
yourturn = ""; |
|
|
|
|
41
|
|
|
} |
42
|
|
|
|
43
|
|
|
clientlist.innerHTML = ""; |
44
|
|
|
for (var i = 0; i < jsonmsg.userarray.length; i++) { |
45
|
|
|
if (jsonmsg.userarray[i] === jsonmsg.playersturn) { |
46
|
|
|
yourturn = "- din tur"; |
47
|
|
|
} else { |
48
|
|
|
yourturn = ""; |
49
|
|
|
} |
50
|
|
|
if (jsonmsg.userarray[i] === player.nickname) { |
51
|
|
|
HTMLlist += "<p class="+jsonmsg.userscolors[i]+ |
52
|
|
|
"><strong>"+jsonmsg.userarray[i]+"</strong> "+yourturn+"</p>"; |
53
|
|
|
} else { |
54
|
|
|
HTMLlist += "<p class="+jsonmsg.userscolors[i]+">"+jsonmsg.userarray[i]+" "+yourturn+"</p>"; |
55
|
|
|
} |
56
|
|
|
} |
57
|
|
|
clientlist.innerHTML = HTMLlist; |
58
|
|
|
} |
59
|
|
|
|
60
|
|
|
function renderGameBoard(gameboard) { |
61
|
|
|
var gameboardhtml; |
62
|
|
|
var gameboardrow; |
63
|
|
|
var card; |
64
|
|
|
var cardholder; |
65
|
|
|
|
66
|
|
|
document.getElementById("gameboard").innerHTML = ""; |
67
|
|
|
gameboardhtml = document.createElement("table"); |
68
|
|
|
gameboardhtml.setAttribute("class", "gameboardtable"); |
69
|
|
|
|
70
|
|
|
for (let y = 0; y < gameboard.height; y++) { |
71
|
|
|
gameboardrow = document.createElement("tr"); |
72
|
|
|
for (let x = 0; x < gameboard.width; x++) { |
73
|
|
|
cardholder = document.createElement("td"); |
74
|
|
|
card = document.createElement("button"); |
75
|
|
|
card.setAttribute("id", "place_"+x+"_"+y); |
76
|
|
|
card.setAttribute("class", "cardholder"); |
77
|
|
|
if (gameboard.position.indexOf(x+""+y) == -1) { |
78
|
|
|
card.innerHTML = "<img class='cardimage' src='/images/memorycards/cardbackside.png' />"; |
79
|
|
|
} else { |
80
|
|
|
// gameboard.cardvalue[gameboard.position.indexOf(x+""+y)] = kortvärdet alltså bilden |
81
|
|
|
// |
82
|
|
|
if (gameboard.pairvalues.indexOf(gameboard.cardvalue[gameboard.position.indexOf(x+""+y)]) != 1) { |
83
|
|
|
card.setAttribute("class", "cardholder "+gameboard.paircolors[gameboard.pairvalues.indexOf(gameboard.cardvalue[gameboard.position.indexOf(x+""+y)])]); |
84
|
|
|
} |
85
|
|
|
|
86
|
|
|
card.innerHTML = "<img class='cardimage' src='/images/memorycards/"+gameboard.cardvalue[gameboard.position.indexOf(x+""+y)]+"' />"; |
87
|
|
|
} |
88
|
|
|
if (gameboard.activeplayer == player.nickname) { |
89
|
|
|
card.onclick = function() { |
90
|
|
|
var msg; |
91
|
|
|
|
92
|
|
|
msg = { |
93
|
|
|
type: "clickingcard", |
94
|
|
|
player: player.nickname, |
95
|
|
|
colorclass: player.colorclass, |
96
|
|
|
x: x, |
97
|
|
|
y: y |
98
|
|
|
}; |
99
|
|
|
websocket.send(JSON.stringify(msg)); |
100
|
|
|
}; |
101
|
|
|
} |
102
|
|
|
cardholder.appendChild(card); |
103
|
|
|
gameboardrow.appendChild(cardholder); |
104
|
|
|
} |
105
|
|
|
gameboardhtml.appendChild(gameboardrow); |
106
|
|
|
} |
107
|
|
|
document.getElementById("gameboard").appendChild(gameboardhtml); |
108
|
|
|
} |
109
|
|
|
|
110
|
|
|
function addClientMsg(jsonmsg) { |
111
|
|
|
let now = new Date(); |
112
|
|
|
let timestamp = now.toLocaleTimeString(); |
113
|
|
|
var htmlmsg; |
114
|
|
|
var nick = jsonmsg.nick; |
115
|
|
|
var content = jsonmsg.content; |
116
|
|
|
var chatwindow = document.getElementById('chatwindow'); |
117
|
|
|
|
118
|
|
|
htmlmsg = document.createElement('div'); |
119
|
|
|
htmlmsg.className = "well clientmsgwell"; |
120
|
|
|
htmlmsg.innerHTML = "<p>"+`${timestamp}`+" [<strong>"+nick+"</strong>]:<br>"+content+"</p>"; |
121
|
|
|
chatwindow.appendChild(htmlmsg); |
122
|
|
|
chatwindow.scrollTop = chatwindow.scrollHeight; |
123
|
|
|
// output.appendChild(htmlmsg); |
124
|
|
|
} |
125
|
|
|
|
126
|
|
|
function setPlayerparams(jsonmsg) { |
127
|
|
|
console.log("Setting uniquenickname to " + jsonmsg.uniquenick); |
|
|
|
|
128
|
|
|
player.nickname = jsonmsg.uniquenick; |
129
|
|
|
player.colorclass = jsonmsg.colorclass; |
130
|
|
|
} |
131
|
|
|
|
132
|
|
|
/** |
133
|
|
|
* What to do when user clicks Connect |
134
|
|
|
*/ |
135
|
|
|
connect.addEventListener("click", function() { |
136
|
|
|
console.log("Connecting to ws://localhost:8001/."); |
|
|
|
|
137
|
|
|
websocket = new WebSocket('ws://localhost:8001/'); |
|
|
|
|
138
|
|
|
// console.log("Connecting to ws://82.102.5.98:8001/."); |
139
|
|
|
// websocket = new WebSocket('ws://82.102.5.98:8001/'); |
140
|
|
|
websocket.onopen = function() { |
141
|
|
|
console.log("The websocket is now open."); |
|
|
|
|
142
|
|
|
var msg; |
143
|
|
|
|
144
|
|
|
msg = { |
145
|
|
|
type: 'newuser', |
146
|
|
|
content: nickname.value |
147
|
|
|
}; |
148
|
|
|
websocket.send(JSON.stringify(msg)); |
149
|
|
|
$("#connectform").hide(); |
150
|
|
|
$("#messageform").show(); |
151
|
|
|
$("#startgame").show(); |
152
|
|
|
document.getElementById('gameboard').innerHTML = ''; |
153
|
|
|
$("#gameboard").show(); |
154
|
|
|
}; |
155
|
|
|
|
156
|
|
|
websocket.onmessage = function(event) { |
157
|
|
|
console.log("Receiving message: " + event.data); |
|
|
|
|
158
|
|
|
var jsonmsg; |
159
|
|
|
|
160
|
|
|
jsonmsg = JSON.parse(event.data); |
161
|
|
|
|
162
|
|
|
if (jsonmsg.type === 'users') { |
163
|
|
|
renderClientArea(jsonmsg); |
164
|
|
|
} else if (jsonmsg.type === 'uniquename') { |
165
|
|
|
setPlayerparams(jsonmsg); |
166
|
|
|
} else if (jsonmsg.type === 'clientmsg') { |
167
|
|
|
addClientMsg(jsonmsg); |
168
|
|
|
} else if (jsonmsg.type === 'startgame') { |
169
|
|
|
$("#startgame").hide(); |
170
|
|
|
// generate gameboard on clientside. |
171
|
|
|
renderGameBoard(jsonmsg.gameboard); |
172
|
|
|
renderClientArea(jsonmsg); |
173
|
|
|
} else if (jsonmsg.type === 'turnbackstageone') { |
174
|
|
|
// när två olika kort lyfts |
175
|
|
|
// jsonmsg.gameboard är inte resettat i detta läge. |
176
|
|
|
renderGameBoard(jsonmsg.gameboard); |
177
|
|
|
} else if (jsonmsg.type === 'nextturnbtn') { |
178
|
|
|
$("#nextturnbtn").show(); |
179
|
|
|
} |
180
|
|
|
}; |
181
|
|
|
|
182
|
|
|
websocket.onclose = function() { |
183
|
|
|
console.log("The websocket is now closed."); |
|
|
|
|
184
|
|
|
// console.log(websocket); |
185
|
|
|
$("#messageform").hide(); |
186
|
|
|
$("#startgame").hide(); |
187
|
|
|
$("#gameboard").hide(); |
188
|
|
|
$("#connectform").show(); |
189
|
|
|
}; |
190
|
|
|
}, false); |
191
|
|
|
|
192
|
|
|
/** |
193
|
|
|
* What to do when user clicks to send a message. |
194
|
|
|
*/ |
195
|
|
|
sendmessage.addEventListener("click", function(/*event*/) { |
196
|
|
|
let messagetext = clientmessage.value; |
197
|
|
|
var msg; |
198
|
|
|
|
199
|
|
|
if (!websocket || websocket.readyState === 3) { |
200
|
|
|
console.log("The websocket is not connected to a server."); |
|
|
|
|
201
|
|
|
} else { |
202
|
|
|
msg = { |
203
|
|
|
type: "clientmsg", |
204
|
|
|
nick: player.nickname, |
205
|
|
|
content: messagetext |
206
|
|
|
}; |
207
|
|
|
websocket.send(JSON.stringify(msg)); |
208
|
|
|
console.log("Sending message: " + messagetext); |
209
|
|
|
clientmessage.value = ""; |
210
|
|
|
} |
211
|
|
|
}); |
212
|
|
|
|
213
|
|
|
/** |
214
|
|
|
* What to do when starting a game and setting the table |
215
|
|
|
*/ |
216
|
|
|
startgame.addEventListener("click", function(/*event*/) { |
217
|
|
|
var msg; |
218
|
|
|
|
219
|
|
|
if (!websocket || websocket.readyState === 3) { |
220
|
|
|
console.log("The websocket is not connected to a server."); |
|
|
|
|
221
|
|
|
} else { |
222
|
|
|
msg = { |
223
|
|
|
type: "startgame" |
224
|
|
|
}; |
225
|
|
|
websocket.send(JSON.stringify(msg)); |
226
|
|
|
console.log("Starting up a new game"); |
227
|
|
|
$("#startgame").hide(); |
228
|
|
|
} |
229
|
|
|
}); |
230
|
|
|
|
231
|
|
|
nextturnbtn.addEventListener("click", function(/*event*/) { |
232
|
|
|
var msg; |
233
|
|
|
|
234
|
|
|
if (!websocket || websocket.readyState === 3) { |
235
|
|
|
console.log("The websocket is not connected to a server."); |
|
|
|
|
236
|
|
|
} else { |
237
|
|
|
msg = { |
238
|
|
|
type: "flip" |
239
|
|
|
}; |
240
|
|
|
websocket.send(JSON.stringify(msg)); |
241
|
|
|
console.log("reset gameboard"); |
242
|
|
|
$("#nextturnbtn").hide(); |
243
|
|
|
} |
244
|
|
|
}); |
245
|
|
|
|
246
|
|
|
|
247
|
|
|
|
248
|
|
|
/** |
249
|
|
|
* What to do when user clicks Close connection. |
250
|
|
|
*/ |
251
|
|
|
close.addEventListener("click", function(/*event*/) { |
252
|
|
|
console.log("Closing websocket for %s.", player.nickname); |
|
|
|
|
253
|
|
|
var msg; |
254
|
|
|
|
255
|
|
|
msg = { |
256
|
|
|
type: 'deleteuser', |
257
|
|
|
content: player.nickname |
258
|
|
|
}; |
259
|
|
|
websocket.send(JSON.stringify(msg)); |
260
|
|
|
clientlist.innerHTML = ""; |
261
|
|
|
output.innerHTML = ""; |
262
|
|
|
websocket.close(); |
263
|
|
|
}); |
264
|
|
|
})(); |
265
|
|
|
|