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.