Lastly, we need to write the code that checks if a user has won the game and if they have, we need
to display a message.
Congrats, which right now we're not doing and we'll also probably hide the table.
So let's do it right here where we're setting the state with the board.
The new board we're setting has one to be has one, but right now we hardcoded it to be false every
time we're saying you lose.
But let's actually check.
And for us to know if a user has one, we need to iterate and check every single cell here.
Make sure that every single one is off, meaning that it's set to false.
And to do that, we can't just loop once because we can loop over the rows.
And that would give us one, two, three, four, five.
But we then need to do our inner loop the same thing X and Y so that we can check all of the values.
And I'm going to simplify it instead of doing a for loop or something, I'm just going to use every
so board, which is what we just changed.
We updated the board here before we're setting the state board every and then we can pass in for each
row.
I'm going to do another row every now and then for each cell.
And we just want to check that the cell is false.
So we want this to be truth, meaning not false.
I know it's kind of a weird syntax, but we do not sell to make sure this returns true.
So every cell in every row should be false.
Now.
Let's see if it works.
This we need to make sure we're setting that to be the value of has one so it has one equal for every
OC.
And then we save that.
Set it to the state.
It's going to be annoying to test.
So I'm going to cheat a little bit and come into react here and change some of these values and turn
things on or off.
I just toggled a couple of them on and off or just off, actually.
Now I should be able to click here and win the game.
And if we take a look in our state, we should have has one set to true.
So that part is working now we need to display something based off of that.
So inside of render, we're not going to display the board at all if the user has one.
So instead of doing it down here, I'm going to just circumvent the entire board and up top do a short
circuit.
So if this dot state has one, I'm going to just return right there with an H one.
We'll style it in the next video if you want to see how I did the neon effect and just say you won.
And that's it.
So if the user wins, that's what we should see.
I'm not sure what color this text will show up as it will be an adventure.
Let's check it out.
So I'm going to do the same thing and cheat just a bit.
But instead of changing the board because we already saw that that part was working, if we update the
board to be all off has one set to false?
Now if I just toggle it to be true, we're getting the text you won.
So our game is officially complete.
It's working.
I'm terrible at playing it, so I can't verify using the real way of playing it.
I can only short circuit it by changing the props.
In the next video, I'll show you how to if you want, how to style it the way that I did.
It's a little more colorful, I guess some neon effects, but it has very little to do with React.
So you might just want to copy and paste the stylesheet from the solution and just see how it works.