This lesson, we are going to be updating our dice game and we built out a dice scheme earlier on,
so now we're adding in those visible dice that we're creating and generating using JavaScript.
You can pause the video and take what you've learned in the earlier lessons and apply it in this lesson.
And in this in your you can take what you've learned in the earlier lessons and apply it within the
game that you're building out.
You can pause the video, try it out for yourself, and I'll walk you through how to update and how
to add in that functionality that we had in the earlier lessons.
So now what we want to happen is we want to have, again, that check to see which player wins.
So the roll of the dice, which dice wins and then the player that is actually scoring and winning.
So we want to add all of that functionality back in.
So opening up our ED, we can keep this selection part and we need to add in.
So we need to add in back in the ability to update these elements.
So we need to make a selection of those elements.
And we'll do the same thing that we had earlier where we had query selector and using the hash and then
player one.
So this will select a player one element and we can update this as well to say player one and copy it.
And paste it and we'll just update it to be player two.
So now we have the containers elements that we can drop our new function functioning.
We've got our dice roll.
So we're going to update this instead of roll dice.
We've got rolls and this is where we're using that roll variable.
So setting up brandnew.
Larry, that's going to now contain the role and notice that we moved it off of the root level, so
it's no longer a global variable as we can keep roles in here setting up our temp, and we use that
in order to send a message to the user.
So now we've got the two dice rolls.
We need to issue the conditions to see which role wins.
So we've got it within an array where we can check to see if roles one equals roles to or index value
one zero and one.
And if it is, then what we have is a drop so there's no winner.
And then adding in else if and I got a copy this part out and then this will just be else.
So else if and this time we're checking to see if roles index value zero is greater than roles one.
And if it's true then that means that player one wins and else.
And we don't need a condition for this one because there's only one other option and that means that
player two wins.
So now we've got the win conditions and we can check to see who wins.
I'm going to actually remove some of this and create it within a function where we can do an update
output player one and then the value of the roles.
So passing that in and then we're simply going to update the inner HTML so we can copy this out and
I'll update output player to add the value of roles.
And then we're taking that output element and we're updating the entire HTML with whatever the value
of ten.
Now what's happening here is that I'm using the player one, so that's the object that I'm selecting
there.
So that allows me to select the element.
And I'll show you how you can use that dynamically now and we can pass that into the same function where
we can get an update on that element dynamically just by simply passing in that element object as well
as the value of the rules.
So those are the two parameters that we need.
So this is update output and we've got the element as well as the number that was rolled and this is
where we can use the builder.
So let's paste that in.
So this was just the code that I had earlier.
So we've got Holder and we're using the builder method that we had before and using the roll dice.
And in this case, we need to pass in the number because we only have that one number to add in and
it's not going to be attending it to output.
It's going to be appending it to whatever the element.
So this is dynamic now.
It could be element with player one or element with player two.
So we don't know.
So we're going to be adding it in.
And this also needs to be updated that we're updating with Element and we're seeing if it's got any
children.
And if it does, then we're going to remove it out.
And the same thing here.
So element children and then going down to our builder area, we're still building out those dice so
that all is working the same way.
So let's try that out and refresh.
Roll the dice.
And now we've got the actual numbers showing up as a dice within our game.
We've got a draw.
We've got player one wins, player one wins, draw, player one wins and so on.
So you can have some fun with this.
And this was the last part of the dice game challenge where we were challenging you to put everything
together that we've learned in the earlier lessons and build out this fully functional dice game.
Try it out for yourself, build out your own version of the dice game.