5.1 Adding the Losing Scenario
It's an unfortunate reality, but in every game there is a winner and a loser. It's just a part of life. In this lesson, we are going to explore the losing scenario. Each game is configured with a maximum number of moves you are allowed to try to guess a word. If you use all your guesses without solving the puzzle, the game is over.
1.Introduction2 lessons, 03:04
2.Getting Started3 lessons, 15:16
3.Building React Components4 lessons, 24:57
4.Working With State6 lessons, 40:38
5.Winning and Losing3 lessons, 17:14
6.Refactoring and Final Changes3 lessons, 16:55
7.Conclusion1 lesson, 01:40
5.1 Adding the Losing Scenario
Now we want to add a little bit of logic. So we're gonna start to put some of that into our game board. So here we are in our game board components. And we have our state setup now, and we're going to take some of that and actually start to put it in our UI. So let's start by adding in the number of remaining misses and the status into our game board UI. So in my render function right above where I'm doing all the letter work I'm going to simply generate a couple constant strings here. So I'm gonna say const remaining and that's gonna be set equal to remaining misses, and this is simply gonna be displaying that counter. And I can add to this or concatenate this.state.remainingMisses, so that will work for that and I'll say const the status is going to be equal to we'll say here game status and we will simply set that equal to this.state.status. And so now that we have those, we can go ahead and stick those into our UI. So I'm not gonna be too fussy about where we're putting that for now, but I think probably our best bet is going to be sticking that above our letters. So maybe for now I'll simply, maybe I'll just add in a couple of paragraph tags and I'll just go ahead and put in here remaining and I will put in another one for the status that should be fine. So let's go ahead and save that. And then we'll pop over here to our UI. And as we can see now we have remaining misses 10, and we have game status playing. So we're coming along a little bit. So let's add in a little bit of logic that's gonna take care of the case where I'm clicking on letters. And I clicked the wrong one and I'm gonna take away from the remaining misses counter. So let's go back over to our code. Let's come into our check letter function. We don't need this alert anymore, we can finally get rid of that. And let's start to add in a little bit of functionality. So what we're gonna wanna do first is we're gonna wanna check to see if the button that you've clicked is in the word. So let's come in here and say if this.state.targeWord we've done something similar to this before. We can say that to lowercase, that index of so we can look inside there and say does the letter that was clicked .tolowercase. Does it actually exist? And if it doesn't exist then this is going to return a -1 cuz this is gonna give me the index. So if I click on a button that doesn't exist, then what I wanna do is I want to change that remaining misses. So I'm gonna say const remainingMisses is going to be equal to this.state.remainingMisses -1. And then we're going to have to augment our status as well. So I'm gonna say constant status is gonna be equal to, so if our remaining misses after we deduct from there is equal to zero, then we're gonna say the status is now Game Over, but if it's not, then we're just going to leave it as playing. That'll be fine. So, now we've done a little bit of changing there, but now, we haven't actually augmented the state at all. Remember, we're just doing some calculations here and then if I want that to actually remain there, then I need to actually use the set state function. So I'm gonna say this.setstate, and I'm going to pass in this object. And remember I don't have to pass in the entire thing, all I have to do is passing the ones that I want to change. So I'm gonna say remainingMisses as well as status, just like that. Okay, so let's go ahead and save those changes. And remember, every time I make a change and I call the set state function, it's going to call my render function again. And now that I've made changes to remaining misses as well as status, you should see the changes show up down in my render function. So let's go back to Chrome and I can come in here and I can say I wanna click D. Well it turned red and I got a nine. So it did take away from that now I have W, A, B, C, F, E, G H. Now if I click on something that is in there like T as you see it turns green and it did not deduct. But then if I hit V, I hit zero and now I have game over but we're not doing anything to stop you from continuing to do this which is a problem because now Remaining Misses is going into the negatives and we obviously don't want that to happen. So one of the simplest things that we can do is if you get to a point where Remaining Misses 0, we can just hide this board or hide the buttons and just say well games over you can't play anymore. So let's go ahead and put that in and it's actually quite simple. We're going to continue to use the state that we've been working with. And I'm just gonna do a little bit of augmentation here down in the render function. So let me move this over a little bit. So, as you can see, I'm always showing the ButtonPad right now. Well, there's a nice little trick that you can use to kind of only show that if you have a certain condition that is met. So what I'm gonna do is I'm going to actually wrap this entire thing in curly brackets. So I want to add this whole thing in as kind of an expression which if I were to leave it this, it will continue to work. But I can also put some conditional logic in here that says if a certain things going on, then show this, if not don't show it. So the only time that I want to show this is if the status of the game is playing. So if I'm in a playing state, I wanna show this, if not I don't want to. So the actually easiest way to do that is to say, this.state.status equal to playing and then do the double and sign. So this is basically doing an AND operation. So this is always going to be true this expression right here. But if this fails for any reason, then we won't actually execute this, we will actually get out of this because this and is going to fail the first time it encounters a false statement. And if this is anything but playing, then it's going to wind up being false, so let me just show you that in action. So I'll save that, come back over to our game, and we'll just start hitting these letters. And you should see once we get down to 0, now my game board disappears. And now I can't click any buttons and the game is truly over. You see the status is game over. Not too shabby. So we're really getting close to where we want to be, the only problem is I don't wanna see these letters. I want those to be hidden until we actually find or click the right one and then we'll show them to the UI. So that's one of the next things that we wanna start working on.