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