Welcome back, my friends, to another election today, we are going to continue working on our project
now before starting to explain the rest of these the things that we're going to apply on this game.
When I opened the original game, I saw that I'm missing this background image.
So you're going to have it in your starter project.
Don't worry about that one.
But that is the image.
So what I'm going to do is I'm going to just open this in drag and drop it here.
Now I'm going to close it.
Yeah, here it is.
Big here is now the lifesaver as done its job relo everything.
So let's continue working.
I want to get rid of this dot here.
I mean, this is actually the status of the player and what else?
I want to get rid of these blocks here.
Right, because we don't have we don't have it when we start the game.
Now, there are a couple of things that we need to do.
The first thing that I want to just point out that you can remove this invisible class from the player
to and from the player one.
And we will we can say we will add the invisible class in the player with zero winner through.
Jess, so I'm just going to copy it and I'm going to put it right here.
So how are we going to do it?
That's very easy.
We need one more line of code.
Now, if I go here, I will see the winners.
And that is not what we have here.
But because I wanted to live through the year, we will be a little bit different.
So first things first I want to find so you can go here.
I want to find this dot here.
So inspect element and that has an idea of life, that zero in the other one for the player.
Number two, he said live dash one.
So as I told you, we're going to use where we select.
Are we going to use Galam element by the you don't have to worry about it now.
Said life status to empty.
Now how we can do that.
So I'm going to still use documented query selector get elements sorry id element bidi in here.
I'm just going to say life of a zero.
Right.
And what we're going to do is we're going to see style that display to none.
And I'm going to save it, and here it is, you don't have it, and if you go there on where is it live?
Zero.
Mm hmm.
You can't see it by way here.
Now, it's just going to refresh here somewhere here.
Here it is now.
The live zero class player style display none.
So we added this style display none.
So we need to do for the second one.
And I'm just going to copy it.
I'm going to put it here and I'm going to see that one.
And that should do the job.
Now, both of the players, they don't have any status because they haven't started playing the game.
Now, I just want to get rid of this for you to get rid of this one.
For that reason, we are going to use enriched HTML and we're going to set that enriched HTML to empty.
Why?
Because that div players score player one score block does contain.
So if I remove it from here, here it is.
It's nothing there.
So I'm going to do it through actual I'm going to do it through the actual JavaScript and you can just.
OK, let's first see how that will go.
And after that we're going to just make them we're going to comment them.
Now we're going to say document dump and get element by bidi.
And I'm just going to say player.
Let's copy that one.
So I have the same class and the same idea.
You can use even the class if you want with a single player.
OK.
Now, when I want to do as I told you, I'm going to say ordinary HTML to empty like that.
Let's see if that was going to work.
Yep.
That is working now actually you don't need to hear this one, but I'm going to leave it there because
I'm going to use it for something later.
He will see.
So don't delete that one because you're going to need it.
Right.
And I'm going to copy the other one.
And it's a good idea if we start with number zero on top.
Right.
So that set the block player block to empty.
No, here we go.
We do have now our games start to look like this.
OK, now how we can add class here to this guy here, because before remember, we did had the class,
where was it and what else was here was invisible.
Now we will add it through JavaScript using class list and we're going to add it.
You're going to say, OK, we're going to add to this list.
Now, we haven't done that maybe before.
Now add class invisible.
So I'm going to do this.
But after that, when there are weener, I'm just going to remove that class.
Right.
So that is cool to winners.
So what we going to do is document that query selector and I'm going to select here with Wiener Dash.
So I think I have winner one and winner zero.
So I'm going to start with zero hoping that I have class list that end and I'm going to add the class
invisible.
No, I'm just going to show you one thing.
So here it is, this wiener here.
The idea I'm catching the ID, so I have two ideas for the first player.
It's Winner zero and the for the second player is its words.
And we know one.
Right, this one.
OK, so I'm going to save it like that and I'm going to go there.
So there you go.
The image, it's not there, but I'm just going to show you I'm going to go here in a wrapper and I'm
going to search for in the visible.
OK, now this class is something that I have coded by myself.
So it's invisible.
When I said visibility to here in opacity and after that I said the visible class where I give visibility
visible again and opacity back to one.
Right.
That is what I'm trying to do here.
OK, you don't need to know anything else now.
We need to do for the second one, for the second wiener.
And that is actual wiener one.
So I'm just going to copy it, I'm going to put it there, and we know one, save it.
And there you go.
If you don't use this, live a life saver, then don't worry.
You just refresh.
So that is pretty much how our game.
So now the both of the games, the finish one and the one that we need to start working on the pretty
much same.
Right.
So I think we need to stop here.
We have learned a lot of things.
So we said the player score to zero.
We said the status to empty or invisible the player block where we put this building blocks there.
And also I forgot to comment the other ones, you don't need them anymore.
We're going to need them a little bit later.
But that is pretty much what I want to achieve for this lecture.
We add this cubes here that Dice's in the background and that is pretty much it.
So I think we are going to roll in next lecture and start building some listeners.
And yeah, we're going to create add listeners on the buttons.
Right.
Sorry, we're going to add event listeners to this button and after that we will do at the end with
the restart.
So we start we're going to leave it probably to you.
So thank you very much.
I hope you enjoyed it.
And by the way, you should always not zoom this one too much, make sure it's 100 percent right, because
otherwise this building blocks will be a little bit out of.
Yeah, they will not be correctly placed.
Right.
So thank you very much.
I hope you enjoyed this one.
And I will see you in the next one.