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(); 
+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,46 +62,55 @@ function changePlayer() {
 
 // add functionality for roll btn
 document.querySelector(".btn-roll").addEventListener("click", function() {
-  //create random number
-  var dice = Math.floor(Math.random() * 6) + 1;
-  // disply the result
-  var diceDOM = document.querySelector(".dice");
-  diceDOM.style.display = "block";
-  diceDOM.src = "./dice-" + dice + ".png";
-  // update current scores, if the rolled number was not one
-  if (dice !== 1) {
-    roundScore += dice;
-  } else {
-    changePlayer();
+  if (isGamePlaying) {
+    //create random number
+    var dice = Math.floor(Math.random() * 6) + 1;
+    // disply the result
+    var diceDOM = document.querySelector(".dice");
+    diceDOM.style.display = "block";
+    diceDOM.src = "./dice-" + dice + ".png";
+    // update current scores, if the rolled number was not one
+    if (dice !== 1) {
+      roundScore += dice;
+    } else {
+      changePlayer();
+    }
+    // change current score in user inteface
+    document.querySelector("#current-" + activePlayer).textContent = roundScore;
   }
-  // change current score in user inteface
-  document.querySelector("#current-" + activePlayer).textContent = roundScore;
 });
 
 // add functionality for hold btn
 document.querySelector(".btn-hold").addEventListener("click", function() {
-  //update score
-  scores[activePlayer] += roundScore;
-
-  //change score in user interface
-  document.getElementById("score-" + activePlayer).textContent =
-    scores[activePlayer];
-
-  //find winner!
-  if (scores[activePlayer] >= 20) {
-    document.getElementById("name-" + activePlayer).textContent = "Winner! :)";
-    document.querySelector(".dice").style.display = "none";
-    document
-      .querySelector(".player-" + activePlayer + "-panel")
-      .classList.remove("active");
-    document
-      .querySelector(".player-" + activePlayer + "-panel")
-      .classList.add("winner");
-  } else {
-    //change player
-    changePlayer();
+  if (isGamePlaying) {
+    //update score
+    scores[activePlayer] += roundScore;
+
+    //change score in user interface
+    document.getElementById("score-" + activePlayer).textContent =
+      scores[activePlayer];
+
+    //find winner!
+    if (scores[activePlayer] >= 20) {
+      document.getElementById("name-" + activePlayer).textContent =
+        "Winner! :)";
+      document.querySelector(".dice").style.display = "none";
+      document
+        .querySelector(".player-" + activePlayer + "-panel")
+        .classList.remove("active");
+      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);
+
+