-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
145 lines (121 loc) · 3.88 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
'use strict';
//*Selecting HTML Elements
const showWinner = document.getElementById('show-winner');
const player0El = document.querySelector('.player--0');
const score0El = document.getElementById('score--0');
const current0El = document.getElementById('current--0');
const player1El = document.querySelector('.player--1');
const score1El = document.getElementById('score--1');
const current1El = document.getElementById('current--1');
const diceEl = document.querySelector('.dice');
const btnHold = document.querySelector('.btn--hold');
const btnRoll = document.querySelector('.btn--roll');
const btnNew = document.querySelector('.btn--new');
const btnInfo = document.querySelector('.info');
const modalInfo = document.querySelector('.info-modal');
const btnCloseInfo = document.querySelector('.close-info');
const overlay = document.querySelector('.overlay');
//*Initialize Variables
let current, activePlayer, score0, score1;
//! Function to Switch Between Players.
function switchToPlayer(active) {
current = 0;
player1El.classList.toggle('player--active');
player0El.classList.toggle('player--active');
if (active !== 0) {
current0El.textContent = current;
} else {
current1El.textContent = current;
}
}
//! Function to Reset the Game Setting
function reset() {
current = 0;
activePlayer = 0;
score0 = 0;
score1 = 0;
score0El.textContent = score0;
score1El.textContent = score1;
current0El.textContent = current;
current1El.textContent = current;
diceEl.classList.add('hidden');
player0El.classList.remove('player--winner');
player1El.classList.remove('player--winner');
player1El.classList.remove('player--active');
player0El.classList.add('player--active');
showWinner.textContent = '';
btnRoll.classList.remove('hidden');
btnHold.classList.remove('hidden');
}
//! Function to Check for Winner
function checkForWin(score, active) {
if (score >= 100) {
showWinner.textContent = `Player ${active + 1} Won! 🎉`;
btnRoll.classList.toggle('hidden');
btnHold.classList.toggle('hidden');
diceEl.classList.add('hidden');
document
.querySelector(`.player--${active}`)
.classList.remove('player--active');
document
.querySelector(`.player--${active}`)
.classList.add('player--winner');
} else {
activePlayer = Number(!active);
switchToPlayer(activePlayer);
}
}
//! Functions to open and close Modal Info
function openInfo() {
modalInfo.classList.remove('hidden');
overlay.classList.remove('hidden');
}
function closeInfo() {
modalInfo.classList.add('hidden');
overlay.classList.add('hidden');
}
//*Reset The Game
reset();
//* Roll Btn Functionality
btnRoll.addEventListener('click', function () {
//Generate Randon Number Between 1 to 6
const dice = Math.trunc(Math.random() * 6) + 1;
//Desplay Dice
diceEl.src = `dice-${dice}.png`;
diceEl.classList.remove('hidden');
// Check If Dice is 1 or not
if (dice !== 1) {
//Adding Current dice to Active Player
current += dice;
if (activePlayer === 0) {
current0El.textContent = current;
} else {
current1El.textContent = current;
}
} else {
//Change Active Player And Switch it
activePlayer = Number(!activePlayer);
switchToPlayer(activePlayer);
}
});
//* Hold Btn Functionality
btnHold.addEventListener('click', function () {
//Add Current Score to Main Score and Check for Win
if (activePlayer === 0) {
score0 += current;
score0El.textContent = score0;
checkForWin(score0, activePlayer);
} else {
score1 += current;
score1El.textContent = score1;
checkForWin(score1, activePlayer);
}
});
//*New Btn Functionality
btnNew.addEventListener('click', reset);
//*Info Btn Functionality
btnInfo.addEventListener('click', openInfo);
//*Close Info Btn Functionality
btnCloseInfo.addEventListener('click', closeInfo);
//*Overlay close Info Functionality
overlay.addEventListener('click', closeInfo);