-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
159 lines (136 loc) · 4.59 KB
/
index.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
let firstScore = document.getElementById("first-score-point");
let secondScore = document.getElementById("second-score-point");
let leftPlusOneBtn = document.getElementById("left-plus-one");
let leftPlusTwoBtn = document.getElementById("left-plus-two");
let leftPlusThreeBtn = document.getElementById("left-plus-three");
let rightPlusOneBtn = document.getElementById("right-plus-one");
let rightPlusTwoBtn = document.getElementById("right-plus-two");
let rightPlusThreeBtn = document.getElementById("right-plus-three");
var leftScore = 0;
var rightScore = 0;
var timeLeft = 10;
var counter = 0;
// score one point for the left team
function addLeftPlusOne() {
leftScore += 1;
firstScore.textContent = leftScore;
highlightHighScore(leftScore, rightScore);
}
// score two points for the left team
function addLeftPlusTwo() {
leftScore += 2;
firstScore.textContent = leftScore;
highlightHighScore(leftScore, rightScore);
}
// score three points for the left team
function addLeftPlusThree() {
leftScore += 3;
firstScore.textContent = leftScore;
highlightHighScore(leftScore, rightScore);
}
// score one point for the right team
function addRightPlusOne() {
rightScore += 1;
secondScore.textContent = rightScore;
highlightHighScore(leftScore, rightScore);
}
// score two points for the right team
function addRightPlusTwo() {
rightScore += 2;
secondScore.textContent = rightScore;
highlightHighScore(leftScore, rightScore);
}
// score three points for the right team
function addRightPlusThree() {
rightScore += 3;
secondScore.textContent = rightScore;
highlightHighScore(leftScore, rightScore);
}
// compare and calculate the score of both teams and decide the winner
function highlightHighScore(leftScore, rightScore) {
if (leftScore > rightScore) {
firstScore.style.color = "#00ff00";
secondScore.style.color = "#F94F6D";
} else if (rightScore > leftScore) {
secondScore.style.color = "#00ff00";
firstScore.style.color = "#F94F6D";
} else {
firstScore.style.color = "#F94F6D";
secondScore.style.color = "#F94F6D";
}
}
// countdown the timer for the last 10 seconds
const timerCounter = setInterval(() => {
if (timeLeft == 0) {
clearInterval(timerCounter);
document.querySelector(".timer-p").style.color = "red";
modal.style.display = "block";
if(leftScore > rightScore){
document.getElementById("winnerSpan").textContent = "Home"
}
else if(leftScore < rightScore){
document.getElementById("winnerSpan").textContent = "Guest";
}
else{
document.querySelector(".winnerHeader").textContent = "Draw!";
// document.getElementById("winnerSpan").textContent = "Draw!";
}
}
if (timeLeft - counter < 10) {
document.getElementById("second").textContent = "0" + (timeLeft - counter);
} else {
document.getElementById("second").textContent = timeLeft - counter;
}
timeLeft -= 1;
}, 1000);
// start new game and countdown for 30 seconds
function newGameHandler() {
leftScore = 0;
rightScore = 0;
firstScore.textContent = leftScore;
secondScore.textContent = rightScore;
firstScore.style.color = "#F94F6D";
secondScore.style.color = "#F94F6D";
timeLeft = 29;
document.getElementById("second").textContent = timeLeft;
document.querySelector(".timer-p").style.color = "rgb(252, 202, 109)";
// Countdown the time for 30 seconds after start new game
const timerCounter = setInterval(() => {
if (timeLeft == 0) {
clearInterval(timerCounter);
document.querySelector(".timer-p").style.color = "red";
modal.style.display = "block";
if(leftScore > rightScore){
document.getElementById("winnerSpan").textContent = "Home"
}
else if(leftScore < rightScore){
document.getElementById("winnerSpan").textContent = "Guest";
}
else{
document.getElementById("winnerHeader").textContent = "Draw!";
}
}
if (timeLeft - counter < 10) {
document.getElementById("second").textContent =
"0" + (timeLeft - counter);
} else {
document.getElementById("second").textContent = timeLeft - counter;
}
timeLeft -= 1;
}, 1000);
}
// Get the modal for the winner board
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = document.getElementById("close");
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
clearInterval(timerCounter);
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
};