5.3 Adding the Winning Scenario
It's time to learn how to win the game. In order to win the game, the user needs to correctly guess all the letters in the target word before they run out of attempts. Let's implement this scenario!
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.3 Adding the Winning Scenario
So one of the first things that we want to do is wanna check see if you have won the game and it's all done and the we can hide the button pad at that point and display a status of you won. So this is also going to take place in our check letter function. And we gonna do this after we have done our letter mapping check where we're gonna show the values. So at this point, what we wanna do is we want to go through our target letters, all of our letter mappings and see if everything is equal to true. And if that point if we are showing everything that means you have won the game, and then we can display a different status. Remember, we're only showing that button status or that button pad if our game status is equal to play, so we'll change it to something else like You Win. And then that will hide that automatically, and then we can display that new status. So what we'll do here is we'll get all of the values in our letterMap. So we'll say allValues equal to, we'll say object.values. And we'll go in here and say this.state.targetLetter. We wanna go into those target letter, we wanna get all the values in there. And then we want to use our map function and we'll say we want to get the value, value.show. So now we're going to get basically, a collection or a list of all of the show values. So we're gonna get a bunch of trues, and falses are all falses are all trues or whatever. So what we want to know is we want to know if all of those are true or not. And the way that we're gonna do that we're gonna say const status is gonna be equal to allValues., and we can use the every function. So we can say if every and it's going to go through all end all of them to see if all of the values in there are equal to true. So we can say, we'll call each value in their value and will say, are they all equal to true? So this will give us this status right here. So then we can update our status inside of our state. Now we'll say status and we'll status if it's true then we'll say you win. And if it's not, we'll just leave it as playing, just like that. So we'll save this now. So this is going to kind of change a couple of things. It's going to have the status of the game change when you win to say you win and it will also hide the button pads so that you can't actually click anything anymore. So let's hop back in here, and we'll just go ahead and type this out will say TUT,SPL. And as you can see now we have guessed all other letters. The status has changed to You Win. We still have all our remaining misses. And the button pad has actually disappeared. So we have shown how you can actually win the game now. So now we kind of gotten to the point where you could lose the game, you can win the game. You get to an end state where it's over. We're pretty much done with the game. I do wanna clean things up a little bit and then after that, you're pretty much gonna be done but then I'll give you a couple of little things that you can work on yourself if you wanna take this and start to make it your own and augment the functionality to continue to work on your skills.