Hello and welcome to our set up lesson in this lesson, we're going to set up the HTML structure for
the application we're building as well as connecting our JavaScript has JavaScript objects to the elements
in order to utilize them within the coding.
That's coming up in the upcoming lessons.
So, first of all, let's set up a div, give it a class of message.
This is going to be our main communication element where we can send messages to the player.
Also another div where we've got our main play area so we can call this user play.
And this is going to be our main container class where all of the gameplay is going to take place.
We have to have an input where we are going to ask the user how many numbers of players they want to
be dealt in setting up a default values.
So set up a default value of three next, adding in a button and this button is going to be the one
that's going to start the game.
So give it.
Some content that says start we need to have another button and this button are going to attach a class,
so this class is going to be just hide.
And for the high class, this is going to give us the ability to add some styling in order to highlight
elements, display and then create another diff, give it a class of gameplay.
This is where the game play action is going to take place and we're going to attach all the other elements
and all the functionality via JavaScript trying to do as much as possible with JavaScript.
Another element that we can use, and this can be some response data.
So I'll leave that right at the bottom.
So the next thing that we want to do, once we've set up our basic structure for the game and the way
that I usually try to look at this is when I come into the game, what information do I need from the
player in order to begin playing?
So we obviously need a start button and we also need to have a number of.
Players that we want the player to select, so let's add that message in there, so select number of
players.
So refresh and then we've got the message to the user.
We also need to hide that attack button because we don't need to use that quite yet.
So ad in a class and this one can just say display none.
So that will hide it from the visible area and using JavaScript will show that to the player when the
time is right and we want them to use it and interact with it.
So right now we have the player coming in.
It's a select number of players and then there's an input here where they can adjust the value.
So by default, it's three so they can move it up or down.
And then we've got a button that will start the game.
So now we need to connect these elements using JavaScript.
So I'm going to use CONSE because these are objects and they're not going to be changing.
So the main one is our message area that we're selecting first using query selector, select the element
with a class of message.
Also, we need to select that mean button and we're going to select all of the buttons because we've
got a couple buttons so we can use query selector all to select all the elements that have a tag of
button.
And try to make it as dynamic as possible, so this gives you the ability to add more buttons and also
select them and bring them all into the buttons, object also our game play area so we can just call
that game play.
Using documents and we only have one element with a class of gameplay, so we're using Querrey selector
selecting the element with a class of gameplay and bringing it to the gameplay object.
We also have one called user place.
So that's our main object screen area that we're going to use.
And there's only one of those as well.
So once again, it's query selector.
And if you do use query selector all, then it's going to create a node list.
If you only have one element they're trying to use, but you have more than one with the same class,
then it's still going to only select the first one.
And this is where we can add response information.
So it'll give you more insight.
It'll give the player more insight on what's happening within the gameplay.
And that's what we can put down here.
So this will output some data for the player.
So let's refresh.
And usually I like to go into the console just to make sure that I've got the elements properly.
And you can see that once you enter in the JavaScript object, it's going to connect it to the appropriate
element.
And using Chrome, whenever you hover over the element and the console, it's going to highlight it
in blue, within the visible area, within the display area, the buttons, we've got a node list as
we've got two buttons, we've got one and two buttons.
We also have gameplay.
So that element.
So this is our main gameplay area and we don't have any contents in there yet.
The user play, of course, that's that whole element where we were having our gameplay object.
And then lastly, we've got our RSS.
So this is our response data.
So this is where that can go.
No content yet in there, but we do have it connected now as JavaScript objects.
So we're ready to go on to the next step.
So go ahead and build out the structure of your game and always think of it.
The way that you build it out is you come in as the player and what do you want the player to do?
What's the first step you want the player to take?
And in this case, we want the player to select the number of players because it's going to determine
everything, how the cards are dealt out, how many hands get cards dealt to them.
So there's quite a this we need this information right in the beginning and we want to make this information
dynamic.
So that's why we're asking it from the user in order to start the game.
So coming up next, we're going to create the deck of cards, as well as create some interaction for
the user to start the game.
So that's all still to come.