So welcome back and in this lesson, we are going to be handling the winner, so we've got the original
deal and the deal out and we're not going to do anything for the playoff quite yet, but we're going
to take whoever the winner is.
So if we have a clear winner of player one won this round, so they should get all of these cards and
then we can flip to the next card.
So that's what we want to do on a typical round where we just have the one winner of the the card flip.
And we also are tracking the winner.
And we also are tracking all of the cards that have been played.
So we've got all of the cards played within Tampa Holder.
So going back and refreshing it and you can see that we've got the winner who is player number two.
So index number one, the card that they played and the card they won with, as well as all of the cards
that were played get dropped into the temp holder.
So the way the game is going to work is whoever won is going to get all of those cards.
So let's create a function in order to handle that.
We can call it Updater and Posehn, the current winner value as so current winner.
And we can pass the whole object in if we want and temp holder as well.
So we're passing in both of those arrays.
And actually, really the only one that we really need is we need to get the player so we can also just
pass in the player to make it a little bit cleaner.
So when we pick up that information on the function that we're calling updater, we've got two parameters.
We've got the winner and we can also call this temp holder.
So these are referring to all of the cards that were won by the winner.
So let's take our players object.
And because we've got an index value which is contained in a winner.
So the winner is the index values.
Remember, over here, it's just being passed in as a number.
So that's going to refer to whoever the winner is.
And we've got all of the elements within the players.
So it makes it really easy to update the background color and we can update the background color to
green.
So that will visually represent who the winner is.
So let's try that and start so we see that whoever was the winner is actually turning green.
So the thing that we want to do is we want to select and we want to add in all of these cards.
So the temp holder cards, we want to add them into our winner.
So that means that we can loop through them.
So let's set up a for loop to loop through.
We need to create a record.
So actually this is going to be the card of temp holder.
So this is all of the array of all of the cards that were played.
And so all of these are going to go into the winners deck.
So taking the deals array and selecting the index of the winner, we're going to push the record into
there.
So getting the record from here.
And as we iterate through, we're going to push that in and we can also output information here as to
who the winner is.
So taking our rez elements, that's where we've got all of the content that we're outputting.
And we can output a message to the player player and we're adding one to it because winner is an index
value.
And this is a message out to the user.
And also, let's list out how many cards that they want.
So in case there was a playoff and that maybe they won more cards.
So we're going to get all of those cards and add them in to of the round so we can see now whoever is
the winner of this round, their background goes green.
And they also get all of the cards added in use into their deals array.
So go ahead and add this into your project.
And this is just the way that we're going to be determining the winner.
And we're also outputting how many cards are won by the winner.
So that's there at the bottom.
We can also output underneath an information about how many cards they have left.
Let's also add in an option so that we can generate randomize the order of the cards that are being
inserted into the winner.
We can console log the temp holder value and then using the temp holder array and then the sort method
we can sort in place that array by using our return and returning point five minus math random.
This is a quick function and this gives you the ability to sort out an array object in place.
And we'll also console log it after the sort.
So refresh hit start.
And you can see that originally the sort order would have been ACE two three.
It's been changed to the to the speeds and then the clubs.
So we had the opportunity to update rate order.
So go ahead and add that into your project.
So let's do one more loop and we can use X as well for this one and looping through while X is less
than the length.
Of players, so we're looping through all of the players array once again, so these are all of the
elements that are representing the players on the screen and the X's just, again, their index number.
So as we loop through, we can create a div.
So creating an element that we can output a message to the player.
So creating an element and let's create a div in this case.
And then also, let's let's create a variable we can call that output, so this is where we're outputting
information.
So we've got our DLs length.
So depending on their index value, again, we're using that index value to indicate which player it
is.
And we're checking to see if they're less than one and if they are than they've actually lost the game.
Otherwise, we can output how many cards are left and we're going to handle the game, losing and winning
in the upcoming lessons.
So we're going through and indicating for the player the length of their array.
So this is how many cards they have left and we need to subtract one from their.
And then let's take our d'Hiv and append the inner HTML to it, which is going to be equal to the output
value.
Or we could shorten this as well and we could just append to the div we can set it's in our HTML.
So that will get rid of one line and then taking players and adding to that player's object.
We can append a child to it and that's going to be the div that we just created.
So see what that looks like.
So this will give an indication of how many cards are left for each player.
And it does look like we should apply some styling.
So let's use class list and add a class and let's call this class stats and then going up to our CSOSA
and we can update the font size of this as well.
So remember, this is taking the font size from the parent.
So if we want it smaller, we can set it to 1:00 a.m. So let's see what that looks like.
So that's given us a little bit of spacing.
We can also move this down even more and we can make this even smaller for want.
So that gives us an indication of how many cards are left.
And actually, we need to show this after we add to the new array.
So let's update the order of this so before we rebuild the winners.
So now in this case, we know that the player one has 19 cards because he won the two other cards from
all of the players.
And if we go to DLS array, you can see that indicated there as well.
So we've got 19 cards.
And the reason I say 19 cards left is because that's where we subtracted the one.
So you could also indicate this as card and then you don't have to have the minus one because that's
going to include the one that's showing.
So there's another option as well.
So this case, there's 20 cards here.
There's 16, 16.
And the total of total cards, of course, and the deck is always going to be 52.
So go ahead and add that into your project.
And this is more messaging in order to enhance the gameplay.