WEBVTT 1 00:00:01.041 --> 00:00:02.830 And now let's implement 2 00:00:02.830 --> 00:00:06.363 a feature of a player holding the current score. 3 00:00:07.880 --> 00:00:11.053 And let's again, look at or flow chart here. 4 00:00:12.020 --> 00:00:14.330 And once again, this flow chart 5 00:00:14.330 --> 00:00:18.560 basically represents the division of or big problem, 6 00:00:18.560 --> 00:00:22.540 which is to implement this game into smaller problems, 7 00:00:22.540 --> 00:00:27.540 which are all of these green, basically sub problems here. 8 00:00:28.220 --> 00:00:30.710 Now, what we are going to implement is 9 00:00:30.710 --> 00:00:33.320 the functionality of holding the score. 10 00:00:33.320 --> 00:00:35.160 And remember that happens 11 00:00:35.160 --> 00:00:39.550 whenever the user clicks on that button to hold the score. 12 00:00:39.550 --> 00:00:40.940 So when that happened, 13 00:00:40.940 --> 00:00:45.630 we want to add the current score to the total score, right? 14 00:00:45.630 --> 00:00:48.733 So let's see that in the demo version here. 15 00:00:49.670 --> 00:00:50.880 So I'm reloading here, 16 00:00:50.880 --> 00:00:53.163 but then as I roll the dice, 17 00:00:54.100 --> 00:00:55.630 let's roll it again. 18 00:00:55.630 --> 00:00:58.070 So I have eight current points, 19 00:00:58.070 --> 00:01:01.450 and as I click hold, you see that these points will 20 00:01:01.450 --> 00:01:04.790 basically be transferred to my global score. 21 00:01:04.790 --> 00:01:09.010 So in this case, zero plus eight will then be eight 22 00:01:09.010 --> 00:01:11.493 and then we change to the next player. 23 00:01:12.340 --> 00:01:14.300 And so that's exactly what we have here 24 00:01:14.300 --> 00:01:18.270 in the flow chart, followed by switching the player. 25 00:01:18.270 --> 00:01:20.780 Now, this switching of player only happens 26 00:01:20.780 --> 00:01:23.860 when the score is still below 100, 27 00:01:23.860 --> 00:01:26.531 because when the score is at least 100, 28 00:01:26.531 --> 00:01:28.850 the current player wins. 29 00:01:28.850 --> 00:01:29.683 Okay. 30 00:01:29.683 --> 00:01:31.060 And so now let's implement 31 00:01:31.060 --> 00:01:34.363 basically this logic that we have here. 32 00:01:35.900 --> 00:01:37.450 Okay. 33 00:01:37.450 --> 00:01:39.390 So we want something to happen 34 00:01:39.390 --> 00:01:44.390 when the user clicks on this hold button. 35 00:01:44.880 --> 00:01:47.200 So button hold, right? 36 00:01:47.200 --> 00:01:52.200 So let's take that and add an event handler. 37 00:01:52.980 --> 00:01:57.710 So buttonhold.addevent listener 38 00:02:01.250 --> 00:02:04.860 once more on the click, and then once more, 39 00:02:04.860 --> 00:02:08.100 our function value here, 40 00:02:08.100 --> 00:02:09.820 the function that will be executed 41 00:02:09.820 --> 00:02:12.360 as the user clicks the button. 42 00:02:12.360 --> 00:02:14.680 And so let's again write some comments 43 00:02:14.680 --> 00:02:16.900 to say what we want to happen here. 44 00:02:16.900 --> 00:02:21.900 First add current score to the score of the active player. 45 00:02:24.070 --> 00:02:27.510 So active players score 46 00:02:29.110 --> 00:02:34.110 and then check score is already at least 100. 47 00:02:38.980 --> 00:02:41.880 And if so, then basically finish the game 48 00:02:45.532 --> 00:02:48.950 and if not, then switch to the next player. 49 00:02:54.930 --> 00:02:55.763 All right. 50 00:02:55.763 --> 00:02:59.620 So now we want to define the current player score. 51 00:02:59.620 --> 00:03:01.970 And remember how I told you in the last lecture 52 00:03:03.060 --> 00:03:07.790 that to store the scores we are using this scores variable, 53 00:03:07.790 --> 00:03:10.630 and this score is variable is this array, 54 00:03:10.630 --> 00:03:12.830 which at the same time holds the score 55 00:03:12.830 --> 00:03:15.870 of player zero and player one. 56 00:03:15.870 --> 00:03:18.370 So players zero at position zero 57 00:03:18.370 --> 00:03:21.070 and player one at position one. 58 00:03:21.070 --> 00:03:24.130 And so now we can use the active player variable 59 00:03:24.130 --> 00:03:27.293 to get the correct score of the current player. 60 00:03:28.300 --> 00:03:33.300 So scores at position active player. 61 00:03:35.220 --> 00:03:36.820 So that's what I just explained, 62 00:03:38.040 --> 00:03:43.040 will be equal that score plus the current score. 63 00:03:44.270 --> 00:03:49.270 So we say plus equal the current score. 64 00:03:51.860 --> 00:03:54.370 So again, when it's player one, 65 00:03:54.370 --> 00:03:56.760 then this will be scores one, 66 00:03:56.760 --> 00:03:58.490 but when player is zero, 67 00:03:58.490 --> 00:04:00.630 then it will be scores zero. 68 00:04:00.630 --> 00:04:04.360 And then we take that value and add the current score to it 69 00:04:04.360 --> 00:04:09.360 and assign it again to scores at the current active player. 70 00:04:09.890 --> 00:04:12.393 So just to make it 100% clear, 71 00:04:13.440 --> 00:04:17.617 if player is currently one then this would be this 72 00:04:22.330 --> 00:04:23.450 okay. 73 00:04:23.450 --> 00:04:25.960 So scores at one is equal to scores 74 00:04:25.960 --> 00:04:29.720 at one plus the current score. 75 00:04:29.720 --> 00:04:31.800 So I'm just gonna leave it here as a comment 76 00:04:31.800 --> 00:04:36.070 so that you really understand what's happening here. 77 00:04:36.070 --> 00:04:38.610 So we changed that score 78 00:04:38.610 --> 00:04:41.387 and now we of course need to display it as well. 79 00:04:41.387 --> 00:04:44.210 And so now we will do it in a similar way 80 00:04:44.210 --> 00:04:46.950 to, as we did up here 81 00:04:46.950 --> 00:04:51.130 where we basically selected based on the active player. 82 00:04:51.130 --> 00:04:55.323 So document.get element by ID. 83 00:04:56.180 --> 00:05:01.113 And now let's just check out again the name of the element. 84 00:05:02.480 --> 00:05:06.520 So that's score zero and score one. 85 00:05:06.520 --> 00:05:08.240 So these are the IDs 86 00:05:08.240 --> 00:05:13.240 and again, we will replace zero or one here dynamically. 87 00:05:15.330 --> 00:05:17.980 So again, a template string, 88 00:05:17.980 --> 00:05:22.980 current and then here the active player. 89 00:05:23.970 --> 00:05:26.890 So when it's player zero, it will be current zero. 90 00:05:26.890 --> 00:05:29.960 And so that first score will be selected. 91 00:05:29.960 --> 00:05:31.750 And when it's player one, 92 00:05:31.750 --> 00:05:35.150 well, then the other element will get selected. 93 00:05:35.150 --> 00:05:38.000 And then we can set the text content 94 00:05:38.000 --> 00:05:41.350 to the score of the active player. 95 00:05:41.350 --> 00:05:46.350 So scores, active player, give it a safe. 96 00:05:46.820 --> 00:05:51.630 And so now, or game should almost be finished. 97 00:05:51.630 --> 00:05:55.040 We will able to play it basically until infinity, 98 00:05:55.040 --> 00:05:57.100 but it would work, 99 00:05:57.100 --> 00:06:00.710 but actually it would not yet work 100 00:06:00.710 --> 00:06:05.220 because we haven't yet switched to the next player here. 101 00:06:05.220 --> 00:06:09.490 So right now, as we hold the score, we are not switching. 102 00:06:09.490 --> 00:06:12.740 So we are not checking if the score is greater than 100, 103 00:06:12.740 --> 00:06:15.670 but we are also not switching. 104 00:06:15.670 --> 00:06:20.080 And so let's leave that checking if the score is 100. 105 00:06:20.080 --> 00:06:23.010 So basically checking if the player won the game, 106 00:06:23.010 --> 00:06:25.110 let's leave that for the end. 107 00:06:25.110 --> 00:06:27.650 And for now let's just switch to the next player 108 00:06:27.650 --> 00:06:30.460 because usually that is what needs to happen. 109 00:06:30.460 --> 00:06:33.910 So switching to the next player is this code. 110 00:06:33.910 --> 00:06:36.220 So it's going to be the exact same thing. 111 00:06:36.220 --> 00:06:40.390 We still need to reset the current score to zero here, 112 00:06:40.390 --> 00:06:44.230 both in or program, and also on the user interface, 113 00:06:44.230 --> 00:06:45.850 which is what we do here. 114 00:06:45.850 --> 00:06:48.890 We need to switch the player from zero to one 115 00:06:48.890 --> 00:06:50.690 or from one to zero, 116 00:06:50.690 --> 00:06:53.990 and we need to toggle the player active classes 117 00:06:53.990 --> 00:06:57.570 to show which player is the active one. 118 00:06:57.570 --> 00:06:58.900 So all of this code here. 119 00:06:58.900 --> 00:07:01.700 We will need it again down here. 120 00:07:01.700 --> 00:07:05.050 So should I just go ahead and copy it now? 121 00:07:05.050 --> 00:07:08.710 And I hope that you already know the answer for that. 122 00:07:08.710 --> 00:07:13.030 So that would violate the don't repeat yourself principle. 123 00:07:13.030 --> 00:07:16.620 And so what I'm going to do is to simply take this code 124 00:07:16.620 --> 00:07:18.890 and put it into a function. 125 00:07:18.890 --> 00:07:21.970 And then I will call that function in both the places 126 00:07:21.970 --> 00:07:24.243 where I need this code to execute. 127 00:07:25.250 --> 00:07:28.760 So I am cutting the code now here, 128 00:07:28.760 --> 00:07:32.613 and then up here, I will create a function. 129 00:07:34.160 --> 00:07:38.600 So I'm gonna call this one switch player 130 00:07:40.520 --> 00:07:42.430 equals a function 131 00:07:42.430 --> 00:07:45.623 and dysfunction does not need any argument at all, 132 00:07:46.760 --> 00:07:48.250 or any parameter 133 00:07:48.250 --> 00:07:53.010 because the code is exactly the same in both situations. 134 00:07:53.010 --> 00:07:56.060 So usually when we are refactoring something 135 00:07:56.060 --> 00:07:58.490 like we are essentially doing here, 136 00:07:58.490 --> 00:08:01.100 then there is many times like a small thing 137 00:08:01.100 --> 00:08:02.620 that changes in the code. 138 00:08:02.620 --> 00:08:05.100 And then it's very useful to have a parameter 139 00:08:05.100 --> 00:08:06.730 so that when we call the function, 140 00:08:06.730 --> 00:08:09.130 we can specify what changes. 141 00:08:09.130 --> 00:08:11.400 So that's what we did when we refactored 142 00:08:11.400 --> 00:08:13.750 some code in the first project, 143 00:08:13.750 --> 00:08:15.490 but here nothing changes. 144 00:08:15.490 --> 00:08:18.830 All we want to do is to simply repeat this code. 145 00:08:18.830 --> 00:08:21.180 And so we don't need any parameters 146 00:08:21.180 --> 00:08:23.210 and we don't need to return anything. 147 00:08:23.210 --> 00:08:26.800 This is simply just a reusable piece of code. 148 00:08:26.800 --> 00:08:28.953 And so let's call that here, 149 00:08:30.460 --> 00:08:35.460 switch player, call it here and call it here. 150 00:08:37.850 --> 00:08:41.690 And again, we will then put this in the FL statement later, 151 00:08:41.690 --> 00:08:43.610 once we check for the score 152 00:08:43.610 --> 00:08:45.550 to check if the player has won, 153 00:08:45.550 --> 00:08:48.300 but now we just want to make the game work. 154 00:08:48.300 --> 00:08:51.570 And so of course, after we hold the score, 155 00:08:51.570 --> 00:08:53.420 we need to switch to the next player. 156 00:08:54.530 --> 00:08:58.470 So exactly as it says here in or flow chart, 157 00:08:58.470 --> 00:09:02.240 except that we're now skipping for now this part. 158 00:09:02.240 --> 00:09:03.870 So we're going from add current score 159 00:09:03.870 --> 00:09:06.893 to total score directly to switch player. 160 00:09:09.210 --> 00:09:10.043 Okay. 161 00:09:10.043 --> 00:09:13.563 And so now we should be ready to test our own version here. 162 00:09:14.970 --> 00:09:19.970 So, now I have six let's hold it and okay, 163 00:09:23.120 --> 00:09:25.730 something went wrong here indeed, 164 00:09:25.730 --> 00:09:29.160 because our score is still at zero 165 00:09:29.160 --> 00:09:31.040 and that should not be happening. 166 00:09:31.040 --> 00:09:32.510 So let's check it out 167 00:09:35.170 --> 00:09:38.960 and let's start by adding a console.log here, 168 00:09:38.960 --> 00:09:43.200 just to see if we are actually catching this event. 169 00:09:43.200 --> 00:09:45.680 So if we are handling it correctly, 170 00:09:45.680 --> 00:09:47.803 so hold button. 171 00:09:48.970 --> 00:09:51.060 So as I mentioned in the previous section, 172 00:09:51.060 --> 00:09:54.190 we really use console.log all the time 173 00:09:54.190 --> 00:09:57.330 to debug any kind of situation. 174 00:09:57.330 --> 00:10:01.790 And it could have just erased this part of the video showing 175 00:10:01.790 --> 00:10:03.810 you just to find a solution. 176 00:10:03.810 --> 00:10:05.740 But I think it's a good idea to show you 177 00:10:05.740 --> 00:10:09.160 the debugging process right here in the video as well. 178 00:10:09.160 --> 00:10:11.723 So let's play and let's hold. 179 00:10:12.820 --> 00:10:15.130 And so we got the hold button here. 180 00:10:15.130 --> 00:10:16.210 So something worked 181 00:10:17.710 --> 00:10:18.543 and actually, yeah, 182 00:10:18.543 --> 00:10:22.870 also the background color changed sides here 183 00:10:22.870 --> 00:10:25.310 and the current score was erased. 184 00:10:25.310 --> 00:10:26.880 So we already knew 185 00:10:26.880 --> 00:10:29.400 actually that something was indeed happening, 186 00:10:29.400 --> 00:10:32.763 but let's not actually find out what is going on here. 187 00:10:34.195 --> 00:10:36.480 And so now I want to log this value. 188 00:10:40.450 --> 00:10:41.283 Okay. 189 00:10:41.283 --> 00:10:45.650 So I'm basically now logging the score off the active player 190 00:10:45.650 --> 00:10:48.910 and let me actually do that after I assigned it. 191 00:10:48.910 --> 00:10:50.500 So after we changed it, 192 00:10:50.500 --> 00:10:52.770 I will want to take a look at it in the console. 193 00:10:52.770 --> 00:10:54.203 Maybe only problem is 194 00:10:54.203 --> 00:10:57.570 that it's not showing up in the element. 195 00:10:57.570 --> 00:10:59.120 So as the text content, 196 00:10:59.120 --> 00:11:01.190 but maybe the score itself is correct. 197 00:11:01.190 --> 00:11:03.090 And then we can see it in the console. 198 00:11:05.400 --> 00:11:06.620 So let's play again. 199 00:11:06.620 --> 00:11:09.380 And we already changed the player 200 00:11:09.380 --> 00:11:13.630 and now I hold and indeed here we get nine. 201 00:11:13.630 --> 00:11:16.460 So that's the score that we had before. 202 00:11:16.460 --> 00:11:18.913 Let me show that to you again and reload. 203 00:11:20.030 --> 00:11:22.790 So I rolled the dice three now I have eight 204 00:11:22.790 --> 00:11:24.350 and watch what happens in the console 205 00:11:24.350 --> 00:11:25.523 as I click hold. 206 00:11:26.850 --> 00:11:29.470 And so indeed I get to the value of eight, 207 00:11:29.470 --> 00:11:34.000 which means that the score is actually correctly calculated. 208 00:11:34.000 --> 00:11:35.530 Now I just need to fix the part 209 00:11:35.530 --> 00:11:38.793 where it is not displaying here in this element. 210 00:11:40.000 --> 00:11:42.143 So here I selected current. 211 00:11:43.640 --> 00:11:44.653 So let me see. 212 00:11:45.920 --> 00:11:48.820 Oh, and yeah, that is of course the problem 213 00:11:48.820 --> 00:11:50.930 it needs to be score. 214 00:11:50.930 --> 00:11:53.360 So it's score zero and score one, 215 00:11:53.360 --> 00:11:56.720 not current zero and current one. 216 00:11:56.720 --> 00:11:58.520 So that was the mistake. 217 00:11:58.520 --> 00:12:01.180 So here is score. 218 00:12:01.180 --> 00:12:03.340 And now we can get rid of this console.log 219 00:12:04.490 --> 00:12:07.890 and actually also have the other one that we have 220 00:12:07.890 --> 00:12:10.113 with the dice roll. 221 00:12:11.300 --> 00:12:16.300 So just make the code a bit better. 222 00:12:17.070 --> 00:12:20.620 Now I can close it up, roll the dice, 223 00:12:20.620 --> 00:12:23.090 and now as I hold, that should appear there, 224 00:12:23.090 --> 00:12:27.250 the number four and yes, and now it works. 225 00:12:27.250 --> 00:12:28.083 Great. 226 00:12:30.240 --> 00:12:32.260 So let's play here a little bit. 227 00:12:32.260 --> 00:12:35.040 So now we accumulated 13 points, 228 00:12:35.040 --> 00:12:38.430 so let's hold them and to end up with 17 229 00:12:39.300 --> 00:12:42.080 and indeed that works. 230 00:12:42.080 --> 00:12:43.463 Now let's hold these four. 231 00:12:46.350 --> 00:12:50.070 And so I think this game is really a lot of fun to play, 232 00:12:50.070 --> 00:12:52.740 especially if you try it with someone else, 233 00:12:52.740 --> 00:12:54.690 which I actually did a couple of times 234 00:12:54.690 --> 00:12:56.480 as I was preparing this game, 235 00:12:56.480 --> 00:12:59.420 and I can tell you that it's really fun, 236 00:12:59.420 --> 00:13:00.890 but now let's actually get 237 00:13:00.890 --> 00:13:03.650 to the final part of this lecture, 238 00:13:03.650 --> 00:13:06.050 which is to check if someone reached 239 00:13:06.050 --> 00:13:08.940 the final goal of 100 points. 240 00:13:08.940 --> 00:13:11.890 And so if that happens, the game is over 241 00:13:11.890 --> 00:13:12.970 and we should not be able 242 00:13:12.970 --> 00:13:15.220 to click any of the buttons anymore. 243 00:13:15.220 --> 00:13:17.610 And we also want to assign a special class 244 00:13:17.610 --> 00:13:20.660 to the winner player to make it really obvious 245 00:13:20.660 --> 00:13:22.453 that player has won. 246 00:13:23.377 --> 00:13:24.210 Okay. 247 00:13:24.210 --> 00:13:26.420 So that's add that check now. 248 00:13:26.420 --> 00:13:28.363 And so that shouldn't be too hard. 249 00:13:30.700 --> 00:13:35.700 So if scores add active player, 250 00:13:36.760 --> 00:13:39.680 so remember that is always here the score 251 00:13:39.680 --> 00:13:41.683 of the player that is currently active. 252 00:13:42.560 --> 00:13:46.230 So if that is greater or equal than 100, the player has won. 253 00:13:48.560 --> 00:13:51.203 So this is where we finish the game. 254 00:13:52.580 --> 00:13:53.870 So when we finished the game, 255 00:13:53.870 --> 00:13:57.350 we want to assign a player winner class. 256 00:13:57.350 --> 00:13:59.550 And let me show that to you here in the CSS. 257 00:14:00.570 --> 00:14:03.680 So yeah, it's this one, player a winner, 258 00:14:03.680 --> 00:14:05.703 which has this darker background color. 259 00:14:06.783 --> 00:14:07.853 So let me copy that, 260 00:14:12.760 --> 00:14:17.760 paste that here and now let then select actually the player. 261 00:14:19.240 --> 00:14:21.683 So document.query selector, 262 00:14:23.590 --> 00:14:26.550 and let's again, take a look at the code here 263 00:14:26.550 --> 00:14:28.600 just to, we don't make any mistakes. 264 00:14:28.600 --> 00:14:33.040 And to the player is really a class player dash dash 265 00:14:33.040 --> 00:14:35.090 and then the number of the active player. 266 00:14:36.040 --> 00:14:40.030 So that is player dash dash 267 00:14:42.190 --> 00:14:43.313 and active player. 268 00:14:44.360 --> 00:14:46.420 And then onto this element, 269 00:14:46.420 --> 00:14:49.220 we want to take the class list 270 00:14:49.220 --> 00:14:54.220 and add this class name that we just copied from or CSS. 271 00:14:55.820 --> 00:14:59.650 And then we also want to remove the active player class. 272 00:14:59.650 --> 00:15:01.130 Okay. 273 00:15:01.130 --> 00:15:05.160 So where is that? 274 00:15:07.130 --> 00:15:09.660 Yeah, so when we switch the player, 275 00:15:09.660 --> 00:15:14.010 we turn on this player active, right? 276 00:15:14.010 --> 00:15:15.950 But now we then need to remove that 277 00:15:15.950 --> 00:15:18.940 because otherwise we will have the active player class 278 00:15:18.940 --> 00:15:22.640 at the same time as the player winner class. 279 00:15:22.640 --> 00:15:24.043 So let's fix that, 280 00:15:25.480 --> 00:15:29.160 but we simply need to select the same element again. 281 00:15:29.160 --> 00:15:33.707 And then here we remove player active. 282 00:15:37.389 --> 00:15:38.380 Okay. 283 00:15:38.380 --> 00:15:40.010 I hope that made sense. 284 00:15:40.010 --> 00:15:43.260 And now let's test it and to make it a little bit faster, 285 00:15:43.260 --> 00:15:46.300 let's actually test it just with 20. 286 00:15:46.300 --> 00:15:48.080 Otherwise it's gonna take forever 287 00:15:48.080 --> 00:15:50.190 to reach that 100 points. 288 00:15:50.190 --> 00:15:51.640 All right. 289 00:15:51.640 --> 00:15:52.473 before we do that, 290 00:15:52.473 --> 00:15:55.520 let's now actually put this switching the player 291 00:15:55.520 --> 00:15:57.083 into the else block. 292 00:16:00.200 --> 00:16:01.410 Okay. 293 00:16:01.410 --> 00:16:03.140 So when the game finishes, 294 00:16:03.140 --> 00:16:05.530 we of course do not want to switch the player, 295 00:16:05.530 --> 00:16:09.760 but if it does not only then we do switch the player 296 00:16:13.040 --> 00:16:16.390 and remember that 20 points is enough to win. 297 00:16:16.390 --> 00:16:19.350 So let's roll the dice a couple of times. 298 00:16:19.350 --> 00:16:21.033 11 so we're almost there. 299 00:16:24.000 --> 00:16:25.923 That was close with 16. 300 00:16:27.290 --> 00:16:29.020 And so now we should have enough. 301 00:16:29.020 --> 00:16:33.970 So if we hold now then 10 plus 11 is 21. 302 00:16:33.970 --> 00:16:35.980 So that's over 20. 303 00:16:35.980 --> 00:16:40.823 And so now this should then show us the winner player class. 304 00:16:43.990 --> 00:16:46.420 Well, that didn't really happen. 305 00:16:46.420 --> 00:16:48.040 That's weird if I keep clicking here, 306 00:16:48.040 --> 00:16:51.200 then this number keeps getting added. 307 00:16:51.200 --> 00:16:53.780 And let me see in the HTML, 308 00:16:53.780 --> 00:16:56.450 if the class wasn't added, 309 00:16:56.450 --> 00:16:58.490 but actually it was not. 310 00:16:58.490 --> 00:17:00.660 So we still have to active player. 311 00:17:00.660 --> 00:17:04.420 And the winner class is nowhere to be found. 312 00:17:04.420 --> 00:17:05.763 So let's check that. 313 00:17:06.820 --> 00:17:09.140 Oh, and here we actually have the problem. 314 00:17:09.140 --> 00:17:13.000 So I did a mistake that I told you before not to make, 315 00:17:13.000 --> 00:17:15.400 which is when we use query selector, 316 00:17:15.400 --> 00:17:18.040 we need an actual selector. 317 00:17:18.040 --> 00:17:20.470 So here we are selecting a class. 318 00:17:20.470 --> 00:17:24.580 And so we're missing the dot here and here. 319 00:17:24.580 --> 00:17:27.930 So only when we get element by ID, 320 00:17:27.930 --> 00:17:30.190 then we do not specify the selector. 321 00:17:30.190 --> 00:17:32.900 We only specified the ID name itself, 322 00:17:32.900 --> 00:17:35.080 but when we use query selector, 323 00:17:35.080 --> 00:17:37.740 this needs to be a query. 324 00:17:37.740 --> 00:17:40.900 And so if we are selecting based on a class, 325 00:17:40.900 --> 00:17:43.140 we need the dot here. 326 00:17:43.140 --> 00:17:45.800 And so that should be fixed now, 327 00:17:45.800 --> 00:17:47.940 but this great to show you that mistakes 328 00:17:47.940 --> 00:17:51.210 like this happen in development all the time. 329 00:17:51.210 --> 00:17:52.760 So if you do this yourself, 330 00:17:52.760 --> 00:17:55.880 then really don't beat yourself up 331 00:17:55.880 --> 00:17:57.570 because that's just completely normal. 332 00:17:57.570 --> 00:17:58.820 As you're seeing here, 333 00:17:58.820 --> 00:18:00.473 I didn't plan this mistakes. 334 00:18:02.290 --> 00:18:07.080 Anyway, now we have 16 plus five is 21. 335 00:18:07.080 --> 00:18:09.400 So that should be enough to win the game. 336 00:18:09.400 --> 00:18:13.420 Now we really got this winner class here showing 337 00:18:13.420 --> 00:18:15.490 that player one won the game. 338 00:18:15.490 --> 00:18:18.520 So this is now red too and yeah, 339 00:18:18.520 --> 00:18:20.890 the dark background here too. 340 00:18:20.890 --> 00:18:24.760 Now the problem is first that we're still showing the dice. 341 00:18:24.760 --> 00:18:26.640 So we want to get rid of that. 342 00:18:26.640 --> 00:18:30.890 But even worse is that we can still click on these buttons. 343 00:18:30.890 --> 00:18:34.220 We can actually still keep playing the game. 344 00:18:34.220 --> 00:18:37.270 So you'll see that everything works the same. 345 00:18:37.270 --> 00:18:40.610 And now this player also one, they also have 22 points, 346 00:18:40.610 --> 00:18:44.660 but we still can keep playing the game. 347 00:18:44.660 --> 00:18:47.150 So of course that is not good. 348 00:18:47.150 --> 00:18:50.000 So that is the next thing that we need to solve. 349 00:18:50.000 --> 00:18:52.800 And let's think how we could solve this. 350 00:18:52.800 --> 00:18:55.360 And for me, I think the easiest solution is 351 00:18:55.360 --> 00:18:59.300 to create a variable that hosts the state of the game. 352 00:18:59.300 --> 00:19:02.380 So if we are still playing or not, 353 00:19:02.380 --> 00:19:04.810 so this is gonna be a state variable, 354 00:19:04.810 --> 00:19:09.120 which kind of tells us the condition of a system 355 00:19:09.120 --> 00:19:11.670 in this case the condition will be is 356 00:19:11.670 --> 00:19:14.290 the game playing or not? 357 00:19:14.290 --> 00:19:16.420 And so if the game is playing, 358 00:19:16.420 --> 00:19:18.270 then we can click these buttons 359 00:19:18.270 --> 00:19:21.480 and then everything will work as normally. 360 00:19:21.480 --> 00:19:23.960 But then as soon as the game is finished, 361 00:19:23.960 --> 00:19:27.320 we will say that the game is no longer playing 362 00:19:27.320 --> 00:19:30.630 and then we can no longer click on these buttons. 363 00:19:30.630 --> 00:19:31.463 All right. 364 00:19:32.400 --> 00:19:34.810 I hope that sounds good to you. 365 00:19:34.810 --> 00:19:36.870 So let's implement it. 366 00:19:36.870 --> 00:19:39.203 And so what I will do here is say, 367 00:19:40.380 --> 00:19:44.513 let playing, and now this will be a Boolean value. 368 00:19:45.470 --> 00:19:47.770 And so we start with true. 369 00:19:47.770 --> 00:19:49.370 So in the beginning of the game, 370 00:19:49.370 --> 00:19:51.610 we are of course playing 371 00:19:51.610 --> 00:19:54.030 and so playing it's true. 372 00:19:54.030 --> 00:19:56.060 And then when we finished the game, 373 00:19:56.060 --> 00:19:58.420 we will set playing to false. 374 00:19:58.420 --> 00:20:00.760 So that's in this case. 375 00:20:00.760 --> 00:20:02.100 So finish the game. 376 00:20:02.100 --> 00:20:04.210 And the first thing that we're gonna do is 377 00:20:04.210 --> 00:20:08.913 to set playing to false. 378 00:20:09.850 --> 00:20:13.100 Okay, now this in itself will, 379 00:20:13.100 --> 00:20:15.760 of course not yet do anything. 380 00:20:15.760 --> 00:20:18.760 So we only defined whether the game is playing or not, 381 00:20:18.760 --> 00:20:22.220 but none of our code is reacting to that. 382 00:20:22.220 --> 00:20:25.440 So remember that we only want to be able to click 383 00:20:25.440 --> 00:20:28.340 on these buttons once we are playing. 384 00:20:28.340 --> 00:20:29.883 And so let's define that. 385 00:20:31.010 --> 00:20:34.920 So let's go to the first button, which is the button role. 386 00:20:34.920 --> 00:20:37.730 And so basically what we can do now is 387 00:20:37.730 --> 00:20:40.360 that all of this logic that we have here should 388 00:20:40.360 --> 00:20:43.920 only be executed if we are playing. 389 00:20:43.920 --> 00:20:44.800 All right. 390 00:20:44.800 --> 00:20:46.840 So that's simple enough. 391 00:20:46.840 --> 00:20:49.480 So let's just say if playing 392 00:20:50.840 --> 00:20:52.463 then do all of this. 393 00:20:53.750 --> 00:20:56.703 So let's remove that from here and put it down here. 394 00:20:58.268 --> 00:21:02.170 And then as we save it prettier will take care of indenting 395 00:21:02.170 --> 00:21:04.893 all the code and put it nice and beautiful. 396 00:21:06.210 --> 00:21:07.640 Okay. 397 00:21:07.640 --> 00:21:10.410 Now playing here is a Boolean variable. 398 00:21:10.410 --> 00:21:11.560 And so that's why we don't have 399 00:21:11.560 --> 00:21:15.740 to write any condition like this for example, 400 00:21:15.740 --> 00:21:20.370 because again, playing itself is already a Boolean 401 00:21:20.370 --> 00:21:24.560 so we don't need to check if true is equal to true. 402 00:21:24.560 --> 00:21:26.640 And so now when we click on this button, 403 00:21:26.640 --> 00:21:29.180 while the game is no longer playing, 404 00:21:29.180 --> 00:21:31.490 then nothing will happen. 405 00:21:31.490 --> 00:21:35.520 And so that's the beauty and the goal of having 406 00:21:35.520 --> 00:21:37.900 this playing variable. 407 00:21:37.900 --> 00:21:41.973 Now let's simply do the same for this other button. 408 00:21:45.250 --> 00:21:46.083 Okay. 409 00:21:46.083 --> 00:21:50.800 So if playing then do all of this, 410 00:21:52.160 --> 00:21:53.760 again I'm deleting it from here 411 00:21:53.760 --> 00:21:57.730 and simply writing it down here, give it a safe, 412 00:21:57.730 --> 00:22:01.690 and then it will be beautiful and back to normal. 413 00:22:01.690 --> 00:22:04.170 And to now, as soon as one player wins, 414 00:22:04.170 --> 00:22:08.150 we will finish the game and set playing to false. 415 00:22:08.150 --> 00:22:11.580 And so the next time we click on any of these buttons, 416 00:22:11.580 --> 00:22:13.810 then here playing will be false. 417 00:22:13.810 --> 00:22:17.160 And then none of this code will be executed 418 00:22:17.160 --> 00:22:21.380 and the same here for this button for rolling the dice. 419 00:22:21.380 --> 00:22:24.330 So I hope you were able to follow that logic. 420 00:22:24.330 --> 00:22:27.120 And so maybe you can use this kind of logic 421 00:22:27.120 --> 00:22:29.560 in your own projects as well. 422 00:22:29.560 --> 00:22:32.400 And this is actually the reason why it's so cool 423 00:22:32.400 --> 00:22:35.080 to start building projects as games, 424 00:22:35.080 --> 00:22:39.150 because in games we need a lot of this type of logic. 425 00:22:39.150 --> 00:22:41.580 And so it's really fun to demonstrate 426 00:22:41.580 --> 00:22:43.390 all these different aspects 427 00:22:43.390 --> 00:22:46.590 that are quite common actually in programming. 428 00:22:46.590 --> 00:22:48.450 So state variable like this, 429 00:22:48.450 --> 00:22:51.960 like this playing here is very usual in programming. 430 00:22:51.960 --> 00:22:54.550 And so you can start to get used 431 00:22:54.550 --> 00:22:57.103 to sometimes needing a variable like that. 432 00:22:59.220 --> 00:23:01.650 And now let's try it out again 433 00:23:01.650 --> 00:23:04.640 and remember that we still can win the game at 20 434 00:23:06.240 --> 00:23:10.160 and just to make sure let's reload. 435 00:23:10.160 --> 00:23:11.823 And now as I roll the dice, 436 00:23:14.470 --> 00:23:15.653 so let's hold here. 437 00:23:17.070 --> 00:23:18.940 Let's see if we can do it in one run. 438 00:23:18.940 --> 00:23:20.180 Oh and we can. 439 00:23:20.180 --> 00:23:23.750 So we are at 20 and now let me hold. 440 00:23:23.750 --> 00:23:26.050 And now I won the game here 441 00:23:26.050 --> 00:23:28.720 and now let's see what happens when I click 442 00:23:29.640 --> 00:23:33.100 and nothing happens the same for hold. 443 00:23:33.100 --> 00:23:36.550 So these buttons, of course, like you can still click them, 444 00:23:36.550 --> 00:23:38.350 but nothing happens. 445 00:23:38.350 --> 00:23:39.320 All right. 446 00:23:39.320 --> 00:23:40.900 That's awesome. 447 00:23:40.900 --> 00:23:43.200 There's just one last thing to do, 448 00:23:43.200 --> 00:23:47.490 which is to get rid of this dice here. 449 00:23:47.490 --> 00:23:49.830 So let's go back one last time. 450 00:23:49.830 --> 00:23:52.530 And so that also happens here when we finish the game. 451 00:23:53.530 --> 00:23:57.980 So remember that we displayed the dice up here 452 00:23:57.980 --> 00:23:59.223 when we rolled a button. 453 00:24:00.120 --> 00:24:02.610 And so let's just copy this 454 00:24:02.610 --> 00:24:05.943 and basically add this hidden class back on. 455 00:24:08.050 --> 00:24:10.580 So right here, for example. 456 00:24:10.580 --> 00:24:13.110 And so now instead of removing it, 457 00:24:13.110 --> 00:24:14.950 we just add it back. 458 00:24:14.950 --> 00:24:16.000 Okay. 459 00:24:16.000 --> 00:24:20.493 Give it a safe and let's try to do it fast again. 460 00:24:22.290 --> 00:24:25.250 And yes, now we should win the game 461 00:24:25.250 --> 00:24:28.610 and the dice is gone awesome. 462 00:24:28.610 --> 00:24:31.730 So we are almost done here with this project. 463 00:24:31.730 --> 00:24:34.010 So our game works really great. 464 00:24:34.010 --> 00:24:35.790 All there's left to do now is 465 00:24:35.790 --> 00:24:38.800 to implement this new game button here. 466 00:24:38.800 --> 00:24:42.600 So we could of course play again by reloading the page, 467 00:24:42.600 --> 00:24:45.220 but it's always nice to have a button 468 00:24:45.220 --> 00:24:47.560 to simply reset the game. 469 00:24:47.560 --> 00:24:50.140 And so let's move on to the next video 470 00:24:50.140 --> 00:24:53.143 and do that to finish this project.