1
00:00:01,620 --> 00:00:08,790
In this lesson, we're going to be wrapping up our mini application that's going to load word game coming

2
00:00:08,790 --> 00:00:10,370
from different sheet data.

3
00:00:10,650 --> 00:00:13,020
So we've got a default sheet ID here.

4
00:00:14,610 --> 00:00:20,910
The user can come in and if they just go to the regular Web URL, they have an option to update the

5
00:00:20,910 --> 00:00:21,300
sheet.

6
00:00:21,310 --> 00:00:27,510
So if they have their own sheet and they've shared the sheet, published the web, they can load the

7
00:00:27,510 --> 00:00:30,020
sheet data and they can get a listing of the words.

8
00:00:30,180 --> 00:00:31,980
They also get this shareable link.

9
00:00:31,980 --> 00:00:33,650
That's also a clickable link.

10
00:00:33,990 --> 00:00:39,960
And if they want users to be able to play through their word list, they can use this link and it's

11
00:00:39,960 --> 00:00:43,270
going to load whatever word list has been presented to the user.

12
00:00:43,620 --> 00:00:44,650
So this is the option.

13
00:00:44,670 --> 00:00:51,810
It just gets right into the gameplay and once they finish the game, they have an option.

14
00:00:51,820 --> 00:00:53,970
Oops, that looks like I'm not guessing properly.

15
00:00:54,450 --> 00:00:58,850
Let me remove some of these items here within the list and we'll refresh it.

16
00:00:59,070 --> 00:01:05,220
So if we change the content within the spreadsheet, it's still going to change the content within the

17
00:01:05,220 --> 00:01:05,550
list.

18
00:01:05,700 --> 00:01:13,230
So basically it tells us the game is over and there's no other lists that we can load in as we've already

19
00:01:13,230 --> 00:01:18,240
set default list so we can start the game again or we can reload the list.

20
00:01:18,390 --> 00:01:22,470
At this point, we could present the user with the options to reload the list.

21
00:01:22,770 --> 00:01:25,290
So it's up to us how we want to present the next steps.

22
00:01:25,770 --> 00:01:33,330
Also for the user, they can generate multiple lists so they can use whatever this default list is here

23
00:01:33,570 --> 00:01:38,050
and they can just simply go to start the gameplay where they can generate the shareable links.

24
00:01:38,400 --> 00:01:41,100
So now this one is taking the word list from here.

25
00:01:41,250 --> 00:01:43,050
It's breaking apart the content.

26
00:01:43,560 --> 00:01:48,030
So it's just getting the single words that are presented within the first column of the spreadsheet.

27
00:01:50,060 --> 00:01:55,910
So that's our flexible, dynamic Web application, and you also have options on how you want to output

28
00:01:55,910 --> 00:01:59,600
and have what options you want to present to the user.

29
00:01:59,960 --> 00:02:04,610
So go ahead and make some customizations to really get familiar with what you can do.

30
00:02:04,760 --> 00:02:09,110
And we're going to be walking you through how to make some customizations, tweaks and duty, plugging

31
00:02:09,260 --> 00:02:13,240
in this lesson be wrapping up the project that we've been working on.

32
00:02:13,520 --> 00:02:22,250
So we've got currently a Web application that we can load sheet data so the user can come in and specify

33
00:02:22,250 --> 00:02:25,990
sheet data where they can start the game with the default list.

34
00:02:26,390 --> 00:02:30,460
So we only want this to actually show on the initial page.

35
00:02:30,470 --> 00:02:38,510
So if there is ID that's loaded and it's a shareable ID, we don't want any of this option to show.

36
00:02:38,510 --> 00:02:43,360
So only on the main index page that we want the user to be able to generate the IDs.

37
00:02:43,700 --> 00:02:50,210
So let's go and update the application so we can highlight these options and only have options to start

38
00:02:50,210 --> 00:02:50,800
the game.

39
00:02:50,810 --> 00:02:58,280
So we have the start game button and not have the options to load the sheet data by ID so we can also

40
00:02:58,280 --> 00:03:02,240
arop the content with in another element.

41
00:03:02,690 --> 00:03:08,000
So instead of having the two separate elements where we've got the sheet ID and the button, we can

42
00:03:08,000 --> 00:03:09,960
wrap them into a main ID.

43
00:03:10,010 --> 00:03:11,340
So let's create that.

44
00:03:12,050 --> 00:03:17,660
So creating it as div one and document create elements.

45
00:03:17,660 --> 00:03:23,720
And this is just going to be a regular div where it's going to serve to wrap the content contained within

46
00:03:23,720 --> 00:03:23,890
it.

47
00:03:24,380 --> 00:03:31,950
So adding it that way and then this is what we're going to be actually appending to the output area.

48
00:03:33,050 --> 00:03:39,350
So output and it's going to depend that if one so from the user's perspective, they're not going to

49
00:03:39,350 --> 00:03:40,670
see anything different.

50
00:03:40,910 --> 00:03:44,690
But this is also going to give us an option to hide that content.

51
00:03:44,720 --> 00:03:50,900
So now that we've got the div one that's going to reference that entire chunk of content and also allow

52
00:03:50,900 --> 00:03:51,900
us to hide it.

53
00:03:52,280 --> 00:04:00,290
So if we when we do load the page, if we do see that there is an I.D., then let's go ahead and we're

54
00:04:00,290 --> 00:04:02,300
going to highlight that div one.

55
00:04:03,440 --> 00:04:09,500
So selecting the content, I'm going to move it above where we've got the sheet parameters and that

56
00:04:09,500 --> 00:04:12,470
will give us access to hide the div one.

57
00:04:13,340 --> 00:04:23,840
So if there is an ID and if the ID exists and just do a display so style display none.

58
00:04:24,710 --> 00:04:29,930
So we don't want to give the users the option for that, but we do want to give them the option for

59
00:04:29,930 --> 00:04:31,840
that if there is no ID.

60
00:04:32,060 --> 00:04:35,090
So we're still listing out the shareable link.

61
00:04:36,100 --> 00:04:42,700
And I'm actually going to remove that option, and you could add that if needed, but in this case,

62
00:04:42,700 --> 00:04:45,250
we just want to be able to start the game for the user.

63
00:04:45,460 --> 00:04:51,250
So we don't want the all of these options to load and load different sheets.

64
00:04:51,550 --> 00:04:56,080
And this is automatically going to be done anyway whenever they've got the sheet ID.

65
00:04:56,080 --> 00:04:57,730
So we're loading it by ID.

66
00:04:57,910 --> 00:05:03,730
And this is just the main index page is going to be where we can generate the different links, we can

67
00:05:03,730 --> 00:05:05,680
have different Web URLs and so on.

68
00:05:05,800 --> 00:05:09,770
And I'll show us the list that we're generating and the links to those lists.

69
00:05:10,090 --> 00:05:16,390
So this is going to create a more usable type application where if you want to generate different word

70
00:05:16,390 --> 00:05:18,370
lists from your sheet, you can do it this way.

71
00:05:18,520 --> 00:05:25,330
Or you can just use the default list to try out the application or you can create a list.

72
00:05:25,330 --> 00:05:31,060
And if it does have an ID, which is a valid ID, then we can take that idea and we can just load the

73
00:05:31,210 --> 00:05:32,310
link application.

74
00:05:33,130 --> 00:05:40,970
So there's the two options that we have and the two ways that the user can come into and play the game.

75
00:05:42,310 --> 00:05:46,810
So when we're coming into play the game next, we need to create our gameplay.

76
00:05:46,840 --> 00:05:51,360
So we did create a function that will split the words and do a sorting of the words.

77
00:05:51,730 --> 00:05:53,530
So let's update that.

78
00:05:53,530 --> 00:06:00,220
And on the console message here, what we want to do is we just want to take whatever the first word

79
00:06:00,220 --> 00:06:02,020
is and remove it out of the race.

80
00:06:02,020 --> 00:06:03,760
And we're displaying it for the user.

81
00:06:04,060 --> 00:06:13,150
So let's loop through and we want to first create a variable and using the split method.

82
00:06:13,160 --> 00:06:19,040
So the a split method, splitting the word content into an array.

83
00:06:19,360 --> 00:06:21,660
So it's going to give us access to the array methods.

84
00:06:21,940 --> 00:06:25,140
And this way we can do a sort of the array content.

85
00:06:25,630 --> 00:06:28,000
So let's console logout temp.

86
00:06:28,900 --> 00:06:31,720
And so this is going to be kicked off when we start the game.

87
00:06:34,500 --> 00:06:43,050
And that actually should be a word, so when we start the game, it's going to take the first word and

88
00:06:43,050 --> 00:06:43,860
split it up.

89
00:06:44,610 --> 00:06:52,710
So as we updates and we're going to output those values, so we want to do a sorting of the content.

90
00:06:53,490 --> 00:07:00,600
And with the three methods, we have an option to do a sort and a sort in place, and we can randomize

91
00:07:00,600 --> 00:07:05,030
the order by updating and setting the comparison parameters.

92
00:07:05,370 --> 00:07:12,060
So if we're returning back a value of negative, it's going to change the sort order.

93
00:07:12,210 --> 00:07:15,860
And then there's also value for the positive, which is going to change the sort order.

94
00:07:16,290 --> 00:07:19,500
So I just give you a quick sampling of both of those.

95
00:07:20,910 --> 00:07:24,580
And if we return back zero, it's not going to change the short order.

96
00:07:25,560 --> 00:07:30,510
So when we start the game, we get the two different values there.

97
00:07:30,690 --> 00:07:32,340
So we've got the initial hello.

98
00:07:32,580 --> 00:07:36,870
And then here we've got it in reverse as we've changing the sort order.

99
00:07:37,020 --> 00:07:42,060
And then there we've got it still back in reverse because we've got initially negative.

100
00:07:42,330 --> 00:07:49,760
So that sorts it within the proper order and then the positive sorts it within the backwards order.

101
00:07:50,130 --> 00:07:56,850
So if we randomize the value to be either be negative or positive and we can do this by doing Amarth

102
00:07:57,300 --> 00:07:57,900
random.

103
00:07:58,170 --> 00:08:04,640
So subtracting the math, random value from the zero point five.

104
00:08:04,650 --> 00:08:07,950
So that's going to return it back either negative or positive.

105
00:08:08,940 --> 00:08:15,690
So what that will do is when we start the game, that's going to randomize the sort order of the content

106
00:08:15,690 --> 00:08:19,440
within the array and I'll get rid of these ones.

107
00:08:22,080 --> 00:08:28,720
So let's start the game and there's our randomized sort order of the content of the array.

108
00:08:29,940 --> 00:08:39,210
And we also want to transform the letters into a lowercase so right when we get the word, we can run

109
00:08:39,210 --> 00:08:40,260
a function.

110
00:08:43,010 --> 00:08:50,830
And to transform it to lower and we just we need to reassign to the value of word to lower case,

111
00:08:53,780 --> 00:08:59,030
so that will transform the word to lower case and have all lower case letters because we want the letters

112
00:08:59,030 --> 00:09:02,120
to be matching and I'll be the same case.

113
00:09:03,800 --> 00:09:11,540
So what we also want to do is we want to bring it back into the original sort order, so bring it back

114
00:09:11,540 --> 00:09:12,500
into a string.

115
00:09:12,680 --> 00:09:20,840
So after we've done the sort of it, let's take the temp word and we're going to reassign a value and

116
00:09:20,840 --> 00:09:28,460
using temp and joined the array back so that now it's just going to be back into a string so separated

117
00:09:28,460 --> 00:09:32,070
by nothing and join it back into a string value.

118
00:09:32,720 --> 00:09:33,980
So let's try that.

119
00:09:34,610 --> 00:09:36,440
And there's our scrambled word.

120
00:09:36,770 --> 00:09:43,670
And one other thing that we want to do is want to add in a recursive function that when we've got the

121
00:09:43,670 --> 00:09:50,990
word, we want to make sure that this word is going to be the same and as the original word.

122
00:09:50,990 --> 00:09:53,110
So we don't want it to be the same as the original word.

123
00:09:53,300 --> 00:09:54,980
We do want it to do a sort order.

124
00:09:55,160 --> 00:10:00,770
So in case the sort for whatever reason, the random sort comes back within the same order, we want

125
00:10:00,770 --> 00:10:03,470
to run this function again until we get a different result.

126
00:10:04,550 --> 00:10:10,970
So let's set up the value for the word and we're actually going to return back whatever the temp value

127
00:10:10,970 --> 00:10:11,270
is.

128
00:10:11,810 --> 00:10:18,080
So setting up the word and we want to make sure that the word has changed, that it's not within the

129
00:10:18,080 --> 00:10:18,730
same order.

130
00:10:19,010 --> 00:10:24,740
So let's do a condition to check to see if word is equal to temp.

131
00:10:25,070 --> 00:10:31,820
And if it is, then we do have a problem there that we want to redo and rerun the Sautter.

132
00:10:32,150 --> 00:10:38,440
So return the function sautter and let's pass in the temporary word once again.

133
00:10:39,110 --> 00:10:43,700
So we'll continue to run and until we actually get a different word order.

134
00:10:43,710 --> 00:10:46,130
So that's returning back a different word.

135
00:10:48,770 --> 00:10:52,020
And that's actually the one that we want to be outputting on the page.

136
00:10:52,040 --> 00:10:53,480
So I'm putting here.

137
00:10:53,480 --> 00:10:55,850
So we've got value for sorta.

138
00:10:58,560 --> 00:11:05,580
And within the text content, let's put the game scramble, so start the game, there's our scrambled

139
00:11:05,580 --> 00:11:17,980
word and within the let's update the letter spacing for the letters when we start the game.

140
00:11:18,150 --> 00:11:20,400
So that will space out the letters a little bit better.

141
00:11:20,670 --> 00:11:24,400
So make it less obvious and cramped for what the word is going to be.

142
00:11:24,990 --> 00:11:31,170
So now we want the user to be able to compare the guests to whatever the word that's being displayed

143
00:11:31,170 --> 00:11:32,660
within the area.

144
00:11:33,120 --> 00:11:36,180
So let's add to the yes button.

145
00:11:39,900 --> 00:11:43,140
An option to run a function whenever it gets clicked.

146
00:11:45,280 --> 00:11:53,410
So whenever the game area button gets clicked, we want to run at an event listener, so within the

147
00:11:53,410 --> 00:11:56,230
game area.

148
00:12:00,540 --> 00:12:02,550
And do a query selector.

149
00:12:06,070 --> 00:12:13,660
Of the button that's contained within the button area and we're going to add an event listener, that

150
00:12:13,660 --> 00:12:19,270
event is going to be click and whenever it gets clicked, check the value.

151
00:12:21,800 --> 00:12:24,950
And let's create that function that's going to check the value.

152
00:12:31,350 --> 00:12:35,350
And for now, we'll just console logout just to make sure that it's working.

153
00:12:42,630 --> 00:12:50,100
And we can just type working into the console and save that, so start the game, make the guess, we

154
00:12:50,100 --> 00:13:00,180
want to pick up the value of the guess from the user so we can select the input area and get the value

155
00:13:00,180 --> 00:13:00,810
of the guess.

156
00:13:01,830 --> 00:13:09,210
The same way that we added in the button, we can use a query selector for the game area input and return

157
00:13:09,210 --> 00:13:12,210
back whatever the value of the guess is from the user.

158
00:13:18,850 --> 00:13:31,290
So the gas value, Queiroz Selecter, input value, and that's what we can put into the console now

159
00:13:33,790 --> 00:13:38,190
and a lot of times when you are building games, you've got to do it piece by piece.

160
00:13:38,530 --> 00:13:42,250
So let's do a test and it's picking up the value.

161
00:13:42,850 --> 00:13:51,130
So do a check to see if gas is equal to and we have that stored in the global object.

162
00:13:51,130 --> 00:13:52,630
So the game select.

163
00:13:56,960 --> 00:14:04,280
And that's what we can do, correct, so if they are equal and else, World Council log in, correct?

164
00:14:08,100 --> 00:14:16,380
And once we have it working, then we can update the code to output out of the console and for the user,

165
00:14:18,030 --> 00:14:24,970
so work through the gameplay and just test to see if it's working.

166
00:14:25,560 --> 00:14:31,260
And one thing that you might notice well is that we need to transform this to lowercase because it is

167
00:14:31,260 --> 00:14:32,370
going to be case sensitive.

168
00:14:32,370 --> 00:14:33,490
So they're not going to match.

169
00:14:33,510 --> 00:14:37,610
It's going to turn back incorrect, even though that we are guessing the correct word.

170
00:14:38,010 --> 00:14:41,460
So let's see where we're setting the word.

171
00:14:42,970 --> 00:14:47,940
Let's take the game, select and transform that to lowercase.

172
00:14:50,150 --> 00:14:56,690
So running the two lowercase string method, and that way, even if we are doing uppercase.

173
00:15:00,970 --> 00:15:10,930
And we should also transform the guest content to lower case as well, so taking guests and equal that

174
00:15:10,930 --> 00:15:19,390
to guests and then also transferring that to lower case and thus we'll just update this to be let as

175
00:15:19,390 --> 00:15:21,450
we're reassigning the value of guests.

176
00:15:22,450 --> 00:15:23,700
So now it doesn't matter.

177
00:15:23,710 --> 00:15:28,590
It's not going to be case sensitive and it will still pick up the word properly.

178
00:15:29,050 --> 00:15:32,160
So we want to be able to move to the next word.

179
00:15:32,410 --> 00:15:40,000
And another thing that we want to do before we conclude this project is we want to randomize the order

180
00:15:40,000 --> 00:15:40,750
of words.

181
00:15:40,930 --> 00:15:49,120
So the same way that we redid the random order of the temp, we can use the same function over here

182
00:15:50,050 --> 00:15:54,030
and resort my words and this sorts it in place.

183
00:15:54,610 --> 00:15:56,550
So that will resort the order.

184
00:15:56,740 --> 00:16:01,750
So it's not necessarily always going to have starting out with the first word, which is hello, it

185
00:16:01,750 --> 00:16:05,200
might start out with world or any of the other words that we have available.

186
00:16:06,160 --> 00:16:14,290
So again, we've got our scrambled word and guess so we need to provide some feedback to the user.

187
00:16:19,630 --> 00:16:28,810
So we can add in another d'Hiv and this can be a class of feedback, so this is where we can provide

188
00:16:28,810 --> 00:16:37,360
the feedback to the user and whenever they're making their guess, we can select the elements.

189
00:16:39,190 --> 00:16:48,280
So this is just going to be getting the feedback object and using the game area query selector and select

190
00:16:48,280 --> 00:16:53,140
the element that has a class of feedback.

191
00:16:58,710 --> 00:17:01,620
And we can also set this as a global value.

192
00:17:06,490 --> 00:17:14,530
So now within the feedback, we can output the message to the user and actually I'm going to update

193
00:17:14,530 --> 00:17:24,160
this and this can be just a complete message area where we can use this for different types of messages

194
00:17:24,760 --> 00:17:25,500
to the user.

195
00:17:25,510 --> 00:17:31,230
So we'll keep it outside within the global and update instead of feedback.

196
00:17:31,270 --> 00:17:38,410
This is going to be our message area and using the document because it's not contained anymore within

197
00:17:38,410 --> 00:17:40,540
the game area.

198
00:17:42,710 --> 00:17:50,770
And this will be our place where we can add in messages to the user and then within the function.

199
00:17:56,670 --> 00:18:05,610
And whatever the message is that we want to add, let's update the message, the inner HTML of this

200
00:18:05,610 --> 00:18:08,020
element with whatever we're passing in for value.

201
00:18:09,120 --> 00:18:17,200
So this way, instead of the log, we can provide messages to the user.

202
00:18:17,220 --> 00:18:19,920
So let's start the game and.

203
00:18:23,460 --> 00:18:29,220
And actually, this is going to be variable value of Messe instead of message out.

204
00:18:33,100 --> 00:18:41,830
And just fix that quickly and let's start the game again, so whenever we provide a guess.

205
00:18:44,980 --> 00:18:51,790
And will console log the value that's coming in to debug and check why it's not being output.

206
00:18:58,980 --> 00:19:01,770
So it is updating the value of the message there.

207
00:19:04,400 --> 00:19:12,650
Let's apply some styling to that message, so comma separated and out in the class for message.

208
00:19:15,050 --> 00:19:21,980
And maybe that's actually a little bit too large, so will copy the message area and we don't need the

209
00:19:21,980 --> 00:19:23,420
letter spacing for this one.

210
00:19:27,610 --> 00:19:33,010
And we can have smaller font size and maybe one of the color of red.

211
00:19:38,230 --> 00:19:41,300
So save that, and that's our message area.

212
00:19:42,130 --> 00:19:49,390
I can remove it existing message, and this way we can provide some messages to the user on what to

213
00:19:49,390 --> 00:19:49,650
do.

214
00:19:50,260 --> 00:19:51,370
So incorrect.

215
00:19:53,890 --> 00:19:55,230
And that time it's correct.

216
00:19:55,450 --> 00:20:05,950
So when we do get set correct, we want to move to the next word so we can kick that off by going again

217
00:20:05,950 --> 00:20:07,750
back to the start game.

218
00:20:11,510 --> 00:20:15,620
And then running the start game function.

219
00:20:23,940 --> 00:20:29,880
So let's see what happens when we get it correct, so it loads another word, we should also clear out

220
00:20:29,880 --> 00:20:35,150
the content of gas so that the guests value just to be blank.

221
00:20:36,000 --> 00:20:41,250
So when we do make a guess, if we get a wrong guess, it's just going to be incorrect and it should

222
00:20:41,250 --> 00:20:43,600
be clearing out that gas value.

223
00:20:45,870 --> 00:20:51,600
And let me set up the gas variable using the gas value.

224
00:20:54,890 --> 00:20:57,870
So getting the object and then returning back the value.

225
00:20:58,910 --> 00:21:07,760
So this is just going to be the gas element and using the gas element and let's select the gas element

226
00:21:07,760 --> 00:21:12,400
and set the value of that to be blank.

227
00:21:13,340 --> 00:21:15,920
So let's try it and test.

228
00:21:16,460 --> 00:21:17,760
So now it's clearing it out.

229
00:21:17,780 --> 00:21:22,870
So this is JavaScript gas and then it moves to the next word.

230
00:21:23,570 --> 00:21:28,640
So hello, guess world gas and so on.

231
00:21:28,850 --> 00:21:31,220
So it's going to move through all of the words.

232
00:21:33,640 --> 00:21:37,400
And let's put words left.

233
00:21:37,930 --> 00:21:44,590
So this is going to track how many words we've got left, so let's concatenate and output the value

234
00:21:44,590 --> 00:21:51,330
that we've got here where we've got the words game words left the global object.

235
00:21:51,700 --> 00:21:56,200
So this will provide the user some information about how many words they have left.

236
00:21:59,750 --> 00:22:06,710
And this can also go out to the message out function, so the street game over.

237
00:22:09,790 --> 00:22:11,510
So let's see what happens.

238
00:22:11,560 --> 00:22:22,090
So we've got three words left, two words left, one word left, and let's we're just using the default

239
00:22:22,090 --> 00:22:24,490
list and now it's game over.

240
00:22:25,690 --> 00:22:29,740
So when we go game over, we should hide this option.

241
00:22:29,890 --> 00:22:31,110
So hide the game area.

242
00:22:32,560 --> 00:22:34,150
So take the game area.

243
00:22:36,800 --> 00:22:41,920
And update the style property to display and display none.

244
00:22:44,060 --> 00:22:48,080
And we also want to display the output.

245
00:22:48,860 --> 00:22:53,510
So the one that we hid so that the user can load it, new list if they want.

246
00:22:58,810 --> 00:23:07,780
So where are we when we started the game, we did output display none and we'll output and display that

247
00:23:07,780 --> 00:23:08,320
as block.

248
00:23:12,780 --> 00:23:15,950
So start the game and let's play through it.

249
00:23:19,730 --> 00:23:28,470
And once we've guessed all the words, it should give us an option to reload a new list, so we've got

250
00:23:28,470 --> 00:23:29,480
the list.

251
00:23:31,820 --> 00:23:38,540
And we've loaded a new list, so now we can start with the new list and we can play through and actually

252
00:23:38,540 --> 00:23:43,850
this message of game over when we load a new list.

253
00:23:54,220 --> 00:24:00,460
So that will just say that new wordlist is loaded and actually that should be within the fetch euro.

254
00:24:07,580 --> 00:24:15,410
And then as well, if we do get an error, so if we do have a catch.

255
00:24:20,190 --> 00:24:24,960
We can write error loading list.

256
00:24:29,070 --> 00:24:34,570
So there we go, so play through the game and just test it out.

257
00:24:34,590 --> 00:24:37,380
So a lot of times you got to play through a number of times.

258
00:24:43,780 --> 00:24:46,240
And now we should be able to load.

259
00:24:47,640 --> 00:24:54,420
By ID, so that gives us a new wordlist loaded and then we can start the game again if we go to the

260
00:24:54,420 --> 00:24:59,280
Web, you orl, it's automatically going to load the wordlist.

261
00:25:01,910 --> 00:25:09,140
And it should actually do a loading of the data if we do have an ID, so that's another thing, what

262
00:25:09,140 --> 00:25:14,060
we need to bug fix that it's not actually loading the wordlist.

263
00:25:16,190 --> 00:25:23,390
So if we do have this list by it, when we go to this ID, we should be loading it by the word list.

264
00:25:23,840 --> 00:25:24,980
So let's see what happened.

265
00:25:24,980 --> 00:25:27,440
There were it's not loading the list.

266
00:25:31,050 --> 00:25:38,190
And that means that we should have a way to automatically load the content instead of having it within

267
00:25:38,190 --> 00:25:38,920
the vent listener.

268
00:25:39,390 --> 00:25:41,970
We should have a function that's going to handle the loading.

269
00:25:48,370 --> 00:25:52,390
So load list from sheet, and that's going to be a function that's going to handle that.

270
00:25:54,510 --> 00:26:04,140
And let's copy all of that into the new load list from sheet, so grab that and copy it into the load

271
00:26:04,140 --> 00:26:10,230
lists from sheet and then whenever the button gets clicked, we're going to run the load lists from

272
00:26:10,230 --> 00:26:11,970
sheet function instead.

273
00:26:12,090 --> 00:26:15,960
And this is going to give us an opportunity to automatically load that.

274
00:26:18,510 --> 00:26:26,160
And I'll just read or organize this button so that we have all the functions after the event listeners,

275
00:26:27,600 --> 00:26:30,890
and let's double check to make sure that it is working.

276
00:26:30,930 --> 00:26:31,790
So it is working.

277
00:26:34,560 --> 00:26:39,120
And we want to trigger the loading of the list content from the sheet.

278
00:26:41,760 --> 00:26:50,940
And we can update the street value idea as well, so that way when we come to the page, we can just

279
00:26:50,940 --> 00:26:55,800
see that the word list is loaded and we're ready to start the game with this word list.

280
00:26:56,700 --> 00:27:00,300
And we don't necessarily need to run the share link.

281
00:27:01,470 --> 00:27:06,850
So let's passing a boolean value into the load list and have that.

282
00:27:07,140 --> 00:27:11,790
So going back and running blockquote here.

283
00:27:17,910 --> 00:27:28,830
For that listener, and we'll run the load from [REMOVED] function and here we're going to pass in a

284
00:27:28,830 --> 00:27:29,650
boolean value.

285
00:27:29,700 --> 00:27:32,280
So whether we want to load the list or not.

286
00:27:32,700 --> 00:27:37,980
So, Passan, true that we want to load the list and over here we'll pass on false.

287
00:27:42,070 --> 00:27:47,200
And this is going to be only specifically whether we're going to be loading the list or not, and that's

288
00:27:47,200 --> 00:27:49,300
going to be where we're creating the Carelink.

289
00:27:50,620 --> 00:27:59,920
And this can just be boolean value, so just call it Bux and we'll check to see if Bueso if it's true,

290
00:28:00,220 --> 00:28:05,230
then we're going to load and create the shearling, otherwise we're not going to load and create the

291
00:28:05,230 --> 00:28:05,680
shearling.

292
00:28:07,240 --> 00:28:10,120
So wordlist is loaded, so ready to start the game.

293
00:28:12,970 --> 00:28:19,390
And we can guess so we've got 11 words left, so we are loading the list from the sheet, whereas here

294
00:28:19,420 --> 00:28:25,330
if we want to load my ID, it's going to create the shareable link as well as load the list.

295
00:28:27,340 --> 00:28:30,730
And we might also not want to show the list of words.

296
00:28:30,970 --> 00:28:38,380
So that's another thing that we can control on the Boulin, so where we're outputting and creating that

297
00:28:38,380 --> 00:28:40,390
element of that span.

298
00:28:44,040 --> 00:28:52,470
And over here, we can add the spin or we don't have to add the spin, so the word list is created and

299
00:28:52,470 --> 00:28:54,940
over here will show the word list when we load it.

300
00:28:55,950 --> 00:28:58,880
So these are some of the options that you might want to consider.

301
00:28:59,640 --> 00:29:01,440
So new word list is loaded.

302
00:29:05,630 --> 00:29:12,380
And you can go through and you can just make sure that all everything is working as expected and play

303
00:29:12,380 --> 00:29:19,370
through the game, and this is also going to provide you an opportunity to load different word lists

304
00:29:19,730 --> 00:29:21,110
so we can load by it.

305
00:29:21,440 --> 00:29:26,840
And if we want to play this wordlist, we just start the game and it looks like it's not actually generating

306
00:29:26,840 --> 00:29:28,220
the list properly.

307
00:29:28,460 --> 00:29:30,410
So it's not using the sheet ID.

308
00:29:30,740 --> 00:29:36,370
So the reason is that we've got the sheet ID value, but when we're passing it in to create the share

309
00:29:36,380 --> 00:29:38,480
link, we're using the other ID.

310
00:29:38,600 --> 00:29:41,800
So let's add and update that where we're creating the share link.

311
00:29:42,230 --> 00:29:49,850
So now we should be able to select a link, copy it, load the sheet data and actually have the right

312
00:29:49,850 --> 00:29:50,540
link here.

313
00:29:50,930 --> 00:29:57,800
And using this link now we can start the word list and it still looks like it's loading the wrong word

314
00:29:57,820 --> 00:30:00,050
list, the wrong ID.

315
00:30:03,920 --> 00:30:09,680
So let's double check and see what's happening here, that why it didn't load the right word list,

316
00:30:09,860 --> 00:30:14,570
and oftentimes you do have to play through it a number of times just to see what's going on and why

317
00:30:14,570 --> 00:30:16,430
it's not loading the right word list.

318
00:30:18,950 --> 00:30:22,280
So it's not passing in the rate sheet, it evalu.

319
00:30:24,340 --> 00:30:30,440
And that's because the sheet ID value is coming from the ID, so it's populating a default value.

320
00:30:31,450 --> 00:30:35,770
So we need to handle that as well instead of populating the ID.

321
00:30:39,800 --> 00:30:44,210
Well populated only if there isn't Web URL with a Nidhi.

322
00:30:48,740 --> 00:30:54,440
So let's try that one more time, and this time it produced an error loading the list.

323
00:30:57,440 --> 00:31:08,570
And we also need to set the sheet idy value here if it does have the parameter so list loaded and this

324
00:31:08,570 --> 00:31:10,600
time it is worth loading the right list.

325
00:31:11,870 --> 00:31:14,390
And this is the one where we've got all of these test values.

326
00:31:17,590 --> 00:31:24,130
So play through the game and just make sure that it's working as expected and try a different things,

327
00:31:24,130 --> 00:31:28,660
you can also try out different conditions to display content for the user.

328
00:31:31,640 --> 00:31:36,560
We've come to the conclusion of this project, so now it's up to you customize the conditions of the

329
00:31:36,560 --> 00:31:40,160
gameplay and allow the user to generate their own URLs.

330
00:31:40,280 --> 00:31:45,440
You can update these parameters, however, best suited for your needs, have different screen options

331
00:31:45,440 --> 00:31:46,690
depending on conditions.

332
00:31:46,940 --> 00:31:54,050
So where we had the condition where the user can load that ID or if they've already created a list by

333
00:31:54,050 --> 00:32:00,260
the ID, they can just share the Web URL, try to play the game, update the tweaks and debug as needed.