Jonas: In this lecture,
we will continue to build our project,
and developing the game logic.
So, in this lecture, you will find out
what the ternary operator is, and you will learn
how to add, remove, and toggle HTML classes.
All right, so, we are still in the event listener,
which controls what happens when a user clicks
on the roll button here, right?
And so, we already calculate our random dice number,
and we also already displayed the corresponding dice number
in the middle of our user interface.
So now we need to continue developing our game logic here
according to the number that your user rolls.
So if the user rolls a number different from one,
then the score gets added to his round score,
and he can continue to play.
And, otherwise, if he rolls a one,
then it's the next player's turn.
So, let's do that, using an if statement, right?
So, if the dice
is greater than one, then add to score,
so, Add score,
and if not,
then it's the next player.
And I really like to do it this way,
so, write our if statement first,
and then add a comment telling what I'm going to do.
So here, I said that the dice number
should be greater than one, but I could also have said
simply that the dice would be different from one.
And since we already know this one here,
I'm going to show you the difference operator,
which is simply this exclamation point,
and then, equal, equal.
And this is the one that doesn't do type coercion.
So, remember, the equality operator,
we have the triple equal,
and this one doesn't do type coercion,
while the double equal does type coercion.
And it's the same for the different operator.
So we have this one, which performs type coercion,
while this one with the extra equal,
which does not perform type coercion.
So we always want to use this one.
All right, so, let's add the dice result
to our round score.
So we have roundScore,
and now, I'm gonna use the operator
that I showed you in the introductory lectures,
which is the plus equal operator.
And now, I can simply add the dice.
Right?
So, once again, this would be the same as writing
roundScore equal
the current round score number plus the dice.
But this here is much simpler and cleaner,
so that's how we do it, right?
And, again, we can use the roundScore variable
right here in this function,
because it was defined here in the global scope,
and therefore, due to the scope chain,
we have access to that variable in here.
So we updated our internal variable value,
but we also want to display it in the user interface, right?
And we actually already did that down here,
which I deleted, but we can get it back from here, right?
Because you already know how to do this.
So, remember this trick here
that works with the active player.
So if the active is player is the number zero,
then the current-0 element
will get the textContent, and if it's player one,
then the current-1 element gets the content.
And the content that we want is, of course,
the round score, right?
So, each time after the player rolls the dice,
we want to first update the round score,
and then display the round score in our user interface,
and that happens in this element with this class.
Okay, so let's quickly see this in action.
So I'm refreshing, and I'll roll the dice.
So this is adding here, because I have
the active player as one, right?
So, let's quickly change that, because the default
will always be that the first player begins,
so, player zero.
So, refreshing this, now, roll the dice.
So, five plus four is nine,
plus two is 11,
plus six is 17, and so, yeah, this is working.
So let's see if we can catch a one.
So, 34,
36,
all right, so, here's the one.
So this time, we didn't add the one here.
Now, what we want to happen
is that now is the turn of player two, right?
So let's implement that.
And we are going to do that here.
So if the player does something that is equal to ones,
then we want the next player.
So the first thing that makes sense to do now
is to change this variable here, right?
So, activePlayer will change from zero to one.
And how do we do that?
So, if it's zero, then we want one,
and if it's one, we want zero.
So it makes sense to use an if statement here, right?
Actually, we can use something else,
which is still an if, but it's an easier way to write it.
And that's called the ternary operator,
and it simply works like this.
So, the activePlayer is what we want to test,
so we still have our test condition here.
So if it's zero,
then
activePlayer should be one.
Else,
activePlayer
should be zero.
Okay?
So this is the exact same thing
as writing if
activePlayer equals zero,
then activePlayer one,
else,
activePlayer zero.
Okay?
But this is much cleaner and much simpler, right?
So for a very simple if statement such as this one,
I like to use the ternary operator instead.
Okay, so let's see what happens then,
with the score.
So we need to catch a one here.
All right, so, now we have a one.
And now, we should continue on this side, right?
Because now it's player two.
Okay, and so now we have a score here.
But, the thing is that, we didn't restart at zero, right?
We still continued with this 17.
So 17 plus six makes 23.
But we, of course, want to start this player
(chuckles) at zero as well, right?
So there's something else that we need to do here,
which is to set the round score back to zero.
Okay, so, when one player rolls a one,
then the other player becomes the active player,
and the round score is reset to zero.
And now it should work, right?
So, and now, it should go to the other player.
All right, so, three, and one again,
so now it's this player's turn again.
And the right, we start from zero again,
and the game keeps working.
Now, there's still a couple of things
that we need to do here, right?
Because, as we know from the rules,
as soon as a player rolls a one,
he loses this score, so it should be set to zero.
So it should not be set only to zero here,
but also in the user interface.
So you need to do a couple of things here.
So let's select these.
So, current-1 and current-0.
And, once again, we're going to use
the getElementId method for that.
So, document.getElementById,
and now it's
current-0.textContent.
We want that to be set to zero,
and the same thing, of course, for the number one.
Okay, and, another thing that we should also do
is to make it visible in the user interface
who is the active player.
So what I mean is this bold text here, and this red dot.
And also, this gray background.
So let me first show you in the HTML
how that is actually achieved.
So, in here, we have this active class
on the player-0-panel that we do not have
in the player-1-panel, right?
So it's this class here that makes all the difference.
Let me remove it from here to show you the difference.
All right, and now, this is not active,
so right now, player one looks exactly the same
like player two, right?
So, what we have to do is to,
as soon as the player changes,
we have to remove the active class
from the player-0-panel
and add it to the player-1-panel.
And this is one of the really cool things
that we can do in JavaScript to style our applications,
is removing and adding classes like this,
like we're going to do now.
So we need to, as you already know by now,
start by selecting the element that we want.
So, document.querySelector,
because it's now a class.
So this one was called player-0-panel.
And then we need the classList,
and in here, we have a couple of methods
to add, remove, and toggle classes.
So let me first show you the remove one.
Remove.
And now, all we have to do
is to pass in the name of the class
that we want to remove, and it's as simple as that.
So now, the active class will very simply get removed,
and just, before reloading the page,
let's then add
a class to the other panel.
A querySelector,
and player-1-panel.
And, once again, we, to use classList,
and then, we can simply say add.
And, once again, we need to specify the class
that we want to add.
So let's now see this.
All right.
So I'm waiting for the one.
All right, so, here it is.
So the active class was removed from here and added to here,
and like this, we can now visibly see here
that player two is now active.
And the other change that we did before is also reflected,
because this is now back to zero.
Okay?
But now you saw that I rolled a one before.
I actually clicked a bit too fast here,
but the player didn't change.
And of course it didn't, because we didn't tell
the code to do so, so let's go back.
And one way that we could do this
would be to say, all right, if the active player is zero,
then do it like this, so, remove the class from zero,
and add it to player one.
But, there is a better way,
because we not only have remove and add,
but we also have something called toggle.
And what toggle does is to add the class,
if it's not there, and if it's there, to remove.
So, in this case, if player zero has the class active,
then it will remove it.
And if it does not, then it will add it.
All right, so, I will leave
these here as your reference,
okay, but I will now
do it differently.
Okay?
So I don't want to remove, I want to toggle.
And here, the same thing.
And now it's going to work.
All right.
So it changed to player two,
and is changed back to player one.
All right.
Okay, very nice.
And now, one last thing that I want to do
is to also, when a player rolls a one,
to hide the dice again,
so that when the next player's turn is,
we don't have any dice here visible.
And that's pretty easy, we already did that, right?
But without looking at the code,
we know that it's document.querySelector,
and it's the dice class, actually,
and then, we need style, and then, we just need
the CSS property that we want to change.
And this one is the display property,
which we are setting to none, once again.
All right.
So let's reload this.
All right.
So, I rolled a one, but it disappeared,
and now it's the next player,
and he has, like, an empty spot here to roll his dice.
Now, up until this point, we have no way
to hold our points so that they get added up
here in the global score, right?
So that's what we're going to do right in the next lecture.