This lesson is going to be an interesting one because we're going to build our game board, I'm also
going to hide the line numbers.
So that's good.
Give me a little bit more real estate to play with within the editor.
And then we've got our display area.
So we've got it here on the left hand side.
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
compact and we can see it being displayed out here.
So we still have our start button select a case.
So we want to do is load all of that content and make it a little bit smaller.
So going into the build game board, we did set a placeholder for this.
So this lesson, we are ready to make this challenge.
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
that array.
So we've got when we constructed all of the basic game objects, we can create another one and just
call this side values.
So this will be a global array that's going to hold all the same values.
We could also do it within the game object.
So that's another option if we want it to do that.
But for now, we'll just keep it separate.
And then going back into where we're building the game board, I want to set the site values to be blank
and then we're going to use this site values in order to create the array for easy selection of the
DOM elements that are going to be contained within the site.
So we're going to have a whole bunch of values here in the site and we're going to be able to easily
select them, hide them as needed.
So this is going to really simplify our application because we're going to have these all within an
array, or we could go back into the page and make a selection of them, which is a little bit more
difficult.
Also, we need to have an array to work with, and that's the array of all the values.
So I'm actually going to take the values array and I'm going to duplicate the rate.
And one of the reasons is that I'm duplicating an array is that whenever the game restarts, I still
want to have all those values present.
And I do want to have an array that I can work with and remove values from as I construct the game board.
So this is going to be how to clone an array and do it really easily where you can do it with the slice
and this returns copy or a portion of the array.
So what we want to do is want to turn a copy of the full array.
So what this is going to do is this is going to clone the vows array into Val two and then Val to is
the one that we're going to be working with.
We've also got Arpège Corne Object and I'm going to clear out any content that might be sitting in there.
And as we're building out the gameboard, we don't want to have anything hold over or held over from
the previous version.
We need to also create an array for all of the total remaining cases.
So we're going to be dropping all of these and we'll just call this holding array.
So it's going to hold all of the remaining cases as we construct it.
These are some values that are going to just be flexible and basing this on the game object.
So that way it's global and we can have access to it and other functions.
And one other thing that I did want to do is I want to get the page main and set a default style value
to that.
And I want to set a default width to this, as I don't want the user to be able to update the width.
So I want to force minimum width for this and I'm taking the windows width, so whatever the windows
with is and getting that inner width.
So this is the width of the browser window rendered in and pixels.
So we want to get the pixel value of what the current display size is.
So this is in case the user decides to resize their screen, it's going to always stay at that minimum
size so that with size the page mean is always going to stay the same.
And also, let's select some boundaries because we're trying to make this dynamic so we don't want to
have everything positioned in place.
So again, we need to make the coding dynamic to update and change as the user changes.
So we're getting the page caught and then we're going to use a method called get bounding client rectangle.
So it's going to return text rectangle object that encloses a group of rectangles.
So this method can return back the dimensions of that container.
And if I do temp con just to output what those values are that we're holding and updating this from
elements to the console.
So when I hit start, it's going to build the gameboard and it's selecting that main game container
and it's getting the dimensions of it.
So we'll see that it's width is 630.
It's from the left, two or nine from the right 839.
So this gives us an idea of where we can start adding in the cases and how many cases we need to add
in and the rows in the cases.
Were they kind of positioned in the size of those cases, so there's one other dimension that we need
and that's going to be the side dimension.
So I'm going to pick up the side dimension.
So the same way that I got about the main container values, I can do page and we're using right side
because we also want to get where the right side left position is of the right side element.
So that's the one on the right here because we want to be able to start loading content into there at
that point.
So for most of it, they're going to be the same, but they're going to have different left and right
position.
So that's where we're getting that value.
And we're going to use that when we're constructing where we're placing the elements on the page.
Another thing that we need is we need to find out the spacing between the case cases.
So depending if the screen is larger or smaller, we're going to do some calculations on the spacing.
And this is where we're taking that value from the temp con and getting the width object.
So that's the width right there.
So it's six thirty.
So right now it's going to equal to 630 and then we're dividing it by four and we're going to subtract
10 so we can dynamically spaced out the cases.
And this is all going to work out.
So you just have to trust me on this, that the formula is going to work.
So and I refresh it.
And if I change the size of my screen, you're going to see that this size has changed as well or width
has changed on that one as well.
So that's going to give us a little bit more real estate to play with.
And basically, this is allowing us to make our spacing and our size of our positioning of our elements
more dynamic.
Also, let's get the vertical.
So this is the vertical start position of where the cases are going to be started.
So we need to know this before we place the cases on the page.
So using the temp com top position and we're going to add temp and then also the horizontal position.
So just call it for.
And this one is going to be temp con and left.
And it's also going to do a little bit more calculation.
So spacer.
And if we take spacer and we divide it by one point two, that will give us the left starting position
of where we can start placing the cases.
Also, let's calculate out the side top.
We need to know the side positions that we're the side elements are going to go.
So this is going to be a listing of all the values that are available that are actually hidden within
the cases so that we know which ones have been selected and which ones are still in place.
Also, we need to get the left horizontal.
So this is all calculating out where we can position our elements and where our starting position is,
where we're going to place our first element before we constructing them.
We need to know exactly where we're putting it.
So that's where all of the calculations.
So the side width is going to calculate the start horizontal position of the left side elements.
So there's two things going on here.
We're calculating and we're within the mean area where within the page con.
So that's the main container here, the game area.
We're going to be dropping all of the cases in there visibly.
So we had to do some calculations for that.
And as well, we want to be listing out on the left side and on the right side those existing values,
and then those are going to disappear as the cases get selected.
So the user has a better understanding of what's happening and where they stand within the game.
So now we can ready to loop through the number of values and loop through them.
And we're going to take the avowals length as it's actually going to be the same as Val to but Val too
is going to be decreasing.
So that's what we're going to use the original Vals length.
So this is how many initial cases we have to work with.
And these are the the initial numbers that we want to work through.
So as we loop through, we want to continuously create elements and add in all of those values.
So let's do the cases first where we're going to construct the cases.
So creating an element and we're going to use the documentary element function in JavaScript and we're
going to create a div this way.
And then we do have the left position under a variable called HLR.
So we're going to update the value of So R and we're going to add the spacer value.
So this is going to be positioning where we place that element and under make her, let's add a class.
So to the class list, we're going to add a class and the class that we're adding is going to be case.
And of course this is going to be what the cases are going to look like.
So we need to also go back into the case in the next lesson and update how we're outputting the cases
and what they look like.
So make her text content.
So setting that text content.
So it's going to read whatever.
The value of X plus one.
So this is going to give us all of the cases listing them out and now let's position the cases.
So I know we did all of those calculations.
So let's make use of those calculations and we're getting the left position.
So it's HLR plus, don't forget the pics, because otherwise you're just going to have a numeric value.
And there's also style and talk.
And the top position is something that we calculate as well.
So it's V.R. Plus picks and then these values are going to update as we as we loop through all the different
values within value.
So we're going to take that page corne object and use append child, which is going to add a node to
the end of the list of children, the specified node.
So it's going to continuously add content within that main area.
And the element that we're adding is make her.
So I'm just going to pen that one there.
So let's save that Head Start game.
And now you can see we've listed out all of the cases, so we just listed out the numbers.
And these are the numbers that are going to show on top of the cases.
So it doesn't really look like a whole lot because we need to update the success of case.
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
the two sides in the upcoming lessons.
So go ahead and go through.
And you don't have to necessarily do the calculations quite yet.
And it's going to make a whole lot more sense when you're actually be able to see this visibly.
So just make sure that you are able to create the elements and add them to the page.
And then you can also do your own calculations if you want to position them differently.
And then coming up next, we're going to wrap up.
So we're going to take care of the styling for case and then we're going to wrap up and make this interactive
as well so that these cases become clickable.