Hi and welcome back.
This lesson, we're going to do a quick code review, we've got her application working as intended,
and now we can do a quick code review reviewing all of the functionality that we've created in the earlier
lessons.
So we added some styling to make it look good.
And of course, you can apply your own styling and make it look in your own customized look and feel
to the scheme.
So the styling I'm not going to be reviewing this was just for a better look and feel.
We also have our HTML, so our HTML structure of the application.
So this is where our starting point was and the way that we usually design the games as we come in and
we determine what interactions and what information we're going to need to play to the user.
So what interactions they're going to need in order to play the game as well as what we need to output
to them.
Next, we use JavaScript to connect to the document object model to document objects, elements connecting
to those elements using variables in JavaScript.
So connecting to those instances.
And this gave us the ability to really access those within the code.
We also had to set up a bunch of variables.
So the deck is where the deck of cards is sitting.
The players array is going to be containing all the player information and you can see this as you output
in the console.
So once we've got our players array, you see that all this that's contained within here are the diffs
and these are the output device.
But they also give us account and account of which players are active.
So if we have a number of players, if we have four players or five players, so this is all dynamically
generated and we get access to all of those elements there.
We also have another array that we created.
So that's the deals and what the deals is essentially what cards the players have contained within their
hand.
And then this is what fluctuates as we play the game.
We also have rounds.
So we have an option to have multiple round attacks.
So rounds are always at zero and we loop through multiple rounds.
Inplay gave us an option to set it as true or false, and that allowed us to continue the play or restart
the play.
And then lastly, we have total, which basically was just a total account of the cards, and it allows
us to be able to detect which are the winners.
And then the ranks and suits were arrays that we used in order to build the deck of cards.
We loop through the buttons, adding event listeners to all the different buttons.
We have two buttons essentially on the page.
So we will start an attack and we have different functionality for each one.
So we detect what the inner text is, what the text content of that element is.
And if it's start, then we set the message color to block.
We toggle the buttons and the toggle the buttons function.
Basically what this is, it's toggled the height to the buttons.
So if it has it, it removes it.
And if it doesn't have it, it adds the class of height.
And what he does was short.
So that gave us that functionality where we've got the start button.
We clicked start and we end up with seeing only the top button and we also toggle the buttons when we
win the game in order for us to restart the game, we have a start game.
So this is basically our setup function where we set in play to true.
We clear out the gameplay in our HTML.
We set up the number of players within the input there.
So we grabbed the number of players that the user has asked for.
So three, to whatever we build the deck of cards we set up, the players would set up the arrays,
deals out the cards and deal cards.
And this was our starting card player that we were dealing to and then we were making the cards.
So that was the round where we show the cards visually to the player.
So that was the make cards function.
And this was one of the crucial ones where every time we want to redeem the cards.
So this could also be dealing the cards out to the players.
And then we also are updating that input value to one, because instead of the number of players when
we hit start, this is how many rounds were playing in the attack.
So by default, maybe we only want to have one.
But the way this game goes, sometimes it's more fun.
If you can play multiple rounds at once, you don't have to keep pressing.
Attack, attack, attack.
So that's what we have that option for, for the player.
We also have one to show the cards.
So basically what happens here is we construct the card creating elements, using JavaScript, create
elements and we construct the card.
So we also used our styling in order to style the look and feel of the cards to make them look more
like playing cards.
We have a deal round, which is a function that we created in order to handle the play offs.
And a lot of the functionality was the same as when we deal the cards.
So this was where we determine who the winner is.
We loop through all the players and the player list.
By default, it's going to be all the players.
And then as we play the game.
A player list can shrink and also if we're have a playoff situation, then the player list is only going
to include the players that are in the player's playoffs.
And this is going by the players index value.
So it's not one to three, it's zero one two.
So as it falls within the array list 10 holder was the amount of cards that have been played and have
been drawn.
So basically what happens is that the temp holder array of cards ends up going to the winner once we
determine who the winner is.
So all of this was to determine who the winner is.
We also select a card from the from the player's hand and we check to see if that's the high card.
And if it is, then we added into the winner.
If it's the first time, if there's no other cards in the playoff, that means that we need to push
the current player as well as the new player.
So that gives us the two players in the playoff situation.
We also have our current winner so we determine if we have a current winner and the card value of the
current winner.
So we're adjusting who the current winner is at that point, and then we're adding in the selected card
into the temp holder.
So because that card has been played, so we're adding it into our holding section.
And then so card show card function allows us to show the card.
So we select and we show which player we are showing the card.
So by index value, which also allows us to select that element object.
So essentially players and that temp player index value selects the element that the cards are going
to be output to, and then the card information is passed into show card as well.
And we keep going through until we have no more playoffs.
And if we do have a playoff situation where we have a tie for the leading card, then we have to go
through deal round again.
And we're passing in those two players.
And as well as we're adding in the temporary cards.
So going in and we're continuously loop through this function until we find a winner.
When we find a winner, we pass that into the function called Updater Make Cards is the one that we
run by default when we attack.
What this does is it sets basic Holder section for the cards and this is just going to be blank.
So we don't actually need to even pass anything in here.
We could do this to to shorten the function if we wanted to, as we don't have any content being passed
in there.
The players list we do build as we move through all of the available players and see which ones hands
have more than zero cards and if they have more than zero cards and we push them into the list so that
we can play through them and if the players list length is equal to one.
So this is a failsafe that if we end up with one player in the game, then we automatically run the
win condition to break them out of the game.
The win condition resets the messages, toggles the buttons, sets in play to false outputs, information
who the winner and who the losers are.
And then also resets our original message so that we can restart the game and select the number of players
updates.
The input value to be three updater is the function that we run when we've selected a winner.
So we get our winner.
We know who the winner index value is as well as the temp holder.
So then within players we get the winner passing in the style and updating the background color to green.
So it's more visual who the winner is.
We sort the temp holder so that it's this was just a really quick function to resort an array randomly
so that we don't always have the same order of cards.
So we play around a little bit with the order of cards.
Then we loop through the temp holders, we loop through all the cards that are being held temporarily,
and we add them to the winners hand and list of cards.
And then we also loop through all of the players.
We create a div, we update the stats, so we add those stat information down here at the bottom and
then we also check to see the length.
And if the length is equal to the total, then that means that we've won the game and it's game over.
We update the inter HTML to the card length and we just put some information that that player is now
the winner and we run the win game function.
Otherwise we output that they've lost and how many cards they have left.
And then we lastly we have ten that value.
So you see that happening here where if we do, we get how many cards are left for each one of the players.
So that gives us some stats to work with.
And then we also update the HTML of this tracking information down here below.
So that gives us an overview of what happened on each round here.
We've got dealing of the cards to the players, so we loop through the deck of cards and as we loop
through, we add it.
Who the players hand, so the players each get a set of cards dealt out to them.
This is where we're setting up the players, so we're building out the initial players.
When we hit start, we've got the player, one player to player, three elements.
So those are being created and set up players and created dynamically.
We're setting the attributes to the player ID, which we're not using, but we could use if we needed
to.
We're also updating and adding a class of player and then updating cards, appending it to our game
area.
So building that div and then appending it to the game area.
And then we're also pushing that into the deals in order to prepare for slots to have an array with
arrays inside of it that we can deal the card so to.
And so this is all done dynamically.
So we have flexibility and we can select how many how many players we have within the game.
Next, we're building the deck.
So this was one of the first functions that we run.
And this gives us the ability to create a new deck of cards.
So when we have one of a deck of cards, we can just build a deck and we can do it within this type
of format.
So within the card object, we get suit, rank value and we can push the card in.
And then we, of course, we're utilizing the values to determine who had the winning card in the deck.
So that was a quick summary and overview of all of the functionality that we've covered in the earlier
lessons.
If you have any questions or comments, please let me know the section.
I'm always happy to help address any questions, clarify any content.
Thanks again for taking the course.
And I do want to remind you that the source code has been included.
So I do encourage you to try it out for yourself, experiment with it and build your own version of
the game.