#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: Check win/loss scenarios, adding a reset game button
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
We are almost done with the game. The only thing we need to now do is to write our callback, check win or loss because
0:09
every guess we can hit the end of the game which could be a win or loss. So we're going to make another method. checkWinOrLoss, arrow function.
0:22
Don't need to bind it in the constructor. And I'm going to do two checks. I'm going to check if won, if lost. So if this game won, and that's
0:38
a helper we're going to write in a bit. I'm going to have a second helper if game over. Let's write those helpers first.
0:58
And I can use arrow functions to have a nice view of them online, no arg is needed and when is a game won, well if the mask does not have any other
1:08
score or placeholder, that means all the letters have been guessed so we can do an easy check to see if the mask has any placeholders left.
1:18
So we can say if this state mask does not include, so this is the negation of include, so does not include placeholders, and that's actually a return
1:32
because our functions, when you write them on the same line, return a value. Then when do we have the game over scenario?
1:42
Well we have our bad guesses counter. So if that's greater or equal than the allowed guesses, then you're game over and we had set that to five, so
1:56
if the bad guesses counter becomes equal allowed guesses then it's game over. So if game won, what do we want to do?
2:07
Of course we want to update the state. And what do we want the app to do? Well, the header first of all, this guy
2:18
should say something else, and now we need to find a constant with won message. Congrats, you freed the monkey.
2:28
So that will show up here, why will it show up? Because in render, this state of error is displayed. And as we said before, when we update state
2:43
it not only sets the attributes based on state, it also re-renders. The bad guesses is not only a counter
2:53
but it also serves as a sub-string of the image to show. As we said before, the winning image has this on the wins sub-string.
3:05
So by overwriting the bad guesses sub-string to win state, the winning image will show. Then the button widget I'm going to override
3:24
to show a new game button, and that's to help what I'm going to define next. New game button and I give it a string, play again.
3:34
So the keyboard's going to disappear temporarily and show a button called play again which when clicked resets the game
3:42
to its initial state, so let's define a helper. Receives a button text because we're going to have different button text
3:54
depending if the user lost or won. And we're going to return a button. We're going to un-click handler.
4:21
And when that button is clicked it's going to call this reset game. And as we saw before, reset game is then going to guess a new movie
4:31
then set all the variables to its initial state basically resetting the game just like if I would refresh the page.
4:42
And that's it, when the game is won. Now for game over it's similar so I'm going to copy the set state method but instead of a won message we're
4:54
going to show the lost message. Ouch, Monkey's locked away. Here we have to also update the mask because when a user loses, only
5:05
part of the movie will be shown in the mask diff and at this point we want to reveal to the user what the winning word was.
5:15
So here we're going to display the private movie array. For bad guesses we don't have to do anything here because the final imprisoned monkey
5:33
image is already showing, and the button is the same, we're going to show the new game button, but instead of play again as the user didn't win
5:45
I'm going to make that try again. Maybe that will trigger the user to keep playing. I don't know, but it's nice to set a different text on that button.
6:05
Let's put some returns in to prevent a fall through from game won to game over. Of course you could also write if else if.
6:15
And that should be all, let's see how the application now behaves. First let's do a loss, so I'm pretty bad at guessing.
6:26
Wow, I hit five and it's game over. The text updated to ouch, monkey's locked away. The movie has been revealed because it's nice to show a losing game
6:39
what the actual movie was, and there's a new button which when clicked should reset the game, awesome. Monty Python, that's funny.
6:55
So I'm just randomly clicking. This is a pretty long one to demo in so I'm going to fail again. This one seems easier. Let's make a mistake.
7:14
R. And an S, and that's the winning image which had this sub-string, and we have the same button to reset the game
7:31
but now it says play again, and of course the header now says congrats, you freed the monkey. That's nice that we have a different picture.
7:39
A complete game using React and it's not that much of code, actually. The whole app.js is just 127 lines and nearly 20 of that are constants and setup.
7:53
Of course all of this code is in the demo Free Monkey folder if you want to play with it. This wraps up the lessons of today and tomorrow
8:03
you're going to practice what you learned.