1
00:00:00,060 --> 00:00:01,120
Hey, welcome back.

2
00:00:01,140 --> 00:00:05,610
Last lesson, we built the deck of cards, this lesson we're going to set up the players.

3
00:00:05,970 --> 00:00:11,970
First of all, let's create a class, we'll give it a class, name it player and apply some properties

4
00:00:11,970 --> 00:00:17,370
displaying and as in line block so that we can line them all on the same line.

5
00:00:17,550 --> 00:00:24,390
We're going to set a default width for each player to have a width of 200, also setting up a height

6
00:00:24,390 --> 00:00:30,240
for the player so we can do 600 picks and we can adjust these as needed later on as well.

7
00:00:30,420 --> 00:00:31,520
Vertical align.

8
00:00:31,710 --> 00:00:39,330
Let's do a center for a vertical line or middle and also set up the text aligned as center and make

9
00:00:39,330 --> 00:00:43,920
the font size fairly large so it stands out and we're also going to add in a border.

10
00:00:43,920 --> 00:00:48,120
So one pick solid border and give the border a slight color.

11
00:00:48,270 --> 00:00:54,090
And we're going to create these player elements on the page dynamically where when we start the game.

12
00:00:54,270 --> 00:00:58,480
So we've got our start game function and we build the deck of cards.

13
00:00:58,500 --> 00:01:01,650
The next thing that we want to do is create the player.

14
00:01:01,660 --> 00:01:02,760
So create a function.

15
00:01:03,240 --> 00:01:05,130
We can call it set up players.

16
00:01:05,610 --> 00:01:08,700
And we've got the number of players that we're getting from the inputs.

17
00:01:08,700 --> 00:01:10,410
So this can change dynamically.

18
00:01:10,680 --> 00:01:16,410
And also we're going to place it in a function so that once again, we can dynamically generate this

19
00:01:16,410 --> 00:01:17,280
as needed.

20
00:01:17,310 --> 00:01:23,970
So setting up a function in order to handle that called set up players and will pass in the number of

21
00:01:23,970 --> 00:01:26,510
players as a variable called NUM.

22
00:01:26,520 --> 00:01:29,880
And here we need to empty out the arrays.

23
00:01:30,000 --> 00:01:35,760
So we've got one called players and also let's set that up as well as a global object.

24
00:01:35,760 --> 00:01:37,490
So just players just under deck.

25
00:01:37,500 --> 00:01:41,490
So we've got some these variables that we can manipulate in our JavaScript.

26
00:01:41,790 --> 00:01:48,800
So setting up players as blank and also one other array that we need as a global array to hold a value.

27
00:01:48,990 --> 00:01:51,060
And this is going to be called DLS.

28
00:01:51,330 --> 00:01:57,300
So this is where we're going to actually dial out the card contents and we can set that up as an array

29
00:01:57,300 --> 00:02:03,120
as well as we build out the number of players will create a for loop for it to do that.

30
00:02:03,120 --> 00:02:11,250
And looping while X is less than the value of a fresh start creating our main parent div we can give

31
00:02:11,250 --> 00:02:19,190
it a name of div and using document create element allows us to create elements on the fly with JavaScript.

32
00:02:19,440 --> 00:02:21,710
So there we've got our div created.

33
00:02:21,730 --> 00:02:24,110
We can console log this out as well.

34
00:02:24,360 --> 00:02:29,190
So as we're creating them we could generate and we could see them so that when we hit start we're going

35
00:02:29,190 --> 00:02:32,430
to see that we create three dips and these are the three diffs here.

36
00:02:32,610 --> 00:02:35,580
So we need some information that we need to set up within this.

37
00:02:35,880 --> 00:02:44,430
Let's add an attribute to that div and taking the div using set attribute method and the attribute that

38
00:02:44,430 --> 00:02:51,960
we're going to set is the ID so we can set the player and the value can be NUM plus one or we're going

39
00:02:51,960 --> 00:02:54,140
to set this as X plus one.

40
00:02:54,390 --> 00:02:59,970
So as we're looping through, we're going to set the ID of these divs to be player one, player two,

41
00:02:59,970 --> 00:03:00,820
player three.

42
00:03:00,840 --> 00:03:02,820
Next, let's add in a class.

43
00:03:02,830 --> 00:03:10,650
So taking that element and using class list gives us the ability to add classes to that element.

44
00:03:11,070 --> 00:03:12,570
So we're going to add a class of players.

45
00:03:12,580 --> 00:03:13,800
That's the one that we just built.

46
00:03:14,160 --> 00:03:19,470
So now we've got three elements that we've created with IDs as well as classes.

47
00:03:19,770 --> 00:03:27,360
So we also need to create another div so we can call this one div one and using the same format where

48
00:03:27,360 --> 00:03:30,270
we're using document create element.

49
00:03:30,420 --> 00:03:35,760
So I want to create another div that we can place inside of the div that we're building that we're constructing.

50
00:03:36,180 --> 00:03:42,390
So this will give us an area to output the cards and the card information as well as some information

51
00:03:42,390 --> 00:03:46,590
so we can call this text content and this is div one.

52
00:03:47,220 --> 00:03:50,190
So we're going to build this div one and then we're going to attach it to the div.

53
00:03:50,820 --> 00:03:53,180
So we've got some information player.

54
00:03:53,220 --> 00:03:57,470
So once again X plus one, this is the inter text that we're going to represent there.

55
00:03:57,480 --> 00:04:01,860
Let's create another div and this one is going to be more interesting because we're going to create

56
00:04:01,860 --> 00:04:08,820
within the player's object where we've got our player and as we're iterating through X, we're going

57
00:04:08,820 --> 00:04:16,440
to set that array value to be equal to an element that we're going to create on the fly, and that's

58
00:04:16,440 --> 00:04:20,730
going to give us the ability to access it across different functions.

59
00:04:21,120 --> 00:04:24,600
So we're creating another one and we're calling that one div as well.

60
00:04:24,810 --> 00:04:26,940
And this is where all of the cards will go.

61
00:04:27,190 --> 00:04:34,560
So now whenever we reference it, we can reference it as players and the index value and adding in text

62
00:04:34,560 --> 00:04:35,250
content.

63
00:04:35,490 --> 00:04:40,740
So adding that text content for now, we're going to put value of cards in there and this is where all

64
00:04:40,740 --> 00:04:41,680
the cards are going to go.

65
00:04:41,850 --> 00:04:46,530
So taking our main parent div now let's append the device to it.

66
00:04:46,530 --> 00:04:51,780
So we're going to pen the child and the first child that we're pending is that div one that we created.

67
00:04:52,110 --> 00:04:58,830
So because this is a variable, we append it that way and the next div that we're appending to the parent.

68
00:04:59,260 --> 00:05:04,540
So this is another element that we're adding into that main parent, and this is going to be the players

69
00:05:04,540 --> 00:05:07,420
X, and I'll show you how this is all going to come together.

70
00:05:07,600 --> 00:05:10,300
And then lastly, we've got our game play.

71
00:05:10,320 --> 00:05:16,960
So that's our main area where we want to add in the gameplay and we need to upend the div that we've

72
00:05:16,960 --> 00:05:20,800
just created dynamically to that element.

73
00:05:20,830 --> 00:05:22,700
So that's going to make it all visible.

74
00:05:22,720 --> 00:05:25,980
And we also want to build out our DLS array.

75
00:05:26,230 --> 00:05:29,920
So we want to have multiple arrays within that main array.

76
00:05:29,940 --> 00:05:32,450
So all we're doing is pushing in a blank array.

77
00:05:32,500 --> 00:05:38,770
So by the end of all of this, you're going to be able to see the different players on the screen as

78
00:05:38,770 --> 00:05:41,230
well as will output the deal's arrays.

79
00:05:41,230 --> 00:05:42,950
So you can see that as well.

80
00:05:43,240 --> 00:05:48,160
So when we click start, we get player one, player 11.

81
00:05:48,170 --> 00:05:49,330
So there's a problem there.

82
00:05:49,330 --> 00:05:52,440
And we need to transform this into a numeric value.

83
00:05:52,870 --> 00:06:00,310
So what we can do is we can use integer where we make sure that we are transforming it into numeric

84
00:06:00,310 --> 00:06:00,610
value.

85
00:06:00,640 --> 00:06:01,990
So let's try that one more time.

86
00:06:02,200 --> 00:06:06,370
So we got player one, player two cards, player three, make the smaller.

87
00:06:06,460 --> 00:06:08,420
So bring it down to one hundred percent.

88
00:06:08,650 --> 00:06:10,920
So now we've got all of the players lined up.

89
00:06:11,110 --> 00:06:13,990
So if we do player two players, we get two players.

90
00:06:14,110 --> 00:06:17,530
If we do four, let's refresh it and try that out.

91
00:06:17,540 --> 00:06:20,470
So we've got all four players that are showing up on the screen.

92
00:06:20,680 --> 00:06:26,230
And because I don't have a lot of room and we're setting the default width to 200 on each one of these,

93
00:06:26,350 --> 00:06:28,300
you can see it being represented here.

94
00:06:28,450 --> 00:06:33,070
I'm also going to make this a little bit smaller so we don't quite need a height of 600.

95
00:06:33,250 --> 00:06:35,320
We can do it as a height of four hundred.

96
00:06:35,530 --> 00:06:39,140
So that's going to show it a little bit better within our screen visible area.

97
00:06:39,310 --> 00:06:41,920
So now we've been able to generate the players.

98
00:06:42,010 --> 00:06:49,600
And the nice thing about this is that when we try to access the players array, you're going to see

99
00:06:49,600 --> 00:06:55,060
that we've got the three divs in there and these devices are actually corresponding to the device where

100
00:06:55,060 --> 00:06:57,360
we've got cards written on the screen.

101
00:06:57,550 --> 00:07:04,860
So we have an easy way to loop through the player's array and access the elements accordingly.

102
00:07:04,870 --> 00:07:05,680
So player one.

103
00:07:05,680 --> 00:07:06,190
Player two.

104
00:07:06,190 --> 00:07:06,940
Player three.

105
00:07:07,060 --> 00:07:09,840
And this is our visible area where the cards are selected.

106
00:07:10,090 --> 00:07:16,480
So that's why that was set up within an array format so that we can easily access these items that are

107
00:07:16,480 --> 00:07:17,920
available in the array.

108
00:07:18,100 --> 00:07:25,180
And then the rest was for visual properties in order to show the player name, as well as the cards

109
00:07:25,570 --> 00:07:26,800
that we're going to be displaying.

110
00:07:26,810 --> 00:07:30,270
So all of that was outlined there within the player structure.

111
00:07:30,610 --> 00:07:32,620
So go ahead and add this into your project.

112
00:07:32,860 --> 00:07:38,410
And coming up next, we're going to work a little bit more on the building out the deck as well as dealing

113
00:07:38,410 --> 00:07:38,830
the cards.

114
00:07:38,840 --> 00:07:40,900
So that is all still yet to come.

115
00:07:41,110 --> 00:07:46,600
And this of course, this is an important part where we're using the player's array and we're adding

116
00:07:46,600 --> 00:07:49,900
in these elements so that we can access them as needed.

117
00:07:50,020 --> 00:07:56,350
And that's going to come very evident as we do more visual stuff and we output the cards visually for

118
00:07:56,350 --> 00:07:58,450
the player, the cards that are being returned.

119
00:07:59,200 --> 00:08:00,930
And that's all still to come as well.