So what's the next thing that you think we need to do in the project, we come in to play the game,
select number of players, we can select any number of players, and what happens?
We create a deck of cards.
We deal out the cards to the players.
We get a message that the cards are dealt and we don't see any of the cards.
So we actually want to see the cards that have been dealt.
And that's the next thing that we need to do.
When we start the game and we've got our start game function, we need to make the cards.
So we started the game and next we need to make the cards and this is going to make the cards visible.
You can also do that at the start of the game as well.
So either one you could where we're dealing the cards and once we've dealt the cards, we can make the
cards at that point.
So maybe that's a better option.
So once we finish dealing the cards, let's go ahead and make the cards.
And the way that we're going to do that is we're going to create a function in order to handle that.
And this is going to be visual making the cards visually.
So let's create another function in order to handle the making of the cards.
So we've got all of the players set up and we've got everything in place that we can show the cards
visually to the player.
So let's first we're going to create a loop and creating just a basic for loop.
We're going to loop through it while X is the length of players.
So number of players.
Is that a great object where we've got all of the different player information?
And this also corresponds to the elements that we have on the page so we can really easily go through
and we can update the element content.
So this corresponds to the number of players that we have and the number of elements that we have on
the page and also corresponding to our console log.
So we've got our player, but we also have a value for deals and this is going to be essentially the
player's hand.
So you see that we've got all of the different deals that we have.
So the first player here, we can grab the first card from them.
The next one we can grab the next card and so on.
So that's what's being output in deals.
And we want to grab that first card and the guard that we can grab.
So we're going to pull that out of their deals array.
So creating another variable, we can call it let card.
And this is where we're getting the deals in in order to get the first item removed.
The first element from an array we do shift and what's going to get returned back within the console
is going to be that first card and then it's going to reduce the size of those arrays to see.
Now the arrays are down to 17, 16 and 16, and that's because we've drawn that first card.
So the next thing that we want to do is we want to show that card.
We want to make that card and show it.
And we also want to place the card into a holder so that we know which cards have been played.
So let's create a variable.
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
blank array.
And then as we create the cards, we're going to add them into the temp holder so we can push them in
there so we can always access them.
And we know which card has been played and which cards are currently in place within the temp holder.
And this is sitting outside so we can loop through and we can see which cards have been played by the
players as we iterate through there and as we push it into our temp holder.
So this is going to give us the listing of essentially the cards that have been played.
And the next thing that we want to do is we want to show the card.
So when a person and select the player that we want to show the card in.
So this is again contained within that player's object.
We have that element that we want to show the card with him and then the card that we want to show.
We're also passing that into the function.
We also need to create a function in order to handle that.
And this is the show card function.
So it's going to take two parameters that are coming in for the show card.
So the first parameter is the element that we want to show the card in, and the second parameter is
actually the card and the card information.
So coming into the console log, we can output that card value as well as the element.
I'll get rid of the console messages here and I think that that should get rid of some of the console
messages.
So now the only console message is coming when we show card.
So we want to show the queen of diamonds for the first element for player one, the eight of spades
for player two and the nine of hearts for player three.
So we need to show that card for the player.
So we also want to make sure that the card is not equal to undefined.
And if it is undefined, then we might have some issues.
So make sure that it's not equal to undefined so that we do have a.
Hard object there, and that means that we can create that element, so let's select that element and
apply a style, we can apply a background color.
And I just want to make sure the background color is white.
So let's set that by default to white.
And this is the element.
Remember the one that we passed in and where we want to build the card.
So now let's build the card.
And this is where we need to create a few different elements.
So taking our HTML one object, we can take the card rank because this is an object so we can get the
rank value out of it and add that in to our HTML object that we're building.
And then also we can use AFSC characters for the cards using the card suit.
So this is a really neat trick because when we use the suit and the suits were written in a format that
they could handle the ASI characters.
So if we put the ampersand and diamonds and the colon beside it, then what you're going to get as the
output is you're going to get a visual of that rank of the card suit.
Let's create another HTML elements or call this one HTML two, and this can take in some additional
information so it can take in the card rank.
And this is basically we're just designing the card the way that we want it to look so it will have
the rank and the suit.
So next let's build the card and creating an elements so the div and documents create element and the
element that we're creating is going to be a div and I can console logout the div before we output it
into our visual area and to the div.
Let's do class list and add a class.
So we need to make a class for the card so that we can style it properly.
So we'll do that afterwards after we create the element and using document create element, we're going
to have to also do a quite a bit of visual styling to represent the cards as well.
So this spane one will have text content or let's set in our HTML as we used to, melder of whatever
is equal to HTML two, and then we're using that div that we've created and we're sending the child
to that.
And the child that we're spending is the spane one.
It's also let's create another spend and of course we do.
How we're going to have to do a little bit of styling for this.
So creating another spin and this one can take the contents of HTML one or we could have just copied
it down there.
So this gives us a way to kind of duplicate it easily.
And we're spending the spane to child to that div as well.
So let's see what that looks like.
So now we've got a div, we've got a card.
You see there's that AFSC character of diamonds.
This is the ASI character of spades, and they see that we've got the seven of spades being represented
there.
So the next thing that we want to do is we actually want to spend it to the element.
And that's why this was really nice that we're able to really easily select that element so we can take
the element and we can append a child and the child that we're spending is that newly created div.
So let's try that and refresh it and hit start.
And you can see that our player one has a king of diamonds, player two has a seven of spades, player
three has an eight of spades.
And this also corresponds to the content that's down there.
So I did say that there is quite a bit of styling still to do so.
The objective really here was just to output that content and now we're going to style it and make it
look a little bit better.
And that was really why I also want to create the two spans so that we have an option to create two
classes where we can have the first visual kind of smaller and then the second one fairly large with
the suit, the rank in the suit being presented.
So go ahead and add this into your project and have the ability to show the card when we start the game
and we deal the cards and then next we make the cards.
And as we loop through all the players, all we need to do is pass in the player element that we want
to add the card to and then also pass in the card object information and that will output that object
into the player's visual area.