1
00:00:00,240 --> 00:00:04,860
Hey, this is part two of building the game board and building the game board is one of the most important

2
00:00:04,860 --> 00:00:11,220
things because we want to be able to see the game and see what it looks like and applying styling,

3
00:00:11,550 --> 00:00:17,550
although not really what we want to focus on in the course, it's going to make the game and building

4
00:00:17,550 --> 00:00:18,940
the game a lot more exciting.

5
00:00:19,080 --> 00:00:24,030
So let's start in a case, and the case is essentially what the cases are going to look like on the

6
00:00:24,030 --> 00:00:26,880
page and won't be able to position them absolutes.

7
00:00:26,880 --> 00:00:32,430
So we're going to be specifying where we're positioning them because we're using that code that we're

8
00:00:32,430 --> 00:00:36,660
recalculating out, where we're positioning everything and positioning those.

9
00:00:37,020 --> 00:00:38,940
We need to also have a minimum width.

10
00:00:39,120 --> 00:00:41,760
So I don't want the cases to be less than one hundred picks.

11
00:00:41,790 --> 00:00:43,560
Otherwise, it's just not going to look great.

12
00:00:43,950 --> 00:00:46,310
I'm going to set the width to 10 percent.

13
00:00:46,320 --> 00:00:49,440
Ideally, that's ideal deal with and also have a height.

14
00:00:49,830 --> 00:00:51,930
That's the height to 60 picks.

15
00:00:52,170 --> 00:00:54,660
And you can play with these and update these as needed.

16
00:00:54,930 --> 00:00:55,830
Font family.

17
00:00:55,830 --> 00:00:57,040
Let's make it fantasy.

18
00:00:57,060 --> 00:01:00,270
So it looks a little bit more fun and exciting.

19
00:01:00,910 --> 00:01:02,040
Font size.

20
00:01:02,280 --> 00:01:10,380
Change it to 3M as we really want these values to really pop out and text alliance kind of text align

21
00:01:10,380 --> 00:01:10,890
center.

22
00:01:11,130 --> 00:01:15,990
So central lining and you can see that they're updating here on the right hand side within the display

23
00:01:15,990 --> 00:01:16,390
area.

24
00:01:17,190 --> 00:01:23,280
Let's also add some padding and padding at the top so that they're not.

25
00:01:23,520 --> 00:01:28,840
So there's a little bit of spacing between each one so we can have more distinct roles that are available.

26
00:01:29,550 --> 00:01:31,080
There's also a border.

27
00:01:31,080 --> 00:01:32,790
Let's set a border around it.

28
00:01:33,090 --> 00:01:40,140
So do one pick pixel and do a really light border so you can kind of see a border, but it's not going

29
00:01:40,140 --> 00:01:41,160
to be that prevalent.

30
00:01:41,310 --> 00:01:44,940
Also, update the cursor to be a pointer.

31
00:01:45,040 --> 00:01:51,840
You can have some fun with this as as you build this game to really to have a bunch of different types

32
00:01:51,840 --> 00:01:55,320
of pointers and customize the way it looks and feels.

33
00:01:55,530 --> 00:01:59,040
These are just basically some starting styles that you can use.

34
00:01:59,070 --> 00:02:01,260
So that's the styling for the case.

35
00:02:01,620 --> 00:02:03,840
And let's make the screen bigger.

36
00:02:04,080 --> 00:02:07,260
So so far, it's not really doing a whole lot.

37
00:02:07,260 --> 00:02:14,370
So we see that the cases are slightly adjusting and it's just popping all of the cases within the same

38
00:02:14,370 --> 00:02:14,610
rules.

39
00:02:14,610 --> 00:02:19,380
So it's not really ideal because we're not updating the horizontal, we're not updating the vertical.

40
00:02:19,380 --> 00:02:22,440
Well, we are updating the horizontal, but we're not updating the vertical.

41
00:02:22,650 --> 00:02:24,930
So we have to start to apply that logic.

42
00:02:25,230 --> 00:02:28,980
And as you build this, it's going to become more and more apparent.

43
00:02:28,980 --> 00:02:35,120
And the more visual you can see the content, the more fun it is to develop this game.

44
00:02:35,400 --> 00:02:40,890
So a lot of times to when you're planning for the game board, you have to kind of plan out how you

45
00:02:40,890 --> 00:02:43,950
want to layout the game board and then build towards that.

46
00:02:44,130 --> 00:02:49,440
So a lot of these calculations, you usually need to make some minor tweaks and adjustments, but you

47
00:02:49,440 --> 00:02:55,890
do need to have that dynamic capability if you want your game board to be flexible on the design part

48
00:02:55,890 --> 00:02:57,360
of it when it builds that.

49
00:02:57,450 --> 00:03:01,850
So keeping in mind, when you are creating that, make sure it is flexible.

50
00:03:02,130 --> 00:03:07,320
So what we want to do is have multiple roles and we're going to take the value of X and we're going

51
00:03:07,320 --> 00:03:11,970
to see if there's a remainder of four on that value.

52
00:03:12,240 --> 00:03:15,750
And if there is, then that means that we want to apply another role.

53
00:03:16,020 --> 00:03:21,210
And if we want to play another role, then we're taking the vertical and we're going to add to the vertical.

54
00:03:21,330 --> 00:03:22,890
We set a default height.

55
00:03:23,400 --> 00:03:30,810
So we know that if we roughly set the vertical position to increment by one 30, that will update that

56
00:03:30,810 --> 00:03:35,040
vertical position for us and also for the horizontal.

57
00:03:35,340 --> 00:03:41,010
We need to set the default of the horizontal, which is actually going to be the exact same value that

58
00:03:41,010 --> 00:03:41,700
we used here.

59
00:03:41,700 --> 00:03:45,470
So we want it always starting from the left side, the exact same.

60
00:03:45,540 --> 00:03:47,550
So save that hit start game.

61
00:03:48,000 --> 00:03:50,010
So now we have a more structured approach.

62
00:03:50,010 --> 00:03:51,660
So we've got all of these cases.

63
00:03:52,170 --> 00:03:54,840
They're not yet clickable, even though they have the pointer icon.

64
00:03:55,020 --> 00:04:00,210
And you can see when I refresh that it's going to build the cases differently depending on how much

65
00:04:00,210 --> 00:04:01,800
screen size I have available.

66
00:04:02,010 --> 00:04:07,200
So that was the whole objective there of why we did all of those calculations and you could have it

67
00:04:07,200 --> 00:04:08,310
preset sizes.

68
00:04:08,310 --> 00:04:10,410
So that would avoid some of those calculations.

69
00:04:11,040 --> 00:04:17,370
We should also need to remove the case from the array from the existing VAL to array.

70
00:04:17,640 --> 00:04:21,840
So let's do that in adding in and creating a variable that's going to hold that.

71
00:04:21,960 --> 00:04:27,900
So as we loop through select temp and temp is where we're going to hold each one of those values as

72
00:04:27,900 --> 00:04:28,830
we're looping through.

73
00:04:29,040 --> 00:04:35,130
So taking the value of Val to taking that array, we're going to splice from it.

74
00:04:35,340 --> 00:04:39,450
So changes the content of iterate adding new contents while removing old contents.

75
00:04:39,450 --> 00:04:42,600
And we need to randomize where we're making the selections.

76
00:04:42,600 --> 00:04:48,540
So I'm just going to hold a placeholder random index and we're only taking one entry back on.

77
00:04:48,550 --> 00:04:50,500
So log out the value of temp.

78
00:04:50,520 --> 00:04:56,160
So let's set up a function in order to get that random index or set up a variable in order to do the

79
00:04:56,160 --> 00:04:56,820
random index.

80
00:04:57,120 --> 00:04:59,790
And we can use JavaScript math for.

81
00:05:00,020 --> 00:05:06,780
In order to calculate this and then using math random, we want to select a random item from the array.

82
00:05:07,100 --> 00:05:12,980
So taking the random, we need to multiply it by whatever the existing array length is.

83
00:05:13,220 --> 00:05:17,980
And this will give us because remember, this is us we're splicing at the array is going to be shrinking.

84
00:05:18,050 --> 00:05:20,370
So let's start the game and see what we produce.

85
00:05:20,630 --> 00:05:27,200
So you can see that we are getting all of those values out as we're looping through the vow to that

86
00:05:27,200 --> 00:05:29,070
array is going to be constantly shrinking.

87
00:05:29,090 --> 00:05:34,330
So every time we remove something out that said it doesn't exist in that array and all of these values,

88
00:05:34,580 --> 00:05:36,890
so we start out with that initial array.

89
00:05:36,920 --> 00:05:41,400
So this is the duplicate of Val and we remove them out one by one.

90
00:05:41,630 --> 00:05:48,500
So this gives us an option as well to set some values that we can have kind of hiding in the back end

91
00:05:48,860 --> 00:05:50,540
of the element object.

92
00:05:50,540 --> 00:05:57,230
And we could also use these values and notice as well that it's pulling this out in an array format

93
00:05:57,470 --> 00:05:59,290
because this is using splice.

94
00:05:59,510 --> 00:06:01,250
So we just want to get the first value.

95
00:06:01,280 --> 00:06:06,860
So this is going to be a string value or a number of value, and then that is what we're going to pass

96
00:06:06,860 --> 00:06:09,410
in to make Val into the element, Val.

97
00:06:09,590 --> 00:06:14,330
So it's going to be hiding in the background elements at the end of the day are just objects so you

98
00:06:14,330 --> 00:06:16,430
can hide these values in these objects.

99
00:06:16,580 --> 00:06:22,880
Also, let's add in and use the index value and we're going to add that in the background as well.

100
00:06:23,060 --> 00:06:26,300
So this is going to be whatever the value of X plus one is.

101
00:06:26,480 --> 00:06:32,300
And also it's going to correspond with whatever value we've written on the page because we're on the

102
00:06:32,300 --> 00:06:34,810
element, because we're using text content.

103
00:06:34,820 --> 00:06:37,570
And then lastly, let's make the elements clickable.

104
00:06:37,850 --> 00:06:40,010
So we've added it to the page.

105
00:06:40,220 --> 00:06:45,890
And just before we add it to the page, because we still have that object within the variable maker,

106
00:06:46,340 --> 00:06:51,230
we can add an event listener and this event listener is going to listen for a click.

107
00:06:51,560 --> 00:06:57,380
And that means that whenever the case is clicked, we need to run a function that's going to check the

108
00:06:57,380 --> 00:06:57,800
case.

109
00:06:58,220 --> 00:07:02,810
So creating that function and this is just going to be a placeholder for that function.

110
00:07:03,080 --> 00:07:08,570
We're going to be checking the case object and then within the console, we're going to just write a

111
00:07:08,570 --> 00:07:09,300
check for that.

112
00:07:09,320 --> 00:07:12,350
And this will be another function that we can work on later on.

113
00:07:12,360 --> 00:07:13,670
So let's refresh start.

114
00:07:13,670 --> 00:07:15,290
The game will close this.

115
00:07:15,530 --> 00:07:20,750
And whenever we click any one of the cases, we can see that it's being clicked.

116
00:07:20,960 --> 00:07:27,560
And in order to illustrate that we are passing these values through, we can take whatever the value

117
00:07:27,560 --> 00:07:29,300
of the element is.

118
00:07:29,510 --> 00:07:34,650
And we can also use this and we can get a value that's contained within it.

119
00:07:34,910 --> 00:07:38,990
So these are the hidden values that are going to be contained behind each one of those elements.

120
00:07:38,990 --> 00:07:40,070
So let's close that.

121
00:07:40,190 --> 00:07:43,070
And that one was 50 and that one was two and that's 50.

122
00:07:43,230 --> 00:07:50,120
And these are the values that are initially coming from the Vowles array where we clone the array in

123
00:07:50,390 --> 00:07:53,500
building out the game object into Val, too.

124
00:07:53,510 --> 00:07:57,410
This is where we clone the array and then use that clone array.

125
00:07:57,560 --> 00:08:03,590
We're splicing items from the array and we're taking the first index value there because we don't want

126
00:08:03,590 --> 00:08:04,370
to create an array.

127
00:08:04,370 --> 00:08:11,750
We just want to have a regular data type of no data type, because we want to place that in the element

128
00:08:11,750 --> 00:08:14,990
itself so that we can use that within our calculation.

129
00:08:15,110 --> 00:08:20,410
And we know which case has been selected and what value is contained within those cases.

130
00:08:20,690 --> 00:08:24,920
So you can do it under this as well as you could do it easy target.

131
00:08:25,070 --> 00:08:27,330
This will be the element as well.

132
00:08:27,500 --> 00:08:33,140
So again, close that case and it's going to do the same thing as this because that's the active element.

133
00:08:33,320 --> 00:08:36,400
And in some browsers, they look for the easy target.

134
00:08:36,620 --> 00:08:40,550
So you could use either one and either one should produce those values.

135
00:08:40,550 --> 00:08:45,290
And if you don't see the value in the console when you click in the element, then make sure that you

136
00:08:45,290 --> 00:08:48,450
update this until you are able to see that value.

137
00:08:48,680 --> 00:08:50,990
So that's what we've done for the cases.

138
00:08:51,110 --> 00:08:56,390
And next, we need to list out all of those values that are hidden on the left and the right hand side.

139
00:08:56,580 --> 00:09:00,800
That's going to be the third part of building out the visible gameplay area.

140
00:09:00,810 --> 00:09:01,940
So that's coming up next.

141
00:09:02,060 --> 00:09:05,480
So in this lesson, we covered how we can produce Rose.

142
00:09:05,600 --> 00:09:08,120
And the calculation here is using modulus.

143
00:09:08,270 --> 00:09:15,080
And what Modulus does is it divides the number by a value and if there's a remainder.

144
00:09:15,650 --> 00:09:23,600
So if we do have a remainder of three, once we divide ex by four, then that means that this is when

145
00:09:23,600 --> 00:09:25,340
we want to move on to the next role.

146
00:09:25,580 --> 00:09:29,780
So sometimes you might see this depending on where your value of X is starting.

147
00:09:29,900 --> 00:09:32,600
You might see this in the beginning or in the end.

148
00:09:32,780 --> 00:09:40,550
And what it's doing is it's just checking to see whenever this remainder is that value that we can do

149
00:09:40,550 --> 00:09:41,570
another role.

150
00:09:41,750 --> 00:09:49,100
And this is the key to how many elements or how many items you want to produce within each row before

151
00:09:49,100 --> 00:09:50,270
you move on to the next one.

152
00:09:50,420 --> 00:09:57,130
And then this was just the calculations to move the element as we're constructing it to the next page

153
00:09:57,140 --> 00:09:59,840
and using these variables that we had set up.

154
00:10:00,090 --> 00:10:01,710
Within one of the earlier lessons.