Welcome back to the first lecture of this DICE game so well, we are going to do is we're going to check
that we have two folders.
The first folder that you need to you can go and download, he's actually the the start player.
And the other folder is actually the finished version that you don't need.
But if you want, you can download, because my goal is you to work with me, not just to download all
of the things and after that to to not work.
That is what I don't want to do, but what I don't want you to do.
But that's your option.
That's your that's your choice.
And you can download or whatever you want.
Now I'm going to work with this one with the starting files.
So if you go and I'm going to put it in the desktop, if you go open the folder and start, you're going
to select it.
This is what you can get here.
Are you going to have Cyesis folder?
Imja folder, JavaScript folder says it index.
So the mostly you need this index to learn what's happening inside.
Now, this is something that I designed in here in the wrapper.
I put a lot of not a lot like 300 or 400 lines of code and this is actually going to produce me in to
see us as wrapper does.
So that's why in the main file, I do have to see us as files.
So I have the originals files, the cases, and I have these rhapsodies, rapper nauseousness in the
styles.
Let me just check in the styles.
I do have just basic reset and everything else is in the wrapper.
No, I want to explain everything about this structure.
So here I do link my so you can go to font.
Awesome.
You can create with your username kit, you can download it and put it here.
Maybe it's not going to work with mine or whatever you can do, you can grep for an awesome CDN.
We're going to need phone.
Awesome because we're going to just use some things right.
Just wait here it is f a fair circle, right.
So make sure that you use your own because it might not work.
So that is pretty much what I want to try to explain.
I also load Google phone API, these balsamic sense.
This way you can change it.
That's why that was the display of the phone was like that when I just showed you.
So I have that two plus in the juice.
I have dice that which is empty at the moment, but that needs to be loaded here.
All right.
So I'm grabbing it.
I'm loading it here.
Source.
I'm putting the source here.
So if you want to change it, just change it and change it here.
Change the name and change it here.
Right.
So you don't need to worry about the success unless you do some little bit stylings here.
Right.
What it's in the IMG folder.
In the image folder, I have the winner for picture.
We just from a splash and thank you, Chris Kendall.
Right.
Then the other one is again from a splash.
He's going to play our cards.
We're going to use this one for the player one or for the player team.
This is from Eric McLean from a splash again.
Now, these dice one dice, two days, three days, four days, five days.
Six are actually the diocese we're going to see and dash one dash to the.
They're like that because you will see that we're going to modify some things based on those we can
we can just exclude this one and we can replace with something else.
And you will see why I chose to do this way.
Now, going back here, we've got to start from the top.
So in the body, I have this wrapper class and I also have rapaciousness.
Everything that is stored there, it's coming from those those foushee.
Right.
So I have flour, one and a half player two.
So I have two panels.
I have this player where the diocese alone at the moment there is a dice six.
I'm going to show it to you and I have two buttons.
Roll the dice and the restart button.
That's pretty much it.
The body's ending.
So there there's a lot of things here in the players.
But before that, I want if you using this code, which I'm going to use at this stage, I want you
to go to and install this extension.
It's going to be a live server by week day.
Right.
So I use that one, install it, find it.
You need to search it here.
It's going to say live server and it's going to give you that one money.
Installed, that's why it's like this button, so you need to install it in after the installation,
you will have something like just going to close it.
They will have option to go here.
And where was it just to show you?
Because it's now it's active in my case, but you can just open right click and you can open with live
server in there.
You're going to have it everything that you're going to do.
Some changes here in the HTML player 13, for example.
If I save it, I don't need to refresh.
It's going to be already there.
Right.
That's what the Purpose and job of Life server is.
So you can install it is using the port.
This one and this was the thing that I was talking is going to show you go live.
You can click it from here and it will show it again.
But you need to close the second part.
That was pretty much it.
No, everything here, it's not working.
It's not working because we don't use it.
The JavaScript now, first things first console log
from the JavaScript and say, let's start, save it.
Let's see if it's going to work.
You don't need to refresh, by the way, but that's a bad habit.
Here it is.
Mine is working.
So if you don't see this one, don't worry about this.
You don't see this is coming from I'm going to show you this coming from this kid here.
If I remove it and there's some of the things will be missing.
But, yeah, you're not going to have that error.
Right.
OK, so.
Means it's working, so if it's not working, just maybe if you don't use the same path, you can just
use this dots forward slash and go into just the right.
But should work like this?
No, let's continue working here and remember that I didn't explain the panels.
So I have a panel for the player one.
And actually this is the panel.
I'm just going to expect it.
Here is panel one panel for the player.
One is actually player zero.
Player one is actually player two.
So I have right and left panel right in the left panel or the for the player one.
We do have the IMG, we do have the panel live circle.
Which one, which is this one.
Right.
We also do have these blocks here.
These are coming from this scoreboard.
I'm just going to close this one because it looks ugly.
So if I remove some of them, if I cut these three because they are identical, it's going to be only
one.
Right.
So that is how we're going to build the blocks.
Now, I do have this 50 here, the score, and I do have this winner here.
Now, the first things first, I have just put you there that you need to do what you need to add the
class invisible because I don't want to see this lady here.
Right.
Same goes.
So it's exactly the player.
One in player two is panel is exactly the same copy, but it's shifted on the right.
And we have a little bit styling with the great color.
Now this invisible girl will be invisible and we're going to make it visible when we when we are when
we actually the player wins.
So we've managed to clean up a little bit the code.
Right.
So we haven't started yet.
So we managed to clean up the code.
What else we need here.
So we need to come up here and I need to set up a couple of things.
First, I'm going to create two variables called live player in.
The second one will be player scores.
In this, by the way, player scores will be will be honoring in this area, will hold the values for
the.
So he's going to be zero zero at the beginning, is going to hold the values or the scores for the both
of the players right and left player.
I'm going to set it to zero.
And actually that will be the first player.
It's going to be this player here, actually.
Right.
So when it's left player, we're going to change it to be one and that will go for this player.
So we're going to play zero one zero one with this one.
So the first one, I always want to start the game with the player one.
That's why I just put it here.
Sometimes it's very easy to put it so if this confusing just player zero in player one here.
Right.
But you don't have to.
So it's going to be super, super simple.
No, we can see that this dice is here and in our final let me open the final one.
Which one was the final?
This one in the final one.
We don't have the dice right when we start.
We do.
This is empty, right semi's here.
So we have a lot of things to do.
This is fifty.
We need to remove we need to remove this one and the same.
We need to remove the active.
OK, now.
So what we need to do, I'm just going to use the query selector and I'm going to see darkman dot query
selector and I'm going to use the dice right now because we don't know.
I mean, I know, but you don't know.
Where is this dice.
Here it is.
So I want to target this you here.
I don't want to target the whole panel.
So if I cut the whole panel, look what will happen here.
Actually, I'm going to cut it the whole panel.
So I just want I don't that's why I'm not going to target this class.
But I'm going to target only this class here in the name of the class is Dice.
So we know when we use Querrey selector, we can target by their ID or by the class with the class we
use.
Always that.
So OK, now I do have dice.
I'm not going to store it in a variable here because simply remember that we can just play with the
style of these dice here and we can just make it style display.
This play and we're going to set it to none.
OK, I'm going to save it now and let's see what's happening.
Nothing is happening.
Why?
Because we might have some error.
So Querrey Selecter Die's style display, none should work.
Let me check why it's not working.
Maybe we are just.
OK, it's what I was looking at, some of the hours I was looking in this room, but this year wasn't
looking here.
So it's working, right?
Oh, absolutely I am.
So if I comment this one.
Sorry, guys.
There you go.
Here it is.
But if I can comment that one, I don't know where was my mind?
I was looking into this one, so that's pretty much it.
We had one of the things also remember that we can add text content to some of the fields here.
And I have these final score, 50 and 50 here.
I just want them to be zero.
Now, if I go here and say final score here is so I have final score of one for the player to have final
score of zero for the player, 50, but they're IDRs.
So I'm just going to copy one of them.
I'm just going to paste it like this because I don't want to mess it up.
So now I'm just going to say document don't get girlyman by the why is not giving me the option.
OK, here's the go get element by and I'm going to say, OK, final hash.
We don't need to actually use hash because this is not query selector.
We can we can achieve same thing with query selector.
But I want to refresh your memory that we can get the elements by Derrida and I'm going to say, OK,
final score, let's copy this one.
I don't want to make I want to be smart here.
And what we can do, we can set the text content.
Yeah, we can set it to zero now I'm not going to save it now.
It's fifty on both sides so I'm going to save it here is going to be zero because this we just set for
this player.
I'm going to do it for the other player.
And that was clear, number one, man, I need to be zero as well.
OK, set, clear.
Score to zero,
disappear or set display none for the dice in the middle.
Right.
That is pretty much it.
What we have done with this two parts and we are done for today.
So we achieved a couple of things.
So we just disappeared this.
But these dice here and we just said the text content to these notes here.
So that's pretty much what we have done.
I've explained the whole structure of this index.
Also, I'm just explaining that you can grab your own kid for an awesome four year user and this will
be generated a Newquay for you.
Right.
So if not working, please do that or just grab a CD and link to it to find out something.
You're done right.
You're done with that and make sure that you're putting here.
So that's it for this lecture.
I hope you enjoy it.
We just have a walk walk through to the entire structure of our project.
So thank you very much.
And I will see you in the next one.