Instructor: So let's continue our coding journey
and we're getting really close
to having our first real javascript application.
So by now you have already learned
a lot of stuff about DOM manipulation
and even other things.
So in this lecture we will just continue
practicing some of these things
and implement another feature in our game.
Alright this is where we left our game
so let's now implement this functionality here
so when we hit this button
that the game starts from the beginning.
So if we have a button and an event
then of course we need to listen to that event.
So once again we will use an event listener.
So let's take out the name of the button
and it's simply button new.
So document.querySelector
and btn-new.
And by now you already
really know how to do this.
So add event listener and once again
we are listening for a click.
And we will once again use an anonymous function here,
which by now you know in your sleep,
right, what is this.
Okay cool.
So what do we have to do when we want to start a new game?
The first thing that I can think of
is that we have to reset our player's scores.
So we set our scores back to
zero and zero
and we also have to say that the activePlayer is
back to being zero because that's always the player
that starts, so the first player.
And also if there is some roundScore left
from the last game.
So from the game that we were playing
and we also need that back to zero.
So roundScore should be zero, okay.
So if this is starting to look familiar to you
then you're not the only one
because actually we already wrote
that exact same code up here, right?
So this is not ideal, not at all.
So once again we should stick to our dry principle here,
so not repeating our code.
So what can we do here?
And you guessed it once again
we are going to use a function
and I'm calling this one init function
because this is to initialize the game.
And the logic behind this is that once again
we will write a function
and then even before doing anything else
we will run that function
and this will then initialize, or start, our game.
So not only when we hit a new game button,
but also right in the beginning
when we first load our application.
So I'm going to delete this from here, okay?
And I'm writing my init function now.
So function simply init and again it doesn't
receive any parameters.
We just want to use this code.
So I'm removing it from there and putting it right here
and then all we have to do is to simply call init function
right in the beginning.
So the first thing that we do
is to call the init function.
And so that piece of code that we had here
will be then run.
Now the things that you see here
are also things that are done
right in the beginning of the game, right?
So of course it also makes sense
to include this right into our init function.
So all the things that happened
before we can start to play
will now be placed right into this init function.
So we call this function as soon as we load
our application,
but remember we also want to call this function
when we hit on our new game button, right?
Okay, so we could do it like this.
So we can simply call the function in here now
and that's it.
But there's another way of doing this
because why should we create
an anonymous function here, right?
So this anonymous function only to then
call another function.
So it doesn't make much sense.
Actually as we set up our very first event listener
I told you that we can write any function in here,
in this argument.
So I'm just going to delete this
and what I can do now is to not call the anonymous function
but instead our init function.
And actually I'm not calling it
I'm just passing it here into this even listener function,
this method.
And that's why I don't need to use the
function call operator here which is this one
because if I would then this function would be
immediately called, but I don't want that to happen.
I just want to tell this event listener
that hey when someone clicks this button
then please call the init function for me.
So that's all that I'm doing here.
So back to our game init function, which starts the game.
Another thing that we have to do here
is to actually change back the player names.
So when someone wins the game we print winner here,
but when we start a new game of course
we want to say player one and player two right there.
So let's do that as well
and we know from up here.
Yeah it's right here.
So we know that these are called name
and then the number of the player.
And actually let me just copy this from here
because by now we already know in our sleep
how to do this, right?
So we have to do this for name-1 and two.
So we don't need this active player variable here.
So 'Player 1' and now I'm simply duplicating it here,
for 'Player 2'.
So 'Player 2' here.
And since we are using getElementById
for all of these IDs here,
let me just do this here as well.
So, getElementById and now remember we have to remove
this hash symbol because this is only
for the query selector.
So this looks pretty cool.
So let's now check this out.
Alright so let's roll the dice.
Well nothing's happening
so we probably have some bug somewhere
so let's open up the console.
Alright, so we cannot set textContent of null
in line 93.
So let's check out where that is.
And of course, I did make mistake right here, right?
And you probably already saw it coming
because the players are not one and two,
but they are zero and one.
So of course I cannot set the content
of an element called name two
if there isn't one on the page, right?
So let's now load this and yeah, so it actually works.
So we already know that it works because
before we had some different values here
not zero, zero, zero.
But we see that our init function
is already doing its work by setting everything to zero
just because we call it right in the beginning.
So, right here before doing anything else
we call this function.
So let's now play.
Roll and now player two.
And hold.
And with this we can already win
because remember it's still set to 20.
So I'm saying hold and now I win.
Cool.
So now if I hit the new game, let's see what happens.
Alright, so we are back to zero points here and here,
but what we still have is this winner class here
which formats this tag are red and also the active class.
So we need to do a couple more things
in our init function.
So first thing is to remove the winner class.
Let me actually check where we put this winner class.
Alright so we put it here.
So let me copy this to make our life a bit easier
and just paste it here.
Alright so player zero
and this time I'm not making the same mistake
and now not adding but removing.
And since we don't know who won the game
we will simply remove this class from both.
So it doesn't matter even if the class is not there
we can call the remove method without any problem.
And actually we will do the exact same thing
for the active class.
So the class that defines, or that shows,
which one is the active player.
So again of course only one of these is the active player
but we have to remove it from both
because we don't want any of them to be the active player.
And now only one thing to left
which is to set the first player to the active player.
So I will just duplicate this line and set it to add.
Now this sounds a little bit strange, right?
First removing it then adding it,
but I'm doing this because imagine that player zero
was the active player
then in this case the active class would be there.
And if I then call this method here, so this line,
then another active class would get added.
And then we would have two active class
and of course we don't want that.
Because if we later went to remove that class
then there still would be one left
and then the styles associated with the active class
would still apply, and we don't want that.
So we need to always remove them.
And actually let me put this down here
so that the ones that belong together are together.
So we first remove these two
so hat we are sure that no active classes anywhere
and then we add the active class back to the first one.
And with this we should be good to go.
So player two is in the lead this time,
but I'm still rolling a lot of ones.
Alright so I'm going to let player two win.
So I click hold and alright player two won.
Everything looks nice.
So now look at these numbers
and at here when I hit the new game.
Alright, so this works just fine.
Everything is back to zero.
Player one is the active player.
The winner class is also removed
and everything is fine.
So if I play again now.
Let me hold it here.
Okay so I won.
Now it makes sense that the game stops with this, right?
But instead if I continue hitting this
the game continues and now we have two active players
and all of this is really weird
and not working the way that it should be.
So there's one more thing to do
and that will be in the next lecture.
So if you're curious on how to solve this problem
then don't wait and come right with me.