Okay so in this video we're going to prepare the header 1
here. We're going to add a background image and we're 2
going to prepare the layout so we are able to inject the 3
component here. Okay? So so so let's open the project. Uh you 4
can create a folder name assets in the source. And I'm going to 5
provide you on a logo. So where is it? Where is it? Assets I 6
have it somewhere okay you need logo and bubble so I'm going to 7
provide you that and you can add this to your assets okay so 8
you should have something like this and something like this so 9
we can go in app I'm going to start my project I'm going to 10
hide this okay so for now I'm going to remove all of that and 11
we are going to have a header so I'm going to create a header 12
here, I'm not creating component out of it because 13
it's going to be super small and we won't have to reuse it. 14
So I'm even going to do a function that returns directly 15
the result and here I'm going to use the flex bonnet of 16
chakra to center my text so I'm going to do a justify center 17
and I'm going to add an image that is going to have a size so 18
first I have to import my image and going to have an height of 19
twenty-four And as source I'm going to get my logo. So I'm 20
going to import a logo png from assets slash a logo.png 21
and I'm going to inject that here. Very good. Uh so let's 22
see let's see. Oh, nothing appear. Oh I made it a function 23
sorry so I'm not going to make it a function there's no need 24
okay great now we can upon a box here so box if you remember 25
with chakra is basically a div okay in the world of chakra so 26
that's where we're going to inject all the components one 27
after each other okay basically the screens okay we're not 28
going to use a routing system we're just going to basically 29
make appear all the components one after each other depending 30
on which step we are currently So for example the first step 31
will be to set the question quantity so it will be the 32
first step so we'll have a state later and we will render 33
the correct component here. Uh so for now I'm going to write 34
to do. Okay also you're only going to notice that here in 35
the Div id root it's not taking the all space. So I want 36
the DID route to take the all space. So I'm going to go in 37
global CSS. I don't know if you have something in here but you 38
should have nothing now. You can remove everything and we're 39
just going to target the div ID rooot and set an height of 100VH 40
so it's going to take the full height but yes we to use this 41
Global. CSS so let's go in app again and import the global. 42
CSS that is higher global. CSS and now technically yes it's 43
going to take the all space okay so here it's a bit too 44
close from the edges so maybe we can create another box 45
outside so basically another div and I'm going to set a 46
padding Y so vertical padding of ten maybe and I'm going to 47
tell this box to take the whole space. Okay cool so we have the 48
layout and now what we're going to do is we're going to prepare 49
this to be dynamic okay so what we're going to do is we are 50
going to create a state that is going to contain the current 51
step okay so we'll have step and set step and here actually 52
we're going to use Typescript for the first time so Uh what 53
is a step? A step is basically just an enum that is going to 54
tell us what is the current step, yeah? So I'm going to 55
create a an enumeration for this value, okay? So I'm going 56
to create an enum that I'm going to call step. Like this. 57
And well the first step will be to set the question quantity, 58
right? So I will have for example set question quantity 59
and I don't really need to override this okay by game this 60
is going to be equal to zero but it doesn't really matter 61
I'm not going to use this string so the first step is be 62
this to set the question quantity the second will be to 63
set the question category right so set question category right 64
after that we have what yes we have the difficulty so the next 65
one will be to set the question 66
difficulty and after that we will have a which step where we 67
have the the game so maybe we can call that play and after 68
that we will have the score screen right so I'm going to 69
call that score all right so now well we want this step to 70
be a of type step like this so to do that to type a state 71
you're going to do it like this here you're going to provide 72
your type and now a step is of type undefined and this is 73
because for now here I haven't provide anything. So maybe I 74
could set a default step. So here is going to be step. set 75
question quantity. That would be the default state. This way 76
here step is of type step. For now it cannot be undefined. Now 77
what we could do is we could prepare a new function that 78
would be render screen. By step. 79
And so here basically we would just switch over the current 80
step so over the step and for now we just have one step so if 81
the step is equal to set question quantity I'm going to 82
break for now and here we are going to return a component so 83
I actually don't need to break here we're going to return a 84
component and I'm going to create my first component so 85
I'm going to create a new folder and actually that's not 86
really a component because we're not going to reuse it so 87
I'm going to call that features okay or you can call that 88
screen or you can choose your own convention I'm going to 89
call that features because for me it's not really a screen, I 90
call that screen when I have real navigation. So and I'm 91
going to create this component that will be set question 92
quantity. TSX I'm going to make that a very basic component set 93
question quantity and for now I'm not going to return 94
anything just a text like this and here I'M going to call set 95
question quantity like this and finally here I'm going to call 96
my render step 97
like this so technically here we are on the set question 98
quantity steps so we should render that and yes it seems to 99
be working fine Okay, so basically after that we'll have 100
other cases, okay? We'll have the case step dot 101
dot category and we're going to return something we'll have the 102
case step. set question difficulty and we're going to 103
return something else we'r going to add the case. Step that. 104
Play. And we're going to add the case step dot score. And 105
for now 106
and here we're going to return null for now okay so basically 107
this is our kind of custom routing system okay anytime the 108
step is going to change the component is going to change in 109
the screen okay how and by the way I forgot to put the image 110
here so that's going to be super simple right after the 111
header we're going to use an image from chakra UI like this 112
and we are going to set a source so we are going to 113
import the bubble image going to import it import bubble 114
image from assets slash bubble. PNG okay we're going to pass 115
this here we're going to make it absolute so we can position 116
it where we wherever we want and we want that to be behind 117
anything even behind the text if you resize so I'm going to 118
set a Z index of minus one and then I'm going to position it 119
where I want so I'm going to position it at minus 120 from 120
the right 121
100 from the top and ta-da that's what we have okay all 122
right so that is pretty much it for now so yes see you in the 123
next video to continue