-
Notifications
You must be signed in to change notification settings - Fork 0
/
clientSide.html
111 lines (95 loc) · 2.84 KB
/
clientSide.html
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
<html>
<head>
<!-- This is the websocket SERVER -->
<script src="http://localhost:5000/socket.io/socket.io.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<input type="button" id="continue" name="continue" value="Continue"/>
</head>
<body>
<div id="msg"></div>
<input type="button" id="quit" name="quit" value="Quit"/>
<script>
// connect to WEBSOCKET server
var socket = io.connect('http://localhost:5000');
//socket.emit('joinGame', "hi");
document.getElementById("continue").onclick = function() {
socket.emit('myEvent', "hi");
};
document.getElementById("quit").onclick = function() {
socket.emit('endGame', "quitting");
};
// Attach event handler for event fired by server
socket.on('server', function(data) {
var elem = document.getElementById('msg');
if(data == "Black wins" || data == "Red wins"){
console.log(data);
elem.innerHTML += "<br>" + data;
}
else if(data == "Someone Quit"){
elem.innerHTML = data;
location.reload();
}
else{
console.log(data);
//data = JSON.parse(data);
var i,j
var a = "";
a += "<table border='1'>";
//echo "<table border='1'>";
for(i = 0; i < 8; i++){
a += "<tr>";
for(j = 0; j < 8; j++){
var col = "";
if(i % 2 == 0 && j % 2 == 1){
col = "B7ADAD";
}
else if(i % 2 == 1 && j % 2 == 0){
col = "B7ADAD";
}
else{
col = "F55252";
}
piece = data[i][j];
if(piece.selected == 1){
col = "FFFF33";
}
var im = "";
if(piece.color == 1){
if(piece.king != 1){
im = "<img src='BlackPiece.png' alt='Black' />";
}
else{
im = "<img src='BlackKing.png' alt='Black' />";
}
}
else if(piece.color == 2){
if(piece.king != 1){
im = "<img src='RedPiece.png' alt='Red' />";
}
else{
im = "<img src='RedKing.png' alt='Red' />";
}
}
a +="<td width= '50' height= '50' bgcolor='"+ col +"' align='center' data-x = '" + i +"' id= '"+ j +"'>" + im +"</td>";
}
// echo "</tr>";
a +="</tr>";
}
elem.innerHTML = a; // append data that we got back
clicks(data);
}
});
socket.on('message', function(data) {
var elem = document.getElementById('msg');
console.log(data);
elem.innerHTML += "<br>" + data; // append data that we got back
clicks(data);
});
function clicks(data){
$('#msg td').click(function() {
socket.emit('myEvent', data[this.getAttribute("data-x")][this.getAttribute("id")] );
});
}
</script>
</body>
</html>