All right, let's keep pushing forward. I have a few things I want to do in this episode. First up, I can submit dog, or man, or kid, but notice on the third guess, yes, it's incorrect, but there's also no feedback that, hey, the game is over, you lose. So why don't we have a check for that? Okay, let's scroll on down, and when we submit our guess, let's go over this. We check to see, are you ready to submit a guess? If not, silently return. Otherwise, if you got the word correct, then alert you win, but then if it's not correct, we just alert nope. So it sounds like we may need an additional else if, so let's give that a reformat. What's our next check? What if the game is over, effectively? So else if the guess is allowed, which is three in this case, equals the current row index, but we need to adjust for it being zero based, so plus one. So if that's the case, you've reached your final turn, and we could

allowed, which is three in this case, equals the current row index, but we need to adjust for it being zero based, so plus one. So if that's the case, you've reached your final turn, and we could say game over, you lose. Okay, let's give that one a shot. Dog, nope. Man, nope. Kid, game over, you lose. Okay, so now we have a hook of sorts to let the user know when the game is officially over. And then if we want to, we can even track the state of the game as a property, so something like this. We could say the state, almost like a state machine, and maybe the options are like pending would be if you haven't begun the game, active if you're working through it, and then complete if the game is over or finished. So maybe by default, actually, let's keep it simple. By default, it's active, but you can change it to complete, and then you can use that value to conditionally display bits of information or style the page or render a certain component and

By default, it's active, but you can change it to complete, and then you can use that value to conditionally display bits of information or style the page or render a certain component and not another component. We now have a hook to track where we are or where the user is in the game. Okay, so at this point, we would say this.state is complete. All right, next up, let's stop showing an alert. Instead, maybe we can store an output message for the user, something like this. message is empty by default, but down here, instead of an alert, I could set it to this.message. Okay, this.message equals game over, you lose. And then finally, this.message equals incorrect. Okay, now we can return to our template and conditionally display it. And then I want to put it here, but that's going to mess up my grid. So with that in mind, why don't we wrap this whole thing within a div or a main tag, give it a reformat. And then maybe

put it here, but that's going to mess up my grid. So with that in mind, why don't we wrap this whole thing within a div or a <main> tag, give it a reformat. And then maybe I'll have to move my component up there. Like that. Yeah, so now we have our grid here with the grid styling. But below it, I can have our feedback. And I can say x.text equals message. Okay, let's give that a shot. Dog, enter. And there we go. Now we have some feedback. Okay, let's just style it real quick. Here, maybe fontSize is 2rem. Too much. 1.5. Yep. Maybe center it. Hmm, that's not right. Maybe give it a display of block. There we go. Maybe a little margin on the top. And yeah, maybe a little bit more. And bring the fontSize down just a little bit. Okay. Again, we can style this more later, but just to get it working. So I will copy that, bring it back, let's go into app.css. And we'll add it down here at the bottom.

bit. Okay. Again, we can style this more later, but just to get it working. So I will copy that, bring it back, let's go into app.css. And we'll add it down here at the bottom. Cool. So let's see if it works. Dog, incorrect. Kid. Now notice as I'm typing here, we might want to pick up on that keyDown and erase the output. Also wrong. And then finally, man, game over, you lose. All right, cool. We're making a little progress. So yeah, let's do that thing where if we have a message here, and I type a new word, this is confusing, right? I have a key, haven't submitted it yet. But kid is a word, yet I'm still seeing this output here. So maybe what I could do is as part of, I'm sorry, let's go into game. As part of our keyPress, maybe we, or maybe as part of the fillTile, yeah, we could do it either, either place, we clear out the message. I don't love putting that there. So maybe, actually, you know what, let's bring it up