-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
134 lines (115 loc) · 4.05 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
"use strict";
// Selecting elements
const player0El = document.querySelector(".player--0");
const player1El = document.querySelector(".player--1");
const score0El = document.getElementById("score--0");
const score1El = document.getElementById("score--1");
const current0El = document.getElementById("current--0");
const current1El = document.getElementById("current--1");
const diceEl = document.querySelector(".dice");
const btnNew = document.querySelectorAll(".btn--new");
const btnRoll = document.querySelectorAll(".btn--roll");
const btnHold = document.querySelectorAll(".btn--hold");
const modal = document.querySelector(".modal");
const overlay = document.querySelector(".overlay");
const btnCloseModal = document.querySelector(".close-modal");
const btnsShowModal = document.querySelectorAll(".btn--modal");
let scores, currentScore, activePlayer, playing;
// Starting conditions
const init = function () {
scores = [0, 0];
currentScore = 0;
activePlayer = 0;
playing = true;
score0El.textContent = 0;
score1El.textContent = 0;
current0El.textContent = 0;
current1El.textContent = 0;
diceEl.classList.add("hidden");
player0El.classList.remove("player--winner");
player1El.classList.remove("player--winner");
player0El.classList.add("player--active");
player1El.classList.remove("player--active");
};
init();
// If the active player is 0 (player 1), then set the active player to 1 (player 2), otherwise set the active player to 0
const switchPlayer = function () {
document.getElementById(`current--${activePlayer}`).textContent = 0;
currentScore = 0;
activePlayer = activePlayer === 0 ? 1 : 0;
player0El.classList.toggle("player--active");
player1El.classList.toggle("player--active");
};
// Implementing rolling dice functionality
for (let i = 0; i < btnRoll.length; i++) {
btnRoll[i].addEventListener("click", function () {
if (playing) {
// 1. Generating a random dice roll
const dice = Math.trunc(Math.random() * 6) + 1;
// 2. Display the dice
diceEl.classList.remove("hidden");
diceEl.src = `img/dice-${dice}.png`;
// 3. Check for rolled 1
if (dice !== 1) {
// Add dice to current score
currentScore += dice;
document.getElementById(`current--${activePlayer}`).textContent =
currentScore;
} else {
// switch to next player
switchPlayer();
}
}
});
}
// Implementing holding dice functionality
// This is a for loop that is iterating through the btnHold array.
for (let i = 0; i < btnHold.length; i++) {
btnHold[i].addEventListener("click", function () {
if (playing) {
// 1. Add current score to active player's score
scores[activePlayer] += currentScore;
// Sample scenario: scores at array pos. 1 = scores[1] + the current score
document.getElementById(`score--${activePlayer}`).textContent =
scores[activePlayer];
// 2. Check if player's score is >= 100
if (scores[activePlayer] >= 100) {
// Finish game
playing = false;
diceEl.classList.add("hidden");
document
.querySelector(`.player--${activePlayer}`)
.classList.add("player--winner");
document
.querySelector(`.player--${activePlayer}`)
.classList.remove("player--active");
} else {
// Switch to the next player
switchPlayer();
}
}
});
}
// Reseting the game
for (let i = 0; i < btnNew.length; i++) {
btnNew[i].addEventListener("click", init);
}
// Modal window for the rules
const openModal = function () {
modal.classList.remove("hidden");
overlay.classList.remove("hidden");
};
const closeModal = function () {
modal.classList.add("hidden");
overlay.classList.add("hidden");
};
for (let i = 0; i < btnsShowModal.length; i++) {
btnsShowModal[i].addEventListener("click", openModal);
}
btnCloseModal.addEventListener("click", closeModal);
overlay.addEventListener("click", closeModal);
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && !modal.classList.contains("hidden")) {
closeModal();
}
});