Welcome back, and we're going to be working on some HTML, as well as a little bit of JavaScript to
connect our HMO elements to the JavaScript code, we've already got our basic setup.
We've got the HTML file, the case and the case file, as well as we've got a window open on the left
on the right hand side.
So this is the live preview and this is available in brackets.
You can also go to open up the file in your own editor and your own browser.
And while you're working on the file, it's always good to be able to see it visually.
And the reason I do this is for the course.
And then as well, I'm going to open up the developer console in the bottom right hand side so that
we can as well communicate between what's happening on our page and what's happening within our code
and our script.
So we're going to be able to see the HTML as we make updates.
So we do need some basic HTML structure in order to get started.
So I'm going to add this into the body area.
First, let's do a quick beautify, clean up the code and save it and we're still getting that helo
popping up.
So let me just get rid of that because we're not going to need that anymore and we're not going to need
it in our game.
We're going to do some really cool things that the game and setting an alert is actually not one of
them.
So setting up a div and usually like to have a top bar here in this can be how we can communicate so
we can have some information, maybe a start game button in there.
And this is kind of at the top of the screen that we're going to be placing this so class and adding
in start and then we're going to it as a button.
So we'll select the element by start and then we'll do some styling and create buttons because we probably
are going to need a few different buttons within the game.
Also, let's create another div and class of Maine.
So this is where all of our main game areas are going to go.
We're going to have to side menus.
Sidebar so left side and a right side.
So let's create those separately.
And these can have a class.
They can have the same class as they can be a cell or a column.
How about we just call it column side so that we can distinguish it from the right side because we are
going to need to use JavaScript to place content into this element and also the class of game area.
And this is where all of the main gameplay is going to go.
And I'm going to float all of these to the left.
So that's where I'm going to add in the cells.
So all of the cells are going to just be a left float and align them.
And you see three column output.
So do one last one.
And this is going to be a cell as well and the right side.
So if we ever want to put anything on the right side, I've got auto closed setup on brackets that supports
closing it automatically and then also for communication with the user, let's create a few models and
these models will give us an ability to send some information.
So we need one model for being able to communicate the next step and then another one where we're going
to show to the user just a message.
So this will be our message model similar to one is going to be used just for sending in messages.
And then the other model that we're going to create is going to actually have the action.
So where the players making the decision, whether they're going to take the deal or not.
So call this one model content.
And I usually like to add in the close button because this one, the user's going to need to close it
or they can click off of it to close it.
So, of course, we're going to set all of that in the upcoming lessons.
And I'm going to just add in the little times X there so we can close that.
You can see it being showing up here within the display area.
So that's our first model.
And then, of course, we also need an area for some content.
So div class and this can be the model body.
And for now we'll just put test content and we're going to update all of this with our JavaScript.
Let's duplicate this and we'll use some reuse some of this HTML code for our model too.
So we've got model two and we can have model content so that the structure of the popup can be the same.
We're not we don't want to have a close button because we don't want users to be able to close it.
We want to be able to pass in the message and we want the users to be able to make a decision in the
screen.
So we're going to add in the model body in here.
So we call this model body to that so we can distinguish between the two.
And I need to also to move this one down.
I do the same here because I want the model content to wrap around the model body.
And then so the model body is going to be the content that we're updating.
And then we also want to have another div at the bottom.
And then this is going to contain the various options that we have for the user because we're providing
the user an option.
So this is going to be a deal offer and we'll give another class so that we can style them the same.
So there's going to be a difference between a deal and a no deal.
So usually if the user presses deal.
And they're accepting the offer, and if they press no deal, then they're not accepting the offer.
So just and I just realized that so it's a little bit easier to read.
And I'll move up the screen and paste this and I'll move this over as well.
And then this one.
The only difference here is going to be this will be no deal.
We want to be able to distinguish between them and this one.
This is the user declining the offer.
So we're going to place the offer in mortal body, too.
And then the users are going to have two options.
Either they accept the offer or they declined the offer.
So that's our basic HTML structure and we shouldn't actually need more than that.
So let me just clean this up.
And of course, right now it doesn't look like a whole lot.
And we need to apply some styling and also we need to hook up some of the JavaScript.
So let's create our basic JavaScript structure as well.
So we're going to wrap it all within one object.
And this will be an object that we're going to invoke and all of the gameplay is going to sit within
this object.
So usually the way I like to do this is just to kind of have a separation from it.
And it's going to invoke this particular function to return and it's going to return the Init object
as the init function that, of course, we're going to still create.
So in it so it's returning back an object and then using the document add event listener for the DOM
content loaded.
So this is the same thing that if you've got if you've worked with a query that you see that we've got
Dom content loaded and it's waiting for all of the DOM content to load.
And then what we're going to do is we're going to initiate the API and IT function whenever the DOM
content is loaded, when the page loads and init function.
So it's all wrapped within that app object.
Sure.
That everything is working properly.
We're going to have the ready console log ready.
So what's happening here is that when the page loads in the document at event listener and listening
for Dom content loaded.
So this is the same thing that you do with G query to make sure that the DOM has loaded before you try
to interact with the elements.
And because this is a DOM based game, we've got to make sure that the page content has loaded that.
So we've got Dom content loaded and then we're running the app in it and the API in it is referring
to the app object that has a function inside of it, which is in it, and it's returning the iron.
It is just going to be a self invoking function.
So of course this is just one way to structure application and it's going to be a self enclosed object
the whole entire game.
It's going to make it a lot more flexible and easy to bring into other JavaScript projects so that we
don't have any overlapping values and variable names.
So go ahead and set it up.
And you should be at the point where when your page loads, you should load some of that HTML as well
as see already within the console of your Web browser, and you could be ready to move on to the next
lesson.