Card Guessing game with React part 7

In this part we will build the logic for guessing the card the user had chosen.

First we need to store the first colum selected by the user in the state. When a user selects another column the next time, we will compare the numbers from the previous column (stored in state) and the current column and choose the numbers that are in both columns.

Add a new possibleNums array in state.

this.state = {
  numbers: this.getRandNumArray(),
  possibleNums: [],}

Then we can update the state with the column the user selected. Since we have already put the selected column in the middle of the newNumbers, we can just extract it back and set it for possibleNums. But before that we need to compare the current column with the previous column and only update what's common.

Let's define 3 arrays inside the colToRows function.

let prvPosNums = this.state.possibleNums
let curPosNums = newNumbers.slice(CARDS_PER_COL * 1, CARDS_PER_COL * 2)
let newPosNums = []

If it is the first time, the possibleNumbers will be empty. In this case we can just set the all the possible numbers from current column as new numbers.

let prvPosNums = this.state.possibleNums
let curPosNums = newNumbers.slice(CARDS_PER_COL * 1, CARDS_PER_COL * 2)
let newPosNums = []
if (prvPosNums.length === 0) {  newPosNums = curPosNums}

If not, we can just push the common numbers to the newPosNumbers.

if (prvPosNums.length === 0) {
  newPosNums = curPosNums
}
else {  prvPosNums.forEach(n => {    if (curPosNums.includes(n)) newPosNums.push(n)  })}

After that, we can just update the state.

let prvPosNums = this.state.possibleNums
let curPosNums = newNumbers.slice(CARDS_PER_COL * 1, CARDS_PER_COL * 2)
let newPosNums = []
if (prvPosNums.length === 0) {
  newPosNums = curPosNums
} else {
  prvPosNums.forEach(n => {
    if (curPosNums.includes(n)) newPosNums.push(n)
  })
}
this.setState({
  numbers: newNumbers,
  possibleNums: newPosNums,})

We can test this by adding a callback function inside setState. The reason we are using callback function instead of calling console.log after setState is that setState is asynchronous. Therefore, if we log the state value right after setState is called, we might not get the updated value. More on this at https://reactjs.org/docs/faq-state.html.

this.setState(
  {
    numbers: newNumbers,
    possibleNums: newPosNums,
  },
  () => {    console.log(this.state.possibleNums)  })

To test this, you need to pick a number and select the column the number is in for 3 times. On the third time, possibleNums should only have the number you picked.

let's say I chose number 13 which is on the first column. After I clicked Select the first time, I will get the following as my possible numbers.

Now the number 13 is in column 2. After clicking Select on the 2nd column, the possible numbers size is reduced to 3 numbers.

Finally, after the 3rd select, the my number is the only number left.

Good progress. That's it for today. Let me know in the comments if you have any questions. Thanks for visiting my blog :)

Title Photo by Clifford Photography on Unsplash