00:00 So let's get started right here. Marty the Moneybag gave us all these handy utilities that we're gonna be using from the shared directory. And then here's our default state. It's just an array of nine items, all of them just set to null at the start. Our default state is not enough. We want to have something that's interactive.

00:17 So we're gonna call a use state, pull that in from React. And that is our initial state, that's fine. But now this is squares and set squares. Sweet, so now we can actually make changes to it over time. We had this little tip from Lily the Lifejacket saying that we can use the squares type from our shared utils.

00:37 So let's do the squares is our type for this. That squares type is going to just have just better typing for what the player is. It could be an X or it could be an O or it could be null. So that just helps because if we don't use that, I should say, then React is thinking,

00:56 oh, it's just an array of anything. But no, we want to be more specific. It's an array of squares or it's a squares object, which is an array of players or null. All right, so now we need to derive some state here. So let's get our next value coming from calculate next value with the squares.

01:15 And we're gonna derive the winner and the status. Status is calculate status. And this is complaining because our AI assistant doesn't know what it's doing. You could take a look at this. It's taking the winner, the squares and next value. So winner, squares and next value.

01:35 What's interesting here is that this is derived state that's derived from derived state. Isn't that amazing? I just think that's kind of cool. That's fun. Okay, great. So with all of that information now, we now can use that status. We can stick it right up in here at the top. So now it says next player is X. Hey, that's a good thing.

01:56 And then here are restart. Let's just do that one really quick. That's easy. We're gonna set squares to the default state. So there we go. So restart is ready to go. And now finally, it's the select square. So when a player clicks on a square, we need to determine a couple of things first. First of all, if they're clicking on a square

02:15 when there's already a winner, then we shouldn't do anything, right? That would make sense. Actually, I'm gonna leave that and we'll see what problems that causes here in a second. So we're gonna do that up at the top, but then we're gonna call set squares with the callback form.

02:33 And here we're gonna take our previous squares. And with that then, we're going to make a copy of the squares and update it. We can do this simply with previous squares here. We'll do the whole previous squares with the index being set to the next value. So we could return that.

02:55 And then we're all set with that copy. We can do our new squares right here if we wanna be really, really new squares. If we wanna just be very specific about what's going on, or if we wanna be even less specific, check this out. We could just do this. Wow, look at that.

03:13 And if we wanna be really bad and make people mad, we can just do this. Holy smokes. No, we're not gonna do any of that. We'll just go with return. That works just fine. Okay, so let's save that and let's see what happens here. Click on that. That works. Next player, it's all derived. It's working awesomely. Sweet. And here we go. And now O is going to win.

03:33 Winner is O, hooray. And X is like, nope. So that's why we wanna check for the winner. If there's a winner. Oh, and actually you notice that we overrode that. So if there's a winner and, or there's already a value at that square, then just do nothing. In fact, you could like give them an error,

03:54 like shake your fist at them or something. But yeah, so if there's already a winner or there's already a value at that square, then don't do anything at all. So now I click on this, I click on that. I try to click on that again or click on this again. Nope, not gonna work. And if we end up with a winner, then the game is over and we can't click on any more squares,

04:13 but we can always restart. So let's just review really quick. There was a number of things that we did. So we brought in these utilities for handling with our squares. We created some state for our squares. We derived some states. So we know what the next value should be and who the winner is and the status. Feel free to dive through that stuff if you're interested.

04:33 It's kind of interesting, but it's not really React specific. It's just like do the JavaScript thing. But yeah, then down here, we updated the status. So it would show that status message. And we updated restart. So it would set the squares back to the default state. And then we updated select square so that if there's a winner

04:52 or there's an entry already at that index of squares, then we'll just exit early so they can't do anything. And then we'll say set squares, grab the previous squares and make our own copy that has the next value at the index. And that makes our simple tic-tac-toe game.

05:10 It's pretty legit.