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