1
00:00:02,380 --> 00:00:06,940
So we can reach that game screen now and the computer is guessing a number here,

2
00:00:06,970 --> 00:00:12,340
a random number which excludes our real number for the first initial guess.

3
00:00:12,370 --> 00:00:18,010
Now we need to make sure that subsequent guesses can be made when we press the lower or greater button

4
00:00:18,010 --> 00:00:21,350
here in the game screen. For that,

5
00:00:21,400 --> 00:00:27,820
let's add a function inside of our functional component because this function will need access to the

6
00:00:27,820 --> 00:00:36,790
surrounding state and to the surrounding component and give it any name you want, like next guess handler,

7
00:00:36,790 --> 00:00:38,700
whatever name you prefer

8
00:00:38,710 --> 00:00:43,810
and this is a function which you actually should get an argument, the direction in which the next guess

9
00:00:43,810 --> 00:00:47,390
should be, so lower or greater. Now

10
00:00:47,390 --> 00:00:54,060
the first thing I want to do here is I want to make sure that we validate the direction.

11
00:00:54,110 --> 00:00:59,600
Now this function here should be executed when the buttons down there are pressed

12
00:00:59,600 --> 00:01:04,970
but of course the direction value, so the value we pass in as an argument should differ based on the

13
00:01:05,240 --> 00:01:06,190
button.

14
00:01:06,200 --> 00:01:13,070
So here we have the next guess handler connected to onPress, without parentheses to just provide

15
00:01:13,100 --> 00:01:19,140
that pointer at our function to onPress so that this will execute eventually when the user presses

16
00:01:19,140 --> 00:01:26,060
this but I went to preconfigure the argument which will be passed to next guess handler when this is

17
00:01:26,060 --> 00:01:27,350
executed.

18
00:01:27,350 --> 00:01:33,530
We can do this with bind, bind this because the first argument to bind is always what this should be

19
00:01:33,530 --> 00:01:38,450
referring to in the function that's getting called, doesn't matter here so we can just bind it to this.

20
00:01:38,600 --> 00:01:44,780
The second value we pass here to bind will be the first argument received by our function though and

21
00:01:44,810 --> 00:01:51,580
therefore, this will be the direction received here and it's of course up to you which logic you use

22
00:01:51,580 --> 00:01:52,560
here,

23
00:01:52,600 --> 00:02:00,820
to me it makes sense to simply use a string where here we pass lower as a string and for the other button,

24
00:02:00,970 --> 00:02:02,710
we pass greater

25
00:02:02,740 --> 00:02:08,830
so that we have these two identifiers which are essentially passed to the next guess handler. So the direction

26
00:02:08,830 --> 00:02:10,780
will be lower or greater

27
00:02:10,900 --> 00:02:14,110
and now we want to validate whether that is correct.

28
00:02:14,110 --> 00:02:20,670
So for example, if you selected a number of let's say 55 and the computer guessed 60,

29
00:02:20,800 --> 00:02:25,390
then if you give a computer the hint of the numbers should be greater,

30
00:02:25,390 --> 00:02:30,190
that's obviously wrong because the number should be smaller, your number was 55,

31
00:02:30,190 --> 00:02:31,690
guess was 60,

32
00:02:31,690 --> 00:02:37,290
it's incorrect if you tell the computer that the number it should guess next should be greater than 60,

33
00:02:37,290 --> 00:02:37,790
right?

34
00:02:37,810 --> 00:02:39,340
So we want to validate this and

35
00:02:39,540 --> 00:02:43,370
therefore here we can check if direction is equal to lower,

36
00:02:43,390 --> 00:02:54,870
so if you pressed the its lower button and the current guess however is smaller then props user choice,

37
00:02:54,880 --> 00:03:01,270
so the computer actually guessed a number that is smaller than our choice, then lower is the wrong

38
00:03:01,270 --> 00:03:01,870
hint right

39
00:03:01,900 --> 00:03:03,900
because the number does need to be lower,

40
00:03:03,970 --> 00:03:11,100
it needs to be greater because the guess already was too low. So that's one possible scenario where we're

41
00:03:11,100 --> 00:03:16,110
getting a wrong hint, the alternative and I'll wrap this into parentheses to make it really clear that

42
00:03:16,110 --> 00:03:18,300
this is one condition here.

43
00:03:18,330 --> 00:03:20,440
So the alternative to that,

44
00:03:20,490 --> 00:03:26,010
the second condition I want to check is that the direction here is actually greater

45
00:03:26,250 --> 00:03:30,920
and at the same time the current guess already is greater than our choice

46
00:03:30,930 --> 00:03:33,460
and then it's also an incorrect hint,

47
00:03:33,480 --> 00:03:35,600
just in the opposite direction.

48
00:03:35,940 --> 00:03:41,220
In both cases where we're giving an incorrect hint, I want to throw an alert and you learned that you

49
00:03:41,220 --> 00:03:48,300
can do this with the alert API, the alert class you can import from React Native in the end. Then in here,

50
00:03:48,300 --> 00:03:55,460
in our check, I will use alert alert to throw an alert with a title of let's say don't lie,

51
00:03:55,530 --> 00:03:57,820
of course you can pick any name you want,

52
00:03:57,840 --> 00:04:03,240
I'm escaping that single quote which I went to print as a character here with a leading backslash because

53
00:04:03,240 --> 00:04:07,710
otherwise it would close the string because I'm using single quotes to surround my strings.

54
00:04:07,710 --> 00:04:09,010
So that's my title

55
00:04:09,090 --> 00:04:13,230
and then the text could be you know that this is wrong

56
00:04:13,230 --> 00:04:19,480
but of course you can have any text you want here, you can also be less moralistic if you want to. Now I want

57
00:04:19,480 --> 00:04:25,260
to present one button here and button says already explained are objects you pass to that third argument

58
00:04:25,320 --> 00:04:32,880
array which alert takes and there the text could be sorry and the style could be cancel and you don't

59
00:04:32,880 --> 00:04:39,120
need to provide an onPress handler, if you don't provide one, the only thing that will happen is that clicking

60
00:04:39,120 --> 00:04:41,400
the button will close the alert which is fine.

61
00:04:42,000 --> 00:04:47,550
So here, we're giving the user a tap on his fingers so to say and making sure that no incorrect hints

62
00:04:47,550 --> 00:04:48,530
are given

63
00:04:48,600 --> 00:04:50,040
and I want to return here,

64
00:04:50,040 --> 00:04:54,590
so I want to stop the function execution if we have such an incorrect value.

65
00:04:54,780 --> 00:04:56,580
If we make it past this if block,

66
00:04:56,580 --> 00:05:01,330
so if we gave a correct hint, then we want to generate a new random number.

67
00:05:01,920 --> 00:05:06,940
So here, I want to check if the direction is lower

68
00:05:07,200 --> 00:05:08,850
and now we know that was correct,

69
00:05:08,850 --> 00:05:15,810
so the computer should guess a number that's lower than the previous number, then we know that a new

70
00:05:15,810 --> 00:05:22,170
random number should be generated toward a current guess is the maximum upper bound.

71
00:05:22,200 --> 00:05:29,940
So therefore, we can call generate random between again and the minimum number,

72
00:05:30,060 --> 00:05:32,930
well that is probably one

73
00:05:32,940 --> 00:05:39,440
but what if the user already guessed another number where we told the computer that it was too small

74
00:05:39,540 --> 00:05:44,410
and then we would have a problem here because the lowest boundary is not always one,

75
00:05:44,430 --> 00:05:48,430
what if the user guessed 10 and we said no, it has to be greater?

76
00:05:48,480 --> 00:05:53,670
Well then the user guesses 50 and we say it should be lower than that, the computer should of course and

77
00:05:53,670 --> 00:05:54,410
guess again

78
00:05:54,420 --> 00:06:00,240
but it should not guess below 10 because we already mentioned that this is too small earlier.

79
00:06:00,330 --> 00:06:08,700
So our current maximum and minimum should adjust over time as we give hints regarding whether the number

80
00:06:08,700 --> 00:06:11,080
the computer guessed is too small or too big.

81
00:06:12,130 --> 00:06:16,690
So therefore, we can use another hook provided by React and that is the useRef hook.

82
00:06:16,690 --> 00:06:23,290
Now you might know that hook as a hook that allows you to create an object which you can bind to inputs,

83
00:06:23,350 --> 00:06:28,960
so to your input elements in jsx to get access to them in your code and

84
00:06:28,960 --> 00:06:33,870
that's one way of using it but useRef also allows you to do something else which is pretty cool.

85
00:06:34,120 --> 00:06:39,720
It allows you to define a value which survives component re-renders,

86
00:06:39,760 --> 00:06:42,810
so which survives that this component is rebuilt

87
00:06:43,120 --> 00:06:48,940
and that's exactly what we need here because we want to log in a minimum and maximum which we can change

88
00:06:49,180 --> 00:06:53,320
but which isn't regenerated just because the component is rendered again.

89
00:06:53,320 --> 00:07:00,060
So here at the top of this component, after initializing the state, we can create a new constant, currentLow

90
00:07:00,360 --> 00:07:10,430
maybe where useRef is one and then another constant, currentHigh where useRef is 100,

91
00:07:10,440 --> 00:07:16,590
these are our initial boundaries we're using for the random number and now we can update these references

92
00:07:17,160 --> 00:07:18,240
in here.

93
00:07:18,390 --> 00:07:20,790
So we know the direction should be lower,

94
00:07:20,790 --> 00:07:27,450
what we can do in that case, instead of instantly generating a new number, we can set currentHigh.current,

95
00:07:27,450 --> 00:07:33,960
because the references generated by React are objects that have a current property where the

96
00:07:33,960 --> 00:07:36,120
actual value is stored in,

97
00:07:36,150 --> 00:07:39,320
so we set current equal to current guess.

98
00:07:39,330 --> 00:07:45,570
So what we're saying is if I'm telling you, the computer that number you guessed is too big and you should

99
00:07:45,570 --> 00:07:53,610
guess a lower one, then I know this number which I guessed is my currentHigh, the number which is correct

100
00:07:53,610 --> 00:07:55,320
can't be higher than this one,

101
00:07:55,320 --> 00:07:58,780
so I save the number I just guessed as my current high.

102
00:07:58,800 --> 00:08:05,160
And again, these reference constants here are not regenerated when this component is created again,

103
00:08:05,160 --> 00:08:11,700
instead if they have been initialized once, a bit like the state actually, then they're stored detached

104
00:08:11,790 --> 00:08:17,490
from that component and React recognizes that they have been initialized already and it will not regenerate

105
00:08:17,490 --> 00:08:22,440
them but instead, initialize currentHigh with the previously stored value.

106
00:08:22,440 --> 00:08:28,240
So it's a bit like if you were managing this in a state, the difference to the state instead if you change

107
00:08:28,240 --> 00:08:32,290
the value stored in there, the component doesn't re-render because we don't want that here.

108
00:08:32,370 --> 00:08:37,890
I don't want to re-render it component just because I'm saving a new high, that has no impact on my

109
00:08:37,890 --> 00:08:39,780
view, on my jsx code,

110
00:08:39,780 --> 00:08:44,020
it just has an impact on my logic but for that, I don't need to re-render the component,

111
00:08:44,070 --> 00:08:47,580
that's why I use a reference here instead of a state.

112
00:08:47,640 --> 00:08:50,730
So that's happening if it's lower, else,

113
00:08:50,760 --> 00:08:55,980
so if we told the computer that the guess was too small and the actual number should be higher, should

114
00:08:55,980 --> 00:08:57,060
be greater,

115
00:08:57,060 --> 00:09:04,970
well in that case we set the current low to the current guess because then we know we have a lower

116
00:09:04,970 --> 00:09:06,020
boundary.

117
00:09:06,230 --> 00:09:12,230
And now the goal is or the trick is to generate a new random number which takes these boundaries into

118
00:09:12,230 --> 00:09:13,280
account,

119
00:09:13,280 --> 00:09:22,190
so where we use the current low with our ref and then .current as a minimum and currentHigh.current

120
00:09:22,190 --> 00:09:30,850
as a maximum and I want to exclude the current guess so we can't guess the same number again here, so

121
00:09:30,850 --> 00:09:38,440
that for the next role, we'll definitely get a different number. So that's then something I store in a

122
00:09:38,440 --> 00:09:39,900
constant, next number,

123
00:09:39,910 --> 00:09:41,200
this is generated here

124
00:09:41,350 --> 00:09:46,020
when the next guess handler is executed which happens when we tap one of these buttons.

125
00:09:46,240 --> 00:09:49,140
And now next number is the next number we want to use,

126
00:09:49,150 --> 00:09:54,370
so now what we can simply do as we can call set current guess and add next number,

127
00:09:54,370 --> 00:10:01,660
now the component will be re-rendered and it will output the next guess. So let's give that a try,

128
00:10:01,660 --> 00:10:02,960
for now we have no

129
00:10:02,980 --> 00:10:06,820
the game is over condition but at least we can try guessing numbers here.

130
00:10:06,850 --> 00:10:09,250
So I enter 53 as my number,

131
00:10:09,250 --> 00:10:12,040
now we start and the computer guessed 85.

132
00:10:12,100 --> 00:10:18,220
If I now say greater, we get that warning because we lied, we had 53 as a number, so the guess is too

133
00:10:18,220 --> 00:10:18,580
high,

134
00:10:18,580 --> 00:10:21,590
it should be lower. Now it's 28,

135
00:10:21,610 --> 00:10:23,260
well that's too low, it should be greater.

136
00:10:23,260 --> 00:10:28,830
So if I tap lower, I get the warning, if I tap greater, we go up now 78

137
00:10:28,840 --> 00:10:34,030
and now at this moment, 23, the previous guess will be our lower boundary

138
00:10:34,030 --> 00:10:38,360
and now when I tap lower, 78 the current guess will be our upper boundary,

139
00:10:38,380 --> 00:10:44,300
so the next guess will certainly not be above 78 and not be below 23

140
00:10:44,430 --> 00:10:46,690
but it's still too low,

141
00:10:46,690 --> 00:10:48,460
that's too big

142
00:10:48,460 --> 00:10:49,580
I mean, that's too low so

143
00:10:49,600 --> 00:10:51,520
let's use a greater one,

144
00:10:51,520 --> 00:10:53,460
lower one and that would be the correct one.

145
00:10:53,500 --> 00:10:53,850
Now

146
00:10:53,860 --> 00:10:56,560
for now we have nothing that checks whether the

147
00:10:56,580 --> 00:10:57,820
computer guessed correctly.

148
00:10:58,120 --> 00:11:00,130
So that's the next thing we'll have to implement here.