1 00:00:01,190 --> 00:00:06,230 So welcome back and in this lesson, we are going to be handling the winner, so we've got the original 2 00:00:06,230 --> 00:00:11,000 deal and the deal out and we're not going to do anything for the playoff quite yet, but we're going 3 00:00:11,000 --> 00:00:12,320 to take whoever the winner is. 4 00:00:12,320 --> 00:00:18,020 So if we have a clear winner of player one won this round, so they should get all of these cards and 5 00:00:18,020 --> 00:00:19,690 then we can flip to the next card. 6 00:00:19,910 --> 00:00:26,360 So that's what we want to do on a typical round where we just have the one winner of the the card flip. 7 00:00:27,310 --> 00:00:29,330 And we also are tracking the winner. 8 00:00:29,330 --> 00:00:32,770 And we also are tracking all of the cards that have been played. 9 00:00:32,960 --> 00:00:35,950 So we've got all of the cards played within Tampa Holder. 10 00:00:36,170 --> 00:00:42,380 So going back and refreshing it and you can see that we've got the winner who is player number two. 11 00:00:42,470 --> 00:00:48,410 So index number one, the card that they played and the card they won with, as well as all of the cards 12 00:00:48,410 --> 00:00:51,440 that were played get dropped into the temp holder. 13 00:00:51,740 --> 00:00:56,540 So the way the game is going to work is whoever won is going to get all of those cards. 14 00:00:56,660 --> 00:00:59,030 So let's create a function in order to handle that. 15 00:00:59,270 --> 00:01:07,430 We can call it Updater and Posehn, the current winner value as so current winner. 16 00:01:07,730 --> 00:01:12,920 And we can pass the whole object in if we want and temp holder as well. 17 00:01:12,930 --> 00:01:14,900 So we're passing in both of those arrays. 18 00:01:15,110 --> 00:01:20,750 And actually, really the only one that we really need is we need to get the player so we can also just 19 00:01:20,750 --> 00:01:23,420 pass in the player to make it a little bit cleaner. 20 00:01:23,630 --> 00:01:29,840 So when we pick up that information on the function that we're calling updater, we've got two parameters. 21 00:01:29,840 --> 00:01:34,000 We've got the winner and we can also call this temp holder. 22 00:01:34,220 --> 00:01:37,970 So these are referring to all of the cards that were won by the winner. 23 00:01:38,300 --> 00:01:41,450 So let's take our players object. 24 00:01:41,690 --> 00:01:45,620 And because we've got an index value which is contained in a winner. 25 00:01:46,010 --> 00:01:48,220 So the winner is the index values. 26 00:01:48,230 --> 00:01:50,810 Remember, over here, it's just being passed in as a number. 27 00:01:51,110 --> 00:01:53,900 So that's going to refer to whoever the winner is. 28 00:01:54,050 --> 00:01:56,420 And we've got all of the elements within the players. 29 00:01:56,600 --> 00:02:02,540 So it makes it really easy to update the background color and we can update the background color to 30 00:02:02,550 --> 00:02:02,980 green. 31 00:02:03,680 --> 00:02:06,880 So that will visually represent who the winner is. 32 00:02:07,220 --> 00:02:12,990 So let's try that and start so we see that whoever was the winner is actually turning green. 33 00:02:13,160 --> 00:02:20,000 So the thing that we want to do is we want to select and we want to add in all of these cards. 34 00:02:20,270 --> 00:02:24,560 So the temp holder cards, we want to add them into our winner. 35 00:02:24,800 --> 00:02:26,530 So that means that we can loop through them. 36 00:02:26,540 --> 00:02:28,700 So let's set up a for loop to loop through. 37 00:02:29,220 --> 00:02:30,890 We need to create a record. 38 00:02:30,900 --> 00:02:34,250 So actually this is going to be the card of temp holder. 39 00:02:34,260 --> 00:02:38,270 So this is all of the array of all of the cards that were played. 40 00:02:38,960 --> 00:02:41,960 And so all of these are going to go into the winners deck. 41 00:02:42,260 --> 00:02:52,400 So taking the deals array and selecting the index of the winner, we're going to push the record into 42 00:02:52,820 --> 00:02:53,260 there. 43 00:02:53,750 --> 00:02:55,130 So getting the record from here. 44 00:02:55,130 --> 00:03:01,700 And as we iterate through, we're going to push that in and we can also output information here as to 45 00:03:01,700 --> 00:03:02,820 who the winner is. 46 00:03:03,140 --> 00:03:08,060 So taking our rez elements, that's where we've got all of the content that we're outputting. 47 00:03:08,300 --> 00:03:16,370 And we can output a message to the player player and we're adding one to it because winner is an index 48 00:03:16,370 --> 00:03:16,870 value. 49 00:03:16,880 --> 00:03:20,360 And this is a message out to the user. 50 00:03:20,570 --> 00:03:23,620 And also, let's list out how many cards that they want. 51 00:03:23,660 --> 00:03:27,740 So in case there was a playoff and that maybe they won more cards. 52 00:03:28,220 --> 00:03:35,600 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 53 00:03:35,600 --> 00:03:38,840 the winner of this round, their background goes green. 54 00:03:38,960 --> 00:03:44,610 And they also get all of the cards added in use into their deals array. 55 00:03:44,690 --> 00:03:47,060 So go ahead and add this into your project. 56 00:03:47,180 --> 00:03:50,780 And this is just the way that we're going to be determining the winner. 57 00:03:50,870 --> 00:03:54,410 And we're also outputting how many cards are won by the winner. 58 00:03:54,410 --> 00:03:55,510 So that's there at the bottom. 59 00:03:55,550 --> 00:04:00,290 We can also output underneath an information about how many cards they have left. 60 00:04:00,560 --> 00:04:07,310 Let's also add in an option so that we can generate randomize the order of the cards that are being 61 00:04:07,310 --> 00:04:09,170 inserted into the winner. 62 00:04:09,200 --> 00:04:17,480 We can console log the temp holder value and then using the temp holder array and then the sort method 63 00:04:17,480 --> 00:04:26,610 we can sort in place that array by using our return and returning point five minus math random. 64 00:04:26,630 --> 00:04:32,060 This is a quick function and this gives you the ability to sort out an array object in place. 65 00:04:32,060 --> 00:04:34,550 And we'll also console log it after the sort. 66 00:04:34,550 --> 00:04:36,320 So refresh hit start. 67 00:04:36,470 --> 00:04:41,170 And you can see that originally the sort order would have been ACE two three. 68 00:04:41,180 --> 00:04:45,100 It's been changed to the to the speeds and then the clubs. 69 00:04:45,380 --> 00:04:48,710 So we had the opportunity to update rate order. 70 00:04:48,740 --> 00:04:50,390 So go ahead and add that into your project. 71 00:04:51,180 --> 00:04:59,180 So let's do one more loop and we can use X as well for this one and looping through while X is less 72 00:04:59,180 --> 00:05:00,020 than the length. 73 00:05:00,100 --> 00:05:05,620 Of players, so we're looping through all of the players array once again, so these are all of the 74 00:05:05,620 --> 00:05:12,540 elements that are representing the players on the screen and the X's just, again, their index number. 75 00:05:12,700 --> 00:05:15,850 So as we loop through, we can create a div. 76 00:05:15,850 --> 00:05:20,050 So creating an element that we can output a message to the player. 77 00:05:20,560 --> 00:05:24,340 So creating an element and let's create a div in this case. 78 00:05:28,010 --> 00:05:34,130 And then also, let's let's create a variable we can call that output, so this is where we're outputting 79 00:05:34,130 --> 00:05:34,810 information. 80 00:05:34,820 --> 00:05:37,120 So we've got our DLs length. 81 00:05:37,940 --> 00:05:43,100 So depending on their index value, again, we're using that index value to indicate which player it 82 00:05:43,100 --> 00:05:43,340 is. 83 00:05:43,610 --> 00:05:49,250 And we're checking to see if they're less than one and if they are than they've actually lost the game. 84 00:05:49,670 --> 00:05:57,050 Otherwise, we can output how many cards are left and we're going to handle the game, losing and winning 85 00:05:57,050 --> 00:05:58,490 in the upcoming lessons. 86 00:05:58,730 --> 00:06:03,620 So we're going through and indicating for the player the length of their array. 87 00:06:05,360 --> 00:06:09,560 So this is how many cards they have left and we need to subtract one from their. 88 00:06:11,870 --> 00:06:18,500 And then let's take our d'Hiv and append the inner HTML to it, which is going to be equal to the output 89 00:06:18,500 --> 00:06:18,890 value. 90 00:06:19,730 --> 00:06:25,000 Or we could shorten this as well and we could just append to the div we can set it's in our HTML. 91 00:06:25,280 --> 00:06:32,120 So that will get rid of one line and then taking players and adding to that player's object. 92 00:06:32,120 --> 00:06:36,020 We can append a child to it and that's going to be the div that we just created. 93 00:06:36,830 --> 00:06:37,820 So see what that looks like. 94 00:06:37,850 --> 00:06:42,350 So this will give an indication of how many cards are left for each player. 95 00:06:42,470 --> 00:06:45,120 And it does look like we should apply some styling. 96 00:06:45,140 --> 00:06:54,890 So let's use class list and add a class and let's call this class stats and then going up to our CSOSA 97 00:06:55,250 --> 00:06:58,130 and we can update the font size of this as well. 98 00:06:59,030 --> 00:07:01,530 So remember, this is taking the font size from the parent. 99 00:07:02,390 --> 00:07:06,720 So if we want it smaller, we can set it to 1:00 a.m. So let's see what that looks like. 100 00:07:06,740 --> 00:07:08,380 So that's given us a little bit of spacing. 101 00:07:08,510 --> 00:07:13,280 We can also move this down even more and we can make this even smaller for want. 102 00:07:14,000 --> 00:07:16,990 So that gives us an indication of how many cards are left. 103 00:07:17,090 --> 00:07:21,160 And actually, we need to show this after we add to the new array. 104 00:07:21,410 --> 00:07:27,150 So let's update the order of this so before we rebuild the winners. 105 00:07:27,470 --> 00:07:34,040 So now in this case, we know that the player one has 19 cards because he won the two other cards from 106 00:07:34,040 --> 00:07:34,910 all of the players. 107 00:07:34,920 --> 00:07:39,090 And if we go to DLS array, you can see that indicated there as well. 108 00:07:39,350 --> 00:07:40,960 So we've got 19 cards. 109 00:07:40,970 --> 00:07:45,730 And the reason I say 19 cards left is because that's where we subtracted the one. 110 00:07:46,100 --> 00:07:52,280 So you could also indicate this as card and then you don't have to have the minus one because that's 111 00:07:52,280 --> 00:07:53,550 going to include the one that's showing. 112 00:07:53,570 --> 00:07:55,040 So there's another option as well. 113 00:07:55,070 --> 00:07:57,250 So this case, there's 20 cards here. 114 00:07:57,470 --> 00:07:59,270 There's 16, 16. 115 00:07:59,300 --> 00:08:03,970 And the total of total cards, of course, and the deck is always going to be 52. 116 00:08:04,250 --> 00:08:05,840 So go ahead and add that into your project. 117 00:08:05,840 --> 00:08:09,740 And this is more messaging in order to enhance the gameplay.