In this lesson, we're going to be wrapping up our mini application that's going to load word game coming
from different sheet data.
So we've got a default sheet ID here.
The user can come in and if they just go to the regular Web URL, they have an option to update the
sheet.
So if they have their own sheet and they've shared the sheet, published the web, they can load the
sheet data and they can get a listing of the words.
They also get this shareable link.
That's also a clickable link.
And if they want users to be able to play through their word list, they can use this link and it's
going to load whatever word list has been presented to the user.
So this is the option.
It just gets right into the gameplay and once they finish the game, they have an option.
Oops, that looks like I'm not guessing properly.
Let me remove some of these items here within the list and we'll refresh it.
So if we change the content within the spreadsheet, it's still going to change the content within the
list.
So basically it tells us the game is over and there's no other lists that we can load in as we've already
set default list so we can start the game again or we can reload the list.
At this point, we could present the user with the options to reload the list.
So it's up to us how we want to present the next steps.
Also for the user, they can generate multiple lists so they can use whatever this default list is here
and they can just simply go to start the gameplay where they can generate the shareable links.
So now this one is taking the word list from here.
It's breaking apart the content.
So it's just getting the single words that are presented within the first column of the spreadsheet.
So that's our flexible, dynamic Web application, and you also have options on how you want to output
and have what options you want to present to the user.
So go ahead and make some customizations to really get familiar with what you can do.
And we're going to be walking you through how to make some customizations, tweaks and duty, plugging
in this lesson be wrapping up the project that we've been working on.
So we've got currently a Web application that we can load sheet data so the user can come in and specify
sheet data where they can start the game with the default list.
So we only want this to actually show on the initial page.
So if there is ID that's loaded and it's a shareable ID, we don't want any of this option to show.
So only on the main index page that we want the user to be able to generate the IDs.
So let's go and update the application so we can highlight these options and only have options to start
the game.
So we have the start game button and not have the options to load the sheet data by ID so we can also
arop the content with in another element.
So instead of having the two separate elements where we've got the sheet ID and the button, we can
wrap them into a main ID.
So let's create that.
So creating it as div one and document create elements.
And this is just going to be a regular div where it's going to serve to wrap the content contained within
it.
So adding it that way and then this is what we're going to be actually appending to the output area.
So output and it's going to depend that if one so from the user's perspective, they're not going to
see anything different.
But this is also going to give us an option to hide that content.
So now that we've got the div one that's going to reference that entire chunk of content and also allow
us to hide it.
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
going to highlight that div one.
So selecting the content, I'm going to move it above where we've got the sheet parameters and that
will give us access to hide the div one.
So if there is an ID and if the ID exists and just do a display so style display none.
So we don't want to give the users the option for that, but we do want to give them the option for
that if there is no ID.
So we're still listing out the shareable link.
And I'm actually going to remove that option, and you could add that if needed, but in this case,
we just want to be able to start the game for the user.
So we don't want the all of these options to load and load different sheets.
And this is automatically going to be done anyway whenever they've got the sheet ID.
So we're loading it by ID.
And this is just the main index page is going to be where we can generate the different links, we can
have different Web URLs and so on.
And I'll show us the list that we're generating and the links to those lists.
So this is going to create a more usable type application where if you want to generate different word
lists from your sheet, you can do it this way.
Or you can just use the default list to try out the application or you can create a list.
And if it does have an ID, which is a valid ID, then we can take that idea and we can just load the
link application.
So there's the two options that we have and the two ways that the user can come into and play the game.
So when we're coming into play the game next, we need to create our gameplay.
So we did create a function that will split the words and do a sorting of the words.
So let's update that.
And on the console message here, what we want to do is we just want to take whatever the first word
is and remove it out of the race.
And we're displaying it for the user.
So let's loop through and we want to first create a variable and using the split method.
So the a split method, splitting the word content into an array.
So it's going to give us access to the array methods.
And this way we can do a sort of the array content.
So let's console logout temp.
And so this is going to be kicked off when we start the game.
And that actually should be a word, so when we start the game, it's going to take the first word and
split it up.
So as we updates and we're going to output those values, so we want to do a sorting of the content.
And with the three methods, we have an option to do a sort and a sort in place, and we can randomize
the order by updating and setting the comparison parameters.
So if we're returning back a value of negative, it's going to change the sort order.
And then there's also value for the positive, which is going to change the sort order.
So I just give you a quick sampling of both of those.
And if we return back zero, it's not going to change the short order.
So when we start the game, we get the two different values there.
So we've got the initial hello.
And then here we've got it in reverse as we've changing the sort order.
And then there we've got it still back in reverse because we've got initially negative.
So that sorts it within the proper order and then the positive sorts it within the backwards order.
So if we randomize the value to be either be negative or positive and we can do this by doing Amarth
random.
So subtracting the math, random value from the zero point five.
So that's going to return it back either negative or positive.
So what that will do is when we start the game, that's going to randomize the sort order of the content
within the array and I'll get rid of these ones.
So let's start the game and there's our randomized sort order of the content of the array.
And we also want to transform the letters into a lowercase so right when we get the word, we can run
a function.
And to transform it to lower and we just we need to reassign to the value of word to lower case,
so that will transform the word to lower case and have all lower case letters because we want the letters
to be matching and I'll be the same case.
So what we also want to do is we want to bring it back into the original sort order, so bring it back
into a string.
So after we've done the sort of it, let's take the temp word and we're going to reassign a value and
using temp and joined the array back so that now it's just going to be back into a string so separated
by nothing and join it back into a string value.
So let's try that.
And there's our scrambled word.
And one other thing that we want to do is want to add in a recursive function that when we've got the
word, we want to make sure that this word is going to be the same and as the original word.
So we don't want it to be the same as the original word.
We do want it to do a sort order.
So in case the sort for whatever reason, the random sort comes back within the same order, we want
to run this function again until we get a different result.
So let's set up the value for the word and we're actually going to return back whatever the temp value
is.
So setting up the word and we want to make sure that the word has changed, that it's not within the
same order.
So let's do a condition to check to see if word is equal to temp.
And if it is, then we do have a problem there that we want to redo and rerun the Sautter.
So return the function sautter and let's pass in the temporary word once again.
So we'll continue to run and until we actually get a different word order.
So that's returning back a different word.
And that's actually the one that we want to be outputting on the page.
So I'm putting here.
So we've got value for sorta.
And within the text content, let's put the game scramble, so start the game, there's our scrambled
word and within the let's update the letter spacing for the letters when we start the game.
So that will space out the letters a little bit better.
So make it less obvious and cramped for what the word is going to be.
So now we want the user to be able to compare the guests to whatever the word that's being displayed
within the area.
So let's add to the yes button.
An option to run a function whenever it gets clicked.
So whenever the game area button gets clicked, we want to run at an event listener, so within the
game area.
And do a query selector.
Of the button that's contained within the button area and we're going to add an event listener, that
event is going to be click and whenever it gets clicked, check the value.
And let's create that function that's going to check the value.
And for now, we'll just console logout just to make sure that it's working.
And we can just type working into the console and save that, so start the game, make the guess, we
want to pick up the value of the guess from the user so we can select the input area and get the value
of the guess.
The same way that we added in the button, we can use a query selector for the game area input and return
back whatever the value of the guess is from the user.
So the gas value, Queiroz Selecter, input value, and that's what we can put into the console now
and a lot of times when you are building games, you've got to do it piece by piece.
So let's do a test and it's picking up the value.
So do a check to see if gas is equal to and we have that stored in the global object.
So the game select.
And that's what we can do, correct, so if they are equal and else, World Council log in, correct?
And once we have it working, then we can update the code to output out of the console and for the user,
so work through the gameplay and just test to see if it's working.
And one thing that you might notice well is that we need to transform this to lowercase because it is
going to be case sensitive.
So they're not going to match.
It's going to turn back incorrect, even though that we are guessing the correct word.
So let's see where we're setting the word.
Let's take the game, select and transform that to lowercase.
So running the two lowercase string method, and that way, even if we are doing uppercase.
And we should also transform the guest content to lower case as well, so taking guests and equal that
to guests and then also transferring that to lower case and thus we'll just update this to be let as
we're reassigning the value of guests.
So now it doesn't matter.
It's not going to be case sensitive and it will still pick up the word properly.
So we want to be able to move to the next word.
And another thing that we want to do before we conclude this project is we want to randomize the order
of words.
So the same way that we redid the random order of the temp, we can use the same function over here
and resort my words and this sorts it in place.
So that will resort the order.
So it's not necessarily always going to have starting out with the first word, which is hello, it
might start out with world or any of the other words that we have available.
So again, we've got our scrambled word and guess so we need to provide some feedback to the user.
So we can add in another d'Hiv and this can be a class of feedback, so this is where we can provide
the feedback to the user and whenever they're making their guess, we can select the elements.
So this is just going to be getting the feedback object and using the game area query selector and select
the element that has a class of feedback.
And we can also set this as a global value.
So now within the feedback, we can output the message to the user and actually I'm going to update
this and this can be just a complete message area where we can use this for different types of messages
to the user.
So we'll keep it outside within the global and update instead of feedback.
This is going to be our message area and using the document because it's not contained anymore within
the game area.
And this will be our place where we can add in messages to the user and then within the function.
And whatever the message is that we want to add, let's update the message, the inner HTML of this
element with whatever we're passing in for value.
So this way, instead of the log, we can provide messages to the user.
So let's start the game and.
And actually, this is going to be variable value of Messe instead of message out.
And just fix that quickly and let's start the game again, so whenever we provide a guess.
And will console log the value that's coming in to debug and check why it's not being output.
So it is updating the value of the message there.
Let's apply some styling to that message, so comma separated and out in the class for message.
And maybe that's actually a little bit too large, so will copy the message area and we don't need the
letter spacing for this one.
And we can have smaller font size and maybe one of the color of red.
So save that, and that's our message area.
I can remove it existing message, and this way we can provide some messages to the user on what to
do.
So incorrect.
And that time it's correct.
So when we do get set correct, we want to move to the next word so we can kick that off by going again
back to the start game.
And then running the start game function.
So let's see what happens when we get it correct, so it loads another word, we should also clear out
the content of gas so that the guests value just to be blank.
So when we do make a guess, if we get a wrong guess, it's just going to be incorrect and it should
be clearing out that gas value.
And let me set up the gas variable using the gas value.
So getting the object and then returning back the value.
So this is just going to be the gas element and using the gas element and let's select the gas element
and set the value of that to be blank.
So let's try it and test.
So now it's clearing it out.
So this is JavaScript gas and then it moves to the next word.
So hello, guess world gas and so on.
So it's going to move through all of the words.
And let's put words left.
So this is going to track how many words we've got left, so let's concatenate and output the value
that we've got here where we've got the words game words left the global object.
So this will provide the user some information about how many words they have left.
And this can also go out to the message out function, so the street game over.
So let's see what happens.
So we've got three words left, two words left, one word left, and let's we're just using the default
list and now it's game over.
So when we go game over, we should hide this option.
So hide the game area.
So take the game area.
And update the style property to display and display none.
And we also want to display the output.
So the one that we hid so that the user can load it, new list if they want.
So where are we when we started the game, we did output display none and we'll output and display that
as block.
So start the game and let's play through it.
And once we've guessed all the words, it should give us an option to reload a new list, so we've got
the list.
And we've loaded a new list, so now we can start with the new list and we can play through and actually
this message of game over when we load a new list.
So that will just say that new wordlist is loaded and actually that should be within the fetch euro.
And then as well, if we do get an error, so if we do have a catch.
We can write error loading list.
So there we go, so play through the game and just test it out.
So a lot of times you got to play through a number of times.
And now we should be able to load.
By ID, so that gives us a new wordlist loaded and then we can start the game again if we go to the
Web, you orl, it's automatically going to load the wordlist.
And it should actually do a loading of the data if we do have an ID, so that's another thing, what
we need to bug fix that it's not actually loading the wordlist.
So if we do have this list by it, when we go to this ID, we should be loading it by the word list.
So let's see what happened.
There were it's not loading the list.
And that means that we should have a way to automatically load the content instead of having it within
the vent listener.
We should have a function that's going to handle the loading.
So load list from sheet, and that's going to be a function that's going to handle that.
And let's copy all of that into the new load list from sheet, so grab that and copy it into the load
lists from sheet and then whenever the button gets clicked, we're going to run the load lists from
sheet function instead.
And this is going to give us an opportunity to automatically load that.
And I'll just read or organize this button so that we have all the functions after the event listeners,
and let's double check to make sure that it is working.
So it is working.
And we want to trigger the loading of the list content from the sheet.
And we can update the street value idea as well, so that way when we come to the page, we can just
see that the word list is loaded and we're ready to start the game with this word list.
And we don't necessarily need to run the share link.
So let's passing a boolean value into the load list and have that.
So going back and running blockquote here.
For that listener, and we'll run the load from [REMOVED] function and here we're going to pass in a
boolean value.
So whether we want to load the list or not.
So, Passan, true that we want to load the list and over here we'll pass on false.
And this is going to be only specifically whether we're going to be loading the list or not, and that's
going to be where we're creating the Carelink.
And this can just be boolean value, so just call it Bux and we'll check to see if Bueso if it's true,
then we're going to load and create the shearling, otherwise we're not going to load and create the
shearling.
So wordlist is loaded, so ready to start the game.
And we can guess so we've got 11 words left, so we are loading the list from the sheet, whereas here
if we want to load my ID, it's going to create the shareable link as well as load the list.
And we might also not want to show the list of words.
So that's another thing that we can control on the Boulin, so where we're outputting and creating that
element of that span.
And over here, we can add the spin or we don't have to add the spin, so the word list is created and
over here will show the word list when we load it.
So these are some of the options that you might want to consider.
So new word list is loaded.
And you can go through and you can just make sure that all everything is working as expected and play
through the game, and this is also going to provide you an opportunity to load different word lists
so we can load by it.
And if we want to play this wordlist, we just start the game and it looks like it's not actually generating
the list properly.
So it's not using the sheet ID.
So the reason is that we've got the sheet ID value, but when we're passing it in to create the share
link, we're using the other ID.
So let's add and update that where we're creating the share link.
So now we should be able to select a link, copy it, load the sheet data and actually have the right
link here.
And using this link now we can start the word list and it still looks like it's loading the wrong word
list, the wrong ID.
So let's double check and see what's happening here, that why it didn't load the right word list,
and oftentimes you do have to play through it a number of times just to see what's going on and why
it's not loading the right word list.
So it's not passing in the rate sheet, it evalu.
And that's because the sheet ID value is coming from the ID, so it's populating a default value.
So we need to handle that as well instead of populating the ID.
Well populated only if there isn't Web URL with a Nidhi.
So let's try that one more time, and this time it produced an error loading the list.
And we also need to set the sheet idy value here if it does have the parameter so list loaded and this
time it is worth loading the right list.
And this is the one where we've got all of these test values.
So play through the game and just make sure that it's working as expected and try a different things,
you can also try out different conditions to display content for the user.
We've come to the conclusion of this project, so now it's up to you customize the conditions of the
gameplay and allow the user to generate their own URLs.
You can update these parameters, however, best suited for your needs, have different screen options
depending on conditions.
So where we had the condition where the user can load that ID or if they've already created a list by
the ID, they can just share the Web URL, try to play the game, update the tweaks and debug as needed.