0
1
00:00:00,000 --> 00:00:02,861
Okay so in this video we're
going to prepare the header
1

2
00:00:02,861 --> 00:00:06,461
here. We're going to add a
background image and we're
2

3
00:00:06,461 --> 00:00:09,901
going to prepare the layout so
we are able to inject the
3

4
00:00:09,901 --> 00:00:16,701
component here. Okay? So so so
let's open the project. Uh you
4

5
00:00:16,701 --> 00:00:22,861
can create a folder name assets
in the source. And I'm going to
5

6
00:00:22,861 --> 00:00:29,881
provide you on a logo. So where
is it? Where is it? Assets I
6

7
00:00:29,881 --> 00:00:35,241
have it somewhere okay you need
logo and bubble so I'm going to
7

8
00:00:35,241 --> 00:00:42,041
provide you that and you can
add this to your assets okay so
8

9
00:00:42,041 --> 00:00:46,361
you should have something like
this and something like this so
9

10
00:00:46,361 --> 00:00:51,161
we can go in app I'm going to
start my project I'm going to
10

11
00:00:51,161 --> 00:00:56,841
hide this okay so for now I'm
going to remove all of that and
11

12
00:00:56,841 --> 00:01:02,221
we are going to have a header
so I'm going to create a header
12

13
00:01:02,221 --> 00:01:05,141
here, I'm not creating
component out of it because
13

14
00:01:05,141 --> 00:01:11,341
it's going to be super small
and we won't have to reuse it.
14

15
00:01:11,341 --> 00:01:15,061
So I'm even going to do a
function that returns directly
15

16
00:01:15,061 --> 00:01:19,461
the result and here I'm going
to use the flex bonnet of
16

17
00:01:19,461 --> 00:01:26,061
chakra to center my text so I'm
going to do a justify center
17

18
00:01:26,061 --> 00:01:32,421
and I'm going to add an image
that is going to have a size so
18

19
00:01:32,421 --> 00:01:37,741
first I have to import my image
and going to have an height of
19

20
00:01:37,741 --> 00:01:44,321
twenty-four And as source I'm
going to get my logo. So I'm
20

21
00:01:44,321 --> 00:01:53,601
going to import a logo png from
assets slash a logo.png
21

22
00:01:53,601 --> 00:01:58,721
and I'm going to inject that
here. Very good. Uh so let's
22

23
00:01:58,721 --> 00:02:06,921
see let's see. Oh, nothing
appear. Oh I made it a function
23

24
00:02:06,921 --> 00:02:10,801
sorry so I'm not going to make
it a function there's no need
24

25
00:02:10,801 --> 00:02:19,561
okay great now we can upon a
box here so box if you remember
25

26
00:02:19,561 --> 00:02:24,681
with chakra is basically a div
okay in the world of chakra so
26

27
00:02:24,681 --> 00:02:27,081
that's where we're going to
inject all the components one
27

28
00:02:27,081 --> 00:02:30,121
after each other okay basically
the screens okay we're not
28

29
00:02:30,121 --> 00:02:33,081
going to use a routing system
we're just going to basically
29

30
00:02:33,081 --> 00:02:37,001
make appear all the components
one after each other depending
30

31
00:02:37,001 --> 00:02:41,081
on which step we are currently
So for example the first step
31

32
00:02:41,081 --> 00:02:45,881
will be to set the question
quantity so it will be the
32

33
00:02:45,881 --> 00:02:48,521
first step so we'll have a
state later and we will render
33

34
00:02:48,521 --> 00:02:52,121
the correct component here. Uh
so for now I'm going to write
34

35
00:02:52,121 --> 00:03:00,541
to do. Okay also you're only
going to notice that here in
35

36
00:03:00,541 --> 00:03:04,701
the Div id root it's not
taking the all space. So I want
36

37
00:03:04,701 --> 00:03:07,341
the DID route to take the all
space. So I'm going to go in
37

38
00:03:07,341 --> 00:03:10,621
global CSS. I don't know if you
have something in here but you
38

39
00:03:10,621 --> 00:03:13,981
should have nothing now. You
can remove everything and we're
39

40
00:03:13,981 --> 00:03:21,981
just going to target the div ID
rooot and set an height of 100VH
40

41
00:03:21,981 --> 00:03:26,521
so it's going to take the full
height but yes we to use this
41

42
00:03:26,521 --> 00:03:32,041
Global. CSS so let's go in app
again and import the global.
42

43
00:03:32,041 --> 00:03:38,121
CSS that is higher global. CSS
and now technically yes it's
43

44
00:03:38,121 --> 00:03:42,281
going to take the all space
okay so here it's a bit too
44

45
00:03:42,281 --> 00:03:47,001
close from the edges so maybe
we can create another box
45

46
00:03:47,001 --> 00:03:52,041
outside so basically another
div and I'm going to set a
46

47
00:03:52,041 --> 00:03:59,741
padding Y so vertical padding
of ten maybe and I'm going to
47

48
00:03:59,741 --> 00:04:08,641
tell this box to take the whole
space. Okay cool so we have the
48

49
00:04:08,641 --> 00:04:13,241
layout and now what we're going
to do is we're going to prepare
49

50
00:04:13,241 --> 00:04:18,721
this to be dynamic okay so what
we're going to do is we are
50

51
00:04:18,721 --> 00:04:23,121
going to create a state that is
going to contain the current
51

52
00:04:23,121 --> 00:04:29,521
step okay so we'll have step
and set step and here actually
52

53
00:04:29,521 --> 00:04:35,461
we're going to use Typescript
for the first time so Uh what
53

54
00:04:35,461 --> 00:04:39,221
is a step? A step is basically
just an enum that is going to
54

55
00:04:39,221 --> 00:04:44,101
tell us what is the current
step, yeah? So I'm going to
55

56
00:04:44,101 --> 00:04:48,421
create a an enumeration for
this value, okay? So I'm going
56

57
00:04:48,421 --> 00:04:52,741
to create an enum that I'm
going to call step. Like this.
57

58
00:04:52,741 --> 00:04:58,181
And well the first step will be
to set the question quantity,
58

59
00:04:58,181 --> 00:05:03,821
right? So I will have for
example set question quantity
59

60
00:05:03,821 --> 00:05:08,101
and I don't really need to
override this okay by game this
60

61
00:05:08,101 --> 00:05:10,581
is going to be equal to zero
but it doesn't really matter
61

62
00:05:10,581 --> 00:05:14,181
I'm not going to use this
string so the first step is be
62

63
00:05:14,181 --> 00:05:16,821
this to set the question
quantity the second will be to
63

64
00:05:16,821 --> 00:05:23,621
set the question category right
so set question category right
64

65
00:05:23,621 --> 00:05:27,061
after that we have what yes we
have the difficulty so the next
65

66
00:05:27,061 --> 00:05:30,341
one will be to set the question
66

67
00:05:31,341 --> 00:05:37,941
difficulty and after that we
will have a which step where we
67

68
00:05:37,941 --> 00:05:41,221
have the the game so maybe we
can call that play and after
68

69
00:05:41,221 --> 00:05:44,661
that we will have the score
screen right so I'm going to
69

70
00:05:44,661 --> 00:05:51,541
call that score all right so
now well we want this step to
70

71
00:05:51,541 --> 00:05:55,941
be a of type step like this so
to do that to type a state
71

72
00:05:55,941 --> 00:06:01,221
you're going to do it like this
here you're going to provide
72

73
00:06:01,221 --> 00:06:07,401
your type and now a step is of
type undefined and this is
73

74
00:06:07,401 --> 00:06:10,841
because for now here I haven't
provide anything. So maybe I
74

75
00:06:10,841 --> 00:06:17,201
could set a default step. So
here is going to be step. set
75

76
00:06:17,201 --> 00:06:22,201
question quantity. That would
be the default state. This way
76

77
00:06:22,201 --> 00:06:27,721
here step is of type step. For
now it cannot be undefined. Now
77

78
00:06:27,721 --> 00:06:31,241
what we could do is we could
prepare a new function that
78

79
00:06:31,241 --> 00:06:37,681
would be render screen. By
step.
79

80
00:06:38,721 --> 00:06:42,421
And so here basically we would
just switch over the current
80

81
00:06:42,421 --> 00:06:48,861
step so over the step and for
now we just have one step so if
81

82
00:06:48,861 --> 00:06:55,101
the step is equal to set
question quantity I'm going to
82

83
00:06:55,101 --> 00:06:58,941
break for now and here we are
going to return a component so
83

84
00:06:58,941 --> 00:07:01,981
I actually don't need to break
here we're going to return a
84

85
00:07:01,981 --> 00:07:05,421
component and I'm going to
create my first component so
85

86
00:07:05,421 --> 00:07:08,461
I'm going to create a new
folder and actually that's not
86

87
00:07:08,461 --> 00:07:10,861
really a component because
we're not going to reuse it so
87

88
00:07:10,861 --> 00:07:13,901
I'm going to call that features
okay or you can call that
88

89
00:07:13,901 --> 00:07:17,121
screen or you can choose your
own convention I'm going to
89

90
00:07:17,121 --> 00:07:20,401
call that features because for
me it's not really a screen, I
90

91
00:07:20,401 --> 00:07:24,801
call that screen when I have
real navigation. So and I'm
91

92
00:07:24,801 --> 00:07:30,561
going to create this component
that will be set question
92

93
00:07:30,561 --> 00:07:36,801
quantity. TSX I'm going to make
that a very basic component set
93

94
00:07:36,801 --> 00:07:43,601
question quantity and for now
I'm not going to return
94

95
00:07:43,601 --> 00:07:53,121
anything just a text like this
and here I'M going to call set
95

96
00:07:53,121 --> 00:07:59,001
question quantity like this and
finally here I'm going to call
96

97
00:07:59,001 --> 00:08:02,441
my render step
97

98
00:08:03,221 --> 00:08:07,561
like this so technically here
we are on the set question
98

99
00:08:07,561 --> 00:08:12,521
quantity steps so we should
render that and yes it seems to
99

100
00:08:12,521 --> 00:08:17,201
be working fine Okay, so
basically after that we'll have
100

101
00:08:17,201 --> 00:08:22,481
other cases, okay? We'll have
the case step dot
101

102
00:08:23,481 --> 00:08:30,421
dot category and we're going to
return something we'll have the
102

103
00:08:30,421 --> 00:08:36,901
case step. set question
difficulty and we're going to
103

104
00:08:36,901 --> 00:08:43,521
return something else we'r going
to add the case. Step that.
104

105
00:08:43,521 --> 00:08:52,821
Play. And we're going to add
the case step dot score. And
105

106
00:08:52,821 --> 00:08:55,381
for now
106

107
00:08:56,721 --> 00:09:01,701
and here we're going to return
null for now okay so basically
107

108
00:09:01,701 --> 00:09:06,501
this is our kind of custom
routing system okay anytime the
108

109
00:09:06,501 --> 00:09:08,981
step is going to change the
component is going to change in
109

110
00:09:08,981 --> 00:09:12,741
the screen okay how and by the
way I forgot to put the image
110

111
00:09:12,741 --> 00:09:16,181
here so that's going to be
super simple right after the
111

112
00:09:16,181 --> 00:09:21,621
header we're going to use an
image from chakra UI like this
112

113
00:09:21,621 --> 00:09:24,741
and we are going to set a
source so we are going to
113

114
00:09:24,741 --> 00:09:30,041
import the bubble image going
to import it import bubble
114

115
00:09:30,041 --> 00:09:39,321
image from assets slash bubble.
PNG okay we're going to pass
115

116
00:09:39,321 --> 00:09:45,481
this here we're going to make
it absolute so we can position
116

117
00:09:45,481 --> 00:09:49,161
it where we wherever we want
and we want that to be behind
117

118
00:09:49,161 --> 00:09:53,961
anything even behind the text
if you resize so I'm going to
118

119
00:09:53,961 --> 00:09:59,081
set a Z index of minus one and
then I'm going to position it
119

120
00:09:59,081 --> 00:10:06,601
where I want so I'm going to
position it at minus 120 from
120

121
00:10:06,601 --> 00:10:09,081
the right
121

122
00:10:10,221 --> 00:10:20,341
100 from the top and ta-da
that's what we have okay all
122

123
00:10:20,341 --> 00:10:24,501
right so that is pretty much it
for now so yes see you in the
123

124
00:10:24,501 --> 00:10:27,461
next video to continue