Welcome to the last lecture of this project
and of this section.
And in this one, we're gonna implement
the functionality of resetting the game
at any point in time.
So what we're looking for,
when we click on this button here,
is to remove the the winner class
and to set all the scores
of all the players here back to zero.
So all the total scores, this and this,
and all the current scores should also be put back to zero.
So essentially, we need to set back
all the initial conditions of the game.
Now, we already did something similar
to this in our first game,
and so maybe this is a good opportunity
to leave this as a challenge for you.
And this one will be a little bit more difficult
than the one in the Guess My Number project.
But you can still try to do it.
So what I want you to do is when we click
on this button, as I just mentioned,
reset all the initial conditions of the game.
And it doesn't matter if your solution
will be dramatically different from mine, okay?
I just want you to try,
and I want you to write code on your own.
No matter if you'll actually achieve the goal
in the end or not, that is not point right now.
So just pause the video here, please.
And try to do at least part of this on your own.
So hopefully, you had a great time doing that.
And so let's now go back together here and do it ourselves.
So we need this btnNew,
and so once more, we will add an event handler on there.
So that's btnNew.addEventListener
waiting for a click, and then we want to execute
whatever happens here.
So as I said, we need to reset all the scores.
So let's start with that.
And I guess I already selected these up here.
So that is scoreEl0 and score1El, okay?
So these two scores, we want to set them back to zero.
Now actually, we already did that here,
so let's just copy it for now.
Okay.
Then we also need to set
all the current scores back to zero.
So that is current0El and current1El.
So current0El equal zero,
and then current1El also back to zero.
Next up, we need to remove the winner class,
so this dark class that we have here,
and now it's gonna disappear because as I move out
from this window, it will save and then it will reload.
So I'll only go half.
But you see this dark class, the winner class,
needs to disappear.
And so let's do that.
And so that should be player0El.classList.remove
and player winner.
Now of course, we do not know which player won the game.
And so we have to do this on both the player elements, okay?
And that's not problem at all.
So we already know that only one of these two elements
will have this class, but we can still tell JavaScript
to remove a class even if it's not there.
JavaScript will happily do that.
Then, next up, we also need to remove
the active classes on both players,
because again, we do not know at this point
which one is the active player.
So let's just remove them too.
Now, just copy it.
So player winner here is both active.
And then, we also need to set the first player
to be the active player.
So let's do that.
And in fact, let me just change the code here
in this line, because there's no need to remove it
from player zero, because, well,
player zero should be the active player in the beginning.
And so there's no need of removing it
and then adding it back.
So I will simply add it, all right?
And if it was already there,
then JavaScript will not add it again, okay?
So just like with removing.
So if the class is not there,
but we are still telling JavaScript to remove it,
it will not give us an error.
It will simply do nothing.
And if we add a class that's already there,
it will not add a second one.
And so here, it's not a problem.
So even if the class is already there
by saying add a player active,
we will not add another one, okay?
All right, and that's it for the visible part
of the user interface.
So we changed classes here and we manipulated the content.
But of course, we also need to set
our internal state variables back to the initial state.
So basically, what we need to do,
is to add these scores back to zero,
set the current score back to zero,
set the active player back to the first player,
and also basically start the game again
by setting playing back to true.
So what should we do here?
Should I simply take this code
and copy it to the other function?
And you already know the answer to this question, don't you?
So, of course not.
Instead, we will create a function
which contains this code, together with the code
that is already down here, okay?
And then we will create a new function with all of these.
And I'm gonna call this function init,
which stands for initialization.
So let me cut this code here,
and create this function here.
So again, calling init, which stands for initialization.
And this is once again just the function
that serves as a reusable piece of code,
so we need to know arguments here.
Okay, so this is the init function,
which will initialize our game.
And now, we also want this code in there as well.
And in fact, we want all of these code.
So all of the starting conditions
should now be set here in this init function.
So let's grab this and paste it here.
Okay, and now, these two are duplicate.
So they're already down here.
So this is the same as this and this,
so let's remove it from here,
and then let's move this one down a little bit.
Okay, and again I used option or Alt + arrow down
to move the line like that.
Give it some space here, and okay.
So this is our initializing function.
Now, when do we want this function here to be executed?
We want it in two situations.
So whenever we load the page for the very first time
or also when that button is clicked
that we were just working on, right?
So, of course, we need these scores
to be zero at the beginning, together with the current score
and the active player and all of that.
And so we used to have this code outside of any function.
And so it was executed right when the file was loaded.
But now, this code is inside of this function.
And right now, we are not calling
this function here at any point.
And so this code in here
will not get executed as the page loads, okay?
So right now, as we load the page,
you will see that it has this weird starting conditions
that it had initially, showing these random numbers
and showing the dice,
and nothing is gonna work now if I click any of this.
And so that's because our initial variables here
are not set, because this function does not run on its own.
And so as you might guess,
the solution to that is to simply run it.
So as we now load this script,
then JavaScript will find this function definition,
and then it will find this line of code
which runs the function.
And so then, by that time, all of this code here
will be executed and then our game will work just fine.
So let me show that to you.
And so now, we are back to looking normal
and our game should work.
Oh, and actually, nothing is working.
So let's take a look at the console.
But I can already guess what is happening, okay?
And so, yeah, we see here from these errors
that these variables are not defined.
Playing is not defined, and yeah.
But it's not the only variable that is not defined.
And so let me show you the error here.
So this error comes from something
that we already talked about very briefly before,
but I didn't really go into yet.
That's because in the next section,
we will really get deep into something called scoping, okay?
But let me just explain to you right now
that these variables that I defined here,
they're only available inside of this init function, okay?
So again, these scores, this current score,
this active play, and this playing,
all of these variables, I declared them in here,
inside of this function.
And so because of that, they are not accessible
outside of the function.
So we say that they are scoped to this init function,
because this is where I declared them.
And so the solution is to declare these variables
outside of any function but without any value.
And so it's then in the init function
where they will really be declared, okay?
And if that doesn't make 100% sense,
it will make after the next section
where we will really understand deeply
how scoping like this works.
Anyway, let's now declare these four variables here outside.
So I will use let now for all of them.
So scores.
And then remember, as we already did
in the fundamental section,
we can define a bunch of empty variables
by using commas here.
So currentScore, activePlayer, and playing.
So now, these variables, they basically live outside here.
And so what we do here then
is to essentially reassign them a value.
So we need to get rid of these lets here,
because that would then create new variables here.
But again, that's not what we want.
We want the variables, basically, to live out here.
And then, in the init function,
we only reassign their values.
So that's very different.
So declaring a variable is not the same
as assigning them a value, okay?
And so right now here, we only assign them a value,
but they still live outside here,
and that's why they are then accessible
in every function everywhere, all right?
And now, just to finish, we also need to use
this init function, of course, on the reload function.
So on this event handler here.
And so, just like before,
here, we now do not declare this anonymous function,
but instead, we pass in the init function,
which again is really just a value,
and so it's perfectly okay to pass this value
into this other function.
And just keep in mind that we do not call
this function here.
It is JavaScript who will call the init function
as soon as the user clicks on the new button.
And so now, everything will work just fine.
So we get five, we get five down here.
And let's hold it now.
And indeed, we moved to the other side.
And with this, we should win the game now.
So let's see.
Hold and indeed.
And now, here comes the test to see if this button works.
And indeed, it does, and we can restart the game
just like this.
This time, let's player two win the game here
just to see if it works there as well.
So that's enough points.
And indeed, it works.
But what matters is now that
as we click the new game button,
everything is back to normal
and player one is back to being the current player.
All right, great.
And with that, we actually finished the game.
Almost finished.
Let's set the threshold here back to actually 100 points.
So that is the limit here
on which we want this game to finish.
But with that, the game is ready
and feature complete and yeah.
I hope you're happy with it.
So congratulations.
Great job for making it to the end of this section.
That's already a really great achievement
and I hope that you can see
that you already learned a lot of new stuff here.
And now, you can go ahead and play this game
with your friends, and you can tell them
that actually, you coded this by yourself.
So the code you wrote on your computer
is what made this program possible.
It's what makes this really come to life, so to say.
So how cool is that?
And maybe even your friend
will then become interested in programming,
and you can do this journey together.
But anyway, with this,
we now really finished the fundamentals part of this course.
And once again, I really hope
that you can see that you already learned
a lot of new contents here in this last couple of hours.
So congratulations once again
and I'll see you in the next section,
which is really important, because there,
you're gonna learn how JavaScript
actually works behind the scenes.