#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: Structuring our Free Monkey (hangman) app

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Welcome back to the 100 Days of Code
0:03 Day three of the React four day lesson.
0:06 In the coming seven videos, we're going to build a complete
0:09 Hangman App from scratch using React.
0:12 And, it's inspired by a Java game I made a long time ago
0:17 called Free Monkey, which is a variant of Hangman
0:21 where instead of hanging, the monkey gets imprisoned.
0:24 And, the goal is to, of course, guess the movie
0:28 and set the monkey free.
0:30 But, if after five attempts, you didn't guess it
0:34 the monkey gets imprisoned
0:35 and we use different images to be shown
0:38 in the view as the state changes.
0:42 So, as last time, we're going to use to create-react-app
0:45 bootstrap script so we get everything ready.
0:48 So, head over to my terminal into the demo folder.
0:53 npx create-react-app freemonkey
1:04 Of course, their going to pull in the dependencies again
1:06 because every app we create with this script is independent.
1:12 Great. Cd to freemonkey.
1:19 Open a new terminal, where I start the app.
1:26 Again, the first time, this takes a little bit.
1:31 Awesome.
1:32 So, as last time, we can just start writing code in app.ks.
1:38 But, I need a few things more in this case.
1:41 I prepared a list of movies
1:43 and a function to randomly get a movie
1:46 which serves as the word to guess.
1:49 So, here's some starter code, which I put in data.js.
1:55 So, here's the list of movies.
1:58 And, at the end, I got a function called getRandomMovie
2:03 to get a random movie.
2:06 Oops, this needs to go in sort, of course.
2:11 And, in app.js, we can import this module.
2:15 I'm going to skip the logo and import.
2:20 getRandomMovie from data.js.
2:32 And I will soon bounce something to the console
2:35 to confirm that this works.
2:37 The other thing I provided upfront
2:39 is some customized styling
2:41 which I'm going to write into index.css.
2:46 And I'm going to import that here.
2:51 We already have body in code and I added some styles
2:56 which we will see later.
3:02 Also, right at the box, I define some constants.
3:06 So, I got a game title, Free Monkey React
3:10 long and lost messages
3:12 the alphabet, which will serve
3:14 as we make the letter buttons
3:16 a place holder, which we will use to hide the letters
3:20 of the movie to guess
3:22 the allowed number of guesses, which is five.
3:25 This seems a bit like a lambda in Python
3:27 So, there's actually an arrow function.
3:30 It gets a number and it returns Javascript's
3:33 equivalent of an f-string.
3:35 So, backticks and the variable is embedded.
3:37 And, this way, we can, later in the script
3:40 just call it like MONKEY_IMG with a number
3:45 and that yields the different images.
3:47 So, to show you that
3:50 depending the attempt
3:53 the images, they'll change
3:54 and I just have them stored on my server.
4:03 Et cetera. Up until five.
4:07 And if the movie is actually
4:08 guessed within the number of allowed attempts
4:11 which is five, we get this image.
4:15 We can just give a number or string
4:17 and it displays the right image and we will see that later.
4:21 So, these are some constants we will use
4:23 throughout this lesson.
4:25 Let's verify if the getRandomMovie works.
4:29 So, I'm going to delete this Bootstrap code
4:32 and just make a h1 header
4:37 and call the getRandomMovie function.
4:41 I hit save. And this works.
4:47 Every time I refresh, it shows me another movie.
4:52 Now, let's do a bit of planning
4:54 what's required to make this game work.
4:57 I'm going to set up some To Do's.
5:01 To Do one is to define a constructor
5:06 and a component did mount lifecycle building method.
5:11 Step two is to define
5:15 a method to reset a game
5:17 because whenever we hit a win or loss
5:20 we need to go back to the initial state
5:23 get a new movie, and reset the number of attempts
5:27 and go back to the initial Free Monkey image.
5:31 We also want to render the state variables at this point.
5:41 Next, is the creation of a keyboard with letter buttons.
5:47 So, each time a user clicks one of the letters
5:50 it should see if it's part of the movie
5:53 and update the mask, mask being the underscores.
6:02 That will require some helpers.
6:04 So, we need to match the char and the word
6:07 or chars and update the state.
6:16 We will also style the buttons.
6:18 So, if the letter clicked or guessed
6:21 was part of the word, we color the button green.
6:24 And, if it was not, we color it red.
6:31 Finally, upon every guess
6:34 we need to see if the game ends
6:36 and it can be a win or a loss.
6:38 We need win and loss helpers
6:42 and check state.
6:49 And, that actually concludes the game.
6:51 Six steps.
6:52 It was quite some code to write.
6:55 So, in the next video, let's dive straight into
6:57 the first To Do.