1 00:00:00,210 --> 00:00:05,310 When you are developing a game, it's always good to try the game out and just get a feel for it, see 2 00:00:05,310 --> 00:00:05,910 how it works. 3 00:00:05,940 --> 00:00:07,820 I want to bring it back up to 100 percent. 4 00:00:08,070 --> 00:00:09,330 We're going to hit start game. 5 00:00:09,330 --> 00:00:11,940 And our first instruction is to select a case. 6 00:00:12,120 --> 00:00:17,160 So this is the case that the user is going to store and then they're going to be able to select additional 7 00:00:17,160 --> 00:00:23,250 cases until the next offer and an offer, an offer and so on, until they run out of offers and then 8 00:00:23,250 --> 00:00:25,380 they eventually get the their selected case. 9 00:00:25,680 --> 00:00:30,110 So the objective now is to make a selection of the case and we don't have a whole lot happening. 10 00:00:30,120 --> 00:00:36,390 So this is our next step where we're picking up the case value that's been sitting in there, but we're 11 00:00:36,390 --> 00:00:37,880 not doing anything with that value. 12 00:00:38,010 --> 00:00:43,050 So that's what we want to accomplish in this lesson, is apply that check case function and do something 13 00:00:43,050 --> 00:00:44,040 more with one. 14 00:00:44,040 --> 00:00:45,430 We're doing the checking of the case. 15 00:00:45,460 --> 00:00:47,250 So right now, we're just getting the target value. 16 00:00:47,520 --> 00:00:49,530 So let's go ahead and add in a brand new class. 17 00:00:49,540 --> 00:00:51,180 This is going to be the muted class. 18 00:00:51,360 --> 00:00:55,680 And what this is the one that we're going to apply to the elements as they get clicked. 19 00:00:55,890 --> 00:00:58,800 I also want to make sure that the game is in place. 20 00:00:58,800 --> 00:01:05,430 So where we set that game object in play, make sure that this is true before we continue before try 21 00:01:05,430 --> 00:01:07,210 to do anything within this function. 22 00:01:07,740 --> 00:01:10,560 So save and let's start the game. 23 00:01:10,770 --> 00:01:12,930 So everything is still working as expected. 24 00:01:13,320 --> 00:01:16,970 And now we can make a selection and we've got it in place. 25 00:01:17,340 --> 00:01:25,620 So with the target that's been selected, this is where we want to apply the muted class to. 26 00:01:25,620 --> 00:01:30,270 So class list add and the class that we're adding is muted. 27 00:01:30,720 --> 00:01:33,240 So how the game is so far so select one. 28 00:01:33,450 --> 00:01:36,180 And you can see that as I click them, they get great out. 29 00:01:36,450 --> 00:01:43,320 So what else should happen at this point is that it should grow out or it should disappear off the side 30 00:01:43,320 --> 00:01:43,980 bar menus. 31 00:01:44,250 --> 00:01:49,530 So we need to make sure that we can select that from the existing array that we constructed. 32 00:01:49,800 --> 00:01:56,370 And we also need to make sure that we're counting these and we're removing them from the holding array 33 00:01:56,370 --> 00:01:58,650 where we've got all of the objects being held. 34 00:01:58,860 --> 00:02:03,990 So there's a few things that we need to accomplish within this check case function in order to continue 35 00:02:03,990 --> 00:02:04,800 with the gameplay. 36 00:02:05,130 --> 00:02:12,370 So the objective is to find out and determine what the value in games array is. 37 00:02:12,370 --> 00:02:14,460 So we had that game holding array. 38 00:02:14,760 --> 00:02:22,140 So if you console log out the game and holding array, you can see all of the content that's contained 39 00:02:22,140 --> 00:02:23,640 within that game holding array. 40 00:02:24,120 --> 00:02:30,540 So let's close that click one of the cases and we don't have anything right now within the game holding 41 00:02:30,540 --> 00:02:30,900 array. 42 00:02:31,200 --> 00:02:38,760 So we've got to go back up to where we set the tempo and we got to push that value into the game holding 43 00:02:38,760 --> 00:02:39,110 array. 44 00:02:39,120 --> 00:02:46,470 So game holding array and push the value of temp into it. 45 00:02:47,010 --> 00:02:49,740 So save that and we'll try that one more time. 46 00:02:49,740 --> 00:02:54,990 So now when I select a case, I should have an array of all of the values that are being set in there. 47 00:02:55,200 --> 00:03:00,540 So this is our temporary holding or we're going to select elements and we're going to remove them from 48 00:03:00,540 --> 00:03:01,200 that array. 49 00:03:01,350 --> 00:03:06,390 And we're also going to check the valid the number of items that are currently sitting within that array. 50 00:03:06,390 --> 00:03:08,820 So that's all of the cases that we have. 51 00:03:08,940 --> 00:03:11,430 And as we select them, we want to remove them out. 52 00:03:11,580 --> 00:03:14,610 So that means that we need to determine what the index value is. 53 00:03:14,880 --> 00:03:17,430 So let's get the index value of that element. 54 00:03:17,670 --> 00:03:24,270 So using the game holding array and we're going to check to find index of which is going to return back 55 00:03:24,270 --> 00:03:30,330 the index value if it's available and we can use this value or e target value. 56 00:03:30,810 --> 00:03:36,810 So maybe just to be consistent, we're going to use the E target value and console, logout the value 57 00:03:36,810 --> 00:03:40,320 of Ayanda so that we can see that and close. 58 00:03:40,920 --> 00:03:47,040 So we see that that was first, that's five and it's corresponding with the values that we have here. 59 00:03:47,040 --> 00:03:56,130 So it's going to be six, that one, seven eleven and so on, because it's finding those values within 60 00:03:56,130 --> 00:03:59,310 the array and its output in those array values. 61 00:03:59,430 --> 00:04:03,080 And we know that we did put them within that that order as well. 62 00:04:03,660 --> 00:04:05,970 Let's also find another index value. 63 00:04:06,240 --> 00:04:09,830 And in this case, we're going to select from the Vowles array. 64 00:04:09,840 --> 00:04:16,530 So this is the one that we never touched and using index of where we're going to select the value and 65 00:04:16,530 --> 00:04:19,080 see where this is located within this array. 66 00:04:19,440 --> 00:04:23,700 And this is going to also provide us some information and details that we can make use of. 67 00:04:24,090 --> 00:04:27,990 So really, at the end of the day, we don't have to change. 68 00:04:27,990 --> 00:04:33,750 We don't really have to actually get this value because the indie value is going to be the same as we've 69 00:04:33,750 --> 00:04:35,010 got already contained. 70 00:04:36,660 --> 00:04:42,450 And we know that we've been adding that value as we're building the the game board. 71 00:04:42,930 --> 00:04:45,990 We're adding in the index the entire value. 72 00:04:46,350 --> 00:04:55,650 So when we make a selection, we can get the iron D value and that should be the same plus one on one 73 00:04:55,650 --> 00:04:56,400 of the index cards. 74 00:04:56,430 --> 00:04:59,670 So let's press for and we see we get three for the index. 75 00:04:59,830 --> 00:05:06,370 Value and then we get four for the value that's contained within where it's located, within the array. 76 00:05:06,400 --> 00:05:11,800 So that was number four and it's actually within the array itself. 77 00:05:12,070 --> 00:05:16,270 It's number three and four holds the value of one. 78 00:05:16,520 --> 00:05:19,460 We look in the holding game holding array. 79 00:05:19,780 --> 00:05:27,700 So for the item with index value number three, because we know that it's the third one and because 80 00:05:27,700 --> 00:05:28,720 arrays are zero based. 81 00:05:28,740 --> 00:05:31,030 So one, two, three, four. 82 00:05:31,180 --> 00:05:33,100 And that's returning the value of one. 83 00:05:33,250 --> 00:05:36,540 So that's where we can get that value from that index array. 84 00:05:36,580 --> 00:05:42,340 And we can also see when we're checking to see that index value, we're returning back three. 85 00:05:42,550 --> 00:05:48,600 And we also know that this value of one is the first one in the values index. 86 00:05:48,760 --> 00:05:53,500 So now that we've got all of this information, we can make use of it and we don't actually even need 87 00:05:53,500 --> 00:05:56,730 to check indeed, because we already have it contained within the target. 88 00:05:56,980 --> 00:05:58,880 So that's a double there. 89 00:05:58,900 --> 00:06:03,310 And if you're looking to pass those values, that's one of the ways that you can do that. 90 00:06:03,790 --> 00:06:09,850 We should also, as we're removing the option, I don't want to be able to keep continuously clicking 91 00:06:09,850 --> 00:06:10,020 it. 92 00:06:10,210 --> 00:06:14,170 So let's go ahead and we're going to add or remove our target. 93 00:06:14,290 --> 00:06:17,890 So are selecting the element once again. 94 00:06:18,430 --> 00:06:23,290 And as we remove out the target, we're also going to remove out the event listener. 95 00:06:23,590 --> 00:06:30,160 And then that listener is going to be the click event and it's listening for the check case. 96 00:06:30,520 --> 00:06:32,420 So it's invoking the Chuck case function. 97 00:06:32,710 --> 00:06:37,120 So that means that once we click something, we can't keep pressing it. 98 00:06:37,150 --> 00:06:39,400 It's not it's only going to allow us to press it once. 99 00:06:39,640 --> 00:06:41,240 And that's ideally what we want to do. 100 00:06:41,680 --> 00:06:47,840 Also, let's check and get the length of the items within the game holding array. 101 00:06:48,100 --> 00:06:52,180 So we want to know that there's how many items are left in there. 102 00:06:52,360 --> 00:06:55,180 So game holding, array length. 103 00:06:55,660 --> 00:07:01,150 And we're going to check to see if its length is equal to the vals length. 104 00:07:01,360 --> 00:07:04,300 And if it is, then we know that this is the first instance. 105 00:07:04,330 --> 00:07:07,060 So this is the case that the user actually selected. 106 00:07:07,360 --> 00:07:13,690 And if it's not, then we're just going to go through the regular gameplay and allow the user to make 107 00:07:13,690 --> 00:07:15,140 the selection of those. 108 00:07:15,460 --> 00:07:18,830 So let's create another variable, and that's the game selection. 109 00:07:19,090 --> 00:07:27,040 So this is going to be the user selection game, FCL and using the game holding array, we're going 110 00:07:27,040 --> 00:07:29,490 to splice the value out of it. 111 00:07:29,860 --> 00:07:33,220 So taking that one value and we need to have a starting point. 112 00:07:33,230 --> 00:07:34,350 So that's the end. 113 00:07:34,390 --> 00:07:38,580 So we could have used as well the easy target, indie value. 114 00:07:38,890 --> 00:07:43,000 And we're taking the value and we're only taking one item out of the array. 115 00:07:44,140 --> 00:07:46,060 And we also want to base. 116 00:07:46,060 --> 00:07:51,040 And because we're going to be returning back, just as we saw before, that we're selecting it within 117 00:07:51,040 --> 00:07:51,750 an array base. 118 00:07:51,760 --> 00:07:57,740 So we only want to return back the value without being within wrapped in an array. 119 00:07:57,790 --> 00:08:04,600 So that's where we're breaking out of and we're getting that first entry back and let's type in temp. 120 00:08:04,990 --> 00:08:09,360 So we need a variable that's going to hold the next value. 121 00:08:09,820 --> 00:08:17,170 So temp case next is going to be the game and subtracting the game offers. 122 00:08:17,720 --> 00:08:23,770 And this is where the game offers are going to come into play and we're going through and moving over 123 00:08:23,770 --> 00:08:30,480 to the next game offer so we can use the offer made value in order to accomplish that. 124 00:08:30,760 --> 00:08:33,300 So we're getting that value out of the array. 125 00:08:33,520 --> 00:08:39,130 So I it's getting fairly complex, but I will run through it one more time because we need to know how 126 00:08:39,130 --> 00:08:44,890 many what how many cases the user has to select next. 127 00:08:45,100 --> 00:08:47,620 And we're going to send that into the pop up message. 128 00:08:47,860 --> 00:08:54,580 So that's what all of this was really calculating out how many cases and for the message that we can 129 00:08:54,580 --> 00:08:55,750 provide the user. 130 00:08:56,080 --> 00:08:58,960 So we're providing them, which case they select it. 131 00:08:59,530 --> 00:09:03,340 And again, it can be this or easy target. 132 00:09:03,670 --> 00:09:05,290 So either one is fine. 133 00:09:05,410 --> 00:09:06,450 So the target. 134 00:09:06,470 --> 00:09:10,860 And so that's the case that they selected the case number. 135 00:09:10,900 --> 00:09:13,270 Always think about it from the player's perspective. 136 00:09:13,270 --> 00:09:16,480 When they're playing the game, they need to know what's coming next. 137 00:09:16,600 --> 00:09:19,330 And they also need to know what's happening within the game. 138 00:09:19,540 --> 00:09:22,810 So we tell them that they've selected the case that they've selected. 139 00:09:22,990 --> 00:09:28,510 And also within the pop up, we're going to tell them how many cases they have until they receive an 140 00:09:28,510 --> 00:09:29,020 offer. 141 00:09:29,020 --> 00:09:32,470 So they need to select this number of cases before the offer. 142 00:09:33,130 --> 00:09:38,290 I'm also going to update this to do a word drop so we can see the content better. 143 00:09:40,710 --> 00:09:46,290 Values that were writing, so I know it's a long statement there, so now when we make a selection, 144 00:09:46,830 --> 00:09:50,340 we can go through an essay Selecta case, click any of the cases below. 145 00:09:50,730 --> 00:09:57,380 So make our selection select a number for now, select one case, and then we need to select more cases. 146 00:09:57,540 --> 00:09:59,190 This is where the statement comes in. 147 00:09:59,220 --> 00:10:02,340 What's going to happen when we're not selecting the first case? 148 00:10:02,520 --> 00:10:05,880 And also we need to be able to trigger offers as well. 149 00:10:06,180 --> 00:10:08,010 So all of that is still yet to come. 150 00:10:08,190 --> 00:10:13,470 So go ahead and add this into your project that we've got the ability to check the first case. 151 00:10:13,680 --> 00:10:18,780 And again, it is following through as you play the game, you got to think of what's next. 152 00:10:18,810 --> 00:10:20,490 What action do you want to happen next? 153 00:10:20,640 --> 00:10:24,240 And that guides you to what you need to do within the code. 154 00:10:24,420 --> 00:10:27,900 So we're selecting case we selected case number five. 155 00:10:27,900 --> 00:10:28,770 So that's stored. 156 00:10:28,920 --> 00:10:34,860 And then now we need to select one more case and we select one more case and that we should be triggering 157 00:10:34,860 --> 00:10:35,760 an offer at this. 158 00:10:36,060 --> 00:10:37,890 So coming up next, let's add that in.