diff --git a/app.js b/app.js index ee7f6ab..a0d39d7 100644 --- a/app.js +++ b/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'); -} \ No newline at end of file +} diff --git a/index.html b/index.html index 2dd4d3f..6f95c8d 100644 --- a/index.html +++ b/index.html @@ -29,13 +29,18 @@ +
+