I had such an eventful morning. First, the shower curtain came down as I tried to take a towel down. I put it back up so I can take a shower. During the shower, the curtain came down again. In the shower, we have bins for stuff like shampoo bottles. Well, I bumped into it, and it all came crashing down. So, I had to put that back together while I was showering. Then, while making breakfast, I decided to have an egg and cheese burrito; I burned the tortilla.
Despite the rush, I managed to make it to Tommy’s desk around 10:45 to start coding. The day started slow, with me struggling to recall my tasks. But once I found my rhythm, I was unstoppable. The day flew by in a blur, leaving me with a sense of accomplishment, even if it felt like I was constantly racing against time.
Alex is getting an award tonight at the high school. Shoot, I don’t know what we will have for dinner tonight. It would have to be something easy and quick since there is the award ceremony at the high school.
JavaScript notes…
——————————–
FreeCodeCamp Dice Game steps 61 – 75
Step 61
At this point in the game, you are able to roll the dice, make a selection and play for a few rounds. However, you should notice that there is no end to the game and there are infinite rounds.
According to the rules, there should be a total of six rounds and then the game ends with the final score.
Inside the if statement for your keepScoreBtn event listener, add a new if statement to check if round is greater than the number 6.
if (round > 6) {
}
Step 62
Inside your if statement, add a setTimeout function that takes in a callback function and a delay set to 500 milliseconds.
Inside your setTimeout function, add an alert with the message of Game Over! Your total score is ${totalScore}.
if (round > 6) {
setTimeout(() => {
alert(`Game Over! Your total score is ${totalScore}`);
}, 500);
}
Step 63
If you go through six rounds of the game, you should see the alert show up with your final score. But when you dismiss the alert, you are able to keep playing for more rounds past the original six. To fix this, you will need to reset the game.
Start by creating an arrow function called resetGame.
const resetGame = () => {
}
Step 64
Inside your resetGame function, reassign the diceValuesArr variable to an array of five zeros.
Below that, reassign the variables score, totalScore and rolls to 0.
Lastly, reassign the round variable to 1.
const resetGame = () => {
diceValuesArr = [0, 0, 0, 0, 0]
score = 0,
totalScore = 0,
rolls = 0,
round = 1
};
Step 65
To reset each of the dice values to show 0, apply a forEach method to the listOfAllDice variable. For your callback function, use dice and index as parameters.
listOfAllDice.forEach((dice, index) => {})
Step 66
Inside your callback function, update the dice text content by assigning it the value of diceValuesArr[index].
listOfAllDice.forEach((dice, index) => {
dice.textContent = diceValuesArr[index]
});
Step 67
Next, update the score history, total, rounds and rolls text.
Start by updating the text content for the totalScoreText by assigning it the value of totalScore. Below that, update the HTML content for the scoreHistory by assigning it an empty string.
Below that, update the text content for the currentRoundRollsText by assigning it the rolls variable.
Lastly, update the currentRoundText text content by assigning it the round variable.
totalScoreText.textContent = totalScore; scoreHistory.innerHTML = ""; currentRoundRollsText.textContent = rolls; currentRoundText.textContent = round;
Step 68
The last part of your resetGame function is to call the resetRadioOption function. This will reset all of the radio buttons.
resetRadioOption()
Step 69
To reset the game after six rounds, you will need to call your resetGame function inside the keepScoreBtn event listener.
Now you should be able to play the game for six rounds, end the game and have it reset for you.
resetGame()
Step 70
If the user rolls a “Three of a kind” and a pair, then they can receive 25 points for that round. This is known as a full house.
For the next few steps you will build out an algorithm to check for both a “Three of a kind” and a pair and display that option on the screen.
Start by creating an arrow function called detectFullHouse with arr for the parameter name.
Inside the detectFullHouse function, create a const variable called counts and assign it an empty object.
const detectFullHouse = (arr) => {
const counts = {}
}
Step 71
To count the occurrences for each number, use a for…of loop to iterate through every element of the arr. The variable name for the for…of loop should be called num.
for (const num of arr) {
}
Step 72
Inside your for…of loop, use a ternary operator to check if counts[num] is truthy. If so, then increment the count by one, otherwise initialize counts[num] with a value of 1.
Assign the entire result of your ternary to counts[num].
for (const num of arr) {
counts[num] = counts[num] ? counts[num] + 1 : 1;
}
Step 73
If the counts object has a value of the number 3, then that means the user rolled a Three of a kind.
Start by using the Object.values() method and pass in counts for the argument. This will create an array of only the counts values.
Then chain the includes method and pass in the number 3. This will check if 3 is inside this new array.
Lastly, assign that result to a const variable called hasThreeOfAKind.
const hasThreeOfAKind = Object.values(counts).includes(3);
tep 74
If the counts object has a value of the number 2, then that means the user has rolled a pair.
Start by using the Object.values() method and pass in counts for the argument.
Then chain the includes method and pass in the number 2. This will check if 2 is inside this new array.
Lastly, assign that result to a const variable called hasPair.
const hasPair = Object.values(counts).includes(2)
Step 75
If the user has rolled both a pair and Three of a kind, then they have received a Full house resulting in 25 points.
Add an if statement to check if both hasThreeOfAKind and hasPair are true. If so, call the updateRadioOption and pass in the numbers 2 and 25.
if (hasThreeOfAKind && hasPair) {
updateRadioOption(2, 25);
}
