Review Algorithmic Thinking by Building a Dice Game - Step 7

[hbar1st]

The way I go about writing an algorithm for something like this is I take a piece of paper and write down an example of the list of dice that I can get.

After that I work out how I would, as a human, figure out which number is repeated the most.
I write down my steps and make sure they are easy to follow by someone who is about 7 years old.

This usually leads me to something I can turn into code.

So ask yourself: if you had a list like
[5,4,5,4,2,5] how would you know that 5 is repeated? And how would you know how many times it is repeated? How would you know that this number of repetitions is more than 4 is repeated?

Write down a step by step description of how you would do that.

[dustblackrose]

I would count start from the first number and see if the next one is the same. Repeat that until i get all duplicates.

I would take one 5 and consider it the og 5 and then count how many number 5 i’ve left. That’s how I would know how many times 5 is repeated.

I would count how many times 4 is repeated vs 5. In this case it’s one. So 2 is more than 1. So, 5 is repeated more than 2.

[pkdvalis]

So how would you implement this in code? You have two values to keep track of for each iteration through the array:

• The current value
• The number of times this value has occured.

@a2937

A way of using the numbers themselves as a key to get the count value.

There is a data structure that is appropriate for this, that uses keys and values. You want to create a kind of table or object with a key for each number and a value for the number of times it occurs.

I think starting with a for loop that iterates through the array is the easiest way to begin.

[dustblackrose]

my diceValuesArr looks like this after 3 rolls : [ 5, 1, 5, 1, 1 ] [ 2, 3, 3, 4, 4 ] [ 4, 5, 6, 4, 3 ]. I don’t think it would be comfortable to count them as is, no? I’d probably like it to be a big single array instead of this

[hbar1st]

Please click the reset button to return the code to its original state. After that, the array will go back to normal (as one array)

(You should not modify the array, just read it after that)

[dustblackrose]

reseted. Here’s the result of console.log on the diceValuesArr after 3 rolls : [ 5, 5, 1, 4, 6 ] [ 5, 1, 2, 4, 6 ] [ 2, 3, 1, 3, 1 ]

[hbar1st]

The button to reset will undo all the code changes you did in the step. After you reset, if you print out the diceValuesArray, it will be exactly one array.

If you add any code after that to modify the array, then it will look different.

If you are still stuck, share the full code including the console.log statements you are using to debug.

[dustblackrose]

const listOfAllDice = document.querySelectorAll(".die");
const scoreInputs = document.querySelectorAll("#score-options input");
const scoreSpans = document.querySelectorAll("#score-options span");
const roundElement = document.getElementById("current-round");
const rollsElement = document.getElementById("current-round-rolls");
const totalScoreElement = document.getElementById("total-score");
const scoreHistory = document.getElementById("score-history");
const rollDiceBtn = document.getElementById("roll-dice-btn");
const keepScoreBtn = document.getElementById("keep-score-btn");
const rulesContainer = document.querySelector(".rules-container");
const rulesBtn = document.getElementById("rules-btn");

let diceValuesArr = [];
let isModalShowing = false;
let score = 0;
let round = 1;
let rolls = 0;

const rollDice = () => {
  diceValuesArr = [];

  for (let i = 0; i < 5; i++) {
    const randomDice = Math.floor(Math.random() * 6) + 1;
    diceValuesArr.push(randomDice);
  };

  listOfAllDice.forEach((dice, index) => {
    dice.textContent = diceValuesArr[index];
  });
};

const updateStats = () => {
  rollsElement.textContent = rolls;
  roundElement.textContent = round;
};

const updateRadioOption = (index, score) => {
  scoreInputs[index].disabled = false;
  scoreInputs[index].value = score;
  scoreSpans[index].textContent = `, score = ${score}`;
};



rollDiceBtn.addEventListener("click", () => {
  if (rolls === 3) {
    alert("You have made three rolls this round. Please select a score.");
  } else {
    rolls++;
    rollDice();
    updateStats();
    console.log(diceValuesArr)
  }
});

[pkdvalis]

This looks like 3 different arrays. 1 array per roll.

Make sure to call your getHighestDuplicates when the dice are rolled.

You need to pass the array to your getHighestDuplicates function, and then loop through it and count how many times each number appears, and store that in a new object where each key is one of the numbers, and the value is the number of times it appears.

[hbar1st]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[dustblackrose]

how can i turn it into a single array for all 3 turns? Is it possible?

[hbar1st]

So with this code, when you click the roll button you can see the array correct?

After that, if you click roll again, it will print out a different array, but still one array.

If you are not sure, just print out a newline after each log statement

[dustblackrose]

i see three arrays. one for each roll

[hbar1st]

Change your console.log to:

console.log(" one array: " + diceValuesArr + "\n");

Then roll the dice once.
What do you see?

[dustblackrose]

@hbar1st

console.log(" one array: " + diceValuesArr + “\n”);

i see this: one array: 6,1,3,2,6

[hbar1st]

So do you understand now? It is one array.
Each time you roll, it is still, one array

[dustblackrose]

why doesn’t keep numbers from previous rolls? was it something i did? is it suppose to be this way?

[hbar1st]

It is supposed to be this way. If you check the code you wrote in the previous steps you can see that.

[dustblackrose]

Ok,so I need a way to know how many duplicates each number in array has. But if first roll has two 4 and second has one 4, it should’ve been 3 in total. And because diceValuesArr is the way it is, I don’t think it could work. Is there a way to fix this?

[dustblackrose]

Here’s what I came up with after looking online:

 const getHighestDuplicates = (arr) => {
  let map = {};
  arr.forEach(item => {
    if (map[item]) {
map[item]++;
  }
  else {
    map[item] = 1;
  }
  return map;
  }
  
  )
  console.log(map);
}

console.log is just to see if it’s working