So we can reach that game screen now and the computer is guessing a number here,
a random number which excludes our real number for the first initial guess.
Now we need to make sure that subsequent guesses can be made when we press the lower or greater button
here in the game screen. For that,
let's add a function inside of our functional component because this function will need access to the
surrounding state and to the surrounding component and give it any name you want, like next guess handler,
whatever name you prefer
and this is a function which you actually should get an argument, the direction in which the next guess
should be, so lower or greater. Now
the first thing I want to do here is I want to make sure that we validate the direction.
Now this function here should be executed when the buttons down there are pressed
but of course the direction value, so the value we pass in as an argument should differ based on the
button.
So here we have the next guess handler connected to onPress, without parentheses to just provide
that pointer at our function to onPress so that this will execute eventually when the user presses
this but I went to preconfigure the argument which will be passed to next guess handler when this is
executed.
We can do this with bind, bind this because the first argument to bind is always what this should be
referring to in the function that's getting called, doesn't matter here so we can just bind it to this.
The second value we pass here to bind will be the first argument received by our function though and
therefore, this will be the direction received here and it's of course up to you which logic you use
here,
to me it makes sense to simply use a string where here we pass lower as a string and for the other button,
we pass greater
so that we have these two identifiers which are essentially passed to the next guess handler. So the direction
will be lower or greater
and now we want to validate whether that is correct.
So for example, if you selected a number of let's say 55 and the computer guessed 60,
then if you give a computer the hint of the numbers should be greater,
that's obviously wrong because the number should be smaller, your number was 55,
guess was 60,
it's incorrect if you tell the computer that the number it should guess next should be greater than 60,
right?
So we want to validate this and
therefore here we can check if direction is equal to lower,
so if you pressed the its lower button and the current guess however is smaller then props user choice,
so the computer actually guessed a number that is smaller than our choice, then lower is the wrong
hint right
because the number does need to be lower,
it needs to be greater because the guess already was too low. So that's one possible scenario where we're
getting a wrong hint, the alternative and I'll wrap this into parentheses to make it really clear that
this is one condition here.
So the alternative to that,
the second condition I want to check is that the direction here is actually greater
and at the same time the current guess already is greater than our choice
and then it's also an incorrect hint,
just in the opposite direction.
In both cases where we're giving an incorrect hint, I want to throw an alert and you learned that you
can do this with the alert API, the alert class you can import from React Native in the end. Then in here,
in our check, I will use alert alert to throw an alert with a title of let's say don't lie,
of course you can pick any name you want,
I'm escaping that single quote which I went to print as a character here with a leading backslash because
otherwise it would close the string because I'm using single quotes to surround my strings.
So that's my title
and then the text could be you know that this is wrong
but of course you can have any text you want here, you can also be less moralistic if you want to. Now I want
to present one button here and button says already explained are objects you pass to that third argument
array which alert takes and there the text could be sorry and the style could be cancel and you don't
need to provide an onPress handler, if you don't provide one, the only thing that will happen is that clicking
the button will close the alert which is fine.
So here, we're giving the user a tap on his fingers so to say and making sure that no incorrect hints
are given
and I want to return here,
so I want to stop the function execution if we have such an incorrect value.
If we make it past this if block,
so if we gave a correct hint, then we want to generate a new random number.
So here, I want to check if the direction is lower
and now we know that was correct,
so the computer should guess a number that's lower than the previous number, then we know that a new
random number should be generated toward a current guess is the maximum upper bound.
So therefore, we can call generate random between again and the minimum number,
well that is probably one
but what if the user already guessed another number where we told the computer that it was too small
and then we would have a problem here because the lowest boundary is not always one,
what if the user guessed 10 and we said no, it has to be greater?
Well then the user guesses 50 and we say it should be lower than that, the computer should of course and
guess again
but it should not guess below 10 because we already mentioned that this is too small earlier.
So our current maximum and minimum should adjust over time as we give hints regarding whether the number
the computer guessed is too small or too big.
So therefore, we can use another hook provided by React and that is the useRef hook.
Now you might know that hook as a hook that allows you to create an object which you can bind to inputs,
so to your input elements in jsx to get access to them in your code and
that's one way of using it but useRef also allows you to do something else which is pretty cool.
It allows you to define a value which survives component re-renders,
so which survives that this component is rebuilt
and that's exactly what we need here because we want to log in a minimum and maximum which we can change
but which isn't regenerated just because the component is rendered again.
So here at the top of this component, after initializing the state, we can create a new constant, currentLow
maybe where useRef is one and then another constant, currentHigh where useRef is 100,
these are our initial boundaries we're using for the random number and now we can update these references
in here.
So we know the direction should be lower,
what we can do in that case, instead of instantly generating a new number, we can set currentHigh.current,
because the references generated by React are objects that have a current property where the
actual value is stored in,
so we set current equal to current guess.
So what we're saying is if I'm telling you, the computer that number you guessed is too big and you should
guess a lower one, then I know this number which I guessed is my currentHigh, the number which is correct
can't be higher than this one,
so I save the number I just guessed as my current high.
And again, these reference constants here are not regenerated when this component is created again,
instead if they have been initialized once, a bit like the state actually, then they're stored detached
from that component and React recognizes that they have been initialized already and it will not regenerate
them but instead, initialize currentHigh with the previously stored value.
So it's a bit like if you were managing this in a state, the difference to the state instead if you change
the value stored in there, the component doesn't re-render because we don't want that here.
I don't want to re-render it component just because I'm saving a new high, that has no impact on my
view, on my jsx code,
it just has an impact on my logic but for that, I don't need to re-render the component,
that's why I use a reference here instead of a state.
So that's happening if it's lower, else,
so if we told the computer that the guess was too small and the actual number should be higher, should
be greater,
well in that case we set the current low to the current guess because then we know we have a lower
boundary.
And now the goal is or the trick is to generate a new random number which takes these boundaries into
account,
so where we use the current low with our ref and then .current as a minimum and currentHigh.current
as a maximum and I want to exclude the current guess so we can't guess the same number again here, so
that for the next role, we'll definitely get a different number. So that's then something I store in a
constant, next number,
this is generated here
when the next guess handler is executed which happens when we tap one of these buttons.
And now next number is the next number we want to use,
so now what we can simply do as we can call set current guess and add next number,
now the component will be re-rendered and it will output the next guess. So let's give that a try,
for now we have no
the game is over condition but at least we can try guessing numbers here.
So I enter 53 as my number,
now we start and the computer guessed 85.
If I now say greater, we get that warning because we lied, we had 53 as a number, so the guess is too
high,
it should be lower. Now it's 28,
well that's too low, it should be greater.
So if I tap lower, I get the warning, if I tap greater, we go up now 78
and now at this moment, 23, the previous guess will be our lower boundary
and now when I tap lower, 78 the current guess will be our upper boundary,
so the next guess will certainly not be above 78 and not be below 23
but it's still too low,
that's too big
I mean, that's too low so
let's use a greater one,
lower one and that would be the correct one.
Now
for now we have nothing that checks whether the
computer guessed correctly.
So that's the next thing we'll have to implement here.