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 @@ +
+ +
+ Dice + Dice2 - \ No newline at end of file + diff --git a/style.css b/style.css index 52cb800..e496db1 100644 --- a/style.css +++ b/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; } \ No newline at end of file +.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; +}