Original subtitles

In this video,

we will actually start implementing our games functionality,

and we will start with the most important functionality,

which is rolling the dice.

And let's start with another look at our flowchart here.

So that's why I included it in the starter files.

So when the user roles a dice,

we want to first generate a random dice roll,

then display it and then check whether it is a one or not.

And if it's not, we add that dice roll to the current score,

and if it is a one we go to the next player.

And maybe you're noticing

that having or building a flow chart like this

is pretty similar to actually dividing the big problem down

into smaller sub problems.

So essentially, all these squares that we have here

on the flow chart are like

the sub problems that we now need to go

ahead and implement.

So again, for a bigger application like this one,

it's a very good idea to draw a flow chart like this,

along with the process of solving problems that I taught you

in the previous section.

So use all of these methods that I showed you together

whenever you need to solve a problem,

because in the end, building a project like this is also

simply solving a problem.

So you know how the project is supposed to work,

but then the problem is

to essentially implement it yourself.

And so you need to divide that big problem

that can seem very scary

into smaller problems that will then

be easy to implement.

And as we move through this project,

you will see that it's not so scary after all.

And with that being said,

let's now also see this part of the flowchart in action

in the real application.

So this is a little bit less abstract.

So we roll the dice and now we rolled a one.

So let's just do it again.

Let me reload the game as if it was a new game.

So we roll the dice, we roll a number.

So we generate a random number

and then display the dice accordingly,

and then we add that score down here.

Again, and now we actually rolled a one.

And so we moved on to the next player.

Okay.

So that's what I just explained before using the flowchart,

but seeing it in action is a bit easier.

So we want to react to clicking that roll button.

So we need to select that button element and then

add an event listener or an event handler.

So here we have our three buttons and actually

let's select all of them.

So we will need them anyway later.

So that's button new, button roll and button--hold.

So const button new

is document.querySelector.btn,

and then two dashes new.

And now I will just duplicate this line here.

So that's button roll

and here also roll and then hold.

So let's just confirm new roll and hold

and indeed new roll and hold.

So that's gonna work just fine.

And now let's implement here

the rolling dice functionality.

So for that we take the roll button.

So that's button roll.

And then as always, when we want to react to an event,

which in this case is going to be a click,

we use the add event listener method.

Then the name of the event, and then,

our handler function right here.

And since we will not reuse this function,

I can simply write it here directly.

So let's now write some comments before

we actually write the code,

because that is very helpful in knowing what we should do.

So we already know that we need to start by generating

a random dice roll.

Then we display the dice

and then we check for a roll to one basically,

and if true,

switch to next player now.

So that's exactly what we have in the flowchart as well.

So let's start here.

So let's create simply a dice variable.

And so that's why now we have dice L here for the element

and then dice for the number itself.

And this variable here needs to be not a global variable.

So not a variable outside here,

because each time that we roll the dice,

we want to generate a new number.

And so let's simply define that variable here.

And now we create this random dice roll just as before.

So math.random,

which creates a number between zero and 0.9999.

So almost one, multiply that by six.

Then we truncate all of this.

So we removed the decimal part.

So that's math.trunc.

So basically we pass in the results of all of this,

into this math.trunc function.

And so this will then give us a number

between zero and five.

And so we just add one to elevate that to one to six.

So that's similar to what we did before

and now we just need to display this dice.

Now, the first thing that we need to do

is to actually remove

the hidden class. So remember in the starting conditions,

we hit the dice by adding the hidden class.

And so now the first thing is to remove that.

So the diceEl.classList.remove.

So just like in the last project and now comes

the interesting part.

So we know that the dice will be a number

between one and six.

And now, according to these numbers,

we want to display one of these images that we have here.

So you see that we have dice dash one dash two, three, four,

five and six.

And so now we want to use this dice number here, two,

according to that number display one of the images

and that's actually not hard to do.

So let me show you how it looks like in the HTML now.

So you'll see that right now,

the source of the image is dice-5.png.

And if you know some HTML, you know

that the source attribute here is how we define which image

should be displayed.

And we can now actually change.

We can manipulate this source attribute from our JavaScript.

And so that's the trick that we will use to display

the image, according to the rolled dice number.

So let's again, take the dice element.

And then here, there is a new thing.

So now we can use the source property.

So SRC just like it is called in the HTML,

and now we can set it to a string and that string will then

be the name of the image displayed.

So let's use a template literal,

and then we write, dice dash

because that's basically

the common name in all of these image names.

And then here we use the dicenumber.png.

And so with this,

we can dynamically load one of these six images here,

depending on the random rolled dice.

So let's give it a safe and let's give it a try

because this part should already be working now.

So let's see.

And indeed, we get this three.

Let's actually also look to the console for now,

this random number, just so

we see that the dice is actually

the corresponding one to the number.

So let's go back

here to the console,

make it a bit smaller

and now let's roll the dice and it works, great.

So we get a two.

And so indeed a two is also displayed here.

Now six and six here.

And let's just see if we get all the numbers, but yeah,

we get the one and we already saw the six happening as well.

So that means that our code is correct. Great.

And now all that we have to do is to keep adding

to roll dice to the current score.

And so that's what we will do here

in this case where we check for the rolled one.

So remember that only happens when the number is not a one.

So again, if it's a one, switch player, if no,

then add the dice roll to the current score.

So basically let's test here.

If the dice

is not one,

because this is our main case.

So the one that we're mostly interested in,

and then, our else block,

which will be basically in case that dice is a one.

So let's just grab that here.

So here we want to switch to the next player,

but if it's not one,

then we want to add

the dice to the current score.

So let's do this part here.

And in order to actually be able to add the current dice

to the current score,

we need a way of saving that current score somewhere.

So remember from the first project that we should not just

store any data only in the dumb.

So in this particular case,

we should not only display this current score

on the user interface.

Instead, we also want the variable in our code,

which always holds the current score of this current round.

So we need to define a variable for that.

And where do you think we should do that?

Well, it is certainly not in this function,

so not in this handler function, because if we did that,

then each time that we roll a dice,

the current score would be reset it.

So it would be redefined because this function here

is called over and over again,

each time that the button is clicked.

So if we wanted to basically persist that value,

so if it should keep existing,

then it needs to be outside here in the main program.

So let's call this one current score.

And we started at zero and it needs to be a let

because we will keep updating it.

So again, this cannot be inside

of this function because then it would

be set to zero each time that we clicked the button.

And so therefore it needs to be outside.

Okay. And now we say,

current score is equal

to current score plus the dice.

And once again, there is a shortcut operator,

for repeating this variable here. So instead of this,

we can just write, current score plus equal the dice.

So that's exactly the same,

but it's a little bit faster to write.

And now all we need to do is to display the score

on the current player.

Now, at this point,

we will just display it on player one to make it

a little bit simpler, but in the future,

we will need to keep track

of which player is the active player.

So that we will do in the next lecture. But again,

for now, let's just display the score on player one.

So let's select the score

or the current score for player one.

So let's check where that is scored,

and it is right here with this ID, dash dash one

and dash dash zero.

So let's actually copy that

and then I will select both of these elements up here.

So let's do that below this one.

And actually I will keep using get element by ID now.

So current zero, and then again, element,

get element by ID and then

just the class name again

without the hash symbol there.

And then current

one element is document.getElement,

and then current one.

Okay. And so now let's use this one.

So let me copy it,

.textcontent equals of course

the current score that we just defined previously.

And let me just add a note here, change later,

because in the future,

we will need to display this current score

at the current player

and to not always add player number zero

or player number one.

But for now, we just want to make this functionality work.

So let's just test it out for now.

So roll dice four,

and you'll see that it added the four to the zero,

and now three plus four is seven.

And so it works.

And now that we rolled a one, nothing happened.

So in this situation, we want to move to the next player.

So basically switching the player.

And so that's gonna be this else branch, but this one,

I will leave for the next lecture because

this involves doing a lot of stuff.

So maybe you can think about what we need to do,

because that would be a good opportunity for you

to start thinking by yourself,

how to implement this kind of functionality.

So try that out and then let's move on to the next video.