1
00:00:00,150 --> 00:00:01,040
Welcome back.

2
00:00:01,350 --> 00:00:07,320
In this lesson, we are going to be wrapping up our game play, we're going to need to apply some logic.

3
00:00:07,710 --> 00:00:13,170
So we saw in the last lesson, we were drawing out a visual card and we still have the buttons higher

4
00:00:13,170 --> 00:00:15,870
and lower and they don't actually do anything quite yet.

5
00:00:16,140 --> 00:00:20,640
So that's what we need to take care of in this lesson, make these buttons functional and we already

6
00:00:20,640 --> 00:00:26,580
have a function for that that's being rendered out and it's being invoked whenever we're clicking the

7
00:00:26,580 --> 00:00:27,060
buttons.

8
00:00:27,300 --> 00:00:29,570
So we're checking to see for a start button.

9
00:00:29,760 --> 00:00:34,830
And we also need to check to see what other buttons can be pressed here.

10
00:00:36,400 --> 00:00:42,940
And we know that once one of these buttons has been clicked, that means that it's being triggered and

11
00:00:42,940 --> 00:00:43,660
it's rendered out.

12
00:00:43,870 --> 00:00:50,280
So I'm adding in a return in this particular condition so that we break out of that function.

13
00:00:50,620 --> 00:00:56,500
And next, we know that it's one of the higher or lower that the player is playing through.

14
00:00:56,800 --> 00:01:00,610
So we're taking whatever the value of the current my card is.

15
00:01:00,880 --> 00:01:03,460
Remember, over here we're drawing a brand new card.

16
00:01:03,640 --> 00:01:05,260
So this is the current card.

17
00:01:05,410 --> 00:01:10,560
And we also have a value of the existing card that's on display here.

18
00:01:10,840 --> 00:01:14,140
So the my card is the one that hasn't been shown to the player yet.

19
00:01:14,240 --> 00:01:17,180
And this is the one that we're going to be calculating out.

20
00:01:17,350 --> 00:01:18,280
We have a value.

21
00:01:18,280 --> 00:01:20,410
We have an object there that's sitting there.

22
00:01:20,560 --> 00:01:23,970
And if we want to, we could actually take a look at that in the console.

23
00:01:24,310 --> 00:01:29,140
So let's see what that looks like in the console, see what my card looks like.

24
00:01:30,340 --> 00:01:34,210
And when we refresh it, we click start, we hit higher.

25
00:01:34,360 --> 00:01:36,080
We get our next card.

26
00:01:36,100 --> 00:01:37,960
So this is the next card.

27
00:01:37,960 --> 00:01:41,410
That's there is diamonds, four of diamonds.

28
00:01:41,740 --> 00:01:44,800
The next card is a nine of hearts and so on.

29
00:01:44,890 --> 00:01:46,540
So we need to display these.

30
00:01:46,660 --> 00:01:54,520
And we also need to make some calculations to check to see if the current value of this card is higher

31
00:01:54,520 --> 00:01:55,240
or lower.

32
00:01:55,360 --> 00:01:57,100
And we need to take some type of action.

33
00:01:57,380 --> 00:02:02,630
And one of the things that we can need to account for is to see if it's actually a draw.

34
00:02:02,860 --> 00:02:06,430
So checking to see if both of those values are the same.

35
00:02:06,580 --> 00:02:12,990
So taking my card value, because remember, this is an object so we can access that value there.

36
00:02:13,420 --> 00:02:19,450
We're going to check to see if it's equivalent to the current card value and if it is and I don't actually

37
00:02:19,450 --> 00:02:22,090
need two brackets there, so I'm going to get rid of that.

38
00:02:22,630 --> 00:02:28,270
And if it is, then we're going to run this block of code and I'm going to set up one more variable

39
00:02:28,270 --> 00:02:32,510
here to run as our default variable, and I'll set that as a boolean.

40
00:02:32,890 --> 00:02:35,890
So this will be whether the player won or not.

41
00:02:36,160 --> 00:02:41,810
And if it's false, then our message for the win can be draw.

42
00:02:42,660 --> 00:02:44,220
So maybe it doesn't have to be a boolean.

43
00:02:44,230 --> 00:02:46,800
I just going to set it up as a value that we can hold.

44
00:02:47,260 --> 00:02:56,690
So the win value is a draw and we'll put a message to the player that the inner HTML that it's a draw.

45
00:02:56,800 --> 00:03:00,900
So that means that if both cards have the same value, it's a draw.

46
00:03:01,060 --> 00:03:02,460
We don't need to do anything else.

47
00:03:02,800 --> 00:03:07,490
If it's not a draw, then this is where we need to check to see who won.

48
00:03:07,660 --> 00:03:08,830
So somebody won here.

49
00:03:08,890 --> 00:03:15,820
If it's not a draw, we can take our another condition and take the value of the card.

50
00:03:16,810 --> 00:03:24,100
So if the value of temp, so the button clicked is equal to higher and that's uppercase.

51
00:03:24,100 --> 00:03:33,430
So remember, this is case sensitive, so make sure that it is upper case and the value of my card.

52
00:03:33,460 --> 00:03:34,630
So it's going to get kind of long.

53
00:03:34,630 --> 00:03:35,710
I'll open it up bigger.

54
00:03:36,650 --> 00:03:42,050
So got a little bit more real estate to play with, so the card value, so this is the same value here

55
00:03:42,050 --> 00:03:43,550
of the new upcoming card.

56
00:03:44,000 --> 00:03:49,160
So remember, this is the one that the player can't currently see and the current card value is the

57
00:03:49,160 --> 00:03:50,490
one that the player can see.

58
00:03:50,930 --> 00:03:55,970
So we're checking to see if this is greater than that value.

59
00:03:56,180 --> 00:03:57,700
Then we know that we have a win.

60
00:03:58,250 --> 00:04:03,110
We also have another win condition, and that's if temp.

61
00:04:04,290 --> 00:04:08,100
Is equal to lower.

62
00:04:10,000 --> 00:04:10,930
And.

63
00:04:12,060 --> 00:04:17,460
And then this is our other condition, and we're just checking to see if it's matching, so the value

64
00:04:17,670 --> 00:04:20,820
here is less than the current card value.

65
00:04:21,080 --> 00:04:23,850
And that also means that the player is a winner.

66
00:04:25,680 --> 00:04:27,840
So we can close off that condition.

67
00:04:28,320 --> 00:04:30,840
And we've got the other condition over here.

68
00:04:31,170 --> 00:04:33,000
So I'm going to just wrap that one.

69
00:04:35,470 --> 00:04:43,450
And if this is all true, then the player is a winner, so set went to equal truth, so turn that into

70
00:04:43,450 --> 00:04:44,530
a boolean value.

71
00:04:45,680 --> 00:04:52,730
And with JavaScript, there's dynamic data types, so even though over here we've got a string value

72
00:04:52,760 --> 00:04:56,780
here, we've got a boolean value and JavaScript can adjust with that.

73
00:04:58,510 --> 00:05:04,990
So now we've got a win of true otherwise and over here, I'm going to set it to false by default.

74
00:05:05,500 --> 00:05:08,740
So if it's not as if it's not a draw.

75
00:05:10,000 --> 00:05:18,190
And if it is a win, then we can act on those conditions, so that means that the win here is a true

76
00:05:18,340 --> 00:05:19,690
win is true.

77
00:05:19,840 --> 00:05:28,630
We're going to score value incremented by one, take our score output and update the inner HTML to be

78
00:05:28,630 --> 00:05:30,610
whatever the score value is.

79
00:05:30,730 --> 00:05:32,860
So we're updating it visually for the user.

80
00:05:33,190 --> 00:05:41,860
And we also want to output to the player that message and enter HTML of that message area is and the

81
00:05:41,860 --> 00:05:44,500
next one, whatever the value of the next one is.

82
00:05:44,920 --> 00:05:49,490
And if the player didn't win, that means that they lost.

83
00:05:49,510 --> 00:05:56,560
So the message of the inner HTML and it's game over, there's only one chance here and if they got it

84
00:05:56,560 --> 00:06:03,310
wrong then it's game over and we can initiate that toggle buttons function that's going to toggle that

85
00:06:03,310 --> 00:06:07,240
start button again so the player can start playing one more time.

86
00:06:07,390 --> 00:06:09,070
And one more thing we need to do.

87
00:06:09,100 --> 00:06:14,380
We need to make the card so that, again, it's visible to the player because remember, while it's

88
00:06:14,380 --> 00:06:19,510
sitting in here and while we're using it within these conditions, we have no idea what the card looks

89
00:06:19,510 --> 00:06:19,720
like.

90
00:06:19,930 --> 00:06:25,450
But whether it's a draw, whether it's a win, whether it's a loss, you need to show the card to the

91
00:06:25,450 --> 00:06:27,190
player so that they know what happened.

92
00:06:27,400 --> 00:06:28,490
So let's try that out.

93
00:06:28,580 --> 00:06:31,930
Let's make it bigger and we'll refresh it and start the game.

94
00:06:31,940 --> 00:06:33,730
So we've got a king of hearts.

95
00:06:33,940 --> 00:06:34,630
What do you think?

96
00:06:34,630 --> 00:06:35,980
Higher or lower?

97
00:06:36,010 --> 00:06:36,850
Let's try lower.

98
00:06:36,860 --> 00:06:39,000
I think the odds are in our favor in this one.

99
00:06:39,280 --> 00:06:40,810
So next is a three of clubs.

100
00:06:40,820 --> 00:06:44,230
We're putting it there and we're on a streak of one.

101
00:06:44,380 --> 00:06:45,040
What do you think?

102
00:06:45,040 --> 00:06:45,880
Higher or lower?

103
00:06:45,910 --> 00:06:46,810
Let's go higher.

104
00:06:46,960 --> 00:06:48,190
Seven of spades.

105
00:06:48,370 --> 00:06:49,690
Let's go higher again.

106
00:06:49,690 --> 00:06:50,710
King of diamonds.

107
00:06:50,890 --> 00:06:51,790
Let's go lower.

108
00:06:51,910 --> 00:06:53,560
Two of clubs, higher.

109
00:06:53,560 --> 00:06:54,490
Eight of spades.

110
00:06:54,760 --> 00:06:55,600
Higher again.

111
00:06:55,600 --> 00:06:58,210
Queen of hearts, four of spades.

112
00:06:58,900 --> 00:07:00,880
Ace lower, lower.

113
00:07:01,240 --> 00:07:02,590
And that one was a draw.

114
00:07:02,590 --> 00:07:07,390
And then the Jack and three and icsom doing extremely well on this game.

115
00:07:07,750 --> 00:07:14,860
So you can see that we are, it is working properly and as soon as I get one wrong there, I see I've

116
00:07:14,860 --> 00:07:20,650
got my streak of sixteen and once I got the wrong guess then the game was over.

117
00:07:20,830 --> 00:07:28,360
So that was exceptionally lucky game, but it seemed to play very well and now it's up to you to try

118
00:07:28,360 --> 00:07:30,190
it out, experiment with it.

119
00:07:30,370 --> 00:07:34,180
And I'm going to do a quick overview of the code in the upcoming lesson.

120
00:07:34,390 --> 00:07:39,520
And this is the part where you need to play through the game just to make sure that there are no additional

121
00:07:39,520 --> 00:07:42,400
bugs and everything is working as expected.

122
00:07:42,550 --> 00:07:47,920
So I always suggest that you play through it several times and make sure that the game is working as

123
00:07:47,920 --> 00:07:48,610
expected.

124
00:07:49,030 --> 00:07:56,050
So go ahead and add in these final steps for the logic of the game to determine whether the player's

125
00:07:56,050 --> 00:08:00,670
winning or losing and accounting for the next steps for the player.