Now before we add more logic, let's work on the user interface, so on what we output.
So here, I'll return a view
in the end and in that view I want to have a text where I say opponents guess, so what the computer guessed
and then we can reuse the number container to nicely present that guessed number.
So that's a huge advantage of having such reusable components because you can reuse them, I guess,
so that's what we're doing here.
We'll use that number container again, below that opponents guess text here to have our own number
container and nicely output
the current guess here. Current guess is our state,
remember that's what we initialize here and what we'll soon be able to change as well.
So that's what's getting output here, below that we can now also present maybe our card with two buttons
that allow the user to give the computer a hint.
So here, I'll import card from components card to wrap these buttons in there and therefore, we can already
also import button from React Native because we'll need that in a second too
and then simply have our card here and in that card, I want to have a button with a title of lower and
another button where we say greater, these are two directions in which we can give a hint,
so is the number you guessed too low, is too high,
then we can give the computer a hint with these buttons and onPress, I'll at the moment just register
an empty function that doesn't do anything, that will of course soon change and will effectively generate
a new random number and with that, it's now time to add some styles here.
I want to have a style for my overall screen and as before, this will get flex one to take all the
available space on the screen below the header which we have at the top,
add a padding of 10 to have some space around the content so that it doesn't sit directly on the
edges and also use align items here to center our content horizontally and that screen property is used
on the surrounding view here to add styles screen there so that the content on this overall screen is
nicely positioned. Now for these buttons, it would be nice if they would be sitting next to each other,
so on the card we can add a style, maybe use button container as a name here and therefore add that
same name here in our stylesheet because that's what we're referring to
and set the flex direction here to row and we can set a flex direction here because I'm doing this on
my card
but if we have a look, in that card, we distribute these styles on a view and a view uses flexbox so
we can set a flex direction here and that's what I'm doing there, setting flex direction to row to
position items next to each other horizontally. justifyContent with space around maybe, to have the
free space around the buttons, on the left and right equally distributed and also add a margin top of
20 so that this card with our buttons isn't sitting directly next to the guessed number but there is some
spacing in between and also maybe give this a width of 300 and a max width of 80% to
make sure that this can never exceed the boundaries of the parent view. Now if we save this, it would be
nice to see that and for that, we need a way of going to the game screen.
Now we're using the start game screen in the app component, so we'll have to use the game screen there
as well and manage the selected number in that app component because that's the only component which
is on the screen all the time,
well besides the header but the app component is also the component which will hold the start game screen
and the game screen soon and
therefore it is the component where we can also pass data down to the start games screen and to the
game screen.
So let's import the game screen here from screens game screen and of course I want to render my game
screen here but not if the start game screen is still visible, I want to have either of the two and side
note, there also is a totally different way of loading different components and we'll dive into that
in a separate module in the navigations module.
Now whilst we'll cover different navigation solutions later, there is a way of rendering either of the
two screens right now,
we also have a way of only rendering one of these two screens right now already and for that, we need
no special tool or anything like that,
we can use normal React logic, we can render this content conditionally.
All we need to do for that is we need to manage some state in our app component,
we need to manage the selected number in here as well.
So I'll add use state here and then simply use my state here and initialize this with no value
in the end
and there, I want to get the selected number or the user number and have set user number as an updating
function here
and initially that's undefined
and now here I need a function where we can change this,
like start
game handler,
that sounds like a fitting name because we'll have such a number if the user presses the start game button
here in the start game screen.
So the start game handler will then get the selected number as an input,
that's an assumption we have to make here and set the user number to be that selected number here. Now
whenever that is the case, whenever we have a user number, we know that the game is running and we know
that we can render the game screen instead of the start game screen.
So here we can use a content variable for example and say our default content is start
game screen
and that is normal React code as you know it from React For Web too, you can store components like this
in variables and then simply output the variable down there,
it's also what we already do in the start game screen with the confirmed output. So start games screen
is our default output
but now we can add an if check and check if content is true-ish,
that's what this check checks, so it will be false-ish initially if it's undefined
but now if it is true, we can set the user number, so I checked if user
number is true-ish,
if that is true-ish, then we know a number was selected, it will be undefined and therefore false initially
but if it is true-ish,
if a number was chosen, then we'll set the content here to be the game screen and then we render whatever
is in content down there and that will be either the game screen or the start game screen.
So now when we click start game here with another chosen, this should switch here
if and that's the important thing,
if we make sure that the start game handler can be triggered from inside the start game screen. Now for
that, we use a default React pattern of passing down a reference to this handler to that component, maybe
on the onStartGame prop, that sounds like a fitting name to me. We forward the start
game handler, just the reference without parentheses here, just a reference, a pointer at this function
and onStartGame is now a property we can use in the start game screen.
So here in the start game screen, when we click on the start game button here, I want to trigger that
prop in the end.
So here, I have onPress and there in the end, I want to execute onStartGame and forward the currently
selected number here which is managed in the state of start game screen.
So here, I forward this to onStartGame and onStartGame is bound to the start game handler which expects
and then receives that selected number.
So that is how we make sure that clicking that button to start game screen triggers this method or this
function here
and when this function is triggered, we set the user number,
this makes sure that content is the game screen and therefore we should be seeing the game screen. Now a
missing piece is that in the game screen, I need the user choice to generate my initial random number
and exclude that users choice correctly for that first random number
and therefore we need to pass a property named user choice down to the game screen. So we can add the
user choice prop here and pass user number which is the state we're managing in the app component which
is that selected number we're storing in the state here,
pass that down to the game screen.
So I hope that flow of data is clear, we get that selected number from the start game screen when that
button, the start game button is pressed,
we then store it in the state of the app component here in the use number state with the help of
set user number and we then use that user number to pass it down to the game screen which is only
rendered if we have a user numbers, so if the game is running, if the game was started so that in the
game screen, we can use the user number which is received on the user choice prop to then generate the
new random number which the computer guessed where this user choice, this user number is excluded, so that
for the very first computer guess, the computer can't instantly guess the user's number. A lot of talking,
let's save all of that and have a look at it.
Let's enter 55 and confirm and click start game and we can't find a variable on start game.
So the problem here is that I execute, yes that should be props on start
game here, on the start game button in the start game component because of course that's a property we're
getting,
it's not a function defined in here,
it's defined on the props,
it's this prop in the end.
So small mistake,
let's try it again after fixing this, click
start game and that's looking good.
Now we see the opponents
guess and we can give some hints here
which right now have no effect but which soon will have an effect and therefore we're on the next screen,
we're in the game screen.
Now let's make sure we actually can give the computer some hints here and make sure that the computer
has a chance of solving this and of guessing our number.