Hey, this is part two of building the game board and building the game board is one of the most important
things because we want to be able to see the game and see what it looks like and applying styling,
although not really what we want to focus on in the course, it's going to make the game and building
the game a lot more exciting.
So let's start in a case, and the case is essentially what the cases are going to look like on the
page and won't be able to position them absolutes.
So we're going to be specifying where we're positioning them because we're using that code that we're
recalculating out, where we're positioning everything and positioning those.
We need to also have a minimum width.
So I don't want the cases to be less than one hundred picks.
Otherwise, it's just not going to look great.
I'm going to set the width to 10 percent.
Ideally, that's ideal deal with and also have a height.
That's the height to 60 picks.
And you can play with these and update these as needed.
Font family.
Let's make it fantasy.
So it looks a little bit more fun and exciting.
Font size.
Change it to 3M as we really want these values to really pop out and text alliance kind of text align
center.
So central lining and you can see that they're updating here on the right hand side within the display
area.
Let's also add some padding and padding at the top so that they're not.
So there's a little bit of spacing between each one so we can have more distinct roles that are available.
There's also a border.
Let's set a border around it.
So do one pick pixel and do a really light border so you can kind of see a border, but it's not going
to be that prevalent.
Also, update the cursor to be a pointer.
You can have some fun with this as as you build this game to really to have a bunch of different types
of pointers and customize the way it looks and feels.
These are just basically some starting styles that you can use.
So that's the styling for the case.
And let's make the screen bigger.
So so far, it's not really doing a whole lot.
So we see that the cases are slightly adjusting and it's just popping all of the cases within the same
rules.
So it's not really ideal because we're not updating the horizontal, we're not updating the vertical.
Well, we are updating the horizontal, but we're not updating the vertical.
So we have to start to apply that logic.
And as you build this, it's going to become more and more apparent.
And the more visual you can see the content, the more fun it is to develop this game.
So a lot of times to when you're planning for the game board, you have to kind of plan out how you
want to layout the game board and then build towards that.
So a lot of these calculations, you usually need to make some minor tweaks and adjustments, but you
do need to have that dynamic capability if you want your game board to be flexible on the design part
of it when it builds that.
So keeping in mind, when you are creating that, make sure it is flexible.
So what we want to do is have multiple roles and we're going to take the value of X and we're going
to see if there's a remainder of four on that value.
And if there is, then that means that we want to apply another role.
And if we want to play another role, then we're taking the vertical and we're going to add to the vertical.
We set a default height.
So we know that if we roughly set the vertical position to increment by one 30, that will update that
vertical position for us and also for the horizontal.
We need to set the default of the horizontal, which is actually going to be the exact same value that
we used here.
So we want it always starting from the left side, the exact same.
So save that hit start game.
So now we have a more structured approach.
So we've got all of these cases.
They're not yet clickable, even though they have the pointer icon.
And you can see when I refresh that it's going to build the cases differently depending on how much
screen size I have available.
So that was the whole objective there of why we did all of those calculations and you could have it
preset sizes.
So that would avoid some of those calculations.
We should also need to remove the case from the array from the existing VAL to array.
So let's do that in adding in and creating a variable that's going to hold that.
So as we loop through select temp and temp is where we're going to hold each one of those values as
we're looping through.
So taking the value of Val to taking that array, we're going to splice from it.
So changes the content of iterate adding new contents while removing old contents.
And we need to randomize where we're making the selections.
So I'm just going to hold a placeholder random index and we're only taking one entry back on.
So log out the value of temp.
So let's set up a function in order to get that random index or set up a variable in order to do the
random index.
And we can use JavaScript math for.
In order to calculate this and then using math random, we want to select a random item from the array.
So taking the random, we need to multiply it by whatever the existing array length is.
And this will give us because remember, this is us we're splicing at the array is going to be shrinking.
So let's start the game and see what we produce.
So you can see that we are getting all of those values out as we're looping through the vow to that
array is going to be constantly shrinking.
So every time we remove something out that said it doesn't exist in that array and all of these values,
so we start out with that initial array.
So this is the duplicate of Val and we remove them out one by one.
So this gives us an option as well to set some values that we can have kind of hiding in the back end
of the element object.
And we could also use these values and notice as well that it's pulling this out in an array format
because this is using splice.
So we just want to get the first value.
So this is going to be a string value or a number of value, and then that is what we're going to pass
in to make Val into the element, Val.
So it's going to be hiding in the background elements at the end of the day are just objects so you
can hide these values in these objects.
Also, let's add in and use the index value and we're going to add that in the background as well.
So this is going to be whatever the value of X plus one is.
And also it's going to correspond with whatever value we've written on the page because we're on the
element, because we're using text content.
And then lastly, let's make the elements clickable.
So we've added it to the page.
And just before we add it to the page, because we still have that object within the variable maker,
we can add an event listener and this event listener is going to listen for a click.
And that means that whenever the case is clicked, we need to run a function that's going to check the
case.
So creating that function and this is just going to be a placeholder for that function.
We're going to be checking the case object and then within the console, we're going to just write a
check for that.
And this will be another function that we can work on later on.
So let's refresh start.
The game will close this.
And whenever we click any one of the cases, we can see that it's being clicked.
And in order to illustrate that we are passing these values through, we can take whatever the value
of the element is.
And we can also use this and we can get a value that's contained within it.
So these are the hidden values that are going to be contained behind each one of those elements.
So let's close that.
And that one was 50 and that one was two and that's 50.
And these are the values that are initially coming from the Vowles array where we clone the array in
building out the game object into Val, too.
This is where we clone the array and then use that clone array.
We're splicing items from the array and we're taking the first index value there because we don't want
to create an array.
We just want to have a regular data type of no data type, because we want to place that in the element
itself so that we can use that within our calculation.
And we know which case has been selected and what value is contained within those cases.
So you can do it under this as well as you could do it easy target.
This will be the element as well.
So again, close that case and it's going to do the same thing as this because that's the active element.
And in some browsers, they look for the easy target.
So you could use either one and either one should produce those values.
And if you don't see the value in the console when you click in the element, then make sure that you
update this until you are able to see that value.
So that's what we've done for the cases.
And next, we need to list out all of those values that are hidden on the left and the right hand side.
That's going to be the third part of building out the visible gameplay area.
So that's coming up next.
So in this lesson, we covered how we can produce Rose.
And the calculation here is using modulus.
And what Modulus does is it divides the number by a value and if there's a remainder.
So if we do have a remainder of three, once we divide ex by four, then that means that this is when
we want to move on to the next role.
So sometimes you might see this depending on where your value of X is starting.
You might see this in the beginning or in the end.
And what it's doing is it's just checking to see whenever this remainder is that value that we can do
another role.
And this is the key to how many elements or how many items you want to produce within each row before
you move on to the next one.
And then this was just the calculations to move the element as we're constructing it to the next page
and using these variables that we had set up.
Within one of the earlier lessons.