1 00:00:00,060 --> 00:00:04,590 This lesson is going to be an interesting one because we're going to build our game board, I'm also 2 00:00:04,590 --> 00:00:06,080 going to hide the line numbers. 3 00:00:06,080 --> 00:00:06,540 So that's good. 4 00:00:06,560 --> 00:00:09,360 Give me a little bit more real estate to play with within the editor. 5 00:00:09,570 --> 00:00:11,850 And then we've got our display area. 6 00:00:11,940 --> 00:00:14,420 So we've got it here on the left hand side. 7 00:00:14,580 --> 00:00:19,620 And what I'm going to do to that one is I'm going to minimize that because so it's nice and small and 8 00:00:19,620 --> 00:00:23,040 compact and we can see it being displayed out here. 9 00:00:23,040 --> 00:00:25,350 So we still have our start button select a case. 10 00:00:25,590 --> 00:00:29,150 So we want to do is load all of that content and make it a little bit smaller. 11 00:00:29,310 --> 00:00:33,320 So going into the build game board, we did set a placeholder for this. 12 00:00:33,570 --> 00:00:36,320 So this lesson, we are ready to make this challenge. 13 00:00:36,840 --> 00:00:42,090 So we want to do is create an array that's going to hold all of the side values and we're going to build 14 00:00:42,090 --> 00:00:42,710 that array. 15 00:00:43,440 --> 00:00:50,490 So we've got when we constructed all of the basic game objects, we can create another one and just 16 00:00:50,490 --> 00:00:52,040 call this side values. 17 00:00:52,320 --> 00:00:56,150 So this will be a global array that's going to hold all the same values. 18 00:00:56,310 --> 00:00:58,410 We could also do it within the game object. 19 00:00:58,420 --> 00:01:00,590 So that's another option if we want it to do that. 20 00:01:00,870 --> 00:01:02,520 But for now, we'll just keep it separate. 21 00:01:02,820 --> 00:01:09,300 And then going back into where we're building the game board, I want to set the site values to be blank 22 00:01:09,300 --> 00:01:16,260 and then we're going to use this site values in order to create the array for easy selection of the 23 00:01:16,260 --> 00:01:19,010 DOM elements that are going to be contained within the site. 24 00:01:19,230 --> 00:01:22,920 So we're going to have a whole bunch of values here in the site and we're going to be able to easily 25 00:01:22,920 --> 00:01:24,910 select them, hide them as needed. 26 00:01:25,170 --> 00:01:30,420 So this is going to really simplify our application because we're going to have these all within an 27 00:01:30,420 --> 00:01:34,920 array, or we could go back into the page and make a selection of them, which is a little bit more 28 00:01:34,920 --> 00:01:35,430 difficult. 29 00:01:35,880 --> 00:01:41,160 Also, we need to have an array to work with, and that's the array of all the values. 30 00:01:41,340 --> 00:01:44,970 So I'm actually going to take the values array and I'm going to duplicate the rate. 31 00:01:45,300 --> 00:01:50,940 And one of the reasons is that I'm duplicating an array is that whenever the game restarts, I still 32 00:01:50,940 --> 00:01:52,560 want to have all those values present. 33 00:01:52,800 --> 00:01:58,750 And I do want to have an array that I can work with and remove values from as I construct the game board. 34 00:01:58,950 --> 00:02:05,700 So this is going to be how to clone an array and do it really easily where you can do it with the slice 35 00:02:06,090 --> 00:02:09,930 and this returns copy or a portion of the array. 36 00:02:10,110 --> 00:02:13,560 So what we want to do is want to turn a copy of the full array. 37 00:02:13,800 --> 00:02:20,400 So what this is going to do is this is going to clone the vows array into Val two and then Val to is 38 00:02:20,400 --> 00:02:21,850 the one that we're going to be working with. 39 00:02:22,260 --> 00:02:29,010 We've also got Arpège Corne Object and I'm going to clear out any content that might be sitting in there. 40 00:02:29,370 --> 00:02:34,620 And as we're building out the gameboard, we don't want to have anything hold over or held over from 41 00:02:34,620 --> 00:02:35,760 the previous version. 42 00:02:36,120 --> 00:02:40,610 We need to also create an array for all of the total remaining cases. 43 00:02:40,800 --> 00:02:46,530 So we're going to be dropping all of these and we'll just call this holding array. 44 00:02:46,740 --> 00:02:50,850 So it's going to hold all of the remaining cases as we construct it. 45 00:02:51,030 --> 00:02:57,270 These are some values that are going to just be flexible and basing this on the game object. 46 00:02:57,490 --> 00:03:01,380 So that way it's global and we can have access to it and other functions. 47 00:03:01,590 --> 00:03:09,000 And one other thing that I did want to do is I want to get the page main and set a default style value 48 00:03:09,000 --> 00:03:09,420 to that. 49 00:03:09,630 --> 00:03:15,930 And I want to set a default width to this, as I don't want the user to be able to update the width. 50 00:03:16,080 --> 00:03:23,880 So I want to force minimum width for this and I'm taking the windows width, so whatever the windows 51 00:03:23,880 --> 00:03:27,520 with is and getting that inner width. 52 00:03:27,690 --> 00:03:33,270 So this is the width of the browser window rendered in and pixels. 53 00:03:33,510 --> 00:03:37,920 So we want to get the pixel value of what the current display size is. 54 00:03:38,160 --> 00:03:45,120 So this is in case the user decides to resize their screen, it's going to always stay at that minimum 55 00:03:45,120 --> 00:03:49,630 size so that with size the page mean is always going to stay the same. 56 00:03:49,650 --> 00:03:56,400 And also, let's select some boundaries because we're trying to make this dynamic so we don't want to 57 00:03:56,400 --> 00:03:58,520 have everything positioned in place. 58 00:03:58,890 --> 00:04:05,480 So again, we need to make the coding dynamic to update and change as the user changes. 59 00:04:05,760 --> 00:04:12,660 So we're getting the page caught and then we're going to use a method called get bounding client rectangle. 60 00:04:12,990 --> 00:04:18,460 So it's going to return text rectangle object that encloses a group of rectangles. 61 00:04:18,750 --> 00:04:24,200 So this method can return back the dimensions of that container. 62 00:04:24,840 --> 00:04:31,740 And if I do temp con just to output what those values are that we're holding and updating this from 63 00:04:31,740 --> 00:04:33,040 elements to the console. 64 00:04:33,060 --> 00:04:39,870 So when I hit start, it's going to build the gameboard and it's selecting that main game container 65 00:04:40,140 --> 00:04:42,110 and it's getting the dimensions of it. 66 00:04:42,360 --> 00:04:45,320 So we'll see that it's width is 630. 67 00:04:45,630 --> 00:04:50,270 It's from the left, two or nine from the right 839. 68 00:04:50,490 --> 00:04:57,810 So this gives us an idea of where we can start adding in the cases and how many cases we need to add 69 00:04:57,810 --> 00:04:59,700 in and the rows in the cases. 70 00:04:59,790 --> 00:05:04,530 Were they kind of positioned in the size of those cases, so there's one other dimension that we need 71 00:05:04,770 --> 00:05:07,200 and that's going to be the side dimension. 72 00:05:07,530 --> 00:05:09,470 So I'm going to pick up the side dimension. 73 00:05:09,750 --> 00:05:19,200 So the same way that I got about the main container values, I can do page and we're using right side 74 00:05:19,200 --> 00:05:25,610 because we also want to get where the right side left position is of the right side element. 75 00:05:25,620 --> 00:05:30,390 So that's the one on the right here because we want to be able to start loading content into there at 76 00:05:30,390 --> 00:05:30,940 that point. 77 00:05:31,230 --> 00:05:36,690 So for most of it, they're going to be the same, but they're going to have different left and right 78 00:05:36,690 --> 00:05:37,290 position. 79 00:05:37,290 --> 00:05:39,030 So that's where we're getting that value. 80 00:05:39,150 --> 00:05:44,100 And we're going to use that when we're constructing where we're placing the elements on the page. 81 00:05:44,160 --> 00:05:50,450 Another thing that we need is we need to find out the spacing between the case cases. 82 00:05:50,700 --> 00:05:56,100 So depending if the screen is larger or smaller, we're going to do some calculations on the spacing. 83 00:05:56,250 --> 00:06:01,110 And this is where we're taking that value from the temp con and getting the width object. 84 00:06:01,130 --> 00:06:02,460 So that's the width right there. 85 00:06:02,460 --> 00:06:03,650 So it's six thirty. 86 00:06:03,690 --> 00:06:09,780 So right now it's going to equal to 630 and then we're dividing it by four and we're going to subtract 87 00:06:09,780 --> 00:06:13,310 10 so we can dynamically spaced out the cases. 88 00:06:13,320 --> 00:06:14,780 And this is all going to work out. 89 00:06:14,790 --> 00:06:17,670 So you just have to trust me on this, that the formula is going to work. 90 00:06:18,240 --> 00:06:19,620 So and I refresh it. 91 00:06:19,620 --> 00:06:25,500 And if I change the size of my screen, you're going to see that this size has changed as well or width 92 00:06:25,500 --> 00:06:26,910 has changed on that one as well. 93 00:06:27,160 --> 00:06:29,660 So that's going to give us a little bit more real estate to play with. 94 00:06:29,850 --> 00:06:37,680 And basically, this is allowing us to make our spacing and our size of our positioning of our elements 95 00:06:37,680 --> 00:06:38,550 more dynamic. 96 00:06:39,030 --> 00:06:41,110 Also, let's get the vertical. 97 00:06:41,340 --> 00:06:46,260 So this is the vertical start position of where the cases are going to be started. 98 00:06:46,290 --> 00:06:50,030 So we need to know this before we place the cases on the page. 99 00:06:50,310 --> 00:06:57,500 So using the temp com top position and we're going to add temp and then also the horizontal position. 100 00:06:57,510 --> 00:06:58,580 So just call it for. 101 00:06:58,950 --> 00:07:03,510 And this one is going to be temp con and left. 102 00:07:03,780 --> 00:07:07,410 And it's also going to do a little bit more calculation. 103 00:07:07,770 --> 00:07:08,810 So spacer. 104 00:07:09,180 --> 00:07:16,260 And if we take spacer and we divide it by one point two, that will give us the left starting position 105 00:07:16,440 --> 00:07:18,570 of where we can start placing the cases. 106 00:07:19,380 --> 00:07:22,530 Also, let's calculate out the side top. 107 00:07:22,890 --> 00:07:27,090 We need to know the side positions that we're the side elements are going to go. 108 00:07:27,210 --> 00:07:31,800 So this is going to be a listing of all the values that are available that are actually hidden within 109 00:07:31,800 --> 00:07:36,150 the cases so that we know which ones have been selected and which ones are still in place. 110 00:07:36,330 --> 00:07:39,070 Also, we need to get the left horizontal. 111 00:07:39,300 --> 00:07:45,390 So this is all calculating out where we can position our elements and where our starting position is, 112 00:07:45,390 --> 00:07:48,240 where we're going to place our first element before we constructing them. 113 00:07:48,240 --> 00:07:50,460 We need to know exactly where we're putting it. 114 00:07:50,640 --> 00:07:52,500 So that's where all of the calculations. 115 00:07:52,740 --> 00:07:58,520 So the side width is going to calculate the start horizontal position of the left side elements. 116 00:07:58,800 --> 00:08:00,330 So there's two things going on here. 117 00:08:00,630 --> 00:08:07,280 We're calculating and we're within the mean area where within the page con. 118 00:08:07,350 --> 00:08:10,680 So that's the main container here, the game area. 119 00:08:10,980 --> 00:08:14,910 We're going to be dropping all of the cases in there visibly. 120 00:08:15,150 --> 00:08:17,220 So we had to do some calculations for that. 121 00:08:17,460 --> 00:08:23,730 And as well, we want to be listing out on the left side and on the right side those existing values, 122 00:08:23,730 --> 00:08:26,820 and then those are going to disappear as the cases get selected. 123 00:08:27,000 --> 00:08:31,300 So the user has a better understanding of what's happening and where they stand within the game. 124 00:08:31,770 --> 00:08:38,550 So now we can ready to loop through the number of values and loop through them. 125 00:08:38,550 --> 00:08:43,890 And we're going to take the avowals length as it's actually going to be the same as Val to but Val too 126 00:08:43,890 --> 00:08:45,180 is going to be decreasing. 127 00:08:45,330 --> 00:08:47,940 So that's what we're going to use the original Vals length. 128 00:08:48,180 --> 00:08:52,110 So this is how many initial cases we have to work with. 129 00:08:52,230 --> 00:08:55,680 And these are the the initial numbers that we want to work through. 130 00:08:55,890 --> 00:09:02,930 So as we loop through, we want to continuously create elements and add in all of those values. 131 00:09:03,270 --> 00:09:07,620 So let's do the cases first where we're going to construct the cases. 132 00:09:07,980 --> 00:09:16,230 So creating an element and we're going to use the documentary element function in JavaScript and we're 133 00:09:16,230 --> 00:09:17,400 going to create a div this way. 134 00:09:17,430 --> 00:09:22,230 And then we do have the left position under a variable called HLR. 135 00:09:22,560 --> 00:09:28,210 So we're going to update the value of So R and we're going to add the spacer value. 136 00:09:28,590 --> 00:09:35,040 So this is going to be positioning where we place that element and under make her, let's add a class. 137 00:09:35,310 --> 00:09:41,340 So to the class list, we're going to add a class and the class that we're adding is going to be case. 138 00:09:41,340 --> 00:09:45,020 And of course this is going to be what the cases are going to look like. 139 00:09:45,030 --> 00:09:52,680 So we need to also go back into the case in the next lesson and update how we're outputting the cases 140 00:09:52,680 --> 00:09:53,460 and what they look like. 141 00:09:53,970 --> 00:09:56,460 So make her text content. 142 00:09:56,640 --> 00:09:58,320 So setting that text content. 143 00:09:58,500 --> 00:09:59,430 So it's going to read whatever. 144 00:09:59,510 --> 00:10:01,280 The value of X plus one. 145 00:10:01,540 --> 00:10:06,540 So this is going to give us all of the cases listing them out and now let's position the cases. 146 00:10:06,560 --> 00:10:08,630 So I know we did all of those calculations. 147 00:10:08,840 --> 00:10:12,700 So let's make use of those calculations and we're getting the left position. 148 00:10:12,980 --> 00:10:19,180 So it's HLR plus, don't forget the pics, because otherwise you're just going to have a numeric value. 149 00:10:19,580 --> 00:10:22,220 And there's also style and talk. 150 00:10:22,580 --> 00:10:25,130 And the top position is something that we calculate as well. 151 00:10:25,320 --> 00:10:33,920 So it's V.R. Plus picks and then these values are going to update as we as we loop through all the different 152 00:10:33,920 --> 00:10:34,950 values within value. 153 00:10:35,150 --> 00:10:42,860 So we're going to take that page corne object and use append child, which is going to add a node to 154 00:10:42,860 --> 00:10:45,240 the end of the list of children, the specified node. 155 00:10:45,380 --> 00:10:49,130 So it's going to continuously add content within that main area. 156 00:10:49,220 --> 00:10:52,280 And the element that we're adding is make her. 157 00:10:52,430 --> 00:10:54,170 So I'm just going to pen that one there. 158 00:10:54,200 --> 00:10:56,570 So let's save that Head Start game. 159 00:10:57,380 --> 00:11:01,760 And now you can see we've listed out all of the cases, so we just listed out the numbers. 160 00:11:01,760 --> 00:11:04,520 And these are the numbers that are going to show on top of the cases. 161 00:11:05,120 --> 00:11:10,430 So it doesn't really look like a whole lot because we need to update the success of case. 162 00:11:10,550 --> 00:11:14,990 So let's do that and then we're going to wrap up the maker and then we'll also list out the values on 163 00:11:14,990 --> 00:11:17,050 the two sides in the upcoming lessons. 164 00:11:17,060 --> 00:11:19,100 So go ahead and go through. 165 00:11:19,100 --> 00:11:22,160 And you don't have to necessarily do the calculations quite yet. 166 00:11:22,460 --> 00:11:26,510 And it's going to make a whole lot more sense when you're actually be able to see this visibly. 167 00:11:27,110 --> 00:11:31,160 So just make sure that you are able to create the elements and add them to the page. 168 00:11:31,340 --> 00:11:34,970 And then you can also do your own calculations if you want to position them differently. 169 00:11:34,970 --> 00:11:36,760 And then coming up next, we're going to wrap up. 170 00:11:36,770 --> 00:11:42,620 So we're going to take care of the styling for case and then we're going to wrap up and make this interactive 171 00:11:42,620 --> 00:11:45,320 as well so that these cases become clickable.