1
00:00:02,340 --> 00:00:05,010
So we're able to detect that the game is over,

2
00:00:05,010 --> 00:00:08,970
now it would be nice to also output a summary on the game over screen.

3
00:00:09,110 --> 00:00:14,430
Now we can dive deeper into the styling and the detail output there later, for now let's just make sure

4
00:00:14,910 --> 00:00:20,070
that we may be at least output the number of rounds it took the computer to win or what it means

5
00:00:20,070 --> 00:00:22,550
to win, to guess our number.

6
00:00:22,770 --> 00:00:27,870
So number of rounds is something I want to output here on the game over screen and that's of course

7
00:00:27,870 --> 00:00:32,610
a value we need to get from our props because we're managing this number of rounds in the app component

8
00:00:32,610 --> 00:00:35,400
in the end, here in guess rounds.

9
00:00:35,400 --> 00:00:43,200
So in the game over screen, we get this on props, rounds, number or whatever you want to name this, it's up

10
00:00:43,200 --> 00:00:52,010
to you how you name this prop and maybe also output the number the computer had to guess, number was

11
00:00:52,250 --> 00:00:56,260
and then props user number maybe.

12
00:00:56,270 --> 00:01:00,060
So these are two props we now need to set on the game over screen,

13
00:01:00,230 --> 00:01:01,850
rounds number and user number.

14
00:01:01,850 --> 00:01:06,220
So back in the app component on the game over screen, we set rounds number and user number,

15
00:01:06,440 --> 00:01:10,030
user number of course should be our user number

16
00:01:10,030 --> 00:01:16,430
we have there, user number between the curly braces now refers to our user numbers state here, user number

17
00:01:16,430 --> 00:01:22,810
before the equal sign simply refers to the prop we're passing to game over screen and rounds

18
00:01:22,820 --> 00:01:24,700
number of course is guess rounds,

19
00:01:24,700 --> 00:01:29,090
so that's the number of rounds it took to computer to guess this.

20
00:01:29,120 --> 00:01:33,560
So this is now forwarded to the game over screen and can be output there,

21
00:01:35,340 --> 00:01:39,740
on the game over screen, I also want to have a button that allows the user to restart the game.

22
00:01:39,780 --> 00:01:41,260
So let's add a button here

23
00:01:41,430 --> 00:01:44,880
and for that, you need to import the button from React Native,

24
00:01:45,230 --> 00:01:52,230
so let's add a button here and the title of this button could be a new game

25
00:01:52,500 --> 00:02:00,360
and on a press, I want to start a new game. Now again the app component is where we in the end control

26
00:02:00,420 --> 00:02:04,840
whether the game is running or not, where we present the different game screens.

27
00:02:04,860 --> 00:02:09,470
So it's here where we need to change something if a new game should start

28
00:02:09,750 --> 00:02:15,480
and it would make sense that in the app component, we therefore have a new function, can be defined anywhere,

29
00:02:15,480 --> 00:02:22,410
I'll define it here as a first function because it's the function that allows us to configure a new game,

30
00:02:22,410 --> 00:02:31,560
so maybe configure new game handler, you can name it whatever you want and there,

31
00:02:31,600 --> 00:02:33,520
I expect no arguments

32
00:02:33,700 --> 00:02:40,880
but I want to set my guess rounds to zero and therefore actually we don't need to do this here when we start

33
00:02:40,880 --> 00:02:47,000
a new game because we're definitely doing it right before we configure a new game even. So we can set

34
00:02:47,000 --> 00:02:48,880
the guess rounds to zero here

35
00:02:49,160 --> 00:02:54,640
and by doing that, we already ensure that in our if check down there, this condition will not be met

36
00:02:54,660 --> 00:02:59,650
anymore because if we set guess rounds to zero, it's certainly not greater than zero anymore,

37
00:02:59,780 --> 00:03:07,140
so we'll certainly leave the game over screen and then however, we would display the game screen again.

38
00:03:07,220 --> 00:03:11,960
So to see the start game screen again which we want to see because that's the screen that allows us

39
00:03:11,960 --> 00:03:17,960
to configure and start a new game, we have to make sure that we also reset the user number,

40
00:03:17,990 --> 00:03:19,490
so the selected number.

41
00:03:19,580 --> 00:03:27,260
So here we can also set user number to null, to reset this to a false-ish value and now configure

42
00:03:27,260 --> 00:03:30,640
new game handler resets everything that we check down there,

43
00:03:30,830 --> 00:03:33,050
hence we should see the start game screen,

44
00:03:33,080 --> 00:03:38,450
now we just need to pass a pointer at configure new game handler down to the game over screen.

45
00:03:38,810 --> 00:03:43,150
So there, I'll add a prop onRestart maybe

46
00:03:43,390 --> 00:03:46,250
and that points at configure new game handler.

47
00:03:46,250 --> 00:03:53,230
So now we can use the onRestart prop inside of the game over screen by binding it to this button, there

48
00:03:53,240 --> 00:03:59,660
upon a press, I want to execute onRestart as a function without parentheses here because here,

49
00:03:59,720 --> 00:04:03,030
I just point at it so that onPress registers

50
00:04:03,020 --> 00:04:10,440
this pointer and when this button is pressed, this function will execute. Let's give all of that a try,

51
00:04:10,440 --> 00:04:17,130
let's enter a number, 41 maybe and start a game and then lower,

52
00:04:17,130 --> 00:04:19,740
that was fast but well that's okay.

53
00:04:19,830 --> 00:04:20,600
Two rounds,

54
00:04:20,610 --> 00:04:21,740
the number was 41,

55
00:04:21,750 --> 00:04:24,950
that's correct and if I click new game, we're back here.

56
00:04:25,050 --> 00:04:27,210
Let's give it a try, 66,

57
00:04:27,510 --> 00:04:29,110
greater, greater,

58
00:04:29,160 --> 00:04:29,930
lower,

59
00:04:29,970 --> 00:04:30,850
lower,

60
00:04:30,900 --> 00:04:32,070
lower,

61
00:04:32,070 --> 00:04:32,580
even lower,

62
00:04:32,580 --> 00:04:33,240
greater,

63
00:04:33,240 --> 00:04:34,230
lower,

64
00:04:34,230 --> 00:04:35,480
well that's taking long,

65
00:04:35,490 --> 00:04:36,200
lower,

66
00:04:36,210 --> 00:04:37,560
greater, greater,

67
00:04:37,560 --> 00:04:38,470
lower,

68
00:04:38,520 --> 00:04:39,120
lower,

69
00:04:39,120 --> 00:04:39,780
greater,

70
00:04:39,780 --> 00:04:40,550
yes

71
00:04:40,590 --> 00:04:43,560
14 rounds. So it can also take longer

72
00:04:43,560 --> 00:04:46,720
but the main thing is our logic here works

73
00:04:46,720 --> 00:04:50,580
and that's actually already the finished logic of the entire game.

74
00:04:50,580 --> 00:04:55,730
Now what's not finished however is the overall styling, I want to have a different button here,

75
00:04:55,740 --> 00:04:57,350
want to have different buttons here,

76
00:04:57,500 --> 00:04:58,860
want to use my own font,

77
00:04:58,860 --> 00:05:06,930
want to use some icons and I also want to make sure that we show a little image on the screen where the

78
00:05:06,930 --> 00:05:09,400
game is over, so here

79
00:05:09,400 --> 00:05:10,650
I also want have a little image.

80
00:05:10,660 --> 00:05:13,000
So these are all the things we'll tackle next,

81
00:05:13,000 --> 00:05:15,630
lots of styling and image adding to be done.