From f51a0febcfc05713b182c2ceb40a995b2bb8ef56 Mon Sep 17 00:00:00 2001 From: jess2896 Date: Tue, 8 Oct 2019 11:03:08 -0400 Subject: [PATCH 1/2] Solved the first and third challenges --- app.js | 40 +++++++++++++++++++++++++++++++++++----- index.html | 7 ++++++- style.css | 20 ++++++++++++++++++-- 3 files changed, 59 insertions(+), 8 deletions(-) diff --git a/app.js b/app.js index ee7f6ab..ac5d39a 100644 --- a/app.js +++ b/app.js @@ -9,7 +9,14 @@ 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 the 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(); @@ -17,14 +24,27 @@ document.querySelector('.btn-roll').addEventListener('click', function() { if (gamePlaying) { let dice = Math.floor(Math.random() * 6) + 1; + let secondDice = Math.floor(Math.random() * 6) + 1; + let sum = dice + secondDice; diceDOM = document.querySelector('.dice'); diceDOM.style.display = 'block'; diceDOM.src = 'dice-' + dice + '.png'; - if (dice !== 1) { - roundScore += dice; + diceDOM = document.querySelector('.secondDice'); + diceDOM.style.display = 'block'; + diceDOM.src = 'dice-' + secondDice + '.png'; + + //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 +57,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,6 +70,11 @@ document.querySelector('.btn-hold').addEventListener('click', function() { } }); +document.querySelector('.btn-submit').addEventListener('click', function() { + maxScore = document.getElementById('maxScore').value; + document.querySelector('.maxScore').value = ''; +}); + document.querySelector('.btn-new').addEventListener('click', init); function nextPlayer() { @@ -64,6 +90,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 +99,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 +117,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..0ed8007 100644 --- a/index.html +++ b/index.html @@ -29,13 +29,18 @@ +
Set the winning score(20-100) + + +
Dice + Dice2 - \ No newline at end of file + diff --git a/style.css b/style.css index 52cb800..1a822e2 100644 --- a/style.css +++ b/style.css @@ -144,11 +144,27 @@ i { .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; + top: 550px; + font-size: 20px; + color: #222; +} From 0e0a5dc7f349fddfc4d767b7e35b06d722144d68 Mon Sep 17 00:00:00 2001 From: jess2896 Date: Wed, 9 Oct 2019 11:12:15 -0400 Subject: [PATCH 2/2] Solved the second challenge --- app.js | 31 ++++++++++++++++++------------- index.html | 6 +++--- style.css | 26 +++++++++++++++++++++----- 3 files changed, 42 insertions(+), 21 deletions(-) diff --git a/app.js b/app.js index ac5d39a..a0d39d7 100644 --- a/app.js +++ b/app.js @@ -12,7 +12,7 @@ GAME RULES: /** * 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 the max 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 */ @@ -23,17 +23,12 @@ init(); document.querySelector('.btn-roll').addEventListener('click', function() { if (gamePlaying) { - let dice = Math.floor(Math.random() * 6) + 1; - let secondDice = Math.floor(Math.random() * 6) + 1; - let sum = dice + secondDice; - - diceDOM = document.querySelector('.dice'); - diceDOM.style.display = 'block'; - diceDOM.src = 'dice-' + dice + '.png'; + let dice = getDiceNumber(); + let secondDice = getDiceNumber(); + const sum = dice + secondDice; - diceDOM = document.querySelector('.secondDice'); - diceDOM.style.display = 'block'; - diceDOM.src = 'dice-' + secondDice + '.png'; + 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) { @@ -70,13 +65,23 @@ document.querySelector('.btn-hold').addEventListener('click', function() { } }); -document.querySelector('.btn-submit').addEventListener('click', function() { +document.querySelector('.btn-changeMaxScore').addEventListener('click', function() { maxScore = document.getElementById('maxScore').value; - document.querySelector('.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; diff --git a/index.html b/index.html index 0ed8007..6f95c8d 100644 --- a/index.html +++ b/index.html @@ -29,10 +29,10 @@ -
Set the winning score(20-100) - - +
+
+ diff --git a/style.css b/style.css index 1a822e2..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,9 +136,22 @@ 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; @@ -164,7 +176,11 @@ i { .score { position: absolute; - top: 550px; + left: 43%; + top: 510px; font-size: 20px; color: #222; + font-family: Lato; + font-size: 20px; + text-transform: uppercase; }