-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (117 loc) · 5.26 KB
/
index.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tic Tac Toe !</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="/socket.io/socket.io.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h3 align="center">This is a tictactoe example with socket.io c: <p class="pull-right"><span id="online" class="badge"></span> Online </p></h3>
<hr/>
<div class="col-md-12" align="center">
<a href="#" onclick="start()" class="btn btn-primary">Start</a>
<hr/>
<table class="caption-style-1">
<tr>
<td id="00" style="border-right:solid;border-bottom:solid"><a href="#" onclick="play(0,0)" onclick="play(0,0)"><img src="img/white.png" alt="100" width ="100px"></a></td>
<td id="01" style="border-right:solid"><a href="#" onclick="play(0,1)"><img src="img/white.png" alt="100" width ="100px"></a></td>
<td id="02" style="border-left:solid"><a href="#" onclick="play(0,2)"><img src="img/white.png" alt="100" width ="100px"></a></td>
</tr>
<tr>
<td id="10" style="border-right:solid"><a href="#" onclick="play(1,0)"><img src="img/white.png" alt="100" width ="100px"></a></td>
<td id="11" style="border:solid"><a href="#" onclick="play(1,1)"><img src="img/white.png" alt="100" width ="100px"></a></td>
<td id="12" style="border-top:solid"><a href="#" onclick="play(1,2)"><img src="img/white.png" alt="100" width ="100px"></a></td>
</tr>
<tr>
<td id="20" style="border-right:solid;border-top:solid"><a href="#" onclick="play(2,0)"><img src="img/white.png" alt="100" width ="100px"></a></td>
<td id="21" style="border-right:solid"><a href="#" onclick="play(2,1)"><img src="img/white.png" alt="100" width ="100px"></a></td>
<td id="22" style="border-top:solid"><a href="#" onclick="play(2,2)"><img src="img/white.png" alt="100" width ="100px"></a></td>
</tr>
</table>
<h3 id="state"></h3>
</div>
</body>
</html>
<script>
var client_baton = ""
var socket = io.connect('http://201.239.179.89:8080/')
socket.on('turn',(data)=>{
console.log(data)
})
socket.on('online',(data)=>{
document.getElementById('online').innerHTML = data.online
})
socket.on('table',(table)=>{
renderTablePlayable(table)
})
socket.on('win',(data)=>{
document.body.style.cursor = 'auto'
renderTableUnplayable(data.table)
if(data.win === socket.id){
document.getElementById('state').innerHTML = `You Win !`
}else{
document.getElementById('state').innerHTML = `You Lose :c`
}
if(data.player === 1){
document.getElementById(data.positionWin.p1).innerHTML = `<img src="img/red-x.png" alt="100" width ="100px">`
document.getElementById(data.positionWin.p2).innerHTML = `<img src="img/red-x.png" alt="100" width ="100px">`
document.getElementById(data.positionWin.p3).innerHTML = `<img src="img/red-x.png" alt="100" width ="100px">`
}else if(data.player === -1){
document.getElementById(data.positionWin.p1).innerHTML = `<img src="img/red-o.png" alt="100" width ="100px">`
document.getElementById(data.positionWin.p2).innerHTML = `<img src="img/red-o.png" alt="100" width ="100px">`
document.getElementById(data.positionWin.p3).innerHTML = `<img src="img/red-o.png" alt="100" width ="100px">`
}
})
socket.on('deadEnd',(data)=>{
document.body.style.cursor = 'auto'
document.getElementById('state').innerHTML = `Nobody Win :/`
renderTableUnplayable(data.table)
})
socket.on('turn',(baton) =>{
client_baton = baton
if(socket.id == baton){
document.getElementById('state').innerHTML = `Is your turn!`
document.body.style.cursor = 'auto'
console.log(`turn of me`)
}else{
document.getElementById('state').innerHTML = `Is turn of your oponent...`
document.body.style.cursor = 'wait'
console.log(`turn of oponent`)
}
})
start = () => {
socket.emit('start')
}
play = (i,j) =>{
if(client_baton === socket.id)
socket.emit('play',{i,j})
}
renderTablePlayable = (table) =>{
for(let i = 0; i < 3; i++){
for(let j = 0; j < 3; j++){
if(table[i][j]===1)
document.getElementById(`${i}${j}`).innerHTML = `<img src="img/x.png" alt="100" width ="100px">`
if(table[i][j]===-1)
document.getElementById(`${i}${j}`).innerHTML = `<img src="img/o.png" alt="100" width ="100px">`
if(table[i][j]===0)
document.getElementById(`${i}${j}`).innerHTML = `<a href="#" onclick="play(${i},${j})" onclick="play(0,0)"><img src="img/white.png" alt="100" width ="100px"></a>`
}
}
}
renderTableUnplayable = (table) =>{
for(let i = 0; i < 3; i++){
for(let j = 0; j < 3; j++){
if(table[i][j]===1)
document.getElementById(`${i}${j}`).innerHTML = `<img src="img/x.png" alt="100" width ="100px">`
if(table[i][j]===-1)
document.getElementById(`${i}${j}`).innerHTML = `<img src="img/o.png" alt="100" width ="100px">`
if(table[i][j]===0)
document.getElementById(`${i}${j}`).innerHTML = `<img src="img/white.png" alt="100" width ="100px">`
}
}
}
</script>