Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:22Length:2 hours
Practical react fundamentals 400x277
  • Overview
  • Transcript

5.2 Showing and Hiding Letters

Now you can actually lose the Hangman game. But the problem is that we always see the target word's letters. This doesn't make for a very fun or challenging game. It's time to start hiding these letters and only showing them when the user guesses a correct letter from the ButtonPad component.

5.2 Showing and Hiding Letters

In this lesson we want to accomplish 2 things. We want to hide all of the letters in the target word when the game first initializes when we first start up, so you can't see anything. And then when the user clicks on letters that do exist within the target word we want to display them. So there's 2 things we're gonna have to change, we're gonna have to change our letter component a little bit. And then we're gonna change some of the GameBoard functionality or continue to change some of the GameBoard functionality. So the first thing that we wanna do is we wanna come into our letter component, and as you can see right now, we're always just showing the value here and that's really not what we want. We're gonna have to pass in a little bit of additional data and we're gonna have that be a flag that says this was found or that the user clicked under something like that. And so we'll simply say this.props.found which is gonna be a Boolean value and if it's true then we want to show the props value. But if it's not that we wanna show an empty string so that just the whole thing is empty so that we don't see it. So that if I go ahead and save that, when I pop over here you see that everything is gone, I don't see it, but if I click on a value that does show up in that word, which I know T does, it's not showing here. So that's the logic that we need to add in to our GameBoard, sso let's come down in here to our check letter again. Now, in order to accomplish this we need to do a couple of things. The first thing that we're gonna need to do is we're going to need to know that if we run into this scenario where we click on a letter that doesn't exist in the target word we need to start processing at this point. So I'm gonna add in a return statement here that says stop checking, I'm not doing anymore, because I know this was a bad letter. So now what we need to do after that, outside of this block, which means they clicked on a letter that did exist, I need to update this letter map that I'm using. And then I need to when I am rendering those letters down here in my render function right here, I need to pass in that found value. So let's go ahead and add in some of this logic now. So let's go ahead and start by getting our letter map that we have in our states. We're going to say this.state.targetletters, so that's good that's our map. Now what I want to do is I want to iterate through this thing, any way that you would like. And I want to check to see if the letter that we are clicking on exists in that word, and if it does, I wanna set this show value to true because right now by default, it's false. So what we're gonna do once again, you can iterate through this any way that you want, I'm gonna go ahead and do a straight up for loop this time. So we'll say let index = 0, Index < this.state.targetword.link, and then we're going to say index ++. So we're doing old school for loops today in this particular example, but once again, you can do it anyway that you would like. So, we'll say const: letterInword, so we'll say this.state.targetword index. So this is the that particular letter that we are going to try to see if that's what they're guessing. And then we'll go ahead and say if letter in word that once again to lowercase is = letter.tolowercase, if those things are equal then we want to go into our letter map at that particular index that we have been working with right here in our for loop. And we want to set that show value = true, so that's pretty good. So now we're doing those updates that is gonna be useful but I'm only updating it here locally, I'm not updating it in that state. So after we've executed all of this in our for loop will simply say this.setstate and then what we're updating in this particular case is our target letters. So the target letters is now going to be equal to that newly updated letter map and that's all we really need for the time being, we'll just leave it at that. So let's go ahead and save this. So now every time the user clicks on a button, it's going to go through here and see if that actual letter exists within our target word, and if it does, it's going to set its show value equal to true. So now we need to take into account this letter mapping in the show values when we're actually rendering our letters. What we're gonna do is come down here and we will say that found which is the name of the key that we are passing in, that we're looking for, for that property for that letter. So we'll say found is equal to a value that we'll call show, but we need to calculate that as we are going through this loop. So, first thing that we are gonna do, once we are going through here is we want to get the particular letter map that we are using for the letter that we are iterating over at this particular point. So we'll simply say, const letter map and we'll set that equal to this.stat.this is the target letters @index and then we'll say constshow equal to letter map.show. So now we have this show value, so every time we iterate over all of these target words, we will double check that target letter to see if that letter map shows that the show value is true or not. And if it is, we'll go ahead and show that in our UI. So now we'll save that, let's pop back over here to Chrome. So if we've done this correctly If I click on a letter that doesn't exist, you see our remaining misses decrease. And if I hit the value that does exist, you're gonna see here that it turns greens, the remaining misses stays the same, and we start to show those letters. So I could do a U, and I can do an S and I can do a P and I can do an L. So that's pretty cool, we've gotten to a point now where I can actually win the game and I can lose the game but the problem here is that once I win the game, it looks like I'm still playing. And I don't want that to happen, so let's go ahead and add on one additional check in here to this show right here. So we're not just going to key this off of what shows up in this letter map. If I get into a state where I am actually done because I've won the game, I wanna change the status, as well. And that's going to allow me to hide the keypad and I can also put in a custom status on the UI and that's what we're gonna handle in the next lesson.

Back to the top