Let's keep building or Pig Game.
And in this video,
we're gonna be concerned with switching
from one active player to another one.
So as we already know, whenever the player rules are one,
we will enter this else block, right?
So when the dice is not a 1,
then the current dice gets added to the current score.
But if we happen to roll a 1,
then we lose all our score
and it is the next players round, all right?
So in the previous lecture,
we implemented this functionality of adding the dice
to the current score only
as the player number 0, okay?
But now we need to make this work
for both player number 0 and number 1.
And so for that,
we need to keep track of which player
is actually the current player.
And in order to do that,
we actually need to keep track of which player
is actually the active player in a moment
that the dice was rolled.
So basically we need to know which player
is right now playing.
And with right now I mean,
whenever the button is clicked, all right?
So we will create another variable,
which will hold exactly that.
So it will hold 0,
if the current player is player 0
and it will hold 1,
if the active player is player number 1.
So let active player.
And since we start with the first player,
we set it to 0,
because remember that player number 1 is player 0
and player 2 is here in our code player number 1.
And in fact, let me explain you right away, why that is.
So the reason is that we will store the scores
of both players in an array.
So let me do that here.
So let or actually const, because it's an array.
So const scores equals an array,
which will start with 0 points for both sides.
And so these scores are actually the final scores.
So the big scores, which accumulate,
let me show that to you in the demo.
So that's these big scores here.
So these are the current scores,
and these are, let's say the total scores
that keep accumulating, right?
And so we are storing these two scores here in an array.
And remember that the array is zero-based
and so the score of player number 1
will be here at position 0,
and the score of player two will be at position 1.
And so that's why it will be handy
to have the activePlayer variable here,
also set to 0 and 1, okay?
And we will see that in action actually,
in the next lecture, where we will hold the scores,
but for now knowing which is the active player
is going to be important
to actually display the current score here
for the current player
and not just always for player number 0.
So instead of manipulating the element of player 0,
so the current score of player 0,
let's actually select the element dynamically, okay?
So let me show that to you.
So we will actually now do the selection right here,
document. and actually let's use getElementById.
And then here we need the class name.
So the class name is gonna be either current O,
for player 0, or current 1 for player 1.
And so maybe now you start to see once more
why we use the active player as 0 or 1,
because now we can use that variable
to basically build these collapse names, okay?
So when it's player 0,
we will then end up with current--0
and if it's 1,
we will end up with current--1
because that's gonna be the active player.
So what I just said is to do this.
So current--
and then the number of the active player, okay?
And so now on this,
we will get the text content
and set it to the current score, okay?
So again, this 1 here will always set the text content
on player number 0,
but here we do instead select
the score element dynamically based on which
is the active player right now, okay?
So this is a very handy trick
of building the ID name like this dynamically.
Now here, when we switch the player,
we of course will then need to change that value
from zero to one or from one to zero.
So let's do that here.
So essentially switching the next player,
that means to change that value.
So activePlayer,
and now here, let's not use again, the turnery operator.
So we can say if the activePlayer is 0,
then we want the new activePlayer to be 1
and else it should be 0.
All right, does that make sense?
So essentially we are reassigning the active player here
and we're checking whether right now it is player 0.
So if it is then here the result of this whole operator,
so which again is all of this,
then the result will be 1.
And so then activePlayer will be equal to 1,
but if this is false here,
so if the player is actually 1,
well then the active player will become 0.
And so essentially this allows us to switch
from zero to 1.
All right, so I think this would actually work already.
So this is the demo,
this is the real game.
Let's just make sure that it works and reload it.
And now as we roll the dice,
remember that we are player number 0 right now.
So this one.
So 3 gets added to 0 is 3 and 7,
so this works right now.
Three, let's wait for a one so that we can switch the player
and see what happens then.
Okay.
So now we're all the one.
And so now we should be player number 1.
So and essentially player 2.
And so now when we roll the dice again,
the new score should appear down here, right?
Because this here is current 1.
So this element here is the current 1
that we just defined previously
and indeed it works.
So something happened here,
but of course we need to reset the current score.
So the current score was just for this player,
but now we edit that for
to the current score of the previous round.
So as we switch the player,
we also need to reset the current score, okay?
So the logic of the active player is already working,
but we still need to reset the current score.
Also, you see that visually nothing changed yet.
So in the real game, when the player is switched,
this side here becomes white
and so the background kind of changes there.
Oh, and another thing is that this current score here
should also then be set back to 0 again, okay?
So basically the previous player
should have its current score here visibly set to 0.
So let me just tell you what happens here.
When we switch to another player,
so you see the current score
and now there's a 1
and so now this side here became white
and then of course the current
of the other player became 0.
So let's first take care of that logic
of changing the values
and then I will show you how we change the background here.
So let's go back.
And the first thing that we need to do
is to set the current score back to 0.
So current score back to 0,
and then we need to set the text content back to 0, okay?
So basically of the active player before we switch it.
So for example, player 0 was playing
and then we switched to player 1,
but before we do that switch,
we need to change the current score
of player 0 back to 0.
So we need to do that here before we do the switch, okay?
So basically what we do is the same as this,
but we simply set it to 0, okay.
So we're selecting the current player,
which at this point is still 0
and then we set his textContent to 0
and then we switch from zero to one, okay?
And actually we can also set the current score to 0 here,
but that doesn't really matter
because the current score is not bound to any player.
So saving it, now let's try again.
So all of this is still working,
but let's wait what happens on the one?
So that's a lot of points here, okay.
So the current score is back to 0 here
and now watch what happens
and yeah, nice, that's working now.
So now the actual current score variable
was also set back to 0
and so 6 plus 0 now on player number 1 is 6.
So as we keep doing that, it keeps adding here
and now we're back to player number 0, so this one.
Then I wrote another one right away
and so we switched to this player back again immediately.
But you see that the logic here is already working.
Now, the only thing that's left to do is that visual change.
So putting that white background here on this other player.
So let me show you in the HTML, how that works.
And so basically the player that is active
has this whole section here
with the player--active class.
So you see that this first section,
which is for player 0 right now has this class
because player 0 is always the first player.
But then as we switch to the other player,
we want to remove that class from here
and basically put it here on the other player.
Okay, so let's do that.
And as always,
we will start by selecting these two players.
And this time is actually a class.
So player 0 class and player 1 class.
So let's do that here and do that as the first.
So const player 0 element,
document.querySelector.
And now we need the dot for the class name,
so that's player--1.
And I'm just copying it here,
I'm too lazy.
And this 1 here is actually player 0,
so 0 and 1 right here.
And now let's actually change their class names.
So the player active class, so down here.
And for that,
I will now show you yet another method
that's available on the class list property.
Well actually let's start typing first.
So player0Element.Classlist,
and we already saw the remove method,
we saw the add method,
but now I will show you the toggle method.
So we will use toggle now.
And what toggle will do is that
it will add the class if it is not there
and if it is there, it will remove it, okay.
So we could do that manually also
by checking if the class is there
and only removing it if it is,
but using toggle takes that work away from us.
So actually we could have used this toggle method
in the previous project of the popup,
but back then,
I actually wanted to show you the contains method.
Remember that?
But now again, we will use toggle here because it is easier.
And so now we simply have to add this player active class
or actually to toggle it.
So if we do that on both then it will work
because on player 0 it will remove the class if it's there
and if it's not it will add it.
And the same thing on the other player.
And since we start with the player active class
on only one element,
so only on player 0 here,
then toggling both at the same time
will ensure that it's only ever
on one of the elements at once.
So let's now check that out
just to make sure we load it here
and let's wait for it.
It's taking a lot of time and yes,
so we switched the active player
and now it's also nicely visible.
And yes, we changed it back as well
and so that works beautifully great job.
And now basically the only thing that's missing
to actually make this game work
is to hold the current score.
And so that is gonna be the topic of the next video.