1 00:00:01,980 --> 00:00:06,590 Welcome back, my friends, to another election today, we are going to continue working on our project 2 00:00:06,600 --> 00:00:15,640 now before starting to explain the rest of these the things that we're going to apply on this game. 3 00:00:16,170 --> 00:00:20,940 When I opened the original game, I saw that I'm missing this background image. 4 00:00:21,180 --> 00:00:23,650 So you're going to have it in your starter project. 5 00:00:23,670 --> 00:00:24,870 Don't worry about that one. 6 00:00:25,350 --> 00:00:27,120 But that is the image. 7 00:00:27,130 --> 00:00:31,690 So what I'm going to do is I'm going to just open this in drag and drop it here. 8 00:00:31,860 --> 00:00:34,510 Now I'm going to close it. 9 00:00:34,740 --> 00:00:35,790 Yeah, here it is. 10 00:00:35,840 --> 00:00:43,020 Big here is now the lifesaver as done its job relo everything. 11 00:00:43,290 --> 00:00:45,130 So let's continue working. 12 00:00:45,160 --> 00:00:48,050 I want to get rid of this dot here. 13 00:00:48,060 --> 00:00:52,230 I mean, this is actually the status of the player and what else? 14 00:00:52,230 --> 00:00:54,150 I want to get rid of these blocks here. 15 00:00:54,150 --> 00:00:57,750 Right, because we don't have we don't have it when we start the game. 16 00:00:58,520 --> 00:01:01,340 Now, there are a couple of things that we need to do. 17 00:01:01,650 --> 00:01:08,130 The first thing that I want to just point out that you can remove this invisible class from the player 18 00:01:08,130 --> 00:01:09,930 to and from the player one. 19 00:01:10,560 --> 00:01:20,310 And we will we can say we will add the invisible class in the player with zero winner through. 20 00:01:23,550 --> 00:01:28,630 Jess, so I'm just going to copy it and I'm going to put it right here. 21 00:01:28,890 --> 00:01:29,950 So how are we going to do it? 22 00:01:30,570 --> 00:01:31,770 That's very easy. 23 00:01:32,160 --> 00:01:34,820 We need one more line of code. 24 00:01:34,830 --> 00:01:37,890 Now, if I go here, I will see the winners. 25 00:01:38,040 --> 00:01:40,140 And that is not what we have here. 26 00:01:40,140 --> 00:01:45,160 But because I wanted to live through the year, we will be a little bit different. 27 00:01:45,570 --> 00:01:50,300 So first things first I want to find so you can go here. 28 00:01:51,300 --> 00:01:53,480 I want to find this dot here. 29 00:01:53,490 --> 00:02:01,750 So inspect element and that has an idea of life, that zero in the other one for the player. 30 00:02:01,770 --> 00:02:05,910 Number two, he said live dash one. 31 00:02:06,780 --> 00:02:10,590 So as I told you, we're going to use where we select. 32 00:02:10,600 --> 00:02:14,550 Are we going to use Galam element by the you don't have to worry about it now. 33 00:02:15,630 --> 00:02:20,930 Said life status to empty. 34 00:02:21,480 --> 00:02:22,630 Now how we can do that. 35 00:02:22,650 --> 00:02:31,920 So I'm going to still use documented query selector get elements sorry id element bidi in here. 36 00:02:31,920 --> 00:02:35,490 I'm just going to say life of a zero. 37 00:02:36,030 --> 00:02:36,470 Right. 38 00:02:36,690 --> 00:02:44,070 And what we're going to do is we're going to see style that display to none. 39 00:02:47,870 --> 00:02:56,030 And I'm going to save it, and here it is, you don't have it, and if you go there on where is it live? 40 00:02:56,030 --> 00:02:56,460 Zero. 41 00:02:57,700 --> 00:02:58,460 Mm hmm. 42 00:02:58,730 --> 00:03:00,010 You can't see it by way here. 43 00:03:00,020 --> 00:03:03,380 Now, it's just going to refresh here somewhere here. 44 00:03:04,340 --> 00:03:05,390 Here it is now. 45 00:03:05,390 --> 00:03:09,320 The live zero class player style display none. 46 00:03:09,320 --> 00:03:12,160 So we added this style display none. 47 00:03:12,500 --> 00:03:14,170 So we need to do for the second one. 48 00:03:14,750 --> 00:03:16,820 And I'm just going to copy it. 49 00:03:17,430 --> 00:03:20,750 I'm going to put it here and I'm going to see that one. 50 00:03:20,930 --> 00:03:22,440 And that should do the job. 51 00:03:22,940 --> 00:03:29,060 Now, both of the players, they don't have any status because they haven't started playing the game. 52 00:03:29,960 --> 00:03:34,520 Now, I just want to get rid of this for you to get rid of this one. 53 00:03:34,520 --> 00:03:40,820 For that reason, we are going to use enriched HTML and we're going to set that enriched HTML to empty. 54 00:03:41,180 --> 00:03:41,750 Why? 55 00:03:41,750 --> 00:03:49,990 Because that div players score player one score block does contain. 56 00:03:50,240 --> 00:03:53,570 So if I remove it from here, here it is. 57 00:03:53,870 --> 00:03:54,680 It's nothing there. 58 00:03:55,760 --> 00:04:04,880 So I'm going to do it through actual I'm going to do it through the actual JavaScript and you can just. 59 00:04:06,110 --> 00:04:08,650 OK, let's first see how that will go. 60 00:04:08,660 --> 00:04:12,750 And after that we're going to just make them we're going to comment them. 61 00:04:13,280 --> 00:04:20,390 Now we're going to say document dump and get element by bidi. 62 00:04:20,960 --> 00:04:24,200 And I'm just going to say player. 63 00:04:24,950 --> 00:04:26,000 Let's copy that one. 64 00:04:27,290 --> 00:04:30,560 So I have the same class and the same idea. 65 00:04:30,560 --> 00:04:33,760 You can use even the class if you want with a single player. 66 00:04:33,830 --> 00:04:34,260 OK. 67 00:04:34,340 --> 00:04:40,480 Now, when I want to do as I told you, I'm going to say ordinary HTML to empty like that. 68 00:04:41,900 --> 00:04:43,100 Let's see if that was going to work. 69 00:04:43,280 --> 00:04:43,670 Yep. 70 00:04:43,970 --> 00:04:51,440 That is working now actually you don't need to hear this one, but I'm going to leave it there because 71 00:04:51,440 --> 00:04:53,190 I'm going to use it for something later. 72 00:04:53,270 --> 00:04:53,950 He will see. 73 00:04:54,170 --> 00:04:56,330 So don't delete that one because you're going to need it. 74 00:04:56,540 --> 00:04:56,920 Right. 75 00:04:57,410 --> 00:04:58,790 And I'm going to copy the other one. 76 00:04:59,120 --> 00:05:06,830 And it's a good idea if we start with number zero on top. 77 00:05:06,860 --> 00:05:07,140 Right. 78 00:05:07,640 --> 00:05:13,840 So that set the block player block to empty. 79 00:05:14,990 --> 00:05:16,970 No, here we go. 80 00:05:17,060 --> 00:05:20,940 We do have now our games start to look like this. 81 00:05:21,680 --> 00:05:33,350 OK, now how we can add class here to this guy here, because before remember, we did had the class, 82 00:05:33,350 --> 00:05:36,630 where was it and what else was here was invisible. 83 00:05:36,890 --> 00:05:43,460 Now we will add it through JavaScript using class list and we're going to add it. 84 00:05:43,670 --> 00:05:46,880 You're going to say, OK, we're going to add to this list. 85 00:05:47,600 --> 00:05:50,330 Now, we haven't done that maybe before. 86 00:05:50,660 --> 00:05:54,830 Now add class invisible. 87 00:05:56,510 --> 00:05:57,950 So I'm going to do this. 88 00:05:57,950 --> 00:06:03,050 But after that, when there are weener, I'm just going to remove that class. 89 00:06:03,320 --> 00:06:03,700 Right. 90 00:06:03,920 --> 00:06:08,720 So that is cool to winners. 91 00:06:09,980 --> 00:06:21,350 So what we going to do is document that query selector and I'm going to select here with Wiener Dash. 92 00:06:22,370 --> 00:06:26,660 So I think I have winner one and winner zero. 93 00:06:27,020 --> 00:06:36,080 So I'm going to start with zero hoping that I have class list that end and I'm going to add the class 94 00:06:36,080 --> 00:06:36,890 invisible. 95 00:06:38,390 --> 00:06:41,080 No, I'm just going to show you one thing. 96 00:06:41,090 --> 00:06:43,490 So here it is, this wiener here. 97 00:06:43,520 --> 00:06:48,980 The idea I'm catching the ID, so I have two ideas for the first player. 98 00:06:49,310 --> 00:06:54,250 It's Winner zero and the for the second player is its words. 99 00:06:54,260 --> 00:06:55,010 And we know one. 100 00:06:55,100 --> 00:06:56,000 Right, this one. 101 00:06:56,970 --> 00:07:01,410 OK, so I'm going to save it like that and I'm going to go there. 102 00:07:01,820 --> 00:07:03,200 So there you go. 103 00:07:03,320 --> 00:07:11,000 The image, it's not there, but I'm just going to show you I'm going to go here in a wrapper and I'm 104 00:07:11,000 --> 00:07:13,850 going to search for in the visible. 105 00:07:13,850 --> 00:07:19,100 OK, now this class is something that I have coded by myself. 106 00:07:19,370 --> 00:07:20,510 So it's invisible. 107 00:07:20,510 --> 00:07:28,370 When I said visibility to here in opacity and after that I said the visible class where I give visibility 108 00:07:28,370 --> 00:07:31,160 visible again and opacity back to one. 109 00:07:32,120 --> 00:07:32,570 Right. 110 00:07:32,870 --> 00:07:34,610 That is what I'm trying to do here. 111 00:07:35,360 --> 00:07:39,470 OK, you don't need to know anything else now. 112 00:07:39,470 --> 00:07:41,870 We need to do for the second one, for the second wiener. 113 00:07:42,290 --> 00:07:45,470 And that is actual wiener one. 114 00:07:46,750 --> 00:07:52,390 So I'm just going to copy it, I'm going to put it there, and we know one, save it. 115 00:07:53,200 --> 00:07:54,100 And there you go. 116 00:07:54,100 --> 00:07:58,890 If you don't use this, live a life saver, then don't worry. 117 00:07:58,890 --> 00:07:59,770 You just refresh. 118 00:08:00,760 --> 00:08:04,270 So that is pretty much how our game. 119 00:08:04,300 --> 00:08:11,170 So now the both of the games, the finish one and the one that we need to start working on the pretty 120 00:08:11,170 --> 00:08:11,740 much same. 121 00:08:12,820 --> 00:08:13,170 Right. 122 00:08:13,750 --> 00:08:16,140 So I think we need to stop here. 123 00:08:16,390 --> 00:08:17,800 We have learned a lot of things. 124 00:08:17,800 --> 00:08:19,800 So we said the player score to zero. 125 00:08:19,810 --> 00:08:27,790 We said the status to empty or invisible the player block where we put this building blocks there. 126 00:08:27,820 --> 00:08:32,740 And also I forgot to comment the other ones, you don't need them anymore. 127 00:08:33,490 --> 00:08:35,140 We're going to need them a little bit later. 128 00:08:35,500 --> 00:08:38,770 But that is pretty much what I want to achieve for this lecture. 129 00:08:39,040 --> 00:08:45,600 We add this cubes here that Dice's in the background and that is pretty much it. 130 00:08:45,970 --> 00:08:54,130 So I think we are going to roll in next lecture and start building some listeners. 131 00:08:54,550 --> 00:08:58,990 And yeah, we're going to create add listeners on the buttons. 132 00:08:58,990 --> 00:08:59,320 Right. 133 00:08:59,740 --> 00:09:06,310 Sorry, we're going to add event listeners to this button and after that we will do at the end with 134 00:09:06,310 --> 00:09:06,880 the restart. 135 00:09:06,880 --> 00:09:08,900 So we start we're going to leave it probably to you. 136 00:09:08,980 --> 00:09:10,300 So thank you very much. 137 00:09:10,510 --> 00:09:11,380 I hope you enjoyed it. 138 00:09:11,380 --> 00:09:18,520 And by the way, you should always not zoom this one too much, make sure it's 100 percent right, because 139 00:09:18,520 --> 00:09:22,810 otherwise this building blocks will be a little bit out of. 140 00:09:23,290 --> 00:09:26,260 Yeah, they will not be correctly placed. 141 00:09:26,270 --> 00:09:26,650 Right. 142 00:09:27,400 --> 00:09:28,270 So thank you very much. 143 00:09:28,390 --> 00:09:29,380 I hope you enjoyed this one. 144 00:09:29,380 --> 00:09:30,550 And I will see you in the next one.