Original subtitles

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.