The next step in the build process is to start the game in the previous lesson, we set up the HTML.
We've got select number of players and a start button.
So this is where the player is going to start all of the interaction with their game when they hit start.
And that's where we need to handle picking up that event, adding an event listener to the start button.
So selecting the button, we're going to add an event listener to all of the buttons.
We can do this in a number of ways.
So we've got buttons and we can use for each in order to loop through each one of the buttons and then
setting up a function.
We can pick up the item.
And then as we iterate through, you can see in the console log we've got all of the items are going
to be listed.
So when we refresh, we see that we've got the start button as well as the attack button.
So both of them get listed and that means that they're being represented as objects.
So we can add event listener.
So selecting the item.
And using JavaScript add event listener method, we can listen for a click on that event and send it
over into the play game function, and that's where we can handle any of those events on the button.
So next thing that we need to do is set up the play game function where we're going to initiate the
game play.
And this is also where we're going to detect which button got clicked.
So we've got play game we're passing in that event object.
So it doesn't matter which button gets clicked.
And of course, we only do have the one when we're starting.
So let's take that information from the button and figure out what button got clicked so we can use
E target so that target and getting that inner text or we can do text content and all console log out
the contents of temp so that now you can see that when we hit start, we get start output into the console
so we can use that information by applying a condition and checking to see if temp is equal to start.
Make sure that if you've got a capital there that you're keeping it capitalized because it's getting
all of the text content from the button exactly as we're expecting it to be.
So once we've got that start, we need to kick off the start game function.
So this is our start game function and we'll kick that one off.
So that's the main one that we're going to do.
And this is where we're going to handle the start game functionality.
So everything we need to do in order to start game is going to be contained within this function.
So in a hide the start option, as we're starting a brand new game function in order to toggle the buttons,
so create a function and button toggle, which will make it really easy to hide and show because we're
not going to have the start button in the top button on at the same time.
So we're taking button number one or buttons number one from the buttons object and applying updating
the class list and all we're going to do is toggle the class of hide.
So if it has it, it's going to remove it and if it doesn't have it, it's going to add it.
So taking buttons.
So whenever a start gets clicked and this will hide the start button.
So maybe that's the first thing that we're going to do after we start the game.
We're going to do a quick button toggle because we don't want the user to be able to press start again.
So we see that attack.
It's now shown.
And if we hit attack, then we could also do something to handle the attack button and that could also
be toggling the buttons.
But in this case, we want the TAC to show and we want the user to constantly be able to hit attack.
So we'll keep that one in place.
So going back to the start game function, so this is where all of the start of the game takes place
and we need to first pick up the number players.
So using documents, query selector or selecting the input element.
And we only do have the one input.
So we're selecting the value from that input element.
And we're still going to be using this input under attack because it's going to give us a number of
how many attacks we want to launch so we can reset that default value.
If we want, we can reset it to one.
Once we start the game taking that element object, we're going to reset that value back to one.
So this is just going to say one right now, and that's how many attacks we're going to launch at each
iteration.
So next to that we need to do is we need to make the deck of cards.
So that's coming up in the next lesson.
So for now, we have the game starting.
We get the player to select the number of players they want.
We hit start update that input to be one, and then we've got the option to attack.
So this is the number of attacks that we're going to launch.
So that's all still to come.
And we're going to work that into the gameplay.
So go ahead and add the option to toggle the buttons, updating the class list.
And you can also see that when you go to inspect on that element, this one has the class of hide and
this one doesn't have any.
And when we start out initially, the attack has.
So when I click start, that hide goes to the start button and it gets removed from the attack.
So that's where we're targeting the button.
And if we're to do this function again, we can launch that into the console.
And you can see that every time I toggle the button, we're not returning anything, but those button
classes are being removed and added.
So that's the one thing that we did within the start.
So we changed the view.
We also picked up the start button content and we have a function that's going to start the game.
So we've got the number of players and this will dictate how many players we have to deal cards, so
to.
So next we need to make that deck of cards so that we can deal it out.