4.6 Adding State to the Game Board
To this point, we have mostly been working with the child components of the app. Now it's time to point our attention the hub of our game, the game board. In this lesson, we will add some of the basic pieces to our
GameBoard state object.
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
4.6 Adding State to the Game Board
Now it's time to revisit our GameBoard a little bit so we can add some additional functionality in there. But before we can do that we need to kind of set up the state a little bit. We need to know things like what's the target word that we're trying to add into this game so that the board knows when to display certain letters when you click a button. When you do this quick letter stuff, how can we keep track of the number and guesses you make, and how many tries do you have remaining, what's the status, when did you win, did you lose, we have a lot of that logic to add in. And it's really not that hard but we're going to take it in a couple different stages. The first thing we're gonna do is we're gonna set up the state, we're gonna pass in some properties, initialize some state. And then after that we're gonna get in to actually doing the logic of the application. So let's start with adding in some of the state, so we already set this up, but we're passing in some properties. So before we finish passing things, and let's go ahead and start to set up a couple of things. So one of the first things that I'm gonna need to know when I'm doing this is I need to know what the actual target word is, so that I can do some work with that target word. So I'm gonna have to bring that in, so I'm gonna have a constant here I'm going to say this is gonna be equal to the target word. And this is gonna be equal to that properties that target word that we're gonna pass in. So from there, I want to know the letters that are in that word, I need to split them up so I can do a little bit of additional logic with those. So we'll simply say target letters is gonna be equal to the target word.split. And we're gonna split on that empty string again so that we get all of the individual letters. And then I need to do a little bit more mapping with each of the letters that are in the word and I need to know, what the letter is, I need to know if I should be showing it or not. So I'm gonna need kind of another mapping type object, so let's go ahead and create a target letter map. And we're just going to initialize that to empty right now and then we'll go ahead and start to work with that right now. So what we're gonna wanna do is we're gonna wanna go through the target letters that are in our word and then we're gonna once again do a forEach here. And we're gonna say forEach Letter as well as index. Remember, we're gonna need that for iterating over things and then for each of those letters that are in there, I want to go into my target letter map and then I want to set at an index. So I would need to know what index each of these letters is at and then for each of those indexes, I'm going to say at that index is a letter, and what's that letter? Well, it's the letter that I'm going or that I'm iterating over in this loop and then I also want to know whether or not I'm going to show that letter or not. And so Initially, we're gonna set that equal to false and then we're gonna go ahead and use that in just a little bit once we kind of initialize this whole thing and really get into some of the logics. So now we have this concept of a target letter map, which is good. Now what I'm also gonna need to do now that I have some of this information is I'm going to need to initialize state for this particular component because I haven't done that. So I'm gonna say this that state is equal to and you've seen this before, this was the not the first time we've done this. So let's go ahead and hang on to that target word and we're going to initialize that with target word for this constant up here. Then we're also going to hang on to those target letters and we're going to initialize that with our target letter map, I don't really need just the individual letters I need all of this information. So we're gonna call that target letters and then I'm going to put in here another one called remaining misses. So we want to introduce the concept of we can initialize a game with a certain number of tries. And every time you try and guess a letter that's incorrect that should deduct from this counter and that's how we're gonna know whether you win or lose. So if you guess all of the letters in the word before your remaining misses gets down to zero you win, or if your remaining misses get down to zero first then you lose. So it's kind of an interesting little concept to put in here, so not a big deal. So what we're gonna need though is we're gonna need a property passed in but when those properties get passed in, they really just get passed in as strings. So we're going to need to do a parse int and we're gonna make a few assumptions here that we're passing in proper data. But you can absolutely put in some logic in here to make sure that's the value that's being passed in is actually an integer then go ahead and assign it or give it a default value or something like that. And then we're also gonna give this GameBoard a status and the status is just gonna be a string, so right now it's gonna be initialized to playing. So we are playing the game, and then when you're done, maybe it's game over, if you lose, and if you, if you win it's just maybe you win or winning or something like that. So we'll kinda get to that in just a few moments. So I really think that this is going to be good for the GameBoard, but as you can see here we're needing to pass in a couple of things. We're needing to pass in our target word and we need to pass in the misses, so we're gonna come down here to Hangman. And you see that for our target word, we're already passing that in, so I'm not too worried about that. But we're also gonna need to pass in misses, so we're gonna pass and misses and we'll just say we're going to start that to be 10 or something like that. So you can obviously set that to be anything you want but that's gonna be the initial number of opportunities that you get to actually attempt this puzzle. So now that we have this state setup, now we're gonna start to argument our URL a little bit and begin to implement some of this logic for our game.