1
00:00:02,440 --> 00:00:07,590
So to make sure that the computer can actually finish that game and guess the right number,

2
00:00:07,720 --> 00:00:12,000
we need to check what the computer guessed and then kind of end the game

3
00:00:12,010 --> 00:00:17,590
if it's the number we entered. For that, we can use another React hook and that's the useEffect hook. 

4
00:00:17,590 --> 00:00:25,670
useEffect allows you to run side effects or in general, allows you to run logic after every render cycle

5
00:00:25,810 --> 00:00:31,300
and just as mentioned before, if this whole React hooks thing is relatively new for you, definitely check

6
00:00:31,300 --> 00:00:36,790
out some dedicated React hooks resources or dive into my React Complete Guide Course where I cover hooks

7
00:00:36,850 --> 00:00:42,660
in detail. So what I'll do with useEffect now is I'll call it here

8
00:00:42,770 --> 00:00:49,370
after initializing my state and my refs here and in there, we've has a function, so useEffect takes

9
00:00:49,370 --> 00:00:54,950
a function and this function by default runs after every render cycle for this component. So every time

10
00:00:54,950 --> 00:00:59,750
it has been rendered, this function is executed, after it has been rendered, that's also important,

11
00:00:59,750 --> 00:01:03,150
not before, not simultaneously, after.

12
00:01:03,200 --> 00:01:10,290
Now in there, I want to check if the current guess computer made is equal to the user choice because

13
00:01:10,290 --> 00:01:11,980
that means the game is over.

14
00:01:12,120 --> 00:01:16,830
Now that can't be the case for the first render cycle of course because we exclude the user choice from

15
00:01:16,830 --> 00:01:19,940
the guessable numbers but from the second row on,

16
00:01:19,940 --> 00:01:25,790
so once we clicked lower or greater for the first time, that can happen.

17
00:01:25,860 --> 00:01:29,220
So in there, I then want to kind of fire a

18
00:01:29,220 --> 00:01:35,970
the game is over message and send that to app.js so that we can swap the game screen for a game over

19
00:01:35,970 --> 00:01:36,890
screen.

20
00:01:36,970 --> 00:01:39,000
Now we don't have that screen yet, so let's add it,

21
00:01:39,000 --> 00:01:45,300
let's add a game over screen here in the screens folder and let's create a very simple one for now, we'll

22
00:01:45,300 --> 00:01:47,250
fine tune it later. In there,

23
00:01:47,250 --> 00:01:50,660
I'll simply have a view and a text and a stylesheet,

24
00:01:50,700 --> 00:02:00,760
so what we typically import from React Native and then have the game over screen component in there which

25
00:02:00,760 --> 00:02:04,000
take some props and then return some jsx in the end.

26
00:02:04,000 --> 00:02:12,270
Here we have these styles with Stylesheet.create and then we export the game over screen as a default.

27
00:02:12,370 --> 00:02:17,170
Now in there as I said, I want to keep this simple for now, I'll just have a view in there with a text

28
00:02:17,170 --> 00:02:22,220
of the game is over and we'll output more details there later. For now,

29
00:02:22,230 --> 00:02:28,090
here I'll just assign some style, my screen style which I'll add to this object we passed to the style

30
00:02:28,090 --> 00:02:28,560
sheet

31
00:02:28,690 --> 00:02:37,720
here at the bottom, set flex to 1 and maybe justifyContent to center and then align items to center,

32
00:02:37,750 --> 00:02:40,410
so that this text is centered for the moment.

33
00:02:40,420 --> 00:02:44,440
Now we have the game over screen and we want to render this instead of the game screen

34
00:02:44,440 --> 00:02:53,050
if the game is over. So let's go back to the app.js file and import the game over screen from

35
00:02:53,050 --> 00:02:56,100
the screens folder and there from game over screen

36
00:02:56,240 --> 00:03:04,240
and the question now of course is, what's our condition for rendering this? Well in the end, we'll need

37
00:03:04,390 --> 00:03:07,000
one additional piece of information anyways

38
00:03:07,000 --> 00:03:12,570
and that's the number of rounds it took the computer to finish the game.

39
00:03:12,700 --> 00:03:18,720
So one thing I want to store here in the app component is another state

40
00:03:18,730 --> 00:03:24,580
I manage and that is the number of rounds it took to finish which is zero initially because

41
00:03:24,580 --> 00:03:26,120
we haven't started the game yet

42
00:03:26,260 --> 00:03:31,540
and I'll name this guess rounds and set guess rounds and you can name this whatever you want.

43
00:03:31,540 --> 00:03:34,130
Now the goal is to set this when the game is over.

44
00:03:34,140 --> 00:03:38,230
So for that, I'll also add another function here to the app component,

45
00:03:38,230 --> 00:03:45,790
game over handler and there, I want to get my number of rounds as an argument, so I expect to get this

46
00:03:45,790 --> 00:03:50,010
here so that I can call set guess rounds to my number of rounds

47
00:03:50,020 --> 00:03:56,440
I got here. Now the game over handler should be triggered from inside the game screen obviously.

48
00:03:56,560 --> 00:04:01,390
So here on the game screen, I want to pass in a prop which I'll name onGameOver,

49
00:04:01,420 --> 00:04:06,430
sounds like a fitting name which can be called from inside the game screen then or which holds a function

50
00:04:06,430 --> 00:04:10,960
reference which can then be called from inside the game screen and the function reference is a reference

51
00:04:10,960 --> 00:04:13,600
at this game over handler function of course.

52
00:04:13,600 --> 00:04:19,450
So inside of game screen, we can now use the onGameOver prop to execute this function and pass the

53
00:04:19,450 --> 00:04:22,720
number of rounds it took the computer to guess our number,

54
00:04:22,720 --> 00:04:29,460
then we set this number of rounds here, store it in our guess rounds state and now in the app component,

55
00:04:29,470 --> 00:04:37,480
we know that if guess rounds is zero, the game hasn't started yet or it's running, if it's greater than

56
00:04:37,480 --> 00:04:40,560
zero, then the game over handler executed

57
00:04:40,720 --> 00:04:41,970
and the game is over.

58
00:04:41,980 --> 00:04:43,840
So we want to show the game over screen

59
00:04:43,870 --> 00:04:46,490
if guess rounds is greater than zero.

60
00:04:46,540 --> 00:04:52,180
By the way if we start a new game, I also want to reset my guess rounds to zero because if a new game

61
00:04:52,180 --> 00:04:52,570
starts,

62
00:04:52,570 --> 00:04:56,350
we want to reset the number of rounds the computer took to 0.

63
00:04:56,470 --> 00:04:58,600
So if it's greater than zero, the game is over,

64
00:04:58,630 --> 00:05:02,110
so in that case, I want to show the game over screen.

65
00:05:02,110 --> 00:05:07,540
So here if I check if we have a user number, in which case I show the game screen, that's only correct

66
00:05:07,960 --> 00:05:13,110
if guess rounds is smaller or equal than zero,

67
00:05:13,120 --> 00:05:16,780
smaller is not possible but still, we can check for that.

68
00:05:16,900 --> 00:05:20,770
So if that's the case, then we know the game is certainly running,

69
00:05:20,770 --> 00:05:28,650
else if guess rounds is greater than zero, then we know the game is over and therefore content will be

70
00:05:28,650 --> 00:05:31,960
equal to game over screen, right now

71
00:05:31,980 --> 00:05:37,160
that's just a component like this without any props which we pass in.

72
00:05:37,180 --> 00:05:43,270
So now we have a condition where we render the game over screen, all we now need to do, we need to use

73
00:05:43,270 --> 00:05:49,330
the onGameOver Prop here in our game screen to in the end call this function and forward the number

74
00:05:49,330 --> 00:05:51,010
of rounds to the app component.

75
00:05:51,820 --> 00:05:59,510
So back in the game screen, if useEffect here determines that the right choice was made, the right guess

76
00:05:59,530 --> 00:06:07,120
was made and therefore the game is over, then in here, I want to call props onGameOver as a function

77
00:06:07,240 --> 00:06:14,380
and forward the amount of rounds it took the computer to guess our result or our choice and that's

78
00:06:14,410 --> 00:06:22,750
therefore another state we have to manage here in the game screen. We have our rounds and set rounds and initially,

79
00:06:22,810 --> 00:06:32,280
that is zero, when this component is created for the first time, this is of course zero and rounds is therefore

80
00:06:32,290 --> 00:06:37,390
now what I forward here because that's a number we'll increment with every guess because in the next

81
00:06:37,390 --> 00:06:43,510
guess handler, if we're generating a next guess, besides setting that guess here in our state, I of course

82
00:06:43,540 --> 00:06:51,630
also want to set my rounds and there use the function form where I get my current rounds and I return

83
00:06:51,760 --> 00:06:53,330
current rounds plus one.

84
00:06:53,380 --> 00:06:59,560
So I add one to my current amount of rounds I store in my state, so that the new state is old

85
00:06:59,560 --> 00:07:05,930
rounds plus one because a new round started. So with that, we're managing the amount of rounds and we're

86
00:07:05,930 --> 00:07:12,530
using this as a condition in the app component to render the game over screen and in the game screen,

87
00:07:12,740 --> 00:07:17,480
we check whether the game is over here in useEffect and right now, we do this whenever this component

88
00:07:17,490 --> 00:07:18,690
re-renders.

89
00:07:19,010 --> 00:07:26,240
Now we could do that but we can also simply be more honest or more direct regarding the dependencies

90
00:07:26,270 --> 00:07:31,640
of this effect and that's something you can be or you can do by adding a second argument to useEffect,

91
00:07:31,880 --> 00:07:37,550
first argument is the function it should execute after rendering the component, second argument you passed

92
00:07:37,560 --> 00:07:41,630
to useEffect is an array of dependencies of this function

93
00:07:41,630 --> 00:07:47,690
and here you have to specify any value that's coming from outside of this effect function.

94
00:07:47,690 --> 00:07:53,660
So in our case, that would be the current guess and that would be props user choice and props onGameOver

95
00:07:54,000 --> 00:07:57,260
and whenever such a value changes, this effect will rerun,

96
00:07:57,290 --> 00:08:03,380
wo whenever a task changed after a render cycle, the effect will rerun I should say. If a render cycle

97
00:08:03,380 --> 00:08:06,840
occurred and the values you specified here are still the same

98
00:08:06,860 --> 00:08:11,300
as for the previous render cycle, then the effect will not rerun,

99
00:08:11,390 --> 00:08:17,120
so the effect will now only rerun if one of our dependencies changed. Now as I said, props user choice and

100
00:08:17,120 --> 00:08:24,230
props onGameOver are all the dependencies and to take care of these, I'll use a modern Javascript syntax

101
00:08:24,320 --> 00:08:32,720
where I use object destructuring to destructure my props and get user choice and onGameOver out of

102
00:08:32,720 --> 00:08:33,400
them,

103
00:08:33,440 --> 00:08:39,500
this syntax might look strange but it's like array derestructuring, just for objects, we're pulling these

104
00:08:39,500 --> 00:08:45,860
properties, so these property names out of this props object and store them in constants with equal

105
00:08:45,860 --> 00:08:53,930
names so that here we can now just use user choice and just use onGameOver since we have these values

106
00:08:53,930 --> 00:09:00,350
now stored in constants of that name pulled out of props and I'm doing this because now we can add

107
00:09:00,350 --> 00:09:04,340
user choice and onGameOver as dependencies in this list,

108
00:09:04,340 --> 00:09:10,370
otherwise we would have to add props here and that actually changes whenever the parent component changes

109
00:09:10,420 --> 00:09:11,990
and therefore it's not a good check.

110
00:09:12,050 --> 00:09:16,430
This is a better check because now we make sure if anything else in props changes,

111
00:09:16,430 --> 00:09:23,300
we don't care, only if one of these two values changes, then this effect should rerun. Now with that, we have

112
00:09:23,300 --> 00:09:28,280
our check in place that should hopefully lead to the game over screen being presented if the computer

113
00:09:28,280 --> 00:09:31,530
guessed our numbers, so now let's save this and let's give it a try,

114
00:09:31,670 --> 00:09:42,580
maybe here on Android to mix things up. So I'll enter a number here, 32, confirm, start a game and it's 2,

115
00:09:42,580 --> 00:09:43,990
so it should be greater,

116
00:09:43,990 --> 00:09:46,710
let me also show you how the warning looks like when I'm on Android,

117
00:09:46,750 --> 00:09:50,280
it's this default Android alert. So 32 it was,

118
00:09:50,290 --> 00:09:53,170
so therefore of course it should be greater, should still be greater,

119
00:09:53,200 --> 00:09:58,780
now it should be lower, should be lower, should be greater, should be lower, should be lower, should be greater,

120
00:09:58,780 --> 00:09:59,780
should be greater,

121
00:09:59,830 --> 00:10:00,490
the game is over.

122
00:10:00,580 --> 00:10:05,590
That's looking good, the guess probably was 32, would makes sense regarding the sequence of numbers

123
00:10:05,590 --> 00:10:08,800
we had here and therefore, this output makes sense here.