Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,041 --> 00:00:02,830 And now let's implement 2 2 00:00:02,830 --> 00:00:06,363 a feature of a player holding the current score. 3 3 00:00:07,880 --> 00:00:11,053 And let's again, look at or flow chart here. 4 4 00:00:12,020 --> 00:00:14,330 And once again, this flow chart 5 5 00:00:14,330 --> 00:00:18,560 basically represents the division of or big problem, 6 6 00:00:18,560 --> 00:00:22,540 which is to implement this game into smaller problems, 7 7 00:00:22,540 --> 00:00:27,540 which are all of these green, basically sub problems here. 8 8 00:00:28,220 --> 00:00:30,710 Now, what we are going to implement is 9 9 00:00:30,710 --> 00:00:33,320 the functionality of holding the score. 10 10 00:00:33,320 --> 00:00:35,160 And remember that happens 11 11 00:00:35,160 --> 00:00:39,550 whenever the user clicks on that button to hold the score. 12 12 00:00:39,550 --> 00:00:40,940 So when that happened, 13 13 00:00:40,940 --> 00:00:45,630 we want to add the current score to the total score, right? 14 14 00:00:45,630 --> 00:00:48,733 So let's see that in the demo version here. 15 15 00:00:49,670 --> 00:00:50,880 So I'm reloading here, 16 16 00:00:50,880 --> 00:00:53,163 but then as I roll the dice, 17 17 00:00:54,100 --> 00:00:55,630 let's roll it again. 18 18 00:00:55,630 --> 00:00:58,070 So I have eight current points, 19 19 00:00:58,070 --> 00:01:01,450 and as I click hold, you see that these points will 20 20 00:01:01,450 --> 00:01:04,790 basically be transferred to my global score. 21 21 00:01:04,790 --> 00:01:09,010 So in this case, zero plus eight will then be eight 22 22 00:01:09,010 --> 00:01:11,493 and then we change to the next player. 23 23 00:01:12,340 --> 00:01:14,300 And so that's exactly what we have here 24 24 00:01:14,300 --> 00:01:18,270 in the flow chart, followed by switching the player. 25 25 00:01:18,270 --> 00:01:20,780 Now, this switching of player only happens 26 26 00:01:20,780 --> 00:01:23,860 when the score is still below 100, 27 27 00:01:23,860 --> 00:01:26,531 because when the score is at least 100, 28 28 00:01:26,531 --> 00:01:28,850 the current player wins. 29 29 00:01:28,850 --> 00:01:29,683 Okay. 30 30 00:01:29,683 --> 00:01:31,060 And so now let's implement 31 31 00:01:31,060 --> 00:01:34,363 basically this logic that we have here. 32 32 00:01:35,900 --> 00:01:37,450 Okay. 33 33 00:01:37,450 --> 00:01:39,390 So we want something to happen 34 34 00:01:39,390 --> 00:01:44,390 when the user clicks on this hold button. 35 35 00:01:44,880 --> 00:01:47,200 So button hold, right? 36 36 00:01:47,200 --> 00:01:52,200 So let's take that and add an event handler. 37 37 00:01:52,980 --> 00:01:57,710 So buttonhold.addevent listener 38 38 00:02:01,250 --> 00:02:04,860 once more on the click, and then once more, 39 39 00:02:04,860 --> 00:02:08,100 our function value here, 40 40 00:02:08,100 --> 00:02:09,820 the function that will be executed 41 41 00:02:09,820 --> 00:02:12,360 as the user clicks the button. 42 42 00:02:12,360 --> 00:02:14,680 And so let's again write some comments 43 43 00:02:14,680 --> 00:02:16,900 to say what we want to happen here. 44 44 00:02:16,900 --> 00:02:21,900 First add current score to the score of the active player. 45 45 00:02:24,070 --> 00:02:27,510 So active players score 46 46 00:02:29,110 --> 00:02:34,110 and then check score is already at least 100. 47 47 00:02:38,980 --> 00:02:41,880 And if so, then basically finish the game 48 48 00:02:45,532 --> 00:02:48,950 and if not, then switch to the next player. 49 49 00:02:54,930 --> 00:02:55,763 All right. 50 50 00:02:55,763 --> 00:02:59,620 So now we want to define the current player score. 51 51 00:02:59,620 --> 00:03:01,970 And remember how I told you in the last lecture 52 52 00:03:03,060 --> 00:03:07,790 that to store the scores we are using this scores variable, 53 53 00:03:07,790 --> 00:03:10,630 and this score is variable is this array, 54 54 00:03:10,630 --> 00:03:12,830 which at the same time holds the score 55 55 00:03:12,830 --> 00:03:15,870 of player zero and player one. 56 56 00:03:15,870 --> 00:03:18,370 So players zero at position zero 57 57 00:03:18,370 --> 00:03:21,070 and player one at position one. 58 58 00:03:21,070 --> 00:03:24,130 And so now we can use the active player variable 59 59 00:03:24,130 --> 00:03:27,293 to get the correct score of the current player. 60 60 00:03:28,300 --> 00:03:33,300 So scores at position active player. 61 61 00:03:35,220 --> 00:03:36,820 So that's what I just explained, 62 62 00:03:38,040 --> 00:03:43,040 will be equal that score plus the current score. 63 63 00:03:44,270 --> 00:03:49,270 So we say plus equal the current score. 64 64 00:03:51,860 --> 00:03:54,370 So again, when it's player one, 65 65 00:03:54,370 --> 00:03:56,760 then this will be scores one, 66 66 00:03:56,760 --> 00:03:58,490 but when player is zero, 67 67 00:03:58,490 --> 00:04:00,630 then it will be scores zero. 68 68 00:04:00,630 --> 00:04:04,360 And then we take that value and add the current score to it 69 69 00:04:04,360 --> 00:04:09,360 and assign it again to scores at the current active player. 70 70 00:04:09,890 --> 00:04:12,393 So just to make it 100% clear, 71 71 00:04:13,440 --> 00:04:17,617 if player is currently one then this would be this 72 72 00:04:22,330 --> 00:04:23,450 okay. 73 73 00:04:23,450 --> 00:04:25,960 So scores at one is equal to scores 74 74 00:04:25,960 --> 00:04:29,720 at one plus the current score. 75 75 00:04:29,720 --> 00:04:31,800 So I'm just gonna leave it here as a comment 76 76 00:04:31,800 --> 00:04:36,070 so that you really understand what's happening here. 77 77 00:04:36,070 --> 00:04:38,610 So we changed that score 78 78 00:04:38,610 --> 00:04:41,387 and now we of course need to display it as well. 79 79 00:04:41,387 --> 00:04:44,210 And so now we will do it in a similar way 80 80 00:04:44,210 --> 00:04:46,950 to, as we did up here 81 81 00:04:46,950 --> 00:04:51,130 where we basically selected based on the active player. 82 82 00:04:51,130 --> 00:04:55,323 So document.get element by ID. 83 83 00:04:56,180 --> 00:05:01,113 And now let's just check out again the name of the element. 84 84 00:05:02,480 --> 00:05:06,520 So that's score zero and score one. 85 85 00:05:06,520 --> 00:05:08,240 So these are the IDs 86 86 00:05:08,240 --> 00:05:13,240 and again, we will replace zero or one here dynamically. 87 87 00:05:15,330 --> 00:05:17,980 So again, a template string, 88 88 00:05:17,980 --> 00:05:22,980 current and then here the active player. 89 89 00:05:23,970 --> 00:05:26,890 So when it's player zero, it will be current zero. 90 90 00:05:26,890 --> 00:05:29,960 And so that first score will be selected. 91 91 00:05:29,960 --> 00:05:31,750 And when it's player one, 92 92 00:05:31,750 --> 00:05:35,150 well, then the other element will get selected. 93 93 00:05:35,150 --> 00:05:38,000 And then we can set the text content 94 94 00:05:38,000 --> 00:05:41,350 to the score of the active player. 95 95 00:05:41,350 --> 00:05:46,350 So scores, active player, give it a safe. 96 96 00:05:46,820 --> 00:05:51,630 And so now, or game should almost be finished. 97 97 00:05:51,630 --> 00:05:55,040 We will able to play it basically until infinity, 98 98 00:05:55,040 --> 00:05:57,100 but it would work, 99 99 00:05:57,100 --> 00:06:00,710 but actually it would not yet work 100 100 00:06:00,710 --> 00:06:05,220 because we haven't yet switched to the next player here. 101 101 00:06:05,220 --> 00:06:09,490 So right now, as we hold the score, we are not switching. 102 102 00:06:09,490 --> 00:06:12,740 So we are not checking if the score is greater than 100, 103 103 00:06:12,740 --> 00:06:15,670 but we are also not switching. 104 104 00:06:15,670 --> 00:06:20,080 And so let's leave that checking if the score is 100. 105 105 00:06:20,080 --> 00:06:23,010 So basically checking if the player won the game, 106 106 00:06:23,010 --> 00:06:25,110 let's leave that for the end. 107 107 00:06:25,110 --> 00:06:27,650 And for now let's just switch to the next player 108 108 00:06:27,650 --> 00:06:30,460 because usually that is what needs to happen. 109 109 00:06:30,460 --> 00:06:33,910 So switching to the next player is this code. 110 110 00:06:33,910 --> 00:06:36,220 So it's going to be the exact same thing. 111 111 00:06:36,220 --> 00:06:40,390 We still need to reset the current score to zero here, 112 112 00:06:40,390 --> 00:06:44,230 both in or program, and also on the user interface, 113 113 00:06:44,230 --> 00:06:45,850 which is what we do here. 114 114 00:06:45,850 --> 00:06:48,890 We need to switch the player from zero to one 115 115 00:06:48,890 --> 00:06:50,690 or from one to zero, 116 116 00:06:50,690 --> 00:06:53,990 and we need to toggle the player active classes 117 117 00:06:53,990 --> 00:06:57,570 to show which player is the active one. 118 118 00:06:57,570 --> 00:06:58,900 So all of this code here. 119 119 00:06:58,900 --> 00:07:01,700 We will need it again down here. 120 120 00:07:01,700 --> 00:07:05,050 So should I just go ahead and copy it now? 121 121 00:07:05,050 --> 00:07:08,710 And I hope that you already know the answer for that. 122 122 00:07:08,710 --> 00:07:13,030 So that would violate the don't repeat yourself principle. 123 123 00:07:13,030 --> 00:07:16,620 And so what I'm going to do is to simply take this code 124 124 00:07:16,620 --> 00:07:18,890 and put it into a function. 125 125 00:07:18,890 --> 00:07:21,970 And then I will call that function in both the places 126 126 00:07:21,970 --> 00:07:24,243 where I need this code to execute. 127 127 00:07:25,250 --> 00:07:28,760 So I am cutting the code now here, 128 128 00:07:28,760 --> 00:07:32,613 and then up here, I will create a function. 129 129 00:07:34,160 --> 00:07:38,600 So I'm gonna call this one switch player 130 130 00:07:40,520 --> 00:07:42,430 equals a function 131 131 00:07:42,430 --> 00:07:45,623 and dysfunction does not need any argument at all, 132 132 00:07:46,760 --> 00:07:48,250 or any parameter 133 133 00:07:48,250 --> 00:07:53,010 because the code is exactly the same in both situations. 134 134 00:07:53,010 --> 00:07:56,060 So usually when we are refactoring something 135 135 00:07:56,060 --> 00:07:58,490 like we are essentially doing here, 136 136 00:07:58,490 --> 00:08:01,100 then there is many times like a small thing 137 137 00:08:01,100 --> 00:08:02,620 that changes in the code. 138 138 00:08:02,620 --> 00:08:05,100 And then it's very useful to have a parameter 139 139 00:08:05,100 --> 00:08:06,730 so that when we call the function, 140 140 00:08:06,730 --> 00:08:09,130 we can specify what changes. 141 141 00:08:09,130 --> 00:08:11,400 So that's what we did when we refactored 142 142 00:08:11,400 --> 00:08:13,750 some code in the first project, 143 143 00:08:13,750 --> 00:08:15,490 but here nothing changes. 144 144 00:08:15,490 --> 00:08:18,830 All we want to do is to simply repeat this code. 145 145 00:08:18,830 --> 00:08:21,180 And so we don't need any parameters 146 146 00:08:21,180 --> 00:08:23,210 and we don't need to return anything. 147 147 00:08:23,210 --> 00:08:26,800 This is simply just a reusable piece of code. 148 148 00:08:26,800 --> 00:08:28,953 And so let's call that here, 149 149 00:08:30,460 --> 00:08:35,460 switch player, call it here and call it here. 150 150 00:08:37,850 --> 00:08:41,690 And again, we will then put this in the FL statement later, 151 151 00:08:41,690 --> 00:08:43,610 once we check for the score 152 152 00:08:43,610 --> 00:08:45,550 to check if the player has won, 153 153 00:08:45,550 --> 00:08:48,300 but now we just want to make the game work. 154 154 00:08:48,300 --> 00:08:51,570 And so of course, after we hold the score, 155 155 00:08:51,570 --> 00:08:53,420 we need to switch to the next player. 156 156 00:08:54,530 --> 00:08:58,470 So exactly as it says here in or flow chart, 157 157 00:08:58,470 --> 00:09:02,240 except that we're now skipping for now this part. 158 158 00:09:02,240 --> 00:09:03,870 So we're going from add current score 159 159 00:09:03,870 --> 00:09:06,893 to total score directly to switch player. 160 160 00:09:09,210 --> 00:09:10,043 Okay. 161 161 00:09:10,043 --> 00:09:13,563 And so now we should be ready to test our own version here. 162 162 00:09:14,970 --> 00:09:19,970 So, now I have six let's hold it and okay, 163 163 00:09:23,120 --> 00:09:25,730 something went wrong here indeed, 164 164 00:09:25,730 --> 00:09:29,160 because our score is still at zero 165 165 00:09:29,160 --> 00:09:31,040 and that should not be happening. 166 166 00:09:31,040 --> 00:09:32,510 So let's check it out 167 167 00:09:35,170 --> 00:09:38,960 and let's start by adding a console.log here, 168 168 00:09:38,960 --> 00:09:43,200 just to see if we are actually catching this event. 169 169 00:09:43,200 --> 00:09:45,680 So if we are handling it correctly, 170 170 00:09:45,680 --> 00:09:47,803 so hold button. 171 171 00:09:48,970 --> 00:09:51,060 So as I mentioned in the previous section, 172 172 00:09:51,060 --> 00:09:54,190 we really use console.log all the time 173 173 00:09:54,190 --> 00:09:57,330 to debug any kind of situation. 174 174 00:09:57,330 --> 00:10:01,790 And it could have just erased this part of the video showing 175 175 00:10:01,790 --> 00:10:03,810 you just to find a solution. 176 176 00:10:03,810 --> 00:10:05,740 But I think it's a good idea to show you 177 177 00:10:05,740 --> 00:10:09,160 the debugging process right here in the video as well. 178 178 00:10:09,160 --> 00:10:11,723 So let's play and let's hold. 179 179 00:10:12,820 --> 00:10:15,130 And so we got the hold button here. 180 180 00:10:15,130 --> 00:10:16,210 So something worked 181 181 00:10:17,710 --> 00:10:18,543 and actually, yeah, 182 182 00:10:18,543 --> 00:10:22,870 also the background color changed sides here 183 183 00:10:22,870 --> 00:10:25,310 and the current score was erased. 184 184 00:10:25,310 --> 00:10:26,880 So we already knew 185 185 00:10:26,880 --> 00:10:29,400 actually that something was indeed happening, 186 186 00:10:29,400 --> 00:10:32,763 but let's not actually find out what is going on here. 187 187 00:10:34,195 --> 00:10:36,480 And so now I want to log this value. 188 188 00:10:40,450 --> 00:10:41,283 Okay. 189 189 00:10:41,283 --> 00:10:45,650 So I'm basically now logging the score off the active player 190 190 00:10:45,650 --> 00:10:48,910 and let me actually do that after I assigned it. 191 191 00:10:48,910 --> 00:10:50,500 So after we changed it, 192 192 00:10:50,500 --> 00:10:52,770 I will want to take a look at it in the console. 193 193 00:10:52,770 --> 00:10:54,203 Maybe only problem is 194 194 00:10:54,203 --> 00:10:57,570 that it's not showing up in the element. 195 195 00:10:57,570 --> 00:10:59,120 So as the text content, 196 196 00:10:59,120 --> 00:11:01,190 but maybe the score itself is correct. 197 197 00:11:01,190 --> 00:11:03,090 And then we can see it in the console. 198 198 00:11:05,400 --> 00:11:06,620 So let's play again. 199 199 00:11:06,620 --> 00:11:09,380 And we already changed the player 200 200 00:11:09,380 --> 00:11:13,630 and now I hold and indeed here we get nine. 201 201 00:11:13,630 --> 00:11:16,460 So that's the score that we had before. 202 202 00:11:16,460 --> 00:11:18,913 Let me show that to you again and reload. 203 203 00:11:20,030 --> 00:11:22,790 So I rolled the dice three now I have eight 204 204 00:11:22,790 --> 00:11:24,350 and watch what happens in the console 205 205 00:11:24,350 --> 00:11:25,523 as I click hold. 206 206 00:11:26,850 --> 00:11:29,470 And so indeed I get to the value of eight, 207 207 00:11:29,470 --> 00:11:34,000 which means that the score is actually correctly calculated. 208 208 00:11:34,000 --> 00:11:35,530 Now I just need to fix the part 209 209 00:11:35,530 --> 00:11:38,793 where it is not displaying here in this element. 210 210 00:11:40,000 --> 00:11:42,143 So here I selected current. 211 211 00:11:43,640 --> 00:11:44,653 So let me see. 212 212 00:11:45,920 --> 00:11:48,820 Oh, and yeah, that is of course the problem 213 213 00:11:48,820 --> 00:11:50,930 it needs to be score. 214 214 00:11:50,930 --> 00:11:53,360 So it's score zero and score one, 215 215 00:11:53,360 --> 00:11:56,720 not current zero and current one. 216 216 00:11:56,720 --> 00:11:58,520 So that was the mistake. 217 217 00:11:58,520 --> 00:12:01,180 So here is score. 218 218 00:12:01,180 --> 00:12:03,340 And now we can get rid of this console.log 219 219 00:12:04,490 --> 00:12:07,890 and actually also have the other one that we have 220 220 00:12:07,890 --> 00:12:10,113 with the dice roll. 221 221 00:12:11,300 --> 00:12:16,300 So just make the code a bit better. 222 222 00:12:17,070 --> 00:12:20,620 Now I can close it up, roll the dice, 223 223 00:12:20,620 --> 00:12:23,090 and now as I hold, that should appear there, 224 224 00:12:23,090 --> 00:12:27,250 the number four and yes, and now it works. 225 225 00:12:27,250 --> 00:12:28,083 Great. 226 226 00:12:30,240 --> 00:12:32,260 So let's play here a little bit. 227 227 00:12:32,260 --> 00:12:35,040 So now we accumulated 13 points, 228 228 00:12:35,040 --> 00:12:38,430 so let's hold them and to end up with 17 229 229 00:12:39,300 --> 00:12:42,080 and indeed that works. 230 230 00:12:42,080 --> 00:12:43,463 Now let's hold these four. 231 231 00:12:46,350 --> 00:12:50,070 And so I think this game is really a lot of fun to play, 232 232 00:12:50,070 --> 00:12:52,740 especially if you try it with someone else, 233 233 00:12:52,740 --> 00:12:54,690 which I actually did a couple of times 234 234 00:12:54,690 --> 00:12:56,480 as I was preparing this game, 235 235 00:12:56,480 --> 00:12:59,420 and I can tell you that it's really fun, 236 236 00:12:59,420 --> 00:13:00,890 but now let's actually get 237 237 00:13:00,890 --> 00:13:03,650 to the final part of this lecture, 238 238 00:13:03,650 --> 00:13:06,050 which is to check if someone reached 239 239 00:13:06,050 --> 00:13:08,940 the final goal of 100 points. 240 240 00:13:08,940 --> 00:13:11,890 And so if that happens, the game is over 241 241 00:13:11,890 --> 00:13:12,970 and we should not be able 242 242 00:13:12,970 --> 00:13:15,220 to click any of the buttons anymore. 243 243 00:13:15,220 --> 00:13:17,610 And we also want to assign a special class 244 244 00:13:17,610 --> 00:13:20,660 to the winner player to make it really obvious 245 245 00:13:20,660 --> 00:13:22,453 that player has won. 246 246 00:13:23,377 --> 00:13:24,210 Okay. 247 247 00:13:24,210 --> 00:13:26,420 So that's add that check now. 248 248 00:13:26,420 --> 00:13:28,363 And so that shouldn't be too hard. 249 249 00:13:30,700 --> 00:13:35,700 So if scores add active player, 250 250 00:13:36,760 --> 00:13:39,680 so remember that is always here the score 251 251 00:13:39,680 --> 00:13:41,683 of the player that is currently active. 252 252 00:13:42,560 --> 00:13:46,230 So if that is greater or equal than 100, the player has won. 253 253 00:13:48,560 --> 00:13:51,203 So this is where we finish the game. 254 254 00:13:52,580 --> 00:13:53,870 So when we finished the game, 255 255 00:13:53,870 --> 00:13:57,350 we want to assign a player winner class. 256 256 00:13:57,350 --> 00:13:59,550 And let me show that to you here in the CSS. 257 257 00:14:00,570 --> 00:14:03,680 So yeah, it's this one, player a winner, 258 258 00:14:03,680 --> 00:14:05,703 which has this darker background color. 259 259 00:14:06,783 --> 00:14:07,853 So let me copy that, 260 260 00:14:12,760 --> 00:14:17,760 paste that here and now let then select actually the player. 261 261 00:14:19,240 --> 00:14:21,683 So document.query selector, 262 262 00:14:23,590 --> 00:14:26,550 and let's again, take a look at the code here 263 263 00:14:26,550 --> 00:14:28,600 just to, we don't make any mistakes. 264 264 00:14:28,600 --> 00:14:33,040 And to the player is really a class player dash dash 265 265 00:14:33,040 --> 00:14:35,090 and then the number of the active player. 266 266 00:14:36,040 --> 00:14:40,030 So that is player dash dash 267 267 00:14:42,190 --> 00:14:43,313 and active player. 268 268 00:14:44,360 --> 00:14:46,420 And then onto this element, 269 269 00:14:46,420 --> 00:14:49,220 we want to take the class list 270 270 00:14:49,220 --> 00:14:54,220 and add this class name that we just copied from or CSS. 271 271 00:14:55,820 --> 00:14:59,650 And then we also want to remove the active player class. 272 272 00:14:59,650 --> 00:15:01,130 Okay. 273 273 00:15:01,130 --> 00:15:05,160 So where is that? 274 274 00:15:07,130 --> 00:15:09,660 Yeah, so when we switch the player, 275 275 00:15:09,660 --> 00:15:14,010 we turn on this player active, right? 276 276 00:15:14,010 --> 00:15:15,950 But now we then need to remove that 277 277 00:15:15,950 --> 00:15:18,940 because otherwise we will have the active player class 278 278 00:15:18,940 --> 00:15:22,640 at the same time as the player winner class. 279 279 00:15:22,640 --> 00:15:24,043 So let's fix that, 280 280 00:15:25,480 --> 00:15:29,160 but we simply need to select the same element again. 281 281 00:15:29,160 --> 00:15:33,707 And then here we remove player active. 282 282 00:15:37,389 --> 00:15:38,380 Okay. 283 283 00:15:38,380 --> 00:15:40,010 I hope that made sense. 284 284 00:15:40,010 --> 00:15:43,260 And now let's test it and to make it a little bit faster, 285 285 00:15:43,260 --> 00:15:46,300 let's actually test it just with 20. 286 286 00:15:46,300 --> 00:15:48,080 Otherwise it's gonna take forever 287 287 00:15:48,080 --> 00:15:50,190 to reach that 100 points. 288 288 00:15:50,190 --> 00:15:51,640 All right. 289 289 00:15:51,640 --> 00:15:52,473 before we do that, 290 290 00:15:52,473 --> 00:15:55,520 let's now actually put this switching the player 291 291 00:15:55,520 --> 00:15:57,083 into the else block. 292 292 00:16:00,200 --> 00:16:01,410 Okay. 293 293 00:16:01,410 --> 00:16:03,140 So when the game finishes, 294 294 00:16:03,140 --> 00:16:05,530 we of course do not want to switch the player, 295 295 00:16:05,530 --> 00:16:09,760 but if it does not only then we do switch the player 296 296 00:16:13,040 --> 00:16:16,390 and remember that 20 points is enough to win. 297 297 00:16:16,390 --> 00:16:19,350 So let's roll the dice a couple of times. 298 298 00:16:19,350 --> 00:16:21,033 11 so we're almost there. 299 299 00:16:24,000 --> 00:16:25,923 That was close with 16. 300 300 00:16:27,290 --> 00:16:29,020 And so now we should have enough. 301 301 00:16:29,020 --> 00:16:33,970 So if we hold now then 10 plus 11 is 21. 302 302 00:16:33,970 --> 00:16:35,980 So that's over 20. 303 303 00:16:35,980 --> 00:16:40,823 And so now this should then show us the winner player class. 304 304 00:16:43,990 --> 00:16:46,420 Well, that didn't really happen. 305 305 00:16:46,420 --> 00:16:48,040 That's weird if I keep clicking here, 306 306 00:16:48,040 --> 00:16:51,200 then this number keeps getting added. 307 307 00:16:51,200 --> 00:16:53,780 And let me see in the HTML, 308 308 00:16:53,780 --> 00:16:56,450 if the class wasn't added, 309 309 00:16:56,450 --> 00:16:58,490 but actually it was not. 310 310 00:16:58,490 --> 00:17:00,660 So we still have to active player. 311 311 00:17:00,660 --> 00:17:04,420 And the winner class is nowhere to be found. 312 312 00:17:04,420 --> 00:17:05,763 So let's check that. 313 313 00:17:06,820 --> 00:17:09,140 Oh, and here we actually have the problem. 314 314 00:17:09,140 --> 00:17:13,000 So I did a mistake that I told you before not to make, 315 315 00:17:13,000 --> 00:17:15,400 which is when we use query selector, 316 316 00:17:15,400 --> 00:17:18,040 we need an actual selector. 317 317 00:17:18,040 --> 00:17:20,470 So here we are selecting a class. 318 318 00:17:20,470 --> 00:17:24,580 And so we're missing the dot here and here. 319 319 00:17:24,580 --> 00:17:27,930 So only when we get element by ID, 320 320 00:17:27,930 --> 00:17:30,190 then we do not specify the selector. 321 321 00:17:30,190 --> 00:17:32,900 We only specified the ID name itself, 322 322 00:17:32,900 --> 00:17:35,080 but when we use query selector, 323 323 00:17:35,080 --> 00:17:37,740 this needs to be a query. 324 324 00:17:37,740 --> 00:17:40,900 And so if we are selecting based on a class, 325 325 00:17:40,900 --> 00:17:43,140 we need the dot here. 326 326 00:17:43,140 --> 00:17:45,800 And so that should be fixed now, 327 327 00:17:45,800 --> 00:17:47,940 but this great to show you that mistakes 328 328 00:17:47,940 --> 00:17:51,210 like this happen in development all the time. 329 329 00:17:51,210 --> 00:17:52,760 So if you do this yourself, 330 330 00:17:52,760 --> 00:17:55,880 then really don't beat yourself up 331 331 00:17:55,880 --> 00:17:57,570 because that's just completely normal. 332 332 00:17:57,570 --> 00:17:58,820 As you're seeing here, 333 333 00:17:58,820 --> 00:18:00,473 I didn't plan this mistakes. 334 334 00:18:02,290 --> 00:18:07,080 Anyway, now we have 16 plus five is 21. 335 335 00:18:07,080 --> 00:18:09,400 So that should be enough to win the game. 336 336 00:18:09,400 --> 00:18:13,420 Now we really got this winner class here showing 337 337 00:18:13,420 --> 00:18:15,490 that player one won the game. 338 338 00:18:15,490 --> 00:18:18,520 So this is now red too and yeah, 339 339 00:18:18,520 --> 00:18:20,890 the dark background here too. 340 340 00:18:20,890 --> 00:18:24,760 Now the problem is first that we're still showing the dice. 341 341 00:18:24,760 --> 00:18:26,640 So we want to get rid of that. 342 342 00:18:26,640 --> 00:18:30,890 But even worse is that we can still click on these buttons. 343 343 00:18:30,890 --> 00:18:34,220 We can actually still keep playing the game. 344 344 00:18:34,220 --> 00:18:37,270 So you'll see that everything works the same. 345 345 00:18:37,270 --> 00:18:40,610 And now this player also one, they also have 22 points, 346 346 00:18:40,610 --> 00:18:44,660 but we still can keep playing the game. 347 347 00:18:44,660 --> 00:18:47,150 So of course that is not good. 348 348 00:18:47,150 --> 00:18:50,000 So that is the next thing that we need to solve. 349 349 00:18:50,000 --> 00:18:52,800 And let's think how we could solve this. 350 350 00:18:52,800 --> 00:18:55,360 And for me, I think the easiest solution is 351 351 00:18:55,360 --> 00:18:59,300 to create a variable that hosts the state of the game. 352 352 00:18:59,300 --> 00:19:02,380 So if we are still playing or not, 353 353 00:19:02,380 --> 00:19:04,810 so this is gonna be a state variable, 354 354 00:19:04,810 --> 00:19:09,120 which kind of tells us the condition of a system 355 355 00:19:09,120 --> 00:19:11,670 in this case the condition will be is 356 356 00:19:11,670 --> 00:19:14,290 the game playing or not? 357 357 00:19:14,290 --> 00:19:16,420 And so if the game is playing, 358 358 00:19:16,420 --> 00:19:18,270 then we can click these buttons 359 359 00:19:18,270 --> 00:19:21,480 and then everything will work as normally. 360 360 00:19:21,480 --> 00:19:23,960 But then as soon as the game is finished, 361 361 00:19:23,960 --> 00:19:27,320 we will say that the game is no longer playing 362 362 00:19:27,320 --> 00:19:30,630 and then we can no longer click on these buttons. 363 363 00:19:30,630 --> 00:19:31,463 All right. 364 364 00:19:32,400 --> 00:19:34,810 I hope that sounds good to you. 365 365 00:19:34,810 --> 00:19:36,870 So let's implement it. 366 366 00:19:36,870 --> 00:19:39,203 And so what I will do here is say, 367 367 00:19:40,380 --> 00:19:44,513 let playing, and now this will be a Boolean value. 368 368 00:19:45,470 --> 00:19:47,770 And so we start with true. 369 369 00:19:47,770 --> 00:19:49,370 So in the beginning of the game, 370 370 00:19:49,370 --> 00:19:51,610 we are of course playing 371 371 00:19:51,610 --> 00:19:54,030 and so playing it's true. 372 372 00:19:54,030 --> 00:19:56,060 And then when we finished the game, 373 373 00:19:56,060 --> 00:19:58,420 we will set playing to false. 374 374 00:19:58,420 --> 00:20:00,760 So that's in this case. 375 375 00:20:00,760 --> 00:20:02,100 So finish the game. 376 376 00:20:02,100 --> 00:20:04,210 And the first thing that we're gonna do is 377 377 00:20:04,210 --> 00:20:08,913 to set playing to false. 378 378 00:20:09,850 --> 00:20:13,100 Okay, now this in itself will, 379 379 00:20:13,100 --> 00:20:15,760 of course not yet do anything. 380 380 00:20:15,760 --> 00:20:18,760 So we only defined whether the game is playing or not, 381 381 00:20:18,760 --> 00:20:22,220 but none of our code is reacting to that. 382 382 00:20:22,220 --> 00:20:25,440 So remember that we only want to be able to click 383 383 00:20:25,440 --> 00:20:28,340 on these buttons once we are playing. 384 384 00:20:28,340 --> 00:20:29,883 And so let's define that. 385 385 00:20:31,010 --> 00:20:34,920 So let's go to the first button, which is the button role. 386 386 00:20:34,920 --> 00:20:37,730 And so basically what we can do now is 387 387 00:20:37,730 --> 00:20:40,360 that all of this logic that we have here should 388 388 00:20:40,360 --> 00:20:43,920 only be executed if we are playing. 389 389 00:20:43,920 --> 00:20:44,800 All right. 390 390 00:20:44,800 --> 00:20:46,840 So that's simple enough. 391 391 00:20:46,840 --> 00:20:49,480 So let's just say if playing 392 392 00:20:50,840 --> 00:20:52,463 then do all of this. 393 393 00:20:53,750 --> 00:20:56,703 So let's remove that from here and put it down here. 394 394 00:20:58,268 --> 00:21:02,170 And then as we save it prettier will take care of indenting 395 395 00:21:02,170 --> 00:21:04,893 all the code and put it nice and beautiful. 396 396 00:21:06,210 --> 00:21:07,640 Okay. 397 397 00:21:07,640 --> 00:21:10,410 Now playing here is a Boolean variable. 398 398 00:21:10,410 --> 00:21:11,560 And so that's why we don't have 399 399 00:21:11,560 --> 00:21:15,740 to write any condition like this for example, 400 400 00:21:15,740 --> 00:21:20,370 because again, playing itself is already a Boolean 401 401 00:21:20,370 --> 00:21:24,560 so we don't need to check if true is equal to true. 402 402 00:21:24,560 --> 00:21:26,640 And so now when we click on this button, 403 403 00:21:26,640 --> 00:21:29,180 while the game is no longer playing, 404 404 00:21:29,180 --> 00:21:31,490 then nothing will happen. 405 405 00:21:31,490 --> 00:21:35,520 And so that's the beauty and the goal of having 406 406 00:21:35,520 --> 00:21:37,900 this playing variable. 407 407 00:21:37,900 --> 00:21:41,973 Now let's simply do the same for this other button. 408 408 00:21:45,250 --> 00:21:46,083 Okay. 409 409 00:21:46,083 --> 00:21:50,800 So if playing then do all of this, 410 410 00:21:52,160 --> 00:21:53,760 again I'm deleting it from here 411 411 00:21:53,760 --> 00:21:57,730 and simply writing it down here, give it a safe, 412 412 00:21:57,730 --> 00:22:01,690 and then it will be beautiful and back to normal. 413 413 00:22:01,690 --> 00:22:04,170 And to now, as soon as one player wins, 414 414 00:22:04,170 --> 00:22:08,150 we will finish the game and set playing to false. 415 415 00:22:08,150 --> 00:22:11,580 And so the next time we click on any of these buttons, 416 416 00:22:11,580 --> 00:22:13,810 then here playing will be false. 417 417 00:22:13,810 --> 00:22:17,160 And then none of this code will be executed 418 418 00:22:17,160 --> 00:22:21,380 and the same here for this button for rolling the dice. 419 419 00:22:21,380 --> 00:22:24,330 So I hope you were able to follow that logic. 420 420 00:22:24,330 --> 00:22:27,120 And so maybe you can use this kind of logic 421 421 00:22:27,120 --> 00:22:29,560 in your own projects as well. 422 422 00:22:29,560 --> 00:22:32,400 And this is actually the reason why it's so cool 423 423 00:22:32,400 --> 00:22:35,080 to start building projects as games, 424 424 00:22:35,080 --> 00:22:39,150 because in games we need a lot of this type of logic. 425 425 00:22:39,150 --> 00:22:41,580 And so it's really fun to demonstrate 426 426 00:22:41,580 --> 00:22:43,390 all these different aspects 427 427 00:22:43,390 --> 00:22:46,590 that are quite common actually in programming. 428 428 00:22:46,590 --> 00:22:48,450 So state variable like this, 429 429 00:22:48,450 --> 00:22:51,960 like this playing here is very usual in programming. 430 430 00:22:51,960 --> 00:22:54,550 And so you can start to get used 431 431 00:22:54,550 --> 00:22:57,103 to sometimes needing a variable like that. 432 432 00:22:59,220 --> 00:23:01,650 And now let's try it out again 433 433 00:23:01,650 --> 00:23:04,640 and remember that we still can win the game at 20 434 434 00:23:06,240 --> 00:23:10,160 and just to make sure let's reload. 435 435 00:23:10,160 --> 00:23:11,823 And now as I roll the dice, 436 436 00:23:14,470 --> 00:23:15,653 so let's hold here. 437 437 00:23:17,070 --> 00:23:18,940 Let's see if we can do it in one run. 438 438 00:23:18,940 --> 00:23:20,180 Oh and we can. 439 439 00:23:20,180 --> 00:23:23,750 So we are at 20 and now let me hold. 440 440 00:23:23,750 --> 00:23:26,050 And now I won the game here 441 441 00:23:26,050 --> 00:23:28,720 and now let's see what happens when I click 442 442 00:23:29,640 --> 00:23:33,100 and nothing happens the same for hold. 443 443 00:23:33,100 --> 00:23:36,550 So these buttons, of course, like you can still click them, 444 444 00:23:36,550 --> 00:23:38,350 but nothing happens. 445 445 00:23:38,350 --> 00:23:39,320 All right. 446 446 00:23:39,320 --> 00:23:40,900 That's awesome. 447 447 00:23:40,900 --> 00:23:43,200 There's just one last thing to do, 448 448 00:23:43,200 --> 00:23:47,490 which is to get rid of this dice here. 449 449 00:23:47,490 --> 00:23:49,830 So let's go back one last time. 450 450 00:23:49,830 --> 00:23:52,530 And so that also happens here when we finish the game. 451 451 00:23:53,530 --> 00:23:57,980 So remember that we displayed the dice up here 452 452 00:23:57,980 --> 00:23:59,223 when we rolled a button. 453 453 00:24:00,120 --> 00:24:02,610 And so let's just copy this 454 454 00:24:02,610 --> 00:24:05,943 and basically add this hidden class back on. 455 455 00:24:08,050 --> 00:24:10,580 So right here, for example. 456 456 00:24:10,580 --> 00:24:13,110 And so now instead of removing it, 457 457 00:24:13,110 --> 00:24:14,950 we just add it back. 458 458 00:24:14,950 --> 00:24:16,000 Okay. 459 459 00:24:16,000 --> 00:24:20,493 Give it a safe and let's try to do it fast again. 460 460 00:24:22,290 --> 00:24:25,250 And yes, now we should win the game 461 461 00:24:25,250 --> 00:24:28,610 and the dice is gone awesome. 462 462 00:24:28,610 --> 00:24:31,730 So we are almost done here with this project. 463 463 00:24:31,730 --> 00:24:34,010 So our game works really great. 464 464 00:24:34,010 --> 00:24:35,790 All there's left to do now is 465 465 00:24:35,790 --> 00:24:38,800 to implement this new game button here. 466 466 00:24:38,800 --> 00:24:42,600 So we could of course play again by reloading the page, 467 467 00:24:42,600 --> 00:24:45,220 but it's always nice to have a button 468 468 00:24:45,220 --> 00:24:47,560 to simply reset the game. 469 469 00:24:47,560 --> 00:24:50,140 And so let's move on to the next video 470 470 00:24:50,140 --> 00:24:53,143 and do that to finish this project. 39903