Hey, welcome back in this lesson, we are going to be focusing on JavaScript whenever we start the
game, we're running the IANSITI function.
And so this is where we're going to focus, what we're going to be presenting and working on in this
lesson and most of the upcoming lessons, because, of course, we do want to focus as much as possible
on JavaScript.
So let's first make some selection of elements.
So within the page, we've got a number of different elements.
So we're going to select them and give them an object name.
So they're all going to be sitting within the page object.
So that makes them a lot easier to select and keeps all of those elements within that one object so
it's easier to work with in the upcoming lessons as we built the game.
So we're making a selection of Motal one.
So that's the element with the class of Motal one.
It's now going to be within page Motal, one that makes sense.
And when we want to reference that particular element, we can easily select that.
Let's also get model two.
We're going to do the same format.
So that's easier to remember.
And when we do need it within the code, we can select it.
There's also going to be the model bodies as well.
So adding in those and this is going to be modal body and selecting the element that just has a class
of modal body.
And I don't think we had the one in there.
So just to model body and then the second one is the one that's going to have model body too.
And this is the second element, and this is the one where we're actually making the deal with.
So we could also rename them as well to keep that in sync.
There's also the page starts.
So we want to be able to select that start button because we want to make that element interactive.
So page start.
So these are all elements on the page, so keep them all within the page object and using documents.
And how about we use query selector again?
It's one of my favorite ones to use.
Often do use query selector within the selection process because it allows us to use the cluster of
selectors, so save it.
So that gives us the start button.
And now to make the button interactive, we can add an event listener to the start button.
So let's do that where we've got the page start and add event listener and the event listener that we're
going to listen for is a click.
So this is going to make that start button interactive and it's going to kick off the start game function.
And this is where we're going to load all of the default values that we're going to initially set whenever
the player starts the game.
And also just going to make sure that I do include that start game function so I can have a list of
functions as well in the start game is going to be one of them.
So function start the game and we can enclose it within the app, the main app object.
So start game.
We're not passing any parameters and for now we'll just console log and we'll see game start.
So whenever anyone clicks the start button, we see that we got game started showing up there.
So it's always good as well to test along the way just to make sure that everything is working as expected.
There's a few other ones.
So let me just do a quick clean up of the content so it's a little bit more readable.
So now we've selected a bunch of the elements and these were all for creating those modal pop ups,
which we are going to be making use of, and that's going to be how the player's going to maneuver through
the game.
And that's going to get information from us about playing the game and where they are within the gameplay.
We also need to have a few other pieces in order to make those interactive.
And we're going to do those as we build them and we show them on the screen.
So we're not showing them quite yet and that's going to be the integral part of the game.
So let's load a few more page objects before we conclude this lesson.
So within the page, I've got the main container.
So this is the main game area.
I'm just going to call it game or page con and selecting the documents and once again, query selector,
selecting the element with the class of game area.
So that will put that as well within the page object.
So once again, we can select it a lot easier.
There's the page main area and document and sometimes as well, it's it's it's a good idea to kind of
build these as you need them.
But I usually like to preload the main ones that I want to work with so I don't have to go back and
forth a lot within the code and I can just get right to developing within the object where I'm creating
the interaction.
So there's the left side.
So these are going to be the main game play areas.
This game area, there's the main which is center, and then we have left side and right side.
So selecting those elements, we've got the left side and that one had a class of left side.
I don't think I'm not sure if I did the upper case.
I have to double check that just to make sure and going back into here.
So it's always good to just kind of double check and make sure that you do have.
Everything, as you remember, so we had side with the camel case.
So that's that's fine.
That's in line and we'll do one for the right side.
So we've got the page right side as well.
And selecting those because we're going to be populating all of these containers with content.
And this is all dynamic content coming from JavaScript.
So it's always good to have these all up and already a few other objects.
So once we initiated, I want to have a placeholder for inplay because this is the value that we're
going to be referring to.
So usually when you do create a game, it's a good idea to have a variable in the background that can
control whether the game is in play or it's not in play.
So that one is going to be the one that we're going to look for before we do any functionality.
And if this is false, then none of the functions are going to work.
The only one that's going to work is going to be the start game.
Everything else is going to be disabled.
And if this is true, then this is going to be enabled.
So that's coming up in the next lesson where we're going to do all the start game functionality and
we're going to kick off this game and get it started.
Progress through the game logic.
So that's still all yet to come and make your selection of the elements of the page elements so that
you have them ready when you are creating the game and the game functionality within the game and the
gameplay.
And we don't we can easily populate content within the visible area and communicate with the user in
the player.