1
00:00:00,240 --> 00:00:05,940
Welcome back in this lesson, we're going to be rebuilding our dice game, so revisiting the dice scheme

2
00:00:05,940 --> 00:00:11,010
that we had earlier in the earlier lessons and building out our newer version.

3
00:00:13,370 --> 00:00:19,220
First of all, let's update our HTML, so we're going to bring back that gameplay area so we can have

4
00:00:19,220 --> 00:00:21,150
a class of game area.

5
00:00:21,770 --> 00:00:27,890
So this is where all of the gameplay is going to take place and we're going to rebuild the output.

6
00:00:28,810 --> 00:00:34,030
So we can keep this one as this, so I'm going to just simply drop that into my gameplay area.

7
00:00:34,600 --> 00:00:40,030
And next, I want to have two different areas, one for player one and one for player two.

8
00:00:40,310 --> 00:00:43,230
And this is actually going to the button is going to sit outside.

9
00:00:43,240 --> 00:00:45,480
So we're going to have our roll button sitting outside.

10
00:00:45,940 --> 00:00:49,170
So let's create a couple divs and give it a class.

11
00:00:50,590 --> 00:00:57,370
So I'm going to give these to the same class and then within them, I'm going to set up a space and

12
00:00:57,370 --> 00:00:59,350
then this can be the player's name.

13
00:00:59,350 --> 00:01:00,700
So we'll call it Nemer.

14
00:01:00,700 --> 00:01:01,990
So player one.

15
00:01:03,080 --> 00:01:04,820
And then closing off the span.

16
00:01:06,710 --> 00:01:11,610
And adding in one more spin, so this is where the dice are going to be shown.

17
00:01:12,200 --> 00:01:13,520
So we're going to have our.

18
00:01:15,520 --> 00:01:22,600
We can give it an ID to be consistent with what we had earlier or we had player one and then we have

19
00:01:22,630 --> 00:01:24,160
the content, their player one.

20
00:01:24,170 --> 00:01:25,870
So this is where the dice are going to be visible.

21
00:01:27,130 --> 00:01:33,250
So we can take that and we can duplicate it and have player two and have an idea of player two.

22
00:01:33,280 --> 00:01:37,690
So we're consistent with what we had earlier, updating some of the styles.

23
00:01:38,830 --> 00:01:44,470
So now that we've created some new classes, let's update some of the styles so we can do this one as

24
00:01:44,470 --> 00:01:45,640
an inline block.

25
00:01:46,000 --> 00:01:51,190
Update the font family and font size about 20 picks for the font size.

26
00:01:51,620 --> 00:01:56,790
Also setting up a margin cert will set a margin of the bottom of 10 picks.

27
00:01:57,730 --> 00:01:59,300
So give us a little bit more spacing.

28
00:01:59,890 --> 00:02:06,520
We also need to add some styling for the viewer, so we want to display that in line block.

29
00:02:07,360 --> 00:02:12,260
So add display in line, block to that so that they're both in line.

30
00:02:12,610 --> 00:02:16,330
Let's set a default width of two hundred and twelve picks.

31
00:02:16,840 --> 00:02:21,310
We can use a height one hundred and fifty picks and then some padding.

32
00:02:21,310 --> 00:02:22,810
So that's not right up to the edge.

33
00:02:23,830 --> 00:02:25,560
Let's refresh that, see what that looks like.

34
00:02:26,140 --> 00:02:29,100
Let's update our output because it's sitting within there.

35
00:02:29,110 --> 00:02:30,640
So we need to make this wider.

36
00:02:30,880 --> 00:02:34,570
So four fifty and we can get rid of the margin bottom for this one as well.

37
00:02:35,530 --> 00:02:40,900
So try that out and we'll do a button width of 450 now that our output areas for fifty as well.

38
00:02:41,020 --> 00:02:47,500
And we can get rid of our styling for these players so that when we refresh it, we have a nice, neat

39
00:02:47,500 --> 00:02:48,130
interface.

40
00:02:48,370 --> 00:02:52,540
And then this is where we want to drop in those newly created dice elements.

41
00:02:52,930 --> 00:02:55,210
So I show you how to do that in the upcoming lesson.

42
00:02:55,450 --> 00:03:02,770
So this lesson was more just to style and prep our interface to be ready for the newer model, newer

43
00:03:02,770 --> 00:03:05,800
updated dice game version two.

44
00:03:06,430 --> 00:03:08,080
So go ahead and make some changes.

45
00:03:08,260 --> 00:03:11,480
Update your styling as well as your TEMEL.

46
00:03:11,620 --> 00:03:13,480
You're ready to move on to the next section.

47
00:03:13,670 --> 00:03:19,210
You can keep all of this Daste building that we had, the vet, Lessner and all of that functionality

48
00:03:19,360 --> 00:03:24,340
as we're simply going to be dropping it in visually into those elements.

49
00:03:24,340 --> 00:03:26,080
So that's still coming up in the next lesson.