1
00:00:00,510 --> 00:00:01,890
How's your game coming along?

2
00:00:01,890 --> 00:00:08,090
Are you able to produce the different roles, clickable elements and core structure of the game, so

3
00:00:08,100 --> 00:00:15,630
hope you're able to produce the same type of output as I have and you can also customize it as needed.

4
00:00:15,810 --> 00:00:20,010
And it is important to understand, especially when you're working on JavaScript in the dorm, how to

5
00:00:20,010 --> 00:00:25,140
construct the elements and how to do the proper calculations so you can move the elements around the

6
00:00:25,140 --> 00:00:26,400
page as needed.

7
00:00:26,760 --> 00:00:30,570
So next thing we want it to do is construct the site menu elements.

8
00:00:30,780 --> 00:00:35,280
So we already set up a rate to hold that value.

9
00:00:35,470 --> 00:00:37,770
And this is a global value that's going to be held.

10
00:00:37,950 --> 00:00:44,400
And this is essentially we've constructed this so that we can hold a bunch of elements so we don't always

11
00:00:44,400 --> 00:00:47,300
have to select them using the document object.

12
00:00:47,640 --> 00:00:54,600
So within the Val X and you see that as we loop through the values of X, we're going to be able to

13
00:00:54,600 --> 00:01:01,380
set a new value for Val X. And this is going to correspond with the document that we're creating, the

14
00:01:01,380 --> 00:01:03,030
document object that we're creating.

15
00:01:03,040 --> 00:01:04,420
So creating an element.

16
00:01:04,440 --> 00:01:09,050
And once we remove it from here, then we'd have to re-establish the connection.

17
00:01:09,240 --> 00:01:11,260
So sometimes that's a little bit more difficult.

18
00:01:11,460 --> 00:01:18,810
So the easiest way is just to create the variable object and add it into the array as we're constructing

19
00:01:18,810 --> 00:01:18,980
it.

20
00:01:19,290 --> 00:01:26,910
So just as we used make her, we're creating an element here and then we're going to use that same one

21
00:01:27,360 --> 00:01:34,340
and add a class list and adding in a class of side value.

22
00:01:34,380 --> 00:01:37,520
And we don't know which side we want it to listed on quite yet.

23
00:01:37,950 --> 00:01:45,600
And just going back into our side values, into our success, as we do need this in order to present

24
00:01:45,600 --> 00:01:51,660
the content and can be margin auto position is going to be absolute because we're positioning it on

25
00:01:51,930 --> 00:01:56,810
the within the container and we're just going to do all the calculations of it.

26
00:01:56,850 --> 00:02:02,430
So these are going to be the values so that they show up on the slide so we can set them as a width

27
00:02:02,430 --> 00:02:03,360
of 100 picks.

28
00:02:03,720 --> 00:02:07,800
And of course, you can adjust these as needed and I'll give it a border as well.

29
00:02:07,890 --> 00:02:09,390
Text align center.

30
00:02:09,420 --> 00:02:16,020
And how about with set font size to one point five and border radius, which is always a nice touch

31
00:02:16,020 --> 00:02:18,120
to have a little bit of rounded corner to it.

32
00:02:18,150 --> 00:02:21,360
So going back into the JavaScript, so it was quick.

33
00:02:21,960 --> 00:02:28,020
Now that we've got a style that we're adding in called the side value so it can continue with constructing

34
00:02:28,020 --> 00:02:30,060
the way that this is going to be looking and presenting.

35
00:02:30,840 --> 00:02:37,350
So we also need again, they need that side value object that we just created and setting in some text

36
00:02:37,350 --> 00:02:37,860
content.

37
00:02:38,070 --> 00:02:43,410
And the content of the text that we want to place is going to be Val X..

38
00:02:43,410 --> 00:02:49,220
And notice that we're not using Val to we're using vowels because we want to have all of those numbers.

39
00:02:49,230 --> 00:02:54,270
So it's actually going to match up, even though we're setting them differently from the different arrays,

40
00:02:54,480 --> 00:02:56,360
because we want to have this one in order.

41
00:02:56,370 --> 00:02:59,300
We don't want to show the ones that are actually hidden under the cases.

42
00:02:59,760 --> 00:03:02,860
So that's why we're setting it up as the vowels.

43
00:03:02,860 --> 00:03:05,460
So this is the text content of the element.

44
00:03:05,580 --> 00:03:09,630
And we also did already the all the calculations for where we're positioning that.

45
00:03:09,930 --> 00:03:15,330
And we are going to have to have one more calculation where we check to see if it's flipping sites and

46
00:03:15,330 --> 00:03:19,490
we're going to use the left horizontal where we calculate it from the top.

47
00:03:19,500 --> 00:03:20,630
And don't forget the picks.

48
00:03:20,640 --> 00:03:24,240
Sometimes when we are placing this, we do forget the picks.

49
00:03:24,690 --> 00:03:30,120
And another style value that we want it to apply is the top position.

50
00:03:30,330 --> 00:03:33,360
And this is the important one, because this one is going to be adjusting.

51
00:03:33,360 --> 00:03:35,820
And we already calculated the starting position.

52
00:03:35,970 --> 00:03:38,280
We need to increment the side top.

53
00:03:38,580 --> 00:03:41,070
So adding 40 to it.

54
00:03:41,080 --> 00:03:46,890
And I got to just make one little adjustment there because I've called it side vowels with an S, and

55
00:03:46,890 --> 00:03:50,370
for now we're going to do all left side append child.

56
00:03:50,670 --> 00:03:54,060
So the same thing that we did for the main object where we can append the child.

57
00:03:54,210 --> 00:03:55,560
So refresh start.

58
00:03:56,040 --> 00:03:59,130
So there's all the values, but we do want them to switch sides.

59
00:03:59,130 --> 00:04:03,270
So you see what I mean, where we've got all of those values that are available values.

60
00:04:03,270 --> 00:04:06,770
And then when we click the case, we want them to disappear from here.

61
00:04:07,080 --> 00:04:11,400
So if we're on less than that, then we're going to put it on the left side.

62
00:04:11,670 --> 00:04:17,190
And if we're greater than that, we're in append it to the right hand side and right side, append child.

63
00:04:17,460 --> 00:04:19,860
And we start to add in one more condition.

64
00:04:19,860 --> 00:04:26,580
And this is going to be also checking to see if we need to switch sides and depending on if we need

65
00:04:26,580 --> 00:04:27,750
to switch sides.

66
00:04:27,930 --> 00:04:32,370
And this is going to be taking the length of X the same thing.

67
00:04:32,490 --> 00:04:36,930
And if we do switch sides, we're only looking for an equal value.

68
00:04:36,930 --> 00:04:42,270
And that's why we need to make sure that we math around this value because we only want to do this once,

69
00:04:42,600 --> 00:04:47,040
whereas the other condition, we want to do it every time when we're checking to see where it's going

70
00:04:47,040 --> 00:04:47,930
to get deposited.

71
00:04:48,180 --> 00:04:54,030
This time we only want to do it one time and we're going to reset the site top position.

72
00:04:54,300 --> 00:04:56,190
So it's going to place it right at the top.

73
00:04:56,190 --> 00:04:59,730
And we're also going to reset the left horizontal position.

74
00:04:59,860 --> 00:05:06,250
To whatever the original was, and we need to take whatever that initial campsite left us, and that's

75
00:05:06,250 --> 00:05:09,010
where we used and we got the right side value.

76
00:05:09,280 --> 00:05:15,410
So we need to take that initial temp site left position the topside width to it.

77
00:05:15,670 --> 00:05:19,600
So this is taking that starting position and resetting that starting position.

78
00:05:19,840 --> 00:05:24,650
So whatever that is from that that value that we picked up from the get bounding client rectangle.

79
00:05:24,880 --> 00:05:30,380
So now when we refresh, you can see that we're loading all of those values improperly into the game.

80
00:05:30,610 --> 00:05:34,950
So, again, we do a quick refresh and you can see these get loaded properly.

81
00:05:35,140 --> 00:05:37,420
We might want to make some style adjustments.

82
00:05:37,420 --> 00:05:40,870
We want to make them maybe a slightly a little bit larger.

83
00:05:41,110 --> 00:05:43,480
So setting the border color back to easy.

84
00:05:44,020 --> 00:05:48,790
And now we've built out our game board and we've got it all being displayed out.

85
00:05:49,000 --> 00:05:53,230
And we can also see which element was being clicked by clicking the various cases.

86
00:05:53,410 --> 00:05:58,300
And we're ready to move on to the next step where we can go back into the game logic and make sure that

87
00:05:58,300 --> 00:06:00,490
you have something similar to what I've got displayed.

88
00:06:00,490 --> 00:06:02,710
And you're going to be ready to move on to the next lesson.

89
00:06:02,980 --> 00:06:08,470
And before we conclude, I actually want to move the ten over onto the right hand side and the way to

90
00:06:08,470 --> 00:06:08,850
do that.

91
00:06:08,860 --> 00:06:15,880
So before we do that calculation for the side, the different side values, and let me just do a refresh

92
00:06:15,880 --> 00:06:17,020
on this and start game.

93
00:06:17,620 --> 00:06:20,080
We want to move over to the right hand side.

94
00:06:20,320 --> 00:06:27,370
So this is where we can make this update and place this condition right after we're setting the values

95
00:06:27,370 --> 00:06:29,550
and before we're actually setting the style properties.

96
00:06:29,890 --> 00:06:33,970
So that will position it on the right hand side as expected.

97
00:06:34,240 --> 00:06:40,450
So now we've got the nice evenly split and this is all dynamic how we're constructing the gameboard.