So this lesson, we're going to do some final tweaks, adjustments, and in the end game, we want to
show all of the remaining cases and this one, we can select them using the query selector, all so
within and game.
The game is over at this point.
So either way, if the user has gone through to the end, let's select all of the elements that are
still hidden.
And the one thing they all have in common is that they're all using the same class, which is case,
and we've been removing them one by one as they're not visible anymore.
So all the ones that still have the case, I want to be able to show.
So they're going to create a node list of all of those elements and then looping through that node list,
using for each and then selecting a function.
We can grab the elements individually.
And what we want to do is we want to update the elements.
So if the element itself has a class of muted and this is where we check to see what the classes are
on that particular element and if it's class list is contains, this is a really useful method under
class list where we can check to see if a particular class exists in the class list.
And if it does, then that means that we want to reveal that value.
So looping through all of them and we can take the text content and update the text content to whatever
is contained within Val, because remember, we do have all of the object information contained within
the element itself.
So once we've got the element selected, then we can get access to those values and we're going to add
in one more class and adding in a class of reveal.
So we're going to do set that to have a font color of red or something.
So going back into the styles and also did want to update's.
So let's add in reveal first and this can have a color of red.
So all of those are going to get revealed now.
So let's move the sides down.
So starting side, top position and I'm going to update this to maybe 40 and so top 40.
So just make sure it's starting at the same spot.
So that's shifted down these elements and the amount that we're adding, I'm going to add in another
five there so that we have a little bit more spacing with them, a little bit bigger.
So now we're ready to try the game out and just make sure that everything is working as expected.
So the player comes into the game, they click a button, they see that they've selected one.
Now select zero cases because we've already got that within the setting.
So remember, it's dynamic.
We're going to decline the offer.
And now it says that we've got 10 select ten more classes.
So declined the offer, go in and select ten more cases and we should be coming up to another offer
shortly.
So we have an offer, number three, so we get 18 or we can select two more cases.
And the reason we're getting 18 is because we've got five that are hidden and the only big one is 75.
So that's why it went down a bit.
So let's go ahead and decline and see that we get a select one more case.
So now we're up to twenty seven because we got rid of some of the lower ones.
Let's decline it again.
And this was actually going to be our last offer.
So we're getting 38 on our last offer.
So either can either accept it and take the 38 if we think we've got a one in the case or a decline
if we think we've got 75.
So this is a good decision point and I'm just going to accept it.
And it says you earned thirty eight.
So something went wrong there.
And it also showed all of the elements.
So something is a little bit wrong in the source code because we went and we showed everything, whereas
we wanted to hide all of the content and we only want to show the ones that hadn't been selected yet.
And we also noticed as well that because we've put it in game end, we can still click the elements,
but we can't show them.
So something is still wrong there.
And within testing, sometimes it's good to cut down on the size of the values that we have.
So you can really easily do that because remember, again, that we're fully dynamic or we should be.
And that's another thing that we can test now.
So let's see what happens when we go down to four cases and start the game.
So select cases so divided at nicely select our main case and great job.
So now we've got an offer of one hundred or select one more case and two bad.
I got rid of the two hundred so the offer went down and if I decline it then your case has two tickets
so.
That's right.
And it showed all of the ticket values that were available.
So this is something that we don't want to do because we want to hide this element.
So I actually want to remove those elements from the page when they've been selected.
Another thing that you might want to do if you're troubleshooting, I know we've got a lot of console
messages, so that can lead to some confusion.
And let's do a find and replace and I'm going to replace all of the console log with the backslash Xbox
console log.
So that will disable all of them and in brackets, just replace all so we can save it and then we can
troubleshoot it a little bit better and see what's exactly going on, because we don't know why we're
not getting the deal proper.
And one of the things that we can immediately tell that's wrong is that we don't need to be looking
for ones that have muted.
We want to look for ones that don't have muted.
So let's save that and refresh and try it one more time.
So select a case.
Select number three.
Too bad.
Let's decline and again decline.
Your case has one.
So that's right.
And the other one had to.
So that worked out right.
And that worked out correctly and that turned out right.
So one more time we're going to play that through the game.
And this time if we get an offer, we're just going to accept the offer.
So we earned 67 and it showed that we actually had to in our case and the remaining ones were one and
two hundred.
So you can still hover over those, but they're not clickable anymore.
So all of the gameplay and everything looks like it's working properly and use console log to debug
as needed and as well set up different values.
And because it's made dynamically, this is something that we should always test as well.
So test it with less clicks.
So give yourself some time or you could just play through the game as you expect, update the offers
as needed.
So the offers generally you're not going to get all of these offers at once, so maybe update these
to be better intervals.
So all depending on what you want to set the game to and how you want the user to play through the game.
So now that that's all set up, coming up next, we're going to do a final code review and then it's
going to be up to you to take the game, extend on it and try it out and get familiar with some of the
functionality we've covered in the earlier lessons.