-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
174 lines (137 loc) · 4.66 KB
/
script.js
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
/////////////////////////////////////////////////////////////////////
// DOM FUNCTIONS
/////////////////////////////////////////////////////////////////////
var game = new Game()
// When page loads verify if user has a nickname
window.onload = function () {
const authuser = localStorage.getItem("authuser");
/* if (!authuser) {
var modal = document.getElementById("nicknameModal");
modal.style.display = "grid"; // Display nickname modal
} */
// Disable start button if no user entered
document.getElementById('startButton').disabled = (authuser) ? false : true;
document.getElementById('startButton').disabled = false;
}
function submitNickname() {
var nickname = document.getElementById("nickname-input").value.trim();
if (nickname && nickname.length > 1) {
localStorage.setItem("authuser", nickname);
document.getElementById('startButton').disabled = false;
}
}
var circle = document.querySelector('.circle');
document.addEventListener('mousemove', (e) => {
circle.style.left = (e.pageX - 25) + 'px';
circle.style.top = (e.pageY - 25) + 'px';
});
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function transition(indexes, color) {
var element = null;
while (indexes.length > 0) {
// Get and delete the first element
element = indexes.shift();
// Set color
document.getElementById(element).setAttribute("color", color)
await sleep(30);
document.getElementById(element).setAttribute("color", "none")
}
// When indexes is not empty
if (indexes.length == 0 && element != null) {
document.getElementById(element).setAttribute("color", color)
matrix[element] = (color == "yellow") ? 1 : 2;
return true;
}
return false;
}
function render() {
matrix.map((elem, index) => {
document.getElementById(index + "").setAttribute("color", elem)
})
}
const getBottom = function (index) {
let n = game.shape;
var indexes = [];
// Lets fine the first index element of the row
var indexSuperior = index;
while (indexSuperior >= n) {
indexSuperior -= n;
}
var stop = n * n;
// Lets add the rest of the index
while (indexSuperior < stop && document.getElementById(indexSuperior).getAttribute("color") == "none") {
indexes.push(indexSuperior)
indexSuperior += n;
}
return indexes
}
/**
* Returns the length of a string.
* @param {number} color - 1 for yellow, 2 for read.
* @param {number} index - The id of
*/
function prepareGame() {
var table = document.getElementById("board");
var tdList = Array.from(table.getElementsByTagName("td"));
document.getElementById("startButton").setAttribute("style", "display: none;");
document.getElementById("gameOptions").setAttribute("style", "display: flex;");
tdList.map((elem, index) => {
// Set ids to the td elements
elem.setAttribute("id", index)
elem.setAttribute("color", "none")
// Add the function to the td elements when click
elem.onclick = async function () {
if (game.isPlayerTurn()) {
// Block click
game.changeTurn();
var indexes = getBottom(index);
var changed = await transition(indexes, game.playerColor);
// Validate if move were made
(!changed) ? game.changeTurn() : 0;
} else {
alert("Wait your turn")
}
}
// Set color of user disk
circle.style.backgroundColor = game.playerColor;
circle.style.opacity = 1;
})
stopwatchWorker.postMessage('start');
}
async function cpu() {
if (isOver == false) {
var index = CPU_IA(2, 1);
var indexes = getBottom(index);
var changed = await transition(indexes, game.cpuColor);
matrix[index] = 2;
(changed) ? game.changeTurn() : alert("Wait your turn");
}
return isOver
}
const stopwatchWorker = new Worker('stopwatch.js');
let elapsedTime = 0;
stopwatchWorker.onmessage = function (event) {
elapsedTime = event.data;
// Update the display of the elapsed time
document.getElementById('stopwatch').innerHTML = "Time: " + elapsedTime;
};
function pauseGame() {
stopwatchWorker.postMessage('pause');
document.getElementById('pauseButton').setAttribute("style", "display: none;");
document.getElementById('resumeButton').removeAttribute('style');
}
function resumeGame() {
stopwatchWorker.postMessage('pause');
document.getElementById('resumeButton').setAttribute("style", "display: none;");
document.getElementById('pauseButton').removeAttribute('style');
}
function restartGame() {
stopwatchWorker.postMessage('stop');
document.getElementById('pauseButton').setAttribute("style", "display: none;");
document.getElementById('resumeButton').removeAttribute('style');
restartMatrix();
game = new Game();
render();
}