1 00:00:00,180 --> 00:00:01,450 Hi and welcome back. 2 00:00:01,470 --> 00:00:06,690 This lesson, we're going to do a quick code review, we've got her application working as intended, 3 00:00:06,810 --> 00:00:12,300 and now we can do a quick code review reviewing all of the functionality that we've created in the earlier 4 00:00:12,300 --> 00:00:12,810 lessons. 5 00:00:13,020 --> 00:00:15,170 So we added some styling to make it look good. 6 00:00:15,180 --> 00:00:21,210 And of course, you can apply your own styling and make it look in your own customized look and feel 7 00:00:21,210 --> 00:00:21,870 to the scheme. 8 00:00:22,110 --> 00:00:26,750 So the styling I'm not going to be reviewing this was just for a better look and feel. 9 00:00:26,910 --> 00:00:33,000 We also have our HTML, so our HTML structure of the application. 10 00:00:33,270 --> 00:00:38,400 So this is where our starting point was and the way that we usually design the games as we come in and 11 00:00:38,400 --> 00:00:43,770 we determine what interactions and what information we're going to need to play to the user. 12 00:00:43,920 --> 00:00:48,240 So what interactions they're going to need in order to play the game as well as what we need to output 13 00:00:48,240 --> 00:00:48,690 to them. 14 00:00:49,050 --> 00:00:56,250 Next, we use JavaScript to connect to the document object model to document objects, elements connecting 15 00:00:56,250 --> 00:00:59,790 to those elements using variables in JavaScript. 16 00:00:59,790 --> 00:01:01,440 So connecting to those instances. 17 00:01:01,950 --> 00:01:05,810 And this gave us the ability to really access those within the code. 18 00:01:06,000 --> 00:01:07,980 We also had to set up a bunch of variables. 19 00:01:08,220 --> 00:01:10,980 So the deck is where the deck of cards is sitting. 20 00:01:11,160 --> 00:01:18,210 The players array is going to be containing all the player information and you can see this as you output 21 00:01:18,210 --> 00:01:18,990 in the console. 22 00:01:19,000 --> 00:01:24,810 So once we've got our players array, you see that all this that's contained within here are the diffs 23 00:01:25,110 --> 00:01:26,430 and these are the output device. 24 00:01:26,610 --> 00:01:31,880 But they also give us account and account of which players are active. 25 00:01:32,160 --> 00:01:37,410 So if we have a number of players, if we have four players or five players, so this is all dynamically 26 00:01:37,410 --> 00:01:41,130 generated and we get access to all of those elements there. 27 00:01:41,400 --> 00:01:44,130 We also have another array that we created. 28 00:01:44,140 --> 00:01:50,130 So that's the deals and what the deals is essentially what cards the players have contained within their 29 00:01:50,130 --> 00:01:50,550 hand. 30 00:01:50,670 --> 00:01:53,750 And then this is what fluctuates as we play the game. 31 00:01:54,030 --> 00:01:55,590 We also have rounds. 32 00:01:55,740 --> 00:01:58,980 So we have an option to have multiple round attacks. 33 00:01:59,190 --> 00:02:03,540 So rounds are always at zero and we loop through multiple rounds. 34 00:02:03,750 --> 00:02:11,160 Inplay gave us an option to set it as true or false, and that allowed us to continue the play or restart 35 00:02:11,160 --> 00:02:11,610 the play. 36 00:02:11,820 --> 00:02:17,520 And then lastly, we have total, which basically was just a total account of the cards, and it allows 37 00:02:17,520 --> 00:02:19,620 us to be able to detect which are the winners. 38 00:02:19,830 --> 00:02:25,230 And then the ranks and suits were arrays that we used in order to build the deck of cards. 39 00:02:25,410 --> 00:02:29,370 We loop through the buttons, adding event listeners to all the different buttons. 40 00:02:29,490 --> 00:02:31,980 We have two buttons essentially on the page. 41 00:02:31,980 --> 00:02:35,670 So we will start an attack and we have different functionality for each one. 42 00:02:35,910 --> 00:02:40,890 So we detect what the inner text is, what the text content of that element is. 43 00:02:40,890 --> 00:02:44,790 And if it's start, then we set the message color to block. 44 00:02:45,060 --> 00:02:47,880 We toggle the buttons and the toggle the buttons function. 45 00:02:48,060 --> 00:02:51,750 Basically what this is, it's toggled the height to the buttons. 46 00:02:51,750 --> 00:02:54,180 So if it has it, it removes it. 47 00:02:54,420 --> 00:02:57,840 And if it doesn't have it, it adds the class of height. 48 00:02:57,840 --> 00:02:59,250 And what he does was short. 49 00:02:59,460 --> 00:03:02,400 So that gave us that functionality where we've got the start button. 50 00:03:02,610 --> 00:03:08,220 We clicked start and we end up with seeing only the top button and we also toggle the buttons when we 51 00:03:08,220 --> 00:03:12,780 win the game in order for us to restart the game, we have a start game. 52 00:03:12,780 --> 00:03:17,500 So this is basically our setup function where we set in play to true. 53 00:03:17,700 --> 00:03:19,980 We clear out the gameplay in our HTML. 54 00:03:20,190 --> 00:03:23,970 We set up the number of players within the input there. 55 00:03:23,970 --> 00:03:27,330 So we grabbed the number of players that the user has asked for. 56 00:03:27,330 --> 00:03:33,600 So three, to whatever we build the deck of cards we set up, the players would set up the arrays, 57 00:03:33,600 --> 00:03:35,820 deals out the cards and deal cards. 58 00:03:36,060 --> 00:03:41,550 And this was our starting card player that we were dealing to and then we were making the cards. 59 00:03:41,550 --> 00:03:46,770 So that was the round where we show the cards visually to the player. 60 00:03:46,770 --> 00:03:48,450 So that was the make cards function. 61 00:03:48,660 --> 00:03:53,400 And this was one of the crucial ones where every time we want to redeem the cards. 62 00:03:53,400 --> 00:03:56,940 So this could also be dealing the cards out to the players. 63 00:03:57,210 --> 00:04:02,790 And then we also are updating that input value to one, because instead of the number of players when 64 00:04:02,790 --> 00:04:05,850 we hit start, this is how many rounds were playing in the attack. 65 00:04:06,030 --> 00:04:08,430 So by default, maybe we only want to have one. 66 00:04:08,580 --> 00:04:11,850 But the way this game goes, sometimes it's more fun. 67 00:04:11,850 --> 00:04:14,910 If you can play multiple rounds at once, you don't have to keep pressing. 68 00:04:14,910 --> 00:04:16,170 Attack, attack, attack. 69 00:04:16,410 --> 00:04:19,170 So that's what we have that option for, for the player. 70 00:04:20,010 --> 00:04:22,020 We also have one to show the cards. 71 00:04:22,020 --> 00:04:29,220 So basically what happens here is we construct the card creating elements, using JavaScript, create 72 00:04:29,220 --> 00:04:31,110 elements and we construct the card. 73 00:04:31,120 --> 00:04:37,440 So we also used our styling in order to style the look and feel of the cards to make them look more 74 00:04:37,440 --> 00:04:38,700 like playing cards. 75 00:04:39,120 --> 00:04:44,160 We have a deal round, which is a function that we created in order to handle the play offs. 76 00:04:44,310 --> 00:04:49,020 And a lot of the functionality was the same as when we deal the cards. 77 00:04:49,680 --> 00:04:52,740 So this was where we determine who the winner is. 78 00:04:52,740 --> 00:04:55,470 We loop through all the players and the player list. 79 00:04:55,800 --> 00:04:57,930 By default, it's going to be all the players. 80 00:04:57,930 --> 00:04:59,610 And then as we play the game. 81 00:04:59,870 --> 00:05:05,900 A player list can shrink and also if we're have a playoff situation, then the player list is only going 82 00:05:05,900 --> 00:05:09,530 to include the players that are in the player's playoffs. 83 00:05:09,900 --> 00:05:12,140 And this is going by the players index value. 84 00:05:12,140 --> 00:05:14,990 So it's not one to three, it's zero one two. 85 00:05:15,080 --> 00:05:21,500 So as it falls within the array list 10 holder was the amount of cards that have been played and have 86 00:05:21,500 --> 00:05:22,170 been drawn. 87 00:05:22,370 --> 00:05:29,600 So basically what happens is that the temp holder array of cards ends up going to the winner once we 88 00:05:29,600 --> 00:05:31,190 determine who the winner is. 89 00:05:31,430 --> 00:05:33,670 So all of this was to determine who the winner is. 90 00:05:33,680 --> 00:05:42,020 We also select a card from the from the player's hand and we check to see if that's the high card. 91 00:05:42,020 --> 00:05:45,290 And if it is, then we added into the winner. 92 00:05:45,530 --> 00:05:50,120 If it's the first time, if there's no other cards in the playoff, that means that we need to push 93 00:05:50,120 --> 00:05:52,540 the current player as well as the new player. 94 00:05:52,550 --> 00:05:56,170 So that gives us the two players in the playoff situation. 95 00:05:56,840 --> 00:06:04,850 We also have our current winner so we determine if we have a current winner and the card value of the 96 00:06:04,850 --> 00:06:05,420 current winner. 97 00:06:05,420 --> 00:06:10,820 So we're adjusting who the current winner is at that point, and then we're adding in the selected card 98 00:06:10,820 --> 00:06:11,860 into the temp holder. 99 00:06:12,050 --> 00:06:16,580 So because that card has been played, so we're adding it into our holding section. 100 00:06:16,820 --> 00:06:21,230 And then so card show card function allows us to show the card. 101 00:06:21,470 --> 00:06:25,910 So we select and we show which player we are showing the card. 102 00:06:25,930 --> 00:06:31,270 So by index value, which also allows us to select that element object. 103 00:06:31,370 --> 00:06:37,790 So essentially players and that temp player index value selects the element that the cards are going 104 00:06:37,790 --> 00:06:42,740 to be output to, and then the card information is passed into show card as well. 105 00:06:43,130 --> 00:06:46,970 And we keep going through until we have no more playoffs. 106 00:06:47,120 --> 00:06:52,730 And if we do have a playoff situation where we have a tie for the leading card, then we have to go 107 00:06:52,730 --> 00:06:54,080 through deal round again. 108 00:06:54,200 --> 00:06:56,300 And we're passing in those two players. 109 00:06:56,510 --> 00:06:59,600 And as well as we're adding in the temporary cards. 110 00:06:59,600 --> 00:07:04,370 So going in and we're continuously loop through this function until we find a winner. 111 00:07:04,520 --> 00:07:10,430 When we find a winner, we pass that into the function called Updater Make Cards is the one that we 112 00:07:10,430 --> 00:07:12,200 run by default when we attack. 113 00:07:12,860 --> 00:07:20,810 What this does is it sets basic Holder section for the cards and this is just going to be blank. 114 00:07:21,020 --> 00:07:23,840 So we don't actually need to even pass anything in here. 115 00:07:23,840 --> 00:07:29,240 We could do this to to shorten the function if we wanted to, as we don't have any content being passed 116 00:07:29,240 --> 00:07:29,630 in there. 117 00:07:29,870 --> 00:07:36,710 The players list we do build as we move through all of the available players and see which ones hands 118 00:07:36,710 --> 00:07:42,710 have more than zero cards and if they have more than zero cards and we push them into the list so that 119 00:07:42,710 --> 00:07:47,850 we can play through them and if the players list length is equal to one. 120 00:07:47,990 --> 00:07:53,930 So this is a failsafe that if we end up with one player in the game, then we automatically run the 121 00:07:53,930 --> 00:07:55,970 win condition to break them out of the game. 122 00:07:56,180 --> 00:08:02,920 The win condition resets the messages, toggles the buttons, sets in play to false outputs, information 123 00:08:02,930 --> 00:08:04,700 who the winner and who the losers are. 124 00:08:05,090 --> 00:08:11,000 And then also resets our original message so that we can restart the game and select the number of players 125 00:08:11,210 --> 00:08:11,750 updates. 126 00:08:11,750 --> 00:08:17,390 The input value to be three updater is the function that we run when we've selected a winner. 127 00:08:17,390 --> 00:08:18,950 So we get our winner. 128 00:08:18,950 --> 00:08:23,480 We know who the winner index value is as well as the temp holder. 129 00:08:23,750 --> 00:08:30,070 So then within players we get the winner passing in the style and updating the background color to green. 130 00:08:30,260 --> 00:08:31,970 So it's more visual who the winner is. 131 00:08:32,300 --> 00:08:40,970 We sort the temp holder so that it's this was just a really quick function to resort an array randomly 132 00:08:41,480 --> 00:08:44,480 so that we don't always have the same order of cards. 133 00:08:44,660 --> 00:08:47,060 So we play around a little bit with the order of cards. 134 00:08:47,300 --> 00:08:52,520 Then we loop through the temp holders, we loop through all the cards that are being held temporarily, 135 00:08:52,640 --> 00:08:56,690 and we add them to the winners hand and list of cards. 136 00:08:57,050 --> 00:08:59,480 And then we also loop through all of the players. 137 00:08:59,810 --> 00:09:08,270 We create a div, we update the stats, so we add those stat information down here at the bottom and 138 00:09:08,270 --> 00:09:10,490 then we also check to see the length. 139 00:09:10,490 --> 00:09:16,760 And if the length is equal to the total, then that means that we've won the game and it's game over. 140 00:09:16,970 --> 00:09:24,110 We update the inter HTML to the card length and we just put some information that that player is now 141 00:09:24,110 --> 00:09:26,000 the winner and we run the win game function. 142 00:09:26,330 --> 00:09:30,890 Otherwise we output that they've lost and how many cards they have left. 143 00:09:31,190 --> 00:09:34,030 And then we lastly we have ten that value. 144 00:09:34,250 --> 00:09:40,520 So you see that happening here where if we do, we get how many cards are left for each one of the players. 145 00:09:40,700 --> 00:09:42,560 So that gives us some stats to work with. 146 00:09:42,740 --> 00:09:49,550 And then we also update the HTML of this tracking information down here below. 147 00:09:49,730 --> 00:09:53,180 So that gives us an overview of what happened on each round here. 148 00:09:53,180 --> 00:09:58,250 We've got dealing of the cards to the players, so we loop through the deck of cards and as we loop 149 00:09:58,250 --> 00:09:59,550 through, we add it. 150 00:09:59,720 --> 00:10:04,280 Who the players hand, so the players each get a set of cards dealt out to them. 151 00:10:04,700 --> 00:10:09,290 This is where we're setting up the players, so we're building out the initial players. 152 00:10:09,290 --> 00:10:14,080 When we hit start, we've got the player, one player to player, three elements. 153 00:10:14,090 --> 00:10:17,660 So those are being created and set up players and created dynamically. 154 00:10:17,660 --> 00:10:23,030 We're setting the attributes to the player ID, which we're not using, but we could use if we needed 155 00:10:23,030 --> 00:10:23,300 to. 156 00:10:23,480 --> 00:10:31,130 We're also updating and adding a class of player and then updating cards, appending it to our game 157 00:10:31,130 --> 00:10:31,620 area. 158 00:10:31,790 --> 00:10:35,030 So building that div and then appending it to the game area. 159 00:10:35,660 --> 00:10:44,330 And then we're also pushing that into the deals in order to prepare for slots to have an array with 160 00:10:44,330 --> 00:10:46,930 arrays inside of it that we can deal the card so to. 161 00:10:47,360 --> 00:10:49,370 And so this is all done dynamically. 162 00:10:49,380 --> 00:10:54,310 So we have flexibility and we can select how many how many players we have within the game. 163 00:10:54,980 --> 00:10:56,540 Next, we're building the deck. 164 00:10:56,560 --> 00:10:59,030 So this was one of the first functions that we run. 165 00:10:59,030 --> 00:11:02,630 And this gives us the ability to create a new deck of cards. 166 00:11:02,810 --> 00:11:07,550 So when we have one of a deck of cards, we can just build a deck and we can do it within this type 167 00:11:07,550 --> 00:11:08,140 of format. 168 00:11:08,270 --> 00:11:12,950 So within the card object, we get suit, rank value and we can push the card in. 169 00:11:13,100 --> 00:11:18,590 And then we, of course, we're utilizing the values to determine who had the winning card in the deck. 170 00:11:18,980 --> 00:11:24,620 So that was a quick summary and overview of all of the functionality that we've covered in the earlier 171 00:11:24,620 --> 00:11:25,150 lessons. 172 00:11:25,550 --> 00:11:29,360 If you have any questions or comments, please let me know the section. 173 00:11:29,360 --> 00:11:33,470 I'm always happy to help address any questions, clarify any content. 174 00:11:33,770 --> 00:11:35,600 Thanks again for taking the course. 175 00:11:35,600 --> 00:11:39,350 And I do want to remind you that the source code has been included. 176 00:11:39,560 --> 00:11:44,420 So I do encourage you to try it out for yourself, experiment with it and build your own version of 177 00:11:44,420 --> 00:11:44,720 the game.