#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: Setting the initial game state
Login or
purchase this course
to watch this video and the rest of the course contents.
0:02
The next to do is to reset the game. We already made a stub so let's code it up now. First, we get a new movie. With the helper function we imported.
0:18
We must log it to the console to see what it is while we're developing. Then we're going to update the state, and again
0:27
we should always do that with a setState. builtin method, because it not only updates the state it also re-renders the component
0:36
which is often what you want. Then give it an object We're going to set various attributes. The header will be in the game title
0:48
and you might think, "Well, the title will be already set" and that's true, but if there's a win or loss situation the header will have changed
0:57
so we have to reset it back to the default Free Monkey React title. So we're using a header, both a header as well as flash or status message.
1:10
The movie will be a random movie we picked above but broken into an array. Now I'm going to define my mask
1:23
which will be the same array of movie characters but of course stripped down to place holders and that is what we actually will render to the page
1:35
so the user cannot see the movie. And then we're going to use a regular expression and the only challenge is there are sometimes dots
1:48
or numbers, apostrophes and those you don't want to use, or to guess. So I'm only going to replace the alphabet letters any irrregular expression.
2:00
You can define those as A-Z upper case and a-z lower case. We're going to match those across the whole string and replace them by the placeholder
2:13
which we defined as underscore. So that gets all the alphabet letters in the string replaced with placeholder
2:23
and then we want to dump that into an array and we do the same as the previous line to split it by an empty string. Now see there's an action in a bit.
2:36
Then I have a button bridge it and this will use a helper we define in the next video. We just create buttons. Then we have a bad guesses counter.
2:52
These are the variables we're going to work with throughout the game and when we start a new game we want those to have sensible defaults.
3:01
Again, we guess a new movie, we split that in an array we mask all the alphabet letters to placeholders split that in an array. This is private.
3:12
This will be visible to the user and this will be updated as the user guesses letters. There will be a keyboard check hold button widget
3:25
and there will be a counter of the number of bad guesses. Now we can update the rendering to use those staid variables.
3:34
So the title will be this date header the monkey image won't be hard because it's a zero but to the number of guesses
3:48
so which will be equally be zero right now. The mask will be visible here and the keyboard will be visible here.
4:12
And of course, UI complaints not a create button it's not a function because we have to still define it and that's what we're going to do next.
4:22
Then we still make sure that there's not any other syntax error by just creating a stop. Again, I am using an arrow function
4:33
so we don't have to bind it in the constructor. Save this, and react is happy again and now we're seeing the mask
4:48
and if I go to inspect into the console I see that "Cape Fear" matches the mask. Refresh. Contact. Matches the mask. Teases. That looks fine.
5:02
"Tootsie" fine, "Peeping Tom" one two three three three. That looks correct. In the next video we're going to have the button widget
5:15
coded up, and appearing right here.