Hey, welcome back.
Last lesson, we built the deck of cards, this lesson we're going to set up the players.
First of all, let's create a class, we'll give it a class, name it player and apply some properties
displaying and as in line block so that we can line them all on the same line.
We're going to set a default width for each player to have a width of 200, also setting up a height
for the player so we can do 600 picks and we can adjust these as needed later on as well.
Vertical align.
Let's do a center for a vertical line or middle and also set up the text aligned as center and make
the font size fairly large so it stands out and we're also going to add in a border.
So one pick solid border and give the border a slight color.
And we're going to create these player elements on the page dynamically where when we start the game.
So we've got our start game function and we build the deck of cards.
The next thing that we want to do is create the player.
So create a function.
We can call it set up players.
And we've got the number of players that we're getting from the inputs.
So this can change dynamically.
And also we're going to place it in a function so that once again, we can dynamically generate this
as needed.
So setting up a function in order to handle that called set up players and will pass in the number of
players as a variable called NUM.
And here we need to empty out the arrays.
So we've got one called players and also let's set that up as well as a global object.
So just players just under deck.
So we've got some these variables that we can manipulate in our JavaScript.
So setting up players as blank and also one other array that we need as a global array to hold a value.
And this is going to be called DLS.
So this is where we're going to actually dial out the card contents and we can set that up as an array
as well as we build out the number of players will create a for loop for it to do that.
And looping while X is less than the value of a fresh start creating our main parent div we can give
it a name of div and using document create element allows us to create elements on the fly with JavaScript.
So there we've got our div created.
We can console log this out as well.
So as we're creating them we could generate and we could see them so that when we hit start we're going
to see that we create three dips and these are the three diffs here.
So we need some information that we need to set up within this.
Let's add an attribute to that div and taking the div using set attribute method and the attribute that
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
to set this as X plus one.
So as we're looping through, we're going to set the ID of these divs to be player one, player two,
player three.
Next, let's add in a class.
So taking that element and using class list gives us the ability to add classes to that element.
So we're going to add a class of players.
That's the one that we just built.
So now we've got three elements that we've created with IDs as well as classes.
So we also need to create another div so we can call this one div one and using the same format where
we're using document create element.
So I want to create another div that we can place inside of the div that we're building that we're constructing.
So this will give us an area to output the cards and the card information as well as some information
so we can call this text content and this is div one.
So we're going to build this div one and then we're going to attach it to the div.
So we've got some information player.
So once again X plus one, this is the inter text that we're going to represent there.
Let's create another div and this one is going to be more interesting because we're going to create
within the player's object where we've got our player and as we're iterating through X, we're going
to set that array value to be equal to an element that we're going to create on the fly, and that's
going to give us the ability to access it across different functions.
So we're creating another one and we're calling that one div as well.
And this is where all of the cards will go.
So now whenever we reference it, we can reference it as players and the index value and adding in text
content.
So adding that text content for now, we're going to put value of cards in there and this is where all
the cards are going to go.
So taking our main parent div now let's append the device to it.
So we're going to pen the child and the first child that we're pending is that div one that we created.
So because this is a variable, we append it that way and the next div that we're appending to the parent.
So this is another element that we're adding into that main parent, and this is going to be the players
X, and I'll show you how this is all going to come together.
And then lastly, we've got our game play.
So that's our main area where we want to add in the gameplay and we need to upend the div that we've
just created dynamically to that element.
So that's going to make it all visible.
And we also want to build out our DLS array.
So we want to have multiple arrays within that main array.
So all we're doing is pushing in a blank array.
So by the end of all of this, you're going to be able to see the different players on the screen as
well as will output the deal's arrays.
So you can see that as well.
So when we click start, we get player one, player 11.
So there's a problem there.
And we need to transform this into a numeric value.
So what we can do is we can use integer where we make sure that we are transforming it into numeric
value.
So let's try that one more time.
So we got player one, player two cards, player three, make the smaller.
So bring it down to one hundred percent.
So now we've got all of the players lined up.
So if we do player two players, we get two players.
If we do four, let's refresh it and try that out.
So we've got all four players that are showing up on the screen.
And because I don't have a lot of room and we're setting the default width to 200 on each one of these,
you can see it being represented here.
I'm also going to make this a little bit smaller so we don't quite need a height of 600.
We can do it as a height of four hundred.
So that's going to show it a little bit better within our screen visible area.
So now we've been able to generate the players.
And the nice thing about this is that when we try to access the players array, you're going to see
that we've got the three divs in there and these devices are actually corresponding to the device where
we've got cards written on the screen.
So we have an easy way to loop through the player's array and access the elements accordingly.
So player one.
Player two.
Player three.
And this is our visible area where the cards are selected.
So that's why that was set up within an array format so that we can easily access these items that are
available in the array.
And then the rest was for visual properties in order to show the player name, as well as the cards
that we're going to be displaying.
So all of that was outlined there within the player structure.
So go ahead and add this into your project.
And coming up next, we're going to work a little bit more on the building out the deck as well as dealing
the cards.
So that is all still yet to come.
And this of course, this is an important part where we're using the player's array and we're adding
in these elements so that we can access them as needed.
And that's going to come very evident as we do more visual stuff and we output the cards visually for
the player, the cards that are being returned.
And that's all still to come as well.