Welcome again, ladies and gentlemen, and we are going to do is we are going to work on this reset
button.
So remember that when we reset, I want everything to be like this before we start the game.
I don't want this day to be there.
I don't want this result to be here.
Also, what I don't want to is actually this block to be invisible and stuff like that.
So when I click reset, I want to something to happen, something to destroy the game and reset it back
to normal.
Now, what I'm going to say right now, what I'm going to do, you need to listen to me a little bit.
So I'm just going to create this reset right now.
You don't have to write it with me, but if you want to write it with me, it's OK because we're not
going to use it.
We're going to change our mind in like two or three minutes.
And I'm going to tell you why, because that is not the best practice.
But I would like to show you that even like that is working in you can do it with me or you can just
sit back and watch what I'm doing right now.
I want to target this button here, this BGN reset and the class is BGN reset.
I'm just going to copy the class.
I thank you.
So what I'm going to do is actually I'm going to say document that query selector and I'm going to target
this one and I'm going to add event listener right when I click on one the found to do something I want
a function that whoops.
Yeah.
That wasn't working like I should intendant right now.
I'm just going to stay alert, reset and let's test it out now when I click here reset.
So obviously we are being able to do something so our function is working.
The query selector, we select what we want and rest is history.
Now you can comment this one if you want.
What happened.
OK, so we want actually to get the document query selector.
I'm just again going to use the query selector.
I'm going to select the dice.
Right.
And I want to see style display display to none.
So I hope I got this right in this class.
So I'm just going to roll it.
I'm going to say reset.
Here it is.
The dice is gone, but I still have the stay.
They still have this resolved.
I still have these blocks here.
So I'm far from the result.
I once I'm just going to copy this one.
I don't need to copy actual because I'm going to get with the document, get element by the get by idy
in here.
I'm going to say, OK, I want the final score, final score of zero and I want that text content to
be back to zero.
Right.
And I can copy this one again now and I want a final score for the player.
No.
One, this is for the for the player number two.
So do expect when I start playing, OK, this is working.
When I said I want this to be gone, this dice and these two, here it is.
Now, all of the three things that I've done in here, it's already been gone right now.
I have only a couple of more things to do now.
I want to reset the Blier square block.
So document that get element, but.
Oh my God.
Element Viddy.
And I hate without to finish it for me like that because sometimes that is not what you want.
So Blier.
So I want to play of one score score block.
So I want that one to be said, the HTML back to empty in just going to copy it, what I'm going to
do, I'm going to pasted one above him because I want to target the score block of zero.
Now, this should fix all of those issues, right?
So I'm just going to play it to restart.
It is now only the state is there.
So what I can do is pretty much document.
Document don't get element by the come on buddy and I will say live of one of zero and I will say style
display of none.
Right.
And I'm going to copy it and I'm going to do it for the first one.
You know, I'm pretty much done because I don't know which one is going to be so we can check, but
make sure that it's a good idea to have both of them.
Here it is.
Now everything is done except we don't have the winner.
If we have a winner here, I need to reset that one as well.
But at this stage, we don't have it.
Now, this reset button, it is working.
It is doing its job.
But is this ideal?
I'm just gonna show you one thing.
Look at this code here and look at this code here.
It's pretty much so.
As I told you, if we have the winner, we have to do something similar.
So we have everything here.
So that is not ideal because we're repeating the code all over again.
So this is a pretty much same old same code, right?
Same same same code.
And we are just repeating here that is pretty much ugly.
So I'm just going to comment this out.
So somebody have done it with me.
Just comment this out.
This is a one way you can solve the problem.
But I want to solve the problem and I want to show you something else.
We can minimize the the code by doing this by the end reset
at the event.
Listener, it's going to be click in here.
I'm going to say start only.
So start or in need or begin whatever you want.
That that will be the function name in the function name.
We will define it here.
So why call it start.
Because this I'm going to use it this function, I'm going to use it for initializing all of the values,
all of these values for, um, for starting the game.
So I'm going to put the function here function start like that, doesn't require any parameters, doesn't
require anything else.
So what I'm going to do, I'm just going to grab everything from top.
I'm just going to leave the variables there.
Don't worry about the variables.
They're not big problem.
So if you want, you can comment like this to know what's what's been happening.
You can write a comment here, but I'm just going to cut it from here.
All right.
And I I'm going to put it in the start.
So, OK, now, this is not going to work here because we have a problem.
Now, when I click this restart button, it will work because here we have the same query selector.
We just doing things right.
We just making things invisible.
We're hiding things.
We're setting to zero.
So the restart will work.
But the start we will you will see now the start will not work.
And why is that?
Because we need to call the function here because we need some of the variables start.
So doing this, it will call it here and it will initialize some of the things for us.
Now I'm going to refresh and now it's going to work.
Now, even the restart will work now.
Even the start will work.
But one more thing that I want to add is that this game as actually
C is still running in the background.
So doesn't mean that we are not calculating the result is still running in the background.
So that will be our final step of the game.
And that means that we need to destroy the game.
So how we can do this.
So there are different ways.
But I want to make it as simple as.
I will create a boolean variable called game status
is going to be variable, but he's going to have it's going to be from boolean type game status
in this game status variable.
I'm not going to set it here.
I'm going to set it in the start.
Right.
So after this.
After this, I'm going to set it to true.
Now, this means until we're playing the game, this game, until it's here where it is, until it's
right in this block here, this game will always be true.
Right.
And I'm setting that one here where it is the truth.
So every time if I access this variable here inside these Mithian roll dice, it will be true because
I said globally it's the same as I said it here.
So this function will be able to access that variable and it will be true unless we change it.
Now, I'm going to grab this entire entire if else.
Right.
I'm going to grab it.
And I'm going to say, OK, if gained status and I'm going to paste everything back, so means that
if gained status, this will be true, it always go inside.
Right now, we need to do is to change one thing, right?
We need to change one thing.
And that is we need to.
We need to add to the variable we need to add here, so when we are declaring there is a winner, we
need to say, OK, the game game status should be equal to force.
Now, doesn't matter if we click on the button roll dice, it would not go here because the status of
the game is already changed here.
When we reach when we have a winner, that means bam, OK, now we're done with the game.
OK, so let's see what's happening.
So I'm going to reach to be a winner in here.
It is just like the game.
We don't we don't see this one spinning anymore.
Right.
Because the result is twenty one.
And if we inspect the element we have a winner.
Right.
So we can go with here.
We managed to successfully block the game because the game status, it's not true anymore.
It's false.
This is how you can tweak the game to say, OK, this is because the status is false.
I would not be able to to create a new variable, nothing else.
Right.
So other ways you can do is when you reach the twenty one more than twenty, you can just hide this
button here and you will not be able to click it.
That's one way.
But that's not ideal and I'm not going to do it like that.
Right.
So the restart will work and everything should fire up.
Right, so let's test it again.
Here it is after 20, a Congo war, we have a winner, we have a winner, and the guy winning is the
player, number one.
Now, one more thing is left, and that is to show that image.
So how we can do it here?
I'm going to say document that where we select her and what I'm going to select here is actually the
winner dash.
And plus, we can get the live, live player again, right, with that trick.
So I'm going to say class with class list, remove what we put the class.
They're invisible, right in Astarte.
So I'm going to remove this class from a winner.
Does it matter which one will be right?
So because I'm targeting with this guy here with the live player so it will know our program is getting
smarter.
OK, so I'm going to remove that one and that's pretty much it.
What I can do, even I can just document that query selector.
I can hide even the dice from here.
I'm not going to expect here to set me set just to hit somebody with satirised display.
Doesn't matter.
We can do it like this.
So let's refresh.
Roll the dice every year.
And how is this possible?
We have a winner and I have one winner.
Right.
OK, what is happening here.
OK, I can see what the problem is, right, but I hope that you can pass the video for like a minute
or two, doesn't matter how much it will be the video and think what it can be the problem.
Right.
But I want to just show you that you need to look at here.
Here's the problem and you need to find out why I'm just targeting different winner here.
What's the problem?
OK, so if you pause the video and if you couldn't find it or you could find congratulations, this
is happening, why?
Because we are toggling here to the different player.
So actually here we are doing everything for that player.
And after that we are toggling for to display the live for the other player.
And that's why it's here.
We are getting that live player, the other life player, actually.
And that's why when I when we have a winner, when the player with zero is a winner, actually, I have
here we toggled one and a half.
We know one, actually, it's not winner zero.
So basically tackle it back because here it will go only once.
You can copy this line here.
So you're not going to break the program.
You can copy this line here.
And if this was one here, it became zero.
Here it will be game one here again, if it was zero here, it will be one in zero here again.
All right.
Just dial it back to different player now.
OK, that is gone.
Let's play this one.
Twenty three.
Here it is.
That is going to happen there.
So that is the winner of actually that is the winner.
Twenty three.
Right.
I'm just going to restart it again, make sure it's working.
The winner is this.
Make sure it's working.
Yeah.
Again.
Come on.
The player two will be a winner sometimes in future.
I just want to see if it's working or not because constantly I'm hitting this player.
One here is the player two is the winner.
And that is pretty much for this game, right, so we can just test it one more time if it's working
or not.
So I have a winner, one, I'm just going to restart a wing one again.
I'm going to restart it.
Come on.
What's happening with this?
Player number three, always losing here is OK.
So everything else, it's working as it should.
And this is how I would set the game.
So what we did here, we just removed everything from the start.
We put it in the function.
We call it bedient reset.
Now, this function, I don't just use it for between reset, I just use it even for declaration of
the variables.
That's why I call it in the beginning.
So remember, otherwise we will have a duplication of the code.
And that is not what we want in JavaScript.
So thank you very much for being with me.
And I hope you like the way this program I mean, this game is working.
So it's not something the best game in the world, but it do its job and you learn a lot of things.
That is what you need to be proud of.
You learn a lot of things.
You learn how to use the DOM, how to manipulate data through using query selector, get Elliman by
adding classes, functions, whatever we have done before.
Now you have it here.
Also, you have the success or the SAS files.
You can play around with them.
You these are the images you can play around with images as well.
Right.
So whatever you want, you can just test it out.
This is the wrapper that you can add more and more things here and that work should be compiled into
this wrapper here.
Right.
So everything that you change in the wrapper because the main is only important wrapper should be there.
No, I use that.
I'm just going to tell you which extension I use for this one.
So I think I think lifesize size compiler, this one.
So I've used that one so you can use this one and I think should work.
Right.
So watch SAS.
Here it is.
If you hit it, it's going to say working in any changes you make is going to show you to close this
one.
This is not a or SAS course, but I want to tell you something.
So I'm just going to make your change.
I'm going to save it and I'm going to have success.
And that will be green in my code will be added here in the sorry, in the wrapper.
Let's change something and you will see how it will affect.
Oh, let's go top.
Let's put the box shadow or in a wrapper, I'm just going to say, I'm not sure if I can see I can see
the background color is that one.
I want to set the background color to red, just red, not something like that.
And it's seeing success here.
And we can't see it actually the color.
Right.
That is the problem.
OK, but we can see the color here on the panel.
So I'm just going to set it to black, but I'll save it.
And here it is.
Right.
That is what you need to understand that just going to return it back to normal enough that you can
just close it.
You don't need to do it.
So that is pretty much it.
I hope you enjoy it so far.
And I will see you in the next lecture where we are going to do something else and stay with me.
You're going to have those these two files finish in the starting one.
I suggest you to use your own I mean, start with the first starter one and then to go from there to
use that file and build up the application, because together with me, you're going to learn it.
Otherwise, if you just copying and pasting, not going to learn much.
This is JavaScript.
You need to get your hands dirty and that's it.
So thank you very much.
I see you in the next section.