1
00:00:00,060 --> 00:00:04,530
So this is a very important part and what's happening within the game, because it allows the player

2
00:00:04,530 --> 00:00:09,300
to move next and we always have to make sure that we've got the proper messaging to the player so they

3
00:00:09,300 --> 00:00:11,130
can understand what's happening as well.

4
00:00:11,370 --> 00:00:18,950
So what we've done is we've muted the selected case and we also want to mute it within the side menu.

5
00:00:19,230 --> 00:00:22,040
So let's figure out how we can select it from the side menu.

6
00:00:22,410 --> 00:00:23,910
So console log.

7
00:00:24,120 --> 00:00:28,160
And we've already tracked this within an array, within a global array.

8
00:00:28,350 --> 00:00:30,990
So we've got one called side vowel.

9
00:00:31,110 --> 00:00:32,300
So see what that looks like.

10
00:00:32,430 --> 00:00:38,760
So we go into the game, select a case, and then now within the console, it's pay attention to what's

11
00:00:38,760 --> 00:00:40,240
contained within the site menu.

12
00:00:40,530 --> 00:00:44,960
So if we click one, we see that we've got all of these elements are selected.

13
00:00:45,150 --> 00:00:53,070
So these represent all of the elements along the side that we can update and we can hide if we want.

14
00:00:53,430 --> 00:00:55,950
And that's why it's nice and neatly presented.

15
00:00:55,950 --> 00:01:03,780
And it's actually in the same order as we pulled it out, because as we're looping through and building

16
00:01:03,810 --> 00:01:06,570
the view, we were adding those values in.

17
00:01:06,870 --> 00:01:12,810
So they were using those same object values and that was all contained within that site value array.

18
00:01:12,960 --> 00:01:18,210
And that's why it's going to be really easy now to grab that element and highlight it.

19
00:01:18,210 --> 00:01:26,220
So we've got the side value array and we also pick up the index value and this is the index value that

20
00:01:26,220 --> 00:01:29,060
was coming from the original.

21
00:01:29,520 --> 00:01:32,130
So under here, we're tracking that index value.

22
00:01:32,370 --> 00:01:36,120
So this was index two, so coming from the target value.

23
00:01:36,130 --> 00:01:40,110
So we know that we passed that and we're also can pick that up and use it.

24
00:01:40,440 --> 00:01:46,410
And that means that we can do what we did before, where we've got the class list and add and we're

25
00:01:46,410 --> 00:01:49,420
going to add the muted class to it.

26
00:01:49,740 --> 00:01:52,050
So basically it should hide the class.

27
00:01:52,380 --> 00:01:58,440
So select a case and notice that on the first round, first round of the game, we don't want to hide

28
00:01:58,440 --> 00:02:03,720
any of these because we don't want to give the player an indication of what values are, where or what

29
00:02:03,720 --> 00:02:04,500
they've selected.

30
00:02:04,650 --> 00:02:06,600
So we can't hide it on the first round.

31
00:02:06,750 --> 00:02:11,190
But now when I select them, that one was 20, that one was eight.

32
00:02:11,370 --> 00:02:17,700
And we also need still a pop up for the user to in order to know what was what value was actually contained

33
00:02:17,700 --> 00:02:17,930
in there.

34
00:02:17,940 --> 00:02:22,440
So within the coding, we know what's happened, but we don't know what's happened for the user when

35
00:02:22,440 --> 00:02:23,230
the user's playing.

36
00:02:23,700 --> 00:02:30,980
So going back into message and popping up this value, we could do the easy target.

37
00:02:31,230 --> 00:02:34,040
So either one again, same thing value.

38
00:02:34,410 --> 00:02:36,840
So that's going to be within the pop up message.

39
00:02:37,170 --> 00:02:43,410
And now let's construct the message where we're going to pick up and determine whether this is good

40
00:02:43,410 --> 00:02:48,540
or bad, because usually we have an indication whether their selection is good or bad.

41
00:02:48,750 --> 00:02:55,050
So we're going to see that make sure that it's found in the games so that it actually does have an index

42
00:02:55,050 --> 00:02:55,410
value.

43
00:02:55,680 --> 00:02:59,970
And if it isn't found in the Games, then we know something's something's wrong there.

44
00:02:59,970 --> 00:03:04,960
Something's gone bad and we could throw an error or we could do something at that point.

45
00:03:05,430 --> 00:03:12,360
So now that we know that we've found it and the same thing that we did where we were splicing from the

46
00:03:12,360 --> 00:03:19,530
game holder thing for this simply spliffs, so that value of the holding array and we don't need to

47
00:03:19,530 --> 00:03:25,140
track it anywhere because this has just been removed out and we already know what value that is actually,

48
00:03:25,140 --> 00:03:28,380
because we're the ones that found it in the area with the index.

49
00:03:28,800 --> 00:03:30,690
So we're moving it out of the holding array.

50
00:03:31,080 --> 00:03:40,860
And let's also do a quick check for target and value and we're going to check to see if it's less than

51
00:03:40,860 --> 00:03:41,280
10.

52
00:03:41,940 --> 00:03:48,420
And that would mean that depending on where it is, what the section is, and you can also update this

53
00:03:48,420 --> 00:03:54,150
to be more dynamic so we can check to see if it's less than halfway through the length.

54
00:03:54,870 --> 00:03:58,670
So we want to do ten and we ultimately want to get the value of ten.

55
00:03:58,860 --> 00:04:05,190
And if it is, then our message is going to be with an H1 of great job.

56
00:04:05,560 --> 00:04:09,780
And you can also have customized messages, even have an array of different messages.

57
00:04:10,140 --> 00:04:14,670
And if it's not, then the message is going to be that's bad news.

58
00:04:14,970 --> 00:04:15,930
So too bad.

59
00:04:15,960 --> 00:04:17,310
So let's see how this works.

60
00:04:17,910 --> 00:04:21,180
And so far, so we select our case.

61
00:04:21,390 --> 00:04:24,960
We get three and we see that message is not defined.

62
00:04:25,200 --> 00:04:27,720
So we need to define the value for message.

63
00:04:27,990 --> 00:04:36,180
So going back up to where we've got the selection of the case, let's define variable message and let's

64
00:04:36,390 --> 00:04:38,070
let's just keep it blank for now.

65
00:04:38,190 --> 00:04:41,660
So make sure that we do have the variables before we try to use them.

66
00:04:41,670 --> 00:04:44,850
So great job ten and great job two.

67
00:04:45,060 --> 00:04:46,110
So that looks good.

68
00:04:46,230 --> 00:04:50,520
And we're setting up messages, but we're telling the user what's happening.

69
00:04:50,700 --> 00:04:54,060
So we want to make this dynamic and how do we get the value of ten?

70
00:04:54,090 --> 00:04:58,860
We want to get the length of the value array, pick up the one that's halfway in there.

71
00:04:58,860 --> 00:04:59,640
So we want to get that.

72
00:04:59,720 --> 00:05:05,280
Value of ten and creating a variable for that, and I'll just call this halfway, because we want to

73
00:05:05,280 --> 00:05:09,140
determine what the halfway value is from the Valory.

74
00:05:09,260 --> 00:05:15,170
So we've got the Vallerie and we know that we can get a length out of it and divide it by two.

75
00:05:15,200 --> 00:05:17,420
And so this is going to be the index value.

76
00:05:17,510 --> 00:05:21,510
We can use math round in order to round the value.

77
00:05:21,980 --> 00:05:26,810
So that's that the value that we want to pick up, get the value from the array.

78
00:05:26,840 --> 00:05:30,040
So we're getting an index value being returned back here.

79
00:05:30,200 --> 00:05:33,440
And we also want to get the value that's associated with that index value.

80
00:05:33,560 --> 00:05:36,350
So both of these should be value because we've got the record value.

81
00:05:36,370 --> 00:05:40,700
So let's try this now and we select our case and we got number two.

82
00:05:40,820 --> 00:05:43,160
So we are getting 10 being returned back there.

83
00:05:43,160 --> 00:05:44,660
So 10 so perfect.

84
00:05:44,660 --> 00:05:46,370
We were able to calculate that out.

85
00:05:46,610 --> 00:05:53,190
So now we've got a dynamic check and a dynamic message depending on what the selection is popping up.

86
00:05:53,360 --> 00:05:55,070
So go ahead and add this into your project.

87
00:05:55,070 --> 00:05:57,310
And now there was quite a bit of stuff that we covered here.

88
00:05:57,800 --> 00:06:02,870
So some of the really cool things with JavaScript, some of them we didn't exactly need because we can

89
00:06:02,870 --> 00:06:05,840
pick it up from the value the element object.

90
00:06:06,050 --> 00:06:07,460
So either one is fine.

91
00:06:07,460 --> 00:06:12,770
You could use that from there or you could get from the event target present information to the user

92
00:06:12,770 --> 00:06:14,750
and allow them to move on to the next step.

93
00:06:14,930 --> 00:06:20,630
And the next step is that we need to set up the offers, because between all of these case selections,

94
00:06:20,870 --> 00:06:26,120
we need to make sure that the user understands what's happening and that we are presenting them offers

95
00:06:26,600 --> 00:06:28,660
throughout the game at the right time.

96
00:06:28,910 --> 00:06:30,050
So that's coming up next.