And now let's implement
a feature of a player holding the current score.
And let's again, look at or flow chart here.
And once again, this flow chart
basically represents the division of or big problem,
which is to implement this game into smaller problems,
which are all of these green, basically sub problems here.
Now, what we are going to implement is
the functionality of holding the score.
And remember that happens
whenever the user clicks on that button to hold the score.
So when that happened,
we want to add the current score to the total score, right?
So let's see that in the demo version here.
So I'm reloading here,
but then as I roll the dice,
let's roll it again.
So I have eight current points,
and as I click hold, you see that these points will
basically be transferred to my global score.
So in this case, zero plus eight will then be eight
and then we change to the next player.
And so that's exactly what we have here
in the flow chart, followed by switching the player.
Now, this switching of player only happens
when the score is still below 100,
because when the score is at least 100,
the current player wins.
Okay.
And so now let's implement
basically this logic that we have here.
Okay.
So we want something to happen
when the user clicks on this hold button.
So button hold, right?
So let's take that and add an event handler.
So buttonhold.addevent listener
once more on the click, and then once more,
our function value here,
the function that will be executed
as the user clicks the button.
And so let's again write some comments
to say what we want to happen here.
First add current score to the score of the active player.
So active players score
and then check score is already at least 100.
And if so, then basically finish the game
and if not, then switch to the next player.
All right.
So now we want to define the current player score.
And remember how I told you in the last lecture
that to store the scores we are using this scores variable,
and this score is variable is this array,
which at the same time holds the score
of player zero and player one.
So players zero at position zero
and player one at position one.
And so now we can use the active player variable
to get the correct score of the current player.
So scores at position active player.
So that's what I just explained,
will be equal that score plus the current score.
So we say plus equal the current score.
So again, when it's player one,
then this will be scores one,
but when player is zero,
then it will be scores zero.
And then we take that value and add the current score to it
and assign it again to scores at the current active player.
So just to make it 100% clear,
if player is currently one then this would be this
okay.
So scores at one is equal to scores
at one plus the current score.
So I'm just gonna leave it here as a comment
so that you really understand what's happening here.
So we changed that score
and now we of course need to display it as well.
And so now we will do it in a similar way
to, as we did up here
where we basically selected based on the active player.
So document.get element by ID.
And now let's just check out again the name of the element.
So that's score zero and score one.
So these are the IDs
and again, we will replace zero or one here dynamically.
So again, a template string,
current and then here the active player.
So when it's player zero, it will be current zero.
And so that first score will be selected.
And when it's player one,
well, then the other element will get selected.
And then we can set the text content
to the score of the active player.
So scores, active player, give it a safe.
And so now, or game should almost be finished.
We will able to play it basically until infinity,
but it would work,
but actually it would not yet work
because we haven't yet switched to the next player here.
So right now, as we hold the score, we are not switching.
So we are not checking if the score is greater than 100,
but we are also not switching.
And so let's leave that checking if the score is 100.
So basically checking if the player won the game,
let's leave that for the end.
And for now let's just switch to the next player
because usually that is what needs to happen.
So switching to the next player is this code.
So it's going to be the exact same thing.
We still need to reset the current score to zero here,
both in or program, and also on the user interface,
which is what we do here.
We need to switch the player from zero to one
or from one to zero,
and we need to toggle the player active classes
to show which player is the active one.
So all of this code here.
We will need it again down here.
So should I just go ahead and copy it now?
And I hope that you already know the answer for that.
So that would violate the don't repeat yourself principle.
And so what I'm going to do is to simply take this code
and put it into a function.
And then I will call that function in both the places
where I need this code to execute.
So I am cutting the code now here,
and then up here, I will create a function.
So I'm gonna call this one switch player
equals a function
and dysfunction does not need any argument at all,
or any parameter
because the code is exactly the same in both situations.
So usually when we are refactoring something
like we are essentially doing here,
then there is many times like a small thing
that changes in the code.
And then it's very useful to have a parameter
so that when we call the function,
we can specify what changes.
So that's what we did when we refactored
some code in the first project,
but here nothing changes.
All we want to do is to simply repeat this code.
And so we don't need any parameters
and we don't need to return anything.
This is simply just a reusable piece of code.
And so let's call that here,
switch player, call it here and call it here.
And again, we will then put this in the FL statement later,
once we check for the score
to check if the player has won,
but now we just want to make the game work.
And so of course, after we hold the score,
we need to switch to the next player.
So exactly as it says here in or flow chart,
except that we're now skipping for now this part.
So we're going from add current score
to total score directly to switch player.
Okay.
And so now we should be ready to test our own version here.
So, now I have six let's hold it and okay,
something went wrong here indeed,
because our score is still at zero
and that should not be happening.
So let's check it out
and let's start by adding a console.log here,
just to see if we are actually catching this event.
So if we are handling it correctly,
so hold button.
So as I mentioned in the previous section,
we really use console.log all the time
to debug any kind of situation.
And it could have just erased this part of the video showing
you just to find a solution.
But I think it's a good idea to show you
the debugging process right here in the video as well.
So let's play and let's hold.
And so we got the hold button here.
So something worked
and actually, yeah,
also the background color changed sides here
and the current score was erased.
So we already knew
actually that something was indeed happening,
but let's not actually find out what is going on here.
And so now I want to log this value.
Okay.
So I'm basically now logging the score off the active player
and let me actually do that after I assigned it.
So after we changed it,
I will want to take a look at it in the console.
Maybe only problem is
that it's not showing up in the element.
So as the text content,
but maybe the score itself is correct.
And then we can see it in the console.
So let's play again.
And we already changed the player
and now I hold and indeed here we get nine.
So that's the score that we had before.
Let me show that to you again and reload.
So I rolled the dice three now I have eight
and watch what happens in the console
as I click hold.
And so indeed I get to the value of eight,
which means that the score is actually correctly calculated.
Now I just need to fix the part
where it is not displaying here in this element.
So here I selected current.
So let me see.
Oh, and yeah, that is of course the problem
it needs to be score.
So it's score zero and score one,
not current zero and current one.
So that was the mistake.
So here is score.
And now we can get rid of this console.log
and actually also have the other one that we have
with the dice roll.
So just make the code a bit better.
Now I can close it up, roll the dice,
and now as I hold, that should appear there,
the number four and yes, and now it works.
Great.
So let's play here a little bit.
So now we accumulated 13 points,
so let's hold them and to end up with 17
and indeed that works.
Now let's hold these four.
And so I think this game is really a lot of fun to play,
especially if you try it with someone else,
which I actually did a couple of times
as I was preparing this game,
and I can tell you that it's really fun,
but now let's actually get
to the final part of this lecture,
which is to check if someone reached
the final goal of 100 points.
And so if that happens, the game is over
and we should not be able
to click any of the buttons anymore.
And we also want to assign a special class
to the winner player to make it really obvious
that player has won.
Okay.
So that's add that check now.
And so that shouldn't be too hard.
So if scores add active player,
so remember that is always here the score
of the player that is currently active.
So if that is greater or equal than 100, the player has won.
So this is where we finish the game.
So when we finished the game,
we want to assign a player winner class.
And let me show that to you here in the CSS.
So yeah, it's this one, player a winner,
which has this darker background color.
So let me copy that,
paste that here and now let then select actually the player.
So document.query selector,
and let's again, take a look at the code here
just to, we don't make any mistakes.
And to the player is really a class player dash dash
and then the number of the active player.
So that is player dash dash
and active player.
And then onto this element,
we want to take the class list
and add this class name that we just copied from or CSS.
And then we also want to remove the active player class.
Okay.
So where is that?
Yeah, so when we switch the player,
we turn on this player active, right?
But now we then need to remove that
because otherwise we will have the active player class
at the same time as the player winner class.
So let's fix that,
but we simply need to select the same element again.
And then here we remove player active.
Okay.
I hope that made sense.
And now let's test it and to make it a little bit faster,
let's actually test it just with 20.
Otherwise it's gonna take forever
to reach that 100 points.
All right.
before we do that,
let's now actually put this switching the player
into the else block.
Okay.
So when the game finishes,
we of course do not want to switch the player,
but if it does not only then we do switch the player
and remember that 20 points is enough to win.
So let's roll the dice a couple of times.
11 so we're almost there.
That was close with 16.
And so now we should have enough.
So if we hold now then 10 plus 11 is 21.
So that's over 20.
And so now this should then show us the winner player class.
Well, that didn't really happen.
That's weird if I keep clicking here,
then this number keeps getting added.
And let me see in the HTML,
if the class wasn't added,
but actually it was not.
So we still have to active player.
And the winner class is nowhere to be found.
So let's check that.
Oh, and here we actually have the problem.
So I did a mistake that I told you before not to make,
which is when we use query selector,
we need an actual selector.
So here we are selecting a class.
And so we're missing the dot here and here.
So only when we get element by ID,
then we do not specify the selector.
We only specified the ID name itself,
but when we use query selector,
this needs to be a query.
And so if we are selecting based on a class,
we need the dot here.
And so that should be fixed now,
but this great to show you that mistakes
like this happen in development all the time.
So if you do this yourself,
then really don't beat yourself up
because that's just completely normal.
As you're seeing here,
I didn't plan this mistakes.
Anyway, now we have 16 plus five is 21.
So that should be enough to win the game.
Now we really got this winner class here showing
that player one won the game.
So this is now red too and yeah,
the dark background here too.
Now the problem is first that we're still showing the dice.
So we want to get rid of that.
But even worse is that we can still click on these buttons.
We can actually still keep playing the game.
So you'll see that everything works the same.
And now this player also one, they also have 22 points,
but we still can keep playing the game.
So of course that is not good.
So that is the next thing that we need to solve.
And let's think how we could solve this.
And for me, I think the easiest solution is
to create a variable that hosts the state of the game.
So if we are still playing or not,
so this is gonna be a state variable,
which kind of tells us the condition of a system
in this case the condition will be is
the game playing or not?
And so if the game is playing,
then we can click these buttons
and then everything will work as normally.
But then as soon as the game is finished,
we will say that the game is no longer playing
and then we can no longer click on these buttons.
All right.
I hope that sounds good to you.
So let's implement it.
And so what I will do here is say,
let playing, and now this will be a Boolean value.
And so we start with true.
So in the beginning of the game,
we are of course playing
and so playing it's true.
And then when we finished the game,
we will set playing to false.
So that's in this case.
So finish the game.
And the first thing that we're gonna do is
to set playing to false.
Okay, now this in itself will,
of course not yet do anything.
So we only defined whether the game is playing or not,
but none of our code is reacting to that.
So remember that we only want to be able to click
on these buttons once we are playing.
And so let's define that.
So let's go to the first button, which is the button role.
And so basically what we can do now is
that all of this logic that we have here should
only be executed if we are playing.
All right.
So that's simple enough.
So let's just say if playing
then do all of this.
So let's remove that from here and put it down here.
And then as we save it prettier will take care of indenting
all the code and put it nice and beautiful.
Okay.
Now playing here is a Boolean variable.
And so that's why we don't have
to write any condition like this for example,
because again, playing itself is already a Boolean
so we don't need to check if true is equal to true.
And so now when we click on this button,
while the game is no longer playing,
then nothing will happen.
And so that's the beauty and the goal of having
this playing variable.
Now let's simply do the same for this other button.
Okay.
So if playing then do all of this,
again I'm deleting it from here
and simply writing it down here, give it a safe,
and then it will be beautiful and back to normal.
And to now, as soon as one player wins,
we will finish the game and set playing to false.
And so the next time we click on any of these buttons,
then here playing will be false.
And then none of this code will be executed
and the same here for this button for rolling the dice.
So I hope you were able to follow that logic.
And so maybe you can use this kind of logic
in your own projects as well.
And this is actually the reason why it's so cool
to start building projects as games,
because in games we need a lot of this type of logic.
And so it's really fun to demonstrate
all these different aspects
that are quite common actually in programming.
So state variable like this,
like this playing here is very usual in programming.
And so you can start to get used
to sometimes needing a variable like that.
And now let's try it out again
and remember that we still can win the game at 20
and just to make sure let's reload.
And now as I roll the dice,
so let's hold here.
Let's see if we can do it in one run.
Oh and we can.
So we are at 20 and now let me hold.
And now I won the game here
and now let's see what happens when I click
and nothing happens the same for hold.
So these buttons, of course, like you can still click them,
but nothing happens.
All right.
That's awesome.
There's just one last thing to do,
which is to get rid of this dice here.
So let's go back one last time.
And so that also happens here when we finish the game.
So remember that we displayed the dice up here
when we rolled a button.
And so let's just copy this
and basically add this hidden class back on.
So right here, for example.
And so now instead of removing it,
we just add it back.
Okay.
Give it a safe and let's try to do it fast again.
And yes, now we should win the game
and the dice is gone awesome.
So we are almost done here with this project.
So our game works really great.
All there's left to do now is
to implement this new game button here.
So we could of course play again by reloading the page,
but it's always nice to have a button
to simply reset the game.
And so let's move on to the next video
and do that to finish this project.