Original subtitles

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.