Welcome back in this lesson, we're going to be rebuilding our dice game, so revisiting the dice scheme
that we had earlier in the earlier lessons and building out our newer version.
First of all, let's update our HTML, so we're going to bring back that gameplay area so we can have
a class of game area.
So this is where all of the gameplay is going to take place and we're going to rebuild the output.
So we can keep this one as this, so I'm going to just simply drop that into my gameplay area.
And next, I want to have two different areas, one for player one and one for player two.
And this is actually going to the button is going to sit outside.
So we're going to have our roll button sitting outside.
So let's create a couple divs and give it a class.
So I'm going to give these to the same class and then within them, I'm going to set up a space and
then this can be the player's name.
So we'll call it Nemer.
So player one.
And then closing off the span.
And adding in one more spin, so this is where the dice are going to be shown.
So we're going to have our.
We can give it an ID to be consistent with what we had earlier or we had player one and then we have
the content, their player one.
So this is where the dice are going to be visible.
So we can take that and we can duplicate it and have player two and have an idea of player two.
So we're consistent with what we had earlier, updating some of the styles.
So now that we've created some new classes, let's update some of the styles so we can do this one as
an inline block.
Update the font family and font size about 20 picks for the font size.
Also setting up a margin cert will set a margin of the bottom of 10 picks.
So give us a little bit more spacing.
We also need to add some styling for the viewer, so we want to display that in line block.
So add display in line, block to that so that they're both in line.
Let's set a default width of two hundred and twelve picks.
We can use a height one hundred and fifty picks and then some padding.
So that's not right up to the edge.
Let's refresh that, see what that looks like.
Let's update our output because it's sitting within there.
So we need to make this wider.
So four fifty and we can get rid of the margin bottom for this one as well.
So try that out and we'll do a button width of 450 now that our output areas for fifty as well.
And we can get rid of our styling for these players so that when we refresh it, we have a nice, neat
interface.
And then this is where we want to drop in those newly created dice elements.
So I show you how to do that in the upcoming lesson.
So this lesson was more just to style and prep our interface to be ready for the newer model, newer
updated dice game version two.
So go ahead and make some changes.
Update your styling as well as your TEMEL.
You're ready to move on to the next section.
You can keep all of this Daste building that we had, the vet, Lessner and all of that functionality
as we're simply going to be dropping it in visually into those elements.
So that's still coming up in the next lesson.