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