So we're able to detect that the game is over,
now it would be nice to also output a summary on the game over screen.
Now we can dive deeper into the styling and the detail output there later, for now let's just make sure
that we may be at least output the number of rounds it took the computer to win or what it means
to win, to guess our number.
So number of rounds is something I want to output here on the game over screen and that's of course
a value we need to get from our props because we're managing this number of rounds in the app component
in the end, here in guess rounds.
So in the game over screen, we get this on props, rounds, number or whatever you want to name this, it's up
to you how you name this prop and maybe also output the number the computer had to guess, number was
and then props user number maybe.
So these are two props we now need to set on the game over screen,
rounds number and user number.
So back in the app component on the game over screen, we set rounds number and user number,
user number of course should be our user number
we have there, user number between the curly braces now refers to our user numbers state here, user number
before the equal sign simply refers to the prop we're passing to game over screen and rounds
number of course is guess rounds,
so that's the number of rounds it took to computer to guess this.
So this is now forwarded to the game over screen and can be output there,
on the game over screen, I also want to have a button that allows the user to restart the game.
So let's add a button here
and for that, you need to import the button from React Native,
so let's add a button here and the title of this button could be a new game
and on a press, I want to start a new game. Now again the app component is where we in the end control
whether the game is running or not, where we present the different game screens.
So it's here where we need to change something if a new game should start
and it would make sense that in the app component, we therefore have a new function, can be defined anywhere,
I'll define it here as a first function because it's the function that allows us to configure a new game,
so maybe configure new game handler, you can name it whatever you want and there,
I expect no arguments
but I want to set my guess rounds to zero and therefore actually we don't need to do this here when we start
a new game because we're definitely doing it right before we configure a new game even. So we can set
the guess rounds to zero here
and by doing that, we already ensure that in our if check down there, this condition will not be met
anymore because if we set guess rounds to zero, it's certainly not greater than zero anymore,
so we'll certainly leave the game over screen and then however, we would display the game screen again.
So to see the start game screen again which we want to see because that's the screen that allows us
to configure and start a new game, we have to make sure that we also reset the user number,
so the selected number.
So here we can also set user number to null, to reset this to a false-ish value and now configure
new game handler resets everything that we check down there,
hence we should see the start game screen,
now we just need to pass a pointer at configure new game handler down to the game over screen.
So there, I'll add a prop onRestart maybe
and that points at configure new game handler.
So now we can use the onRestart prop inside of the game over screen by binding it to this button, there
upon a press, I want to execute onRestart as a function without parentheses here because here,
I just point at it so that onPress registers
this pointer and when this button is pressed, this function will execute. Let's give all of that a try,
let's enter a number, 41 maybe and start a game and then lower,
that was fast but well that's okay.
Two rounds,
the number was 41,
that's correct and if I click new game, we're back here.
Let's give it a try, 66,
greater, greater,
lower,
even lower,
greater,
lower,
well that's taking long,
lower,
greater, greater,
lower,
greater,
yes
14 rounds. So it can also take longer
but the main thing is our logic here works
and that's actually already the finished logic of the entire game.
Now what's not finished however is the overall styling, I want to have a different button here,
want to have different buttons here,
want to use my own font,
want to use some icons and I also want to make sure that we show a little image on the screen where the
game is over, so here
I also want have a little image.
So these are all the things we'll tackle next,
lots of styling and image adding to be done.