1
00:00:00,300 --> 00:00:04,830
So what's the next thing that you think we need to do in the project, we come in to play the game,

2
00:00:04,830 --> 00:00:09,480
select number of players, we can select any number of players, and what happens?

3
00:00:09,480 --> 00:00:10,890
We create a deck of cards.

4
00:00:11,040 --> 00:00:12,780
We deal out the cards to the players.

5
00:00:12,780 --> 00:00:17,100
We get a message that the cards are dealt and we don't see any of the cards.

6
00:00:17,280 --> 00:00:20,790
So we actually want to see the cards that have been dealt.

7
00:00:20,940 --> 00:00:22,710
And that's the next thing that we need to do.

8
00:00:22,830 --> 00:00:30,210
When we start the game and we've got our start game function, we need to make the cards.

9
00:00:30,210 --> 00:00:36,540
So we started the game and next we need to make the cards and this is going to make the cards visible.

10
00:00:37,200 --> 00:00:41,280
You can also do that at the start of the game as well.

11
00:00:41,310 --> 00:00:47,100
So either one you could where we're dealing the cards and once we've dealt the cards, we can make the

12
00:00:47,100 --> 00:00:48,090
cards at that point.

13
00:00:48,330 --> 00:00:49,840
So maybe that's a better option.

14
00:00:50,190 --> 00:00:55,230
So once we finish dealing the cards, let's go ahead and make the cards.

15
00:00:55,560 --> 00:00:59,940
And the way that we're going to do that is we're going to create a function in order to handle that.

16
00:01:00,150 --> 00:01:04,170
And this is going to be visual making the cards visually.

17
00:01:04,650 --> 00:01:08,430
So let's create another function in order to handle the making of the cards.

18
00:01:08,640 --> 00:01:14,340
So we've got all of the players set up and we've got everything in place that we can show the cards

19
00:01:14,340 --> 00:01:16,670
visually to the player.

20
00:01:17,130 --> 00:01:22,350
So let's first we're going to create a loop and creating just a basic for loop.

21
00:01:22,560 --> 00:01:26,220
We're going to loop through it while X is the length of players.

22
00:01:26,520 --> 00:01:27,510
So number of players.

23
00:01:27,510 --> 00:01:32,130
Is that a great object where we've got all of the different player information?

24
00:01:32,250 --> 00:01:38,370
And this also corresponds to the elements that we have on the page so we can really easily go through

25
00:01:38,370 --> 00:01:41,030
and we can update the element content.

26
00:01:41,220 --> 00:01:47,130
So this corresponds to the number of players that we have and the number of elements that we have on

27
00:01:47,130 --> 00:01:51,780
the page and also corresponding to our console log.

28
00:01:52,020 --> 00:01:59,430
So we've got our player, but we also have a value for deals and this is going to be essentially the

29
00:01:59,430 --> 00:02:00,360
player's hand.

30
00:02:00,690 --> 00:02:04,270
So you see that we've got all of the different deals that we have.

31
00:02:04,500 --> 00:02:07,770
So the first player here, we can grab the first card from them.

32
00:02:07,950 --> 00:02:10,690
The next one we can grab the next card and so on.

33
00:02:10,710 --> 00:02:12,630
So that's what's being output in deals.

34
00:02:12,900 --> 00:02:16,950
And we want to grab that first card and the guard that we can grab.

35
00:02:16,960 --> 00:02:19,910
So we're going to pull that out of their deals array.

36
00:02:20,160 --> 00:02:23,280
So creating another variable, we can call it let card.

37
00:02:23,610 --> 00:02:29,640
And this is where we're getting the deals in in order to get the first item removed.

38
00:02:29,640 --> 00:02:36,060
The first element from an array we do shift and what's going to get returned back within the console

39
00:02:36,060 --> 00:02:41,220
is going to be that first card and then it's going to reduce the size of those arrays to see.

40
00:02:41,220 --> 00:02:47,850
Now the arrays are down to 17, 16 and 16, and that's because we've drawn that first card.

41
00:02:48,060 --> 00:02:51,180
So the next thing that we want to do is we want to show that card.

42
00:02:51,180 --> 00:02:53,760
We want to make that card and show it.

43
00:02:53,880 --> 00:03:01,980
And we also want to place the card into a holder so that we know which cards have been played.

44
00:03:02,160 --> 00:03:03,960
So let's create a variable.

45
00:03:04,170 --> 00:03:09,330
And this is just going to be right now, it's when we come in to make the cards, it's going to be a

46
00:03:09,330 --> 00:03:10,200
blank array.

47
00:03:10,440 --> 00:03:16,920
And then as we create the cards, we're going to add them into the temp holder so we can push them in

48
00:03:16,920 --> 00:03:18,870
there so we can always access them.

49
00:03:18,870 --> 00:03:24,450
And we know which card has been played and which cards are currently in place within the temp holder.

50
00:03:24,690 --> 00:03:31,560
And this is sitting outside so we can loop through and we can see which cards have been played by the

51
00:03:31,560 --> 00:03:36,280
players as we iterate through there and as we push it into our temp holder.

52
00:03:36,450 --> 00:03:40,350
So this is going to give us the listing of essentially the cards that have been played.

53
00:03:40,560 --> 00:03:43,320
And the next thing that we want to do is we want to show the card.

54
00:03:43,600 --> 00:03:48,670
So when a person and select the player that we want to show the card in.

55
00:03:48,690 --> 00:03:52,140
So this is again contained within that player's object.

56
00:03:52,140 --> 00:03:57,540
We have that element that we want to show the card with him and then the card that we want to show.

57
00:03:57,630 --> 00:03:59,830
We're also passing that into the function.

58
00:04:00,360 --> 00:04:03,210
We also need to create a function in order to handle that.

59
00:04:03,430 --> 00:04:05,490
And this is the show card function.

60
00:04:05,760 --> 00:04:10,160
So it's going to take two parameters that are coming in for the show card.

61
00:04:10,170 --> 00:04:16,260
So the first parameter is the element that we want to show the card in, and the second parameter is

62
00:04:16,260 --> 00:04:19,080
actually the card and the card information.

63
00:04:19,440 --> 00:04:25,940
So coming into the console log, we can output that card value as well as the element.

64
00:04:25,950 --> 00:04:30,420
I'll get rid of the console messages here and I think that that should get rid of some of the console

65
00:04:30,420 --> 00:04:30,980
messages.

66
00:04:31,200 --> 00:04:34,140
So now the only console message is coming when we show card.

67
00:04:34,290 --> 00:04:40,500
So we want to show the queen of diamonds for the first element for player one, the eight of spades

68
00:04:40,500 --> 00:04:43,670
for player two and the nine of hearts for player three.

69
00:04:44,130 --> 00:04:47,160
So we need to show that card for the player.

70
00:04:47,550 --> 00:04:52,140
So we also want to make sure that the card is not equal to undefined.

71
00:04:52,440 --> 00:04:55,820
And if it is undefined, then we might have some issues.

72
00:04:55,950 --> 00:04:59,820
So make sure that it's not equal to undefined so that we do have a.

73
00:04:59,960 --> 00:05:06,800
Hard object there, and that means that we can create that element, so let's select that element and

74
00:05:06,800 --> 00:05:09,940
apply a style, we can apply a background color.

75
00:05:10,070 --> 00:05:12,780
And I just want to make sure the background color is white.

76
00:05:13,070 --> 00:05:15,460
So let's set that by default to white.

77
00:05:15,770 --> 00:05:16,930
And this is the element.

78
00:05:16,940 --> 00:05:20,220
Remember the one that we passed in and where we want to build the card.

79
00:05:20,630 --> 00:05:22,400
So now let's build the card.

80
00:05:22,610 --> 00:05:25,930
And this is where we need to create a few different elements.

81
00:05:26,300 --> 00:05:34,010
So taking our HTML one object, we can take the card rank because this is an object so we can get the

82
00:05:34,010 --> 00:05:39,910
rank value out of it and add that in to our HTML object that we're building.

83
00:05:40,340 --> 00:05:46,260
And then also we can use AFSC characters for the cards using the card suit.

84
00:05:46,610 --> 00:05:52,340
So this is a really neat trick because when we use the suit and the suits were written in a format that

85
00:05:52,340 --> 00:05:54,110
they could handle the ASI characters.

86
00:05:54,290 --> 00:06:00,830
So if we put the ampersand and diamonds and the colon beside it, then what you're going to get as the

87
00:06:00,830 --> 00:06:06,560
output is you're going to get a visual of that rank of the card suit.

88
00:06:07,460 --> 00:06:14,240
Let's create another HTML elements or call this one HTML two, and this can take in some additional

89
00:06:14,240 --> 00:06:16,430
information so it can take in the card rank.

90
00:06:16,730 --> 00:06:22,010
And this is basically we're just designing the card the way that we want it to look so it will have

91
00:06:22,010 --> 00:06:23,340
the rank and the suit.

92
00:06:23,840 --> 00:06:33,650
So next let's build the card and creating an elements so the div and documents create element and the

93
00:06:33,650 --> 00:06:39,140
element that we're creating is going to be a div and I can console logout the div before we output it

94
00:06:39,170 --> 00:06:42,320
into our visual area and to the div.

95
00:06:42,320 --> 00:06:45,110
Let's do class list and add a class.

96
00:06:45,410 --> 00:06:48,970
So we need to make a class for the card so that we can style it properly.

97
00:06:49,550 --> 00:06:55,940
So we'll do that afterwards after we create the element and using document create element, we're going

98
00:06:55,940 --> 00:07:01,020
to have to also do a quite a bit of visual styling to represent the cards as well.

99
00:07:01,160 --> 00:07:11,660
So this spane one will have text content or let's set in our HTML as we used to, melder of whatever

100
00:07:11,660 --> 00:07:18,410
is equal to HTML two, and then we're using that div that we've created and we're sending the child

101
00:07:18,410 --> 00:07:18,890
to that.

102
00:07:19,070 --> 00:07:21,460
And the child that we're spending is the spane one.

103
00:07:21,500 --> 00:07:25,010
It's also let's create another spend and of course we do.

104
00:07:25,010 --> 00:07:27,230
How we're going to have to do a little bit of styling for this.

105
00:07:27,560 --> 00:07:33,860
So creating another spin and this one can take the contents of HTML one or we could have just copied

106
00:07:33,860 --> 00:07:34,370
it down there.

107
00:07:34,380 --> 00:07:36,890
So this gives us a way to kind of duplicate it easily.

108
00:07:36,890 --> 00:07:41,380
And we're spending the spane to child to that div as well.

109
00:07:41,390 --> 00:07:42,690
So let's see what that looks like.

110
00:07:43,070 --> 00:07:45,650
So now we've got a div, we've got a card.

111
00:07:45,780 --> 00:07:48,880
You see there's that AFSC character of diamonds.

112
00:07:49,520 --> 00:07:56,030
This is the ASI character of spades, and they see that we've got the seven of spades being represented

113
00:07:56,060 --> 00:07:56,330
there.

114
00:07:56,540 --> 00:08:00,650
So the next thing that we want to do is we actually want to spend it to the element.

115
00:08:00,650 --> 00:08:06,440
And that's why this was really nice that we're able to really easily select that element so we can take

116
00:08:06,440 --> 00:08:12,020
the element and we can append a child and the child that we're spending is that newly created div.

117
00:08:12,590 --> 00:08:16,190
So let's try that and refresh it and hit start.

118
00:08:16,370 --> 00:08:22,460
And you can see that our player one has a king of diamonds, player two has a seven of spades, player

119
00:08:22,460 --> 00:08:24,170
three has an eight of spades.

120
00:08:24,320 --> 00:08:27,320
And this also corresponds to the content that's down there.

121
00:08:27,680 --> 00:08:31,370
So I did say that there is quite a bit of styling still to do so.

122
00:08:31,370 --> 00:08:36,260
The objective really here was just to output that content and now we're going to style it and make it

123
00:08:36,260 --> 00:08:37,280
look a little bit better.

124
00:08:37,370 --> 00:08:42,560
And that was really why I also want to create the two spans so that we have an option to create two

125
00:08:42,560 --> 00:08:49,310
classes where we can have the first visual kind of smaller and then the second one fairly large with

126
00:08:49,310 --> 00:08:51,550
the suit, the rank in the suit being presented.

127
00:08:51,860 --> 00:08:58,580
So go ahead and add this into your project and have the ability to show the card when we start the game

128
00:08:58,580 --> 00:09:02,090
and we deal the cards and then next we make the cards.

129
00:09:02,180 --> 00:09:07,760
And as we loop through all the players, all we need to do is pass in the player element that we want

130
00:09:07,760 --> 00:09:15,200
to add the card to and then also pass in the card object information and that will output that object

131
00:09:15,200 --> 00:09:17,810
into the player's visual area.