Jonas: In this lecture, we are going to
implement our hold function,
and also talk a little bit about
the Don't Repeat Yourself principle.
So we will continue using the concepts
that we have been learned so far,
and we will also learn how to use functions
to correctly apply the Don't Repeat Yourself principle.
And of course, we will continue
thinking about the game like a real programmer.
So let's do that.
So this is where we left after the last lecture.
So far we can roll the dice,
and add our scores down here,
but there is no way to hold our points
and update our scores here in the interface.
So let's now do that.
So once again, we are going to set up
an event listener.
And this time, it's going to be for the other button.
So let's check out which one that is
and it's called button hold, alright.
So let's start by selecting it,
and by now you already know how to do that.
So querySelector,
and then btn-hold,
and then addEventListener
okay, and we want this to happen on the click
once more, and we're going to use an anonymous function,
which as you remember is a function
which doesn't have a name
and that we cannot reuse in another point of our code.
Okay so we simply write function like this,
and we have no parameters.
And now, in here we can write or function body.
So let's first define what we want to happen
as soon as the user clicks the hold button.
So the most obvious thing is, of course,
to add the current score to the player's global score,
right?
So once again I'm using these comments here
to first define what we're going to do
and then fill it with the code.
So Add CURRENT score to GLOBAL score.
Then we of course want to update the UI,
the user interface.
And there is another thing that we can,
and should do right here in this function,
so when the user clicks the hold button
which is to check if the player won the game.
So let's add that here too.
Check if player won the game.
So once again, when we hit the button
then the score that we have in that round
gets added to our current score
then we print that number to the user interface
which means that we perform some DOM manipulation,
and then after that we check if the player won the game.
So that starts right here.
So this one should be easy right?
Remember that right in the beginning,
right in the first lecture,
we created this variable here
which stores the scores for both the players
and that we also have this variable here
which stores the active player.
So player number one is zero,
and player number two is one.
And we can now use this variable
to access, to read, or to write, in this case,
the scores right into this array.
So if the first player is the active player,
then it's a zero,
and so we can say scores zero
and then we will have the value in here.
And if the second players the active player,
then this is number one
and then scores one, is this element.
So let's now do that.
So scores, and we use the curly brackets to access
the variables or to mutate it
and now we simply have to write activePlayer, right?
And what will the score actually be?
We will simply add the score
that the player got in this round
to the score that the player already had.
So it's as simple as this,
so += roundScore,
and remember that this works because
this is the exact same thing
as working it like this.
So activePlayer equals the score
that the player already had
and plus the score that we got
in this very round, roundScore.
Alright, so this is the exact same thing,
but once again I prefer to use it this way here, okay?
So I'm just going to delete this.
Just wanted to show you that this is the exact same.
So that make sense.
Now we want to update the UI,
and in order to do that
we first need to know
where we have to write our data.
So it's here in this ID score-0 for player zero,
and score-1 for player one.
So let's do that here with document.querySelector
score, and then we're once again going to use
our simple trick, where we use the active player variable
to construct our string name, basically.
So activePlayer, like this,
so we don't have to specifically have to write
score zero or score one.
And here we just missed this,
and now we're good to go.
So we have our active player score selected
and the user interface, so let's now change the content.
And if you remember, from the last lectures,
we use that simply using the text content method.
Alright?
And what are we going to print here?
It's simply the value that we defined before.
So we go in our scores array once again,
and then select the points from the active player.
So if it's the first player,
it will be the first element of the array.
And if it's the second player,
then it's going to be the second element of the array.
So let's check out if this is working as intended.
So I roll the dice, and I hit hold,
and alright here we go.
So yes, eight points now here.
Now what isn't happening here,
is that it isn't changing the active player,
because remember, when we hit the hold button,
we store our points and then it's the next player's turn.
But that's not happening right now,
so we have to implement this right now.
And you probably remember that we did exactly that
in the last lecture, right?
Because it's exactly that that happens
when the user rolls a one, right?
So basically, after the user rolls a one,
and after the user chooses to hold his points,
it's always the next player's turn.
So it's the exact same code
so we can just copy this down here
to our other function.
Now, this doesn't make much sense, does it?
Why should we have the exact same code
in two places of our application?
Imagine that we have to change something here
for example, I don't know, this class name here,
or some of these class names
and then we would also would have to change it up here.
So this is very difficult to maintain
and it's not a good practice at all.
In fact, it's a really bad practice.
And that's why there's something called
the Don't Repeat Yourself or DRY principle.
Of course, as the name says
that we should not repeat ourself in our code.
So what can we do in order to apply the
Don't Repeat Yourself principle?
You guessed it.
We are going to implement a brand new function.
And this one is going to be called next player.
So function nextPlayer.
And now we're just going to place this code here,
and we have our function.
So it's a function that doesn't receive any parameters
and it also doesn't return any result.
We simply use this function
in order to not repeat our code.
So we defined the function,
and now we can actually use it.
So we are going to delete all of this
and simply call nextPlayer.
And then of course, the same thing here.
So deleting all of this.
And nextPlayer
and just like this, we use the DRY principle.
So this is something really important
in programming, in general.
So let's check out if this works.
So holding, and alright.
So we're back to zero here
we have updated our score here,
and player two is now active.
And we keep rolling the dice.
So we have five and six,
so we should have 11 as soon as we hit the button.
And alright, it's working, great.
Oh, rolling a lot of ones here.
Yup, so it's working on both sides, alright.
So let's go back.
Now there's only this thing here to do,
which is to check if the player has won the game.
So let's just check out the rules of the game
which says, that the first player to reach 100 points
on GLOBAL score wins the game.
So this should be pretty easy, right?
So can you guess what we're going to do here?
Take a moment and try to actually
implement this for yourself.
Okay, so pause the video to try
to implement this functionality.
Okay, so I'm sure that you got this.
So of course, we are going to use an if/else statement.
So what we have to do here
is to check if the score of the active player
is now more or equal to 100 points.
So once again we use our scores array
where all the scores are stored
and then retrieve the score for the activePlayer
and check if it's greater or equal to 100 points.
So of course we cannot use just equal to 100 points
because that wouldn't be fair, right?
Then the user with, let's say, 105 points
would not get the chance to win.
So it must be equal or greater to 100 points.
And just to check if this works
we are going to display something
on our webpage, on our game.
And we simply going to replace this Player 1 name here
or Player 2, whoever wins, with the word winner.
So the ID for this is name and then the active player.
So document.querySelector
so the ID name and then our old trick again.
So by now, I'm sure this makes total sense to you.
So again textContent
and now we will just say, Winner!
And now in order to check this,
I'm just going to put this down to 20,
so that you don't have to watch me
playing the game up until we reach 100 points.
So, I'm going to put this to 20 now, just for testing.
And then I'm putting it back to 100 later.
So roll the dice, 15 points.
And now if I hold, 15 plus 8 should already be
more than 20, which is our winning score right now.
So I should now be the winner.
And yes, it works, great.
Now what doesn't do much sense,
is that now it's the next player's turn, right?
So let's change that with or/else,
part of the if/else statement.
So if the player wins the game,
we want this to happen
and only if he doesn't,
so if the game continues
then we want the next player to play the game.
So let's copy this to here.
Alright.
So let's see this now.
12, 15, okay.
Let's see if I can push this even more.
Yes, so hold.
And now player two won the game.
So all we have to do now,
is to actually hide this dice here, I would say.
And also remove the active class here
from the current player, right?
So let's do that,
and it's not the first time we did this, or course.
So we're doing it right here.
So document.querySelector
and it's the dice class,
so once again we're going to change the CSS style.
Display, and we are going to set the display back to none.
So now it will not be visible anymore.
Now one note about this way of styling our webpage
and changing the CSS,
so it's not the best way to mixture
or CSS with JavaScript.
So if we have a lot of styles to change,
we shouldn't do it this way,
so we shouldn't really use the style property all the time,
here in our JavaScript code.
But instead, do it the way we did it, for example,
down here in our nextPlayer function
with the toggling or adding or removing classes.
So instead of writing a bunch of lines here
to manipulate the CSS,
we should simply create a class, or CSS,
and then simply add or remove this class
here in our JavaScript.
And that's exactly why I created that active class
that we have used already.
And it's also why I created a winner class,
so let's see this.
So let me see where this is.
Alright, so down here.
So it's not a lot of CSS,
but it's just to show you
that it's always a better way
to create a class like this
instead of doing, for example,
these two manipulations directly in CSS.
So let's now apply the winner class
to the entire player panel.
In order to make the winner look a little bit
better, let's say.
So, these player panels here,
so which are the entire left or right side
of the user interface.
So let's do that right here as well.
So document.querySelector
and now the player that won this game is of course,
the active player, right?
So only the player that is playing right now
can win the game.
So player then we use our trick with activePlayer
and then plus panel
so player one panel, or player zero panel.
And now we use the class list again
such as we did before
to access the classes that this element has.
And now we simply add the winner class.
Which is the one that I showed you before in the CSS.
And what I should also do is to remove
the active player class also from this panel.
So I'm just going to duplicate this line
and then here it's not add anymore,
but it's remove.
So the active class.
So remember, we have add, remove, and also toggle,
down here, so remember what toggle does
is to add the class of the class that's not there
and if the class is already there, it removes it.
Which in this case is not necessary
because we know that the winner class is not there
so we add it.
And we also know that the active class is there,
and so we remove it.
So let's now check this out.
Remember, I'm still at 20 points for the final goal.
And here we go.
So, I won the game, and I'm no longer the active player.
As you see here, as the dot disappeared.
And also my winner score here
is now red and big and bold.
So this is already pretty cool, right?
We've come a long way with this application,
and it's almost ready.
Just still some problems because
first, now if you continue hitting this button
we can still roll the dice,
which doesn't make sense, right?
And we also have this button here
that we want to implement.
So if you want to do that right now,
then just hit that next lecture.
See you there.