1
00:00:02,450 --> 00:00:08,430
Now before we add more logic, let's work on the user interface, so on what we output.

2
00:00:08,450 --> 00:00:11,670
So here, I'll return a view

3
00:00:11,700 --> 00:00:23,190
in the end and in that view I want to have a text where I say opponents guess, so what the computer guessed

4
00:00:23,230 --> 00:00:27,760
and then we can reuse the number container to nicely present that guessed number.

5
00:00:27,760 --> 00:00:34,330
So that's a huge advantage of having such reusable components because you can reuse them, I guess,

6
00:00:34,330 --> 00:00:36,040
so that's what we're doing here.

7
00:00:36,040 --> 00:00:42,400
We'll use that number container again, below that opponents guess text here to have our own number

8
00:00:42,400 --> 00:00:44,510
container and nicely output

9
00:00:44,650 --> 00:00:47,810
the current guess here. Current guess is our state,

10
00:00:47,830 --> 00:00:52,130
remember that's what we initialize here and what we'll soon be able to change as well.

11
00:00:52,210 --> 00:01:00,340
So that's what's getting output here, below that we can now also present maybe our card with two buttons

12
00:01:00,340 --> 00:01:02,290
that allow the user to give the computer a hint.

13
00:01:02,950 --> 00:01:11,320
So here, I'll import card from components card to wrap these buttons in there and therefore, we can already

14
00:01:11,320 --> 00:01:15,850
also import button from React Native because we'll need that in a second too

15
00:01:16,200 --> 00:01:25,880
and then simply have our card here and in that card, I want to have a button with a title of lower and

16
00:01:25,880 --> 00:01:33,860
another button where we say greater, these are two directions in which we can give a hint,

17
00:01:33,890 --> 00:01:37,070
so is the number you guessed too low, is too high,

18
00:01:37,070 --> 00:01:44,520
then we can give the computer a hint with these buttons and onPress, I'll at the moment just register

19
00:01:44,820 --> 00:01:49,500
an empty function that doesn't do anything, that will of course soon change and will effectively generate

20
00:01:49,500 --> 00:01:57,060
a new random number and with that, it's now time to add some styles here.

21
00:01:57,110 --> 00:02:02,450
I want to have a style for my overall screen and as before, this will get flex one to take all the

22
00:02:02,450 --> 00:02:06,950
available space on the screen below the header which we have at the top,

23
00:02:07,070 --> 00:02:12,410
add a padding of 10 to have some space around the content so that it doesn't sit directly on the

24
00:02:12,410 --> 00:02:23,370
edges and also use align items here to center our content horizontally and that screen property is used

25
00:02:23,370 --> 00:02:29,190
on the surrounding view here to add styles screen there so that the content on this overall screen is

26
00:02:29,190 --> 00:02:36,400
nicely positioned. Now for these buttons, it would be nice if they would be sitting next to each other,

27
00:02:36,470 --> 00:02:43,480
so on the card we can add a style, maybe use button container as a name here and therefore add that

28
00:02:43,480 --> 00:02:47,320
same name here in our stylesheet because that's what we're referring to

29
00:02:47,560 --> 00:02:54,160
and set the flex direction here to row and we can set a flex direction here because I'm doing this on

30
00:02:54,160 --> 00:02:54,930
my card

31
00:02:55,060 --> 00:03:01,570
but if we have a look, in that card, we distribute these styles on a view and a view uses flexbox so

32
00:03:01,570 --> 00:03:06,820
we can set a flex direction here and that's what I'm doing there, setting flex direction to row to

33
00:03:06,820 --> 00:03:13,780
position items next to each other horizontally. justifyContent with space around maybe, to have the

34
00:03:13,780 --> 00:03:21,760
free space around the buttons, on the left and right equally distributed and also add a margin top of

35
00:03:21,760 --> 00:03:29,080
20 so that this card with our buttons isn't sitting directly next to the guessed number but there is some

36
00:03:29,080 --> 00:03:35,770
spacing in between and also maybe give this a width of 300 and a max width of 80% to

37
00:03:35,770 --> 00:03:43,530
make sure that this can never exceed the boundaries of the parent view. Now if we save this, it would be

38
00:03:43,530 --> 00:03:47,460
nice to see that and for that, we need a way of going to the game screen.

39
00:03:47,460 --> 00:03:53,070
Now we're using the start game screen in the app component, so we'll have to use the game screen there

40
00:03:53,070 --> 00:03:58,830
as well and manage the selected number in that app component because that's the only component which

41
00:03:58,830 --> 00:04:00,720
is on the screen all the time,

42
00:04:00,720 --> 00:04:06,120
well besides the header but the app component is also the component which will hold the start game screen

43
00:04:06,330 --> 00:04:07,680
and the game screen soon and

44
00:04:07,680 --> 00:04:12,540
therefore it is the component where we can also pass data down to the start games screen and to the

45
00:04:12,660 --> 00:04:13,730
game screen.

46
00:04:13,860 --> 00:04:22,680
So let's import the game screen here from screens game screen and of course I want to render my game

47
00:04:22,680 --> 00:04:29,010
screen here but not if the start game screen is still visible, I want to have either of the two and side

48
00:04:29,010 --> 00:04:34,110
note, there also is a totally different way of loading different components and we'll dive into that

49
00:04:34,110 --> 00:04:37,540
in a separate module in the navigations module.

50
00:04:37,560 --> 00:04:43,050
Now whilst we'll cover different navigation solutions later, there is a way of rendering either of the

51
00:04:43,050 --> 00:04:44,840
two screens right now,

52
00:04:45,030 --> 00:04:49,620
we also have a way of only rendering one of these two screens right now already and for that, we need

53
00:04:49,620 --> 00:04:52,040
no special tool or anything like that,

54
00:04:52,380 --> 00:04:56,770
we can use normal React logic, we can render this content conditionally.

55
00:04:56,940 --> 00:05:00,980
All we need to do for that is we need to manage some state in our app component,

56
00:05:00,990 --> 00:05:04,950
we need to manage the selected number in here as well.

57
00:05:04,950 --> 00:05:14,250
So I'll add use state here and then simply use my state here and initialize this with no value

58
00:05:14,250 --> 00:05:15,010
in the end

59
00:05:15,260 --> 00:05:24,000
and there, I want to get the selected number or the user number and have set user number as an updating

60
00:05:24,000 --> 00:05:25,280
function here

61
00:05:25,380 --> 00:05:27,250
and initially that's undefined

62
00:05:27,300 --> 00:05:29,870
and now here I need a function where we can change this,

63
00:05:30,030 --> 00:05:30,920
like start

64
00:05:30,930 --> 00:05:31,920
game handler,

65
00:05:31,920 --> 00:05:38,610
that sounds like a fitting name because we'll have such a number if the user presses the start game button

66
00:05:38,610 --> 00:05:40,550
here in the start game screen.

67
00:05:40,800 --> 00:05:45,240
So the start game handler will then get the selected number as an input,

68
00:05:45,240 --> 00:05:51,860
that's an assumption we have to make here and set the user number to be that selected number here. Now

69
00:05:51,920 --> 00:05:56,330
whenever that is the case, whenever we have a user number, we know that the game is running and we know

70
00:05:56,330 --> 00:06:00,320
that we can render the game screen instead of the start game screen.

71
00:06:00,350 --> 00:06:06,530
So here we can use a content variable for example and say our default content is start

72
00:06:06,530 --> 00:06:07,140
game screen

73
00:06:07,250 --> 00:06:13,130
and that is normal React code as you know it from React For Web too, you can store components like this

74
00:06:13,190 --> 00:06:16,710
in variables and then simply output the variable down there,

75
00:06:16,730 --> 00:06:23,050
it's also what we already do in the start game screen with the confirmed output. So start games screen

76
00:06:23,050 --> 00:06:24,120
is our default output

77
00:06:24,130 --> 00:06:28,730
but now we can add an if check and check if content is true-ish,

78
00:06:28,740 --> 00:06:33,510
that's what this check checks, so it will be false-ish initially if it's undefined

79
00:06:33,630 --> 00:06:40,260
but now if it is true, we can set the user number, so I checked if user

80
00:06:40,260 --> 00:06:42,060
number is true-ish,

81
00:06:42,060 --> 00:06:48,330
if that is true-ish, then we know a number was selected, it will be undefined and therefore false initially

82
00:06:48,510 --> 00:06:49,700
but if it is true-ish,

83
00:06:49,710 --> 00:06:56,450
if a number was chosen, then we'll set the content here to be the game screen and then we render whatever

84
00:06:56,470 --> 00:07:01,370
is in content down there and that will be either the game screen or the start game screen.

85
00:07:01,380 --> 00:07:07,350
So now when we click start game here with another chosen, this should switch here

86
00:07:07,470 --> 00:07:09,110
if and that's the important thing,

87
00:07:09,210 --> 00:07:15,840
if we make sure that the start game handler can be triggered from inside the start game screen. Now for

88
00:07:15,840 --> 00:07:23,120
that, we use a default React pattern of passing down a reference to this handler to that component, maybe

89
00:07:23,130 --> 00:07:28,200
on the onStartGame prop, that sounds like a fitting name to me. We forward the start

90
00:07:28,200 --> 00:07:34,350
game handler, just the reference without parentheses here, just a reference, a pointer at this function

91
00:07:34,740 --> 00:07:39,240
and onStartGame is now a property we can use in the start game screen.

92
00:07:39,300 --> 00:07:46,410
So here in the start game screen, when we click on the start game button here, I want to trigger that

93
00:07:46,590 --> 00:07:47,370
prop in the end.

94
00:07:47,370 --> 00:07:57,090
So here, I have onPress and there in the end, I want to execute onStartGame and forward the currently

95
00:07:57,090 --> 00:08:01,440
selected number here which is managed in the state of start game screen.

96
00:08:01,440 --> 00:08:08,310
So here, I forward this to onStartGame and onStartGame is bound to the start game handler which expects

97
00:08:08,370 --> 00:08:11,190
and then receives that selected number.

98
00:08:11,190 --> 00:08:16,690
So that is how we make sure that clicking that button to start game screen triggers this method or this

99
00:08:16,690 --> 00:08:17,700
function here

100
00:08:17,700 --> 00:08:20,570
and when this function is triggered, we set the user number,

101
00:08:20,580 --> 00:08:26,160
this makes sure that content is the game screen and therefore we should be seeing the game screen. Now a

102
00:08:26,160 --> 00:08:33,120
missing piece is that in the game screen, I need the user choice to generate my initial random number

103
00:08:33,150 --> 00:08:38,130
and exclude that users choice correctly for that first random number

104
00:08:38,130 --> 00:08:44,070
and therefore we need to pass a property named user choice down to the game screen. So we can add the

105
00:08:44,070 --> 00:08:49,920
user choice prop here and pass user number which is the state we're managing in the app component which

106
00:08:49,920 --> 00:08:53,040
is that selected number we're storing in the state here,

107
00:08:53,040 --> 00:08:55,580
pass that down to the game screen.

108
00:08:55,830 --> 00:09:02,280
So I hope that flow of data is clear, we get that selected number from the start game screen when that

109
00:09:02,280 --> 00:09:05,240
button, the start game button is pressed,

110
00:09:05,280 --> 00:09:10,440
we then store it in the state of the app component here in the use number state with the help of

111
00:09:10,440 --> 00:09:16,170
set user number and we then use that user number to pass it down to the game screen which is only

112
00:09:16,170 --> 00:09:21,510
rendered if we have a user numbers, so if the game is running, if the game was started so that in the

113
00:09:21,510 --> 00:09:27,690
game screen, we can use the user number which is received on the user choice prop to then generate the

114
00:09:27,780 --> 00:09:33,870
new random number which the computer guessed where this user choice, this user number is excluded, so that

115
00:09:33,870 --> 00:09:41,050
for the very first computer guess, the computer can't instantly guess the user's number. A lot of talking,

116
00:09:41,050 --> 00:09:43,020
let's save all of that and have a look at it.

117
00:09:43,060 --> 00:09:50,660
Let's enter 55 and confirm and click start game and we can't find a variable on start game.

118
00:09:50,710 --> 00:09:57,820
So the problem here is that I execute, yes that should be props on start

119
00:09:57,820 --> 00:10:03,080
game here, on the start game button in the start game component because of course that's a property we're

120
00:10:03,080 --> 00:10:03,450
getting,

121
00:10:03,450 --> 00:10:05,270
it's not a function defined in here,

122
00:10:05,380 --> 00:10:07,340
it's defined on the props,

123
00:10:07,420 --> 00:10:10,500
it's this prop in the end.

124
00:10:10,780 --> 00:10:12,990
So small mistake,

125
00:10:13,000 --> 00:10:15,330
let's try it again after fixing this, click

126
00:10:15,430 --> 00:10:17,410
start game and that's looking good.

127
00:10:17,410 --> 00:10:18,620
Now we see the opponents

128
00:10:18,620 --> 00:10:20,610
guess and we can give some hints here

129
00:10:20,620 --> 00:10:27,240
which right now have no effect but which soon will have an effect and therefore we're on the next screen,

130
00:10:27,250 --> 00:10:28,570
we're in the game screen.

131
00:10:28,570 --> 00:10:35,320
Now let's make sure we actually can give the computer some hints here and make sure that the computer

132
00:10:35,320 --> 00:10:38,740
has a chance of solving this and of guessing our number.