Sixth challenge

app.js

@@ -9,22 +9,37 @@ GAME RULES:
 
 */
 
-let scores, roundScore, activePlayer, gamePlaying;
+/**
+ * Challenges
+ * 1- If a player rolls a 6 twice in a row, their turn ends and they lose their score
+ * 2- Added a new field so the players can insert a new max score
+ * 3- Added a second dice, the player's turn ends if either of them rolls a 1
+ */
+
+let scores, roundScore, activePlayer, gamePlaying, previousRoll, maxScore;
 
 init();
 
 document.querySelector('.btn-roll').addEventListener('click', function() {
 
    if (gamePlaying) {
-    let dice = Math.floor(Math.random() * 6) + 1;
-
-    diceDOM = document.querySelector('.dice');
-    diceDOM.style.display = 'block';
-    diceDOM.src = 'dice-' + dice + '.png';
+    let dice = getDiceNumber();
+    let secondDice = getDiceNumber();
+    const sum = dice + secondDice;
 
-    if (dice !== 1) {
-        roundScore += dice;
+    diceDOM = setDiceDOM(dice, '.dice');
+    diceDOM = setDiceDOM(secondDice, '.secondDice');
+
+    //This is for the first challenge's rule, not meant to work for both dice
+    if (dice === 6 && dice === previousRoll) {
+        document.querySelector('#score-' + activePlayer).textContent = 0;
+        nextPlayer();
+    }
+
+    if (dice !== 1 && secondDice !== 1) {
+        roundScore += sum;
         document.querySelector('#current-' + activePlayer).textContent = roundScore;
+        previousRoll = dice;
     } else {
        nextPlayer();
     }
@@ -37,9 +52,10 @@ document.querySelector('.btn-hold').addEventListener('click', function() {
         scores[activePlayer] += roundScore;
         document.querySelector('#score-' + activePlayer).textContent = scores[activePlayer]; 
 
-        if (scores[activePlayer] >= 100) {
+        if (scores[activePlayer] >= maxScore) {
             document.querySelector('#name-' + activePlayer).textContent = 'Winner!';
             document.querySelector('.dice').style.display = 'none';
+            document.querySelector('.secondDice').style.display = 'none';
             document.querySelector('.player-' + activePlayer + '-panel').classList.add('winner');
             document.querySelector('.player-' + activePlayer + '-panel').classList.remove('active');
             gamePlaying = false;
@@ -49,8 +65,23 @@ document.querySelector('.btn-hold').addEventListener('click', function() {
     }
 });
 
+document.querySelector('.btn-changeMaxScore').addEventListener('click', function() {
+    maxScore = document.getElementById('maxScore').value;
+    document.getElementById('maxScore').value = '';
+});
+
 document.querySelector('.btn-new').addEventListener('click', init);
 
+function getDiceNumber() {
+    return Math.floor(Math.random() * 6) + 1;
+}
+
+function setDiceDOM(dice, diceName) {
+    diceDOM = document.querySelector(diceName);
+    diceDOM.style.display = 'block';
+    diceDOM.src = 'dice-' + dice + '.png';
+}
+
 function nextPlayer() {
 
     activePlayer === 0 ? activePlayer = 1 : activePlayer = 0;
@@ -64,6 +95,7 @@ function nextPlayer() {
     document.querySelector('.player-1-panel').classList.toggle('active');
 
     document.querySelector('.dice').style.display = 'none';
+    document.querySelector('.secondDice').style.display = 'none';
 }
 
 function init() {
@@ -72,8 +104,11 @@ function init() {
     activePlayer = 0;
     roundScore = 0;
     gamePlaying = true;
+    previousRoll = 0;
+    maxScore = 100;
 
     document.querySelector('.dice').style.display = 'none';
+    document.querySelector('.secondDice').style.display = 'none';
 
     document.getElementById('score-0').textContent = '0';
     document.getElementById('score-1').textContent = '0';
@@ -87,4 +122,4 @@ function init() {
     document.querySelector('.player-0-panel').classList.remove('active');
     document.querySelector('.player-1-panel').classList.remove('active');
     document.querySelector('.player-0-panel').classList.add('active');
-}
+}

index.html

@@ -29,13 +29,18 @@
                 </div>
             </div>
 
+            <div class="score">
+                <input type="number" id="maxScore" value=%(winScore)s min="20" placeholder="Enter a new final score">
+            </div>
+            <button class="btn-changeMaxScore">Change final score</button>
             <button class="btn-new"><i class="ion-ios-plus-outline"></i>New game</button>
             <button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>
             <button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button>
 
             <img src="dice-5.png" alt="Dice" class="dice">
+            <img src="dice-5.png" alt="Dice2" class="secondDice">
         </div>
 
         <script src="app.js"></script>
     </body>
-</html>
+</html>

style.css

@@ -105,7 +105,6 @@ body {
 
 button {
     position: absolute;
-    width: 200px;
     left: 50%;
     transform: translateX(-50%);
     color: #555;
@@ -137,18 +136,51 @@ i {
     transition: margin 0.3s;
 }
 
-.btn-new { top: 45px;}
-.btn-roll { top: 403px;}
-.btn-hold { top: 467px;}
+.btn-new { 
+    top: 45px;
+    width: 200px;
+}
+.btn-roll { 
+    top: 403px;
+    width: 200px;
+}
+.btn-hold { 
+    top: 467px;
+    width: 200px;
+}
+.btn-changeMaxScore { 
+    top: 550px;
+    left: 52%;
+}
 
 .dice {
     position: absolute;
     left: 50%;
-    top: 178px;
+    top: 250px;
+    transform: translateX(-50%);
+    height: 100px;
+    box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
+}
+
+.secondDice {
+    position: absolute;
+    left: 50%;
+    top: 100px;
     transform: translateX(-50%);
     height: 100px;
     box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
 }
 
 .winner { background-color: #f7f7f7; }
-.winner .player-name { font-weight: 300; color: #EB4D4D; }
+.winner .player-name { font-weight: 300; color: #EB4D4D; }
+
+.score {
+    position: absolute;
+    left: 43%;
+    top: 510px;
+    font-size: 20px;
+    color: #222;
+    font-family: Lato;
+    font-size: 20px;
+    text-transform: uppercase;
+}