1
00:00:00,680 --> 00:00:04,860
So this lesson, we're going to do some final tweaks, adjustments, and in the end game, we want to

2
00:00:04,860 --> 00:00:11,810
show all of the remaining cases and this one, we can select them using the query selector, all so

3
00:00:11,820 --> 00:00:12,830
within and game.

4
00:00:13,020 --> 00:00:15,030
The game is over at this point.

5
00:00:15,060 --> 00:00:20,880
So either way, if the user has gone through to the end, let's select all of the elements that are

6
00:00:20,880 --> 00:00:21,450
still hidden.

7
00:00:21,720 --> 00:00:27,930
And the one thing they all have in common is that they're all using the same class, which is case,

8
00:00:28,200 --> 00:00:32,970
and we've been removing them one by one as they're not visible anymore.

9
00:00:33,330 --> 00:00:38,390
So all the ones that still have the case, I want to be able to show.

10
00:00:38,550 --> 00:00:44,310
So they're going to create a node list of all of those elements and then looping through that node list,

11
00:00:44,310 --> 00:00:47,340
using for each and then selecting a function.

12
00:00:47,790 --> 00:00:49,740
We can grab the elements individually.

13
00:00:50,130 --> 00:00:53,750
And what we want to do is we want to update the elements.

14
00:00:54,210 --> 00:01:02,550
So if the element itself has a class of muted and this is where we check to see what the classes are

15
00:01:02,580 --> 00:01:11,250
on that particular element and if it's class list is contains, this is a really useful method under

16
00:01:11,250 --> 00:01:16,800
class list where we can check to see if a particular class exists in the class list.

17
00:01:17,160 --> 00:01:21,950
And if it does, then that means that we want to reveal that value.

18
00:01:22,530 --> 00:01:29,580
So looping through all of them and we can take the text content and update the text content to whatever

19
00:01:29,580 --> 00:01:34,920
is contained within Val, because remember, we do have all of the object information contained within

20
00:01:34,920 --> 00:01:35,980
the element itself.

21
00:01:36,270 --> 00:01:42,390
So once we've got the element selected, then we can get access to those values and we're going to add

22
00:01:42,390 --> 00:01:47,740
in one more class and adding in a class of reveal.

23
00:01:47,790 --> 00:01:52,330
So we're going to do set that to have a font color of red or something.

24
00:01:52,590 --> 00:01:56,610
So going back into the styles and also did want to update's.

25
00:01:57,060 --> 00:02:02,020
So let's add in reveal first and this can have a color of red.

26
00:02:02,190 --> 00:02:03,880
So all of those are going to get revealed now.

27
00:02:03,900 --> 00:02:05,460
So let's move the sides down.

28
00:02:05,490 --> 00:02:12,610
So starting side, top position and I'm going to update this to maybe 40 and so top 40.

29
00:02:12,660 --> 00:02:14,560
So just make sure it's starting at the same spot.

30
00:02:14,760 --> 00:02:20,070
So that's shifted down these elements and the amount that we're adding, I'm going to add in another

31
00:02:20,070 --> 00:02:24,010
five there so that we have a little bit more spacing with them, a little bit bigger.

32
00:02:24,480 --> 00:02:29,340
So now we're ready to try the game out and just make sure that everything is working as expected.

33
00:02:29,550 --> 00:02:35,010
So the player comes into the game, they click a button, they see that they've selected one.

34
00:02:35,250 --> 00:02:39,160
Now select zero cases because we've already got that within the setting.

35
00:02:39,180 --> 00:02:40,380
So remember, it's dynamic.

36
00:02:40,860 --> 00:02:42,480
We're going to decline the offer.

37
00:02:42,720 --> 00:02:46,740
And now it says that we've got 10 select ten more classes.

38
00:02:46,740 --> 00:02:53,370
So declined the offer, go in and select ten more cases and we should be coming up to another offer

39
00:02:53,370 --> 00:02:53,960
shortly.

40
00:02:54,000 --> 00:02:59,720
So we have an offer, number three, so we get 18 or we can select two more cases.

41
00:02:59,730 --> 00:03:05,760
And the reason we're getting 18 is because we've got five that are hidden and the only big one is 75.

42
00:03:05,760 --> 00:03:06,920
So that's why it went down a bit.

43
00:03:07,410 --> 00:03:13,490
So let's go ahead and decline and see that we get a select one more case.

44
00:03:13,500 --> 00:03:17,610
So now we're up to twenty seven because we got rid of some of the lower ones.

45
00:03:17,880 --> 00:03:19,140
Let's decline it again.

46
00:03:19,470 --> 00:03:22,050
And this was actually going to be our last offer.

47
00:03:22,500 --> 00:03:24,870
So we're getting 38 on our last offer.

48
00:03:24,880 --> 00:03:31,770
So either can either accept it and take the 38 if we think we've got a one in the case or a decline

49
00:03:31,770 --> 00:03:33,360
if we think we've got 75.

50
00:03:33,360 --> 00:03:37,260
So this is a good decision point and I'm just going to accept it.

51
00:03:37,470 --> 00:03:40,200
And it says you earned thirty eight.

52
00:03:40,200 --> 00:03:41,910
So something went wrong there.

53
00:03:42,090 --> 00:03:44,850
And it also showed all of the elements.

54
00:03:45,000 --> 00:03:51,930
So something is a little bit wrong in the source code because we went and we showed everything, whereas

55
00:03:51,930 --> 00:03:57,630
we wanted to hide all of the content and we only want to show the ones that hadn't been selected yet.

56
00:03:57,870 --> 00:04:03,600
And we also noticed as well that because we've put it in game end, we can still click the elements,

57
00:04:03,600 --> 00:04:04,830
but we can't show them.

58
00:04:04,830 --> 00:04:07,470
So something is still wrong there.

59
00:04:07,770 --> 00:04:13,830
And within testing, sometimes it's good to cut down on the size of the values that we have.

60
00:04:14,130 --> 00:04:19,650
So you can really easily do that because remember, again, that we're fully dynamic or we should be.

61
00:04:19,650 --> 00:04:22,110
And that's another thing that we can test now.

62
00:04:22,620 --> 00:04:28,290
So let's see what happens when we go down to four cases and start the game.

63
00:04:28,590 --> 00:04:35,810
So select cases so divided at nicely select our main case and great job.

64
00:04:35,820 --> 00:04:41,700
So now we've got an offer of one hundred or select one more case and two bad.

65
00:04:41,700 --> 00:04:49,620
I got rid of the two hundred so the offer went down and if I decline it then your case has two tickets

66
00:04:49,800 --> 00:04:50,010
so.

67
00:04:50,010 --> 00:04:50,610
That's right.

68
00:04:51,090 --> 00:04:55,170
And it showed all of the ticket values that were available.

69
00:04:55,710 --> 00:04:59,710
So this is something that we don't want to do because we want to hide this element.

70
00:05:00,180 --> 00:05:04,500
So I actually want to remove those elements from the page when they've been selected.

71
00:05:04,590 --> 00:05:08,850
Another thing that you might want to do if you're troubleshooting, I know we've got a lot of console

72
00:05:08,850 --> 00:05:11,960
messages, so that can lead to some confusion.

73
00:05:12,210 --> 00:05:19,740
And let's do a find and replace and I'm going to replace all of the console log with the backslash Xbox

74
00:05:20,010 --> 00:05:20,810
console log.

75
00:05:20,970 --> 00:05:27,120
So that will disable all of them and in brackets, just replace all so we can save it and then we can

76
00:05:27,690 --> 00:05:33,990
troubleshoot it a little bit better and see what's exactly going on, because we don't know why we're

77
00:05:33,990 --> 00:05:35,550
not getting the deal proper.

78
00:05:35,700 --> 00:05:41,340
And one of the things that we can immediately tell that's wrong is that we don't need to be looking

79
00:05:41,340 --> 00:05:42,870
for ones that have muted.

80
00:05:42,870 --> 00:05:45,110
We want to look for ones that don't have muted.

81
00:05:45,360 --> 00:05:48,720
So let's save that and refresh and try it one more time.

82
00:05:48,730 --> 00:05:49,740
So select a case.

83
00:05:49,950 --> 00:05:50,980
Select number three.

84
00:05:51,360 --> 00:05:52,020
Too bad.

85
00:05:52,140 --> 00:05:55,170
Let's decline and again decline.

86
00:05:55,350 --> 00:05:56,550
Your case has one.

87
00:05:56,700 --> 00:05:57,840
So that's right.

88
00:05:58,170 --> 00:05:59,640
And the other one had to.

89
00:05:59,670 --> 00:06:01,320
So that worked out right.

90
00:06:01,320 --> 00:06:03,400
And that worked out correctly and that turned out right.

91
00:06:03,660 --> 00:06:05,910
So one more time we're going to play that through the game.

92
00:06:06,120 --> 00:06:10,620
And this time if we get an offer, we're just going to accept the offer.

93
00:06:10,860 --> 00:06:18,030
So we earned 67 and it showed that we actually had to in our case and the remaining ones were one and

94
00:06:18,030 --> 00:06:18,690
two hundred.

95
00:06:18,870 --> 00:06:21,590
So you can still hover over those, but they're not clickable anymore.

96
00:06:21,840 --> 00:06:28,350
So all of the gameplay and everything looks like it's working properly and use console log to debug

97
00:06:28,350 --> 00:06:32,400
as needed and as well set up different values.

98
00:06:32,640 --> 00:06:38,190
And because it's made dynamically, this is something that we should always test as well.

99
00:06:38,430 --> 00:06:41,160
So test it with less clicks.

100
00:06:41,460 --> 00:06:47,550
So give yourself some time or you could just play through the game as you expect, update the offers

101
00:06:47,550 --> 00:06:48,210
as needed.

102
00:06:48,220 --> 00:06:54,030
So the offers generally you're not going to get all of these offers at once, so maybe update these

103
00:06:54,240 --> 00:06:55,920
to be better intervals.

104
00:06:56,160 --> 00:07:01,210
So all depending on what you want to set the game to and how you want the user to play through the game.

105
00:07:01,350 --> 00:07:06,570
So now that that's all set up, coming up next, we're going to do a final code review and then it's

106
00:07:06,570 --> 00:07:12,330
going to be up to you to take the game, extend on it and try it out and get familiar with some of the

107
00:07:12,330 --> 00:07:14,880
functionality we've covered in the earlier lessons.