add state variable to game

section3/app.js

@@ -7,7 +7,7 @@ GAME RULES:
 - The first player to reach 100 points on GLOBAL score wins the game
 */
 
-var scores, roundScore, activePlayer;
+var scores, roundScore, activePlayer, isGamePlaying;
 
 // document.querySelector("#current-" + activePlayer).textContent = dice;
 // document.querySelector("#current-" + activePlayer).innerHTML = "<h1>" + dice + "</h1>";
@@ -16,16 +16,15 @@ var scores, roundScore, activePlayer;
 // var x = document.querySelector("#score-1").textContent;
 // console.log(x);
 
-
 //initializing everything
 init();
 
 function init() {
-
   // initializing global variable
   scores = [0, 0];
   roundScore = 0;
   activePlayer = 0;
+  isGamePlaying = true;
 
   // make dice invisible
   document.querySelector(".dice").style.display = "none";
@@ -35,14 +34,13 @@ function init() {
   document.getElementById("current-1").textContent = "0";
   document.getElementById("score-0").textContent = "0";
   document.getElementById("score-1").textContent = "0";
-  document.querySelector(".player-0-panel").classList.remove('active');
-  document.querySelector(".player-1-panel").classList.remove('active');
-  document.querySelector(".player-0-panel").classList.remove('winner');
-  document.querySelector(".player-1-panel").classList.remove('winner');
-  document.querySelector(".player-0-panel").classList.add('active');
+  document.querySelector(".player-0-panel").classList.remove("active");
+  document.querySelector(".player-1-panel").classList.remove("active");
+  document.querySelector(".player-0-panel").classList.remove("winner");
+  document.querySelector(".player-1-panel").classList.remove("winner");
+  document.querySelector(".player-0-panel").classList.add("active");
   document.getElementById("name-0").textContent = "PLAYER 1";
   document.getElementById("name-1").textContent = "PLAYER 2";
-
 }
 
 function changePlayer() {
@@ -64,6 +62,7 @@ function changePlayer() {
 
 // add functionality for roll btn
 document.querySelector(".btn-roll").addEventListener("click", function() {
+  if (isGamePlaying) {
     //create random number
     var dice = Math.floor(Math.random() * 6) + 1;
     // disply the result
@@ -78,10 +77,12 @@ document.querySelector(".btn-roll").addEventListener("click", function() {
     }
     // change current score in user inteface
     document.querySelector("#current-" + activePlayer).textContent = roundScore;
+  }
 });
 
 // add functionality for hold btn
 document.querySelector(".btn-hold").addEventListener("click", function() {
+  if (isGamePlaying) {
     //update score
     scores[activePlayer] += roundScore;
 
@@ -91,7 +92,8 @@ document.querySelector(".btn-hold").addEventListener("click", function() {
 
     //find winner!
     if (scores[activePlayer] >= 20) {
-    document.getElementById("name-" + activePlayer).textContent = "Winner! :)";
+      document.getElementById("name-" + activePlayer).textContent =
+        "Winner! :)";
       document.querySelector(".dice").style.display = "none";
       document
         .querySelector(".player-" + activePlayer + "-panel")
@@ -99,11 +101,16 @@ document.querySelector(".btn-hold").addEventListener("click", function() {
       document
         .querySelector(".player-" + activePlayer + "-panel")
         .classList.add("winner");
+
+      isGamePlaying = false;
     } else {
       //change player
       changePlayer();
     }
+  }
 });
 
 // add functionality for newGame btn
-document.querySelector('.btn-new').addEventListener("click" , init); 
\ No newline at end of file
+document.querySelector(".btn-new").addEventListener("click", init);
+
+