1 00:00:00,120 --> 00:00:01,450 Hello and welcome back. 2 00:00:01,470 --> 00:00:06,360 In this lesson, we're going to be doing some bug fixes, tweaks to the code and we noticed in the last 3 00:00:06,360 --> 00:00:12,180 one and where we last left off, when we do the start game, then we're not actually clearing out all 4 00:00:12,180 --> 00:00:15,990 of this content and we've got the content repeating itself. 5 00:00:15,990 --> 00:00:17,330 So it doesn't look very good. 6 00:00:17,550 --> 00:00:23,040 So this is one of the options that we need to do is to clear out that element and all of the content 7 00:00:23,040 --> 00:00:29,790 happens within the gameplay area so we can clear out all of gameplay and have that completely cleared 8 00:00:29,790 --> 00:00:37,050 out and reset back to its original so that we can do that as we start the game, taking the gameplay 9 00:00:37,050 --> 00:00:42,990 object and just simply clearing out all of the inner HTML, sending it back to blank. 10 00:00:43,110 --> 00:00:45,170 So that's just to double quotes there. 11 00:00:45,600 --> 00:00:46,830 So see how that works. 12 00:00:46,980 --> 00:00:53,100 And I'm going to keep the amount of cards to a minimum so that we can really get a better sense of how 13 00:00:53,100 --> 00:00:53,900 this is working. 14 00:00:54,450 --> 00:00:58,760 We're also trying to apply style to card that didn't exist. 15 00:00:58,950 --> 00:01:04,410 So what happened here is that we actually ran out of cards so we had no clear winner. 16 00:01:04,620 --> 00:01:08,240 So we need to have a default winner in both of them actually ended up losing. 17 00:01:08,490 --> 00:01:14,160 So in this type of scenario, this is probably going to happen very, very rarely when we get more cards. 18 00:01:14,400 --> 00:01:19,640 But it is a good thing that it did catch this, that we do see this error being thrown. 19 00:01:19,800 --> 00:01:24,950 And this means that we need to have a default winner no matter what. 20 00:01:25,170 --> 00:01:30,030 So the problem here is that we don't actually have a default winner and we're still trying to pass it 21 00:01:30,030 --> 00:01:30,900 into the updater. 22 00:01:30,900 --> 00:01:32,250 So we don't have a current winner. 23 00:01:32,430 --> 00:01:37,130 But we didn't end up with the playoff round because both of them ended up as zero. 24 00:01:37,440 --> 00:01:38,940 So the current player. 25 00:01:39,120 --> 00:01:46,590 So by default, we should always set a current player and maybe, for instance, the default player 26 00:01:46,830 --> 00:01:47,910 for this round. 27 00:01:47,910 --> 00:01:54,660 It should be whoever the player list is and whoever the first player in the player list is. 28 00:01:54,870 --> 00:02:01,140 So set the current winner to be that player and again, within that current winner. 29 00:02:01,270 --> 00:02:02,650 And this one actually should be no. 30 00:02:02,970 --> 00:02:03,990 So let's update that. 31 00:02:03,990 --> 00:02:09,120 And I don't know if we can reproduce that, but at any point, we're always going to have at least one 32 00:02:09,120 --> 00:02:14,490 winner and it's going to be the first person coming in if it's a complete tie game, if both of them 33 00:02:14,490 --> 00:02:15,390 are running out of cards. 34 00:02:15,720 --> 00:02:21,600 So in this case, we do see that we've got a clear winner here, loser, loser, loss, loss, total 35 00:02:21,600 --> 00:02:22,050 cards. 36 00:02:22,590 --> 00:02:30,060 So we also need to maybe move down this winner, this lost value as it does look like it's coming in 37 00:02:30,060 --> 00:02:33,210 and we're updating the inner HTML. 38 00:02:33,660 --> 00:02:35,670 So let's add in to this. 39 00:02:36,420 --> 00:02:39,990 We'll just add in a line break in front of those because we are updating the HTML. 40 00:02:40,470 --> 00:02:45,720 So let's do a quick refresh and start again so we can list the number of tax and eventually we end up 41 00:02:45,720 --> 00:02:48,030 with the winner and then we end up with the start game. 42 00:02:48,180 --> 00:02:52,110 So let's start and in this case, let's do 10 attacks and see what happens. 43 00:02:52,380 --> 00:02:57,930 So what happened here is we ended up with the winner and it didn't continue to play because obviously 44 00:02:57,930 --> 00:02:58,830 we've got a winner. 45 00:02:58,950 --> 00:03:06,420 So we need to actually update and have it out of place where we set that inplay default value. 46 00:03:06,420 --> 00:03:13,770 We need to set that as false so that the game stops playing so it ceases to play once we do have a winner. 47 00:03:13,780 --> 00:03:14,640 So we're setting that. 48 00:03:14,760 --> 00:03:20,430 And once we do determine a winner within that win condition, this is where we can set this value, 49 00:03:20,430 --> 00:03:22,020 the inplay value to false. 50 00:03:22,230 --> 00:03:26,580 So that won't continuously keep playing after we've already found a winner. 51 00:03:26,940 --> 00:03:31,410 So see what happens in this case so we can do the attack and let's do one hundred rounds. 52 00:03:31,860 --> 00:03:36,810 So really what should happen here is and what actually did happen is we only ended up playing two more. 53 00:03:36,930 --> 00:03:42,960 So let's refresh and try that one more time just to make sure that the gameplay once again is as expected. 54 00:03:43,080 --> 00:03:48,990 So if we do 10 attacks, we end up with the winner there and we can see that that's coming in as a winner. 55 00:03:49,260 --> 00:03:55,090 We also probably want to adjust some of our styling that we want. 56 00:03:55,110 --> 00:03:56,790 So there's an overlap here. 57 00:03:56,790 --> 00:04:00,030 So we don't necessarily maybe want that to happen and. 58 00:04:01,140 --> 00:04:07,470 Within that play area, we can set a background color if we want a gameplay area, background if we 59 00:04:07,470 --> 00:04:07,710 want. 60 00:04:10,180 --> 00:04:16,630 Where do we have some settings for that player area, so we've got a height, so maybe if we want to 61 00:04:16,630 --> 00:04:26,220 set a minimum height for that and then the gameplay area, we can have a background color for that so 62 00:04:26,230 --> 00:04:29,860 that this one can always adjust and it's always going to have a white background. 63 00:04:30,190 --> 00:04:33,600 So that way we don't have the overlap as we saw earlier. 64 00:04:33,790 --> 00:04:36,100 So we've got some more space to play with this time. 65 00:04:36,110 --> 00:04:38,660 So let's do 10 attacks, see what happens. 66 00:04:38,680 --> 00:04:42,820 We always end up with the winner or loser, so let's try a different number of players. 67 00:04:42,980 --> 00:04:48,340 So in this case, we've got four players and we can shut the console, we'll get rid of the console 68 00:04:48,340 --> 00:04:48,910 messages. 69 00:04:49,450 --> 00:04:54,460 So one attack and then we've got the last attack ends up with all eight cards. 70 00:04:54,700 --> 00:04:58,360 So this is the end of the game and we should be starting a new round. 71 00:04:58,810 --> 00:05:04,950 Something's gone wrong here where we're not actually looping through and we're not playing the restart. 72 00:05:05,350 --> 00:05:09,130 So something has gone wrong there when we switch the number of players. 73 00:05:09,310 --> 00:05:16,360 And this is why you do really need to try this out and make sure that things are working as expected. 74 00:05:18,100 --> 00:05:24,920 So also, if we only have that one active player, that means that that one active player is the winner. 75 00:05:25,390 --> 00:05:34,150 So where we're sending and we're listing out the make cards, let's check to see if this one and if 76 00:05:34,180 --> 00:05:37,200 the length of player list is equal to one. 77 00:05:37,210 --> 00:05:38,740 So there's another condition here. 78 00:05:39,040 --> 00:05:40,780 If player length. 79 00:05:42,630 --> 00:05:50,130 If the player length is equal to one that we know we've got a game over situation so we can run the 80 00:05:50,130 --> 00:05:51,940 win game function once again. 81 00:05:52,530 --> 00:05:54,030 So let's try that one more time. 82 00:05:54,270 --> 00:05:56,610 We'll do the same thing where we've got the four players. 83 00:05:58,060 --> 00:05:59,650 And we'll run a bunch of. 84 00:06:01,410 --> 00:06:09,000 And we should also have a more clear message here that the game is over, so we've got our basic first 85 00:06:09,000 --> 00:06:14,730 attack there and there wasn't really much of a difference between what was happening with how I guess 86 00:06:14,730 --> 00:06:16,190 how the how many players. 87 00:06:16,440 --> 00:06:22,500 So let's update some of the styling there when we start the game and we output that information to the 88 00:06:22,740 --> 00:06:23,310 user. 89 00:06:25,250 --> 00:06:30,390 As we're still using that same message element, we want to make some updates to that. 90 00:06:30,860 --> 00:06:33,130 So default when we start the game. 91 00:06:35,160 --> 00:06:43,380 Let's select the message elements and style and we'll update the color of it to be read, so we come 92 00:06:43,380 --> 00:06:46,530 in, it's going to be red when we select the number of players. 93 00:06:47,110 --> 00:06:52,920 And then as we play the game and when we hit the start button, we'll update the style and the background 94 00:06:52,920 --> 00:06:54,210 color of it to be black. 95 00:06:54,780 --> 00:06:59,280 And that means that we're going to set it to be red again when we've got the win condition. 96 00:06:59,550 --> 00:07:04,550 So we can better distinguish between when we're starting the game and when the game is in place. 97 00:07:04,740 --> 00:07:09,540 So going back down to our win condition, we're going to update the style value. 98 00:07:10,140 --> 00:07:14,910 And we might also want to make the message bigger as well within our success. 99 00:07:15,310 --> 00:07:19,440 So, again, there's a number of different tweaks that you might want to apply to the game at this point. 100 00:07:19,560 --> 00:07:22,200 So setting up a font size adding. 101 00:07:22,200 --> 00:07:28,140 And so now it's more distinct that the game is over and that we're restarting. 102 00:07:28,620 --> 00:07:31,770 We might also want to change the button colors, the input colors. 103 00:07:32,340 --> 00:07:37,590 So there's another option that we can do where we've got buttons and we've got the two buttons there. 104 00:07:37,620 --> 00:07:42,390 So we'd have to loop through both of them in order to apply styling to them, and that's if we wanted 105 00:07:42,390 --> 00:07:43,650 to apply the styling to them. 106 00:07:44,160 --> 00:07:48,840 So maybe we do want to have a different button for the start, different color for the button for the 107 00:07:48,840 --> 00:07:51,540 start, as well as a different one for the attack. 108 00:07:52,140 --> 00:08:00,330 So going into this, let's set a class of start and this one is going to have a class of attack. 109 00:08:00,900 --> 00:08:03,810 And then within the style properties, you can update those. 110 00:08:04,380 --> 00:08:06,200 You can also do it with JavaScript. 111 00:08:06,240 --> 00:08:07,800 It's going to be a little bit more complex. 112 00:08:09,240 --> 00:08:12,330 So font size and maybe want to make at one point five. 113 00:08:14,920 --> 00:08:23,800 Text line, central line podding and let's sort of background color for this, so set the background 114 00:08:23,800 --> 00:08:24,880 color to blue. 115 00:08:26,020 --> 00:08:35,770 And it's font color to be white and for attack, make the button different so that we can distinguish 116 00:08:35,770 --> 00:08:36,670 between the buttons. 117 00:08:36,970 --> 00:08:43,300 So this is one of the things with the buttons when we had them the same, then it was hard to distinguish 118 00:08:43,300 --> 00:08:45,460 as we flip through the two different buttons. 119 00:08:45,700 --> 00:08:47,780 So now we've got start and we've got attacks. 120 00:08:47,780 --> 00:08:48,870 So it's a little bit different. 121 00:08:49,270 --> 00:08:51,730 Also, maybe we can do it black as well. 122 00:08:52,720 --> 00:08:56,600 Also for the input, we can update the size of the input as well. 123 00:08:56,950 --> 00:09:01,500 So now it looks a little bit small so we can set a default width for this one. 124 00:09:02,440 --> 00:09:04,240 And I don't want to make it too wide. 125 00:09:04,640 --> 00:09:08,410 Let's have a really big font size and see what that looks like. 126 00:09:08,530 --> 00:09:10,520 It needs to be a little bit wider than that. 127 00:09:10,750 --> 00:09:15,850 So refresh and because the font is so big, we need even wider. 128 00:09:16,820 --> 00:09:21,660 And actually even wider than that, so we can enter in three characters there. 129 00:09:22,640 --> 00:09:26,030 So the number of players, 300 players didn't really work out well. 130 00:09:26,300 --> 00:09:31,610 So let's do three players will make it big and number of tax, so do 100 attacks. 131 00:09:31,970 --> 00:09:33,110 So we end up with the winner. 132 00:09:33,200 --> 00:09:35,240 We only end up with four rounds there. 133 00:09:36,410 --> 00:09:38,890 Let's see now we're back onto the start. 134 00:09:39,350 --> 00:09:42,710 So we need to select the number of players so we can do six players. 135 00:09:43,280 --> 00:09:45,070 We've got attack. 136 00:09:45,320 --> 00:09:48,050 So this one has seven cards that one has won. 137 00:09:48,680 --> 00:09:52,880 So I end up with another attack here and we can play it round by round. 138 00:09:53,000 --> 00:09:55,790 You see, that works no matter how many players we end up with. 139 00:09:55,940 --> 00:09:58,550 And now we're back on selecting the number of players. 140 00:09:59,090 --> 00:10:01,460 So it does take some time to play through it. 141 00:10:01,580 --> 00:10:06,440 And you can, of course, adjust how many cards you have by adjusting the number of ranks. 142 00:10:06,620 --> 00:10:08,330 And this is really good for testing. 143 00:10:08,480 --> 00:10:13,310 So once you've completed all of the testing on the application and you're happy with the way that it 144 00:10:13,310 --> 00:10:20,060 works, you can readjust the values and we can have 10 players if we want. 145 00:10:20,190 --> 00:10:22,760 And so everyone's going to get an equal number of cards. 146 00:10:22,910 --> 00:10:25,220 You see that now it's going on to another row. 147 00:10:25,400 --> 00:10:27,800 So it's not really ideal for the size of screen. 148 00:10:27,800 --> 00:10:28,970 Made a little bit smaller. 149 00:10:29,540 --> 00:10:34,580 We do the attacks and you can see that everything is still working and we end up with the ones that 150 00:10:34,580 --> 00:10:35,840 are winning and losing. 151 00:10:36,350 --> 00:10:42,500 And this one, maybe we want to do ten rounds and another ten rounds until one of them actually or two 152 00:10:42,500 --> 00:10:44,330 of them drop out and we get a clear winner. 153 00:10:44,630 --> 00:10:49,430 So it looks like we're down to two and the functionality is working properly. 154 00:10:49,550 --> 00:10:53,630 We end up with the winner total of 52 cards and we can restart the game. 155 00:10:53,810 --> 00:10:57,350 So it's working on the larger scale as well as we adjust the numbers. 156 00:10:57,860 --> 00:10:58,990 So now it's up to you. 157 00:10:59,120 --> 00:11:03,410 Take the code, try it out for yourself, make some adjustments, make some tweaks to it. 158 00:11:03,530 --> 00:11:09,320 And remember, when you are in testing, it works better if you have less cards to deal with and then 159 00:11:09,320 --> 00:11:12,260 you can scale it up and try it out on the larger scale. 160 00:11:12,500 --> 00:11:18,440 You can also go through and you can clean out all of the console messages as we don't need them anymore. 161 00:11:18,590 --> 00:11:22,580 So just going through I've cleaned all of those console messages out. 162 00:11:22,730 --> 00:11:25,280 And coming up next, we'll do a quick code review.