So let's now move on to the game logic,
and for that let's start with that start new game button.
Because keep in mind, by default,
this game board shouldn't be visible.
And of course by default,
we also shouldn't have any selected fields in there.
So therefore first of all, in the index HTML,
I'll get rid of these dummy values here,
and also the disabled classes
that we have on all these list items.
Let's delete all of that to really clean this up
and start with an empty game board.
And in my CSS files, in game CSS,
this button which we have here,
or actually this entire game area I mean,
this should be set to display none.
So this should be commented in here on the active game,
so that we don't see anything.
Instead it's now the start new game button
that should show this game field,
but of course only if we did enter some valid player data.
Now for that, first of all, back to app JS,
let's get access to this button.
This button here that says start a new game.
And to get access to it, it again might be easiest
to just add an ID to it,
and give it the ID of start game BTN, maybe,
and then select this button by that ID in app JS.
Here, where I also select my other buttons,
I'll have the start new game BTN element constant,
which stores a pointer at this button,
which I get with get element by ID,
and then that ID which we just chose.
Now this start game button should be connected
with our function that then actually displays
that game board and therefore here,
I'll connect this start game button element
with an event listener,
I'll listen to a click event to be precise, and in game JS,
where we haven't added anything up to this point,
I will now add a new function,
for which the name, start new game should be quite fitting.
And we'll add logic to this function soon,
for the moment here in app JS,
we can now target this start new game function.
Whoops, start new game.
This function which we just added,
again by just pointing at it.
For the reasons mentioned before.
And then here in game JS, in start new game,
I wanna make the game field visible.
I also later wanna do a couple of other things,
in case we had a running game before and I wanna reset it,
but for the first time that we start a game,
I just wanna show the game board.
Now keep in mind that we have this active game element here,
which already is an ID, hence we use the ID selector here,
and of course therefore we can again select the same element
in JavaScript, so that we have access to the element,
where we need to change display none,
to a different display style.
So back in app JS we can get access to our overall,
active game section, that it is here.
By adding a brand new constant, maybe here,
where I also have the other none button elements,
and I'll name this game area element,
and then get access to document,
get element by ID, active dash game,
that's the ID that was added to this HTML element.
And now that we store this constant here,
in game JS we can use it,
and here we can then use that game area element,
which we just created, to get access to the style property,
and then the display property and set this to block,
and this will display this game field
when that button is clicked.
So with that, if I click start new game,
this field shows up.
But I actually don't wanna show it
if we haven't entered valid usernames yet.
So just setting it to block like this is not correct.
Instead I wanna check whether we have valid usernames,
and how can we check this?
Well keep in mind that in app JS we have this players array,
where we store our player data.
That's also why it's useful to store some data in JavaScript
and not only in HTML.
Because now I can just use this JavaScript data structure,
which I have here, this array, and look into that
to find out if valid names have been entered.
Because we update the names in there
in our save player config function.
That's what we implemented over the last minutes.
So in game JS here, before I set the display to block,
I wanna add a if statement, and check if players,
for the first player, the name is equal to an empty string,
or, that's this or operator we also learned about,
if for the second player with index one, the name is empty.
If either of the two players has an empty string,
which has our initial default value,
which is not the value we want,
then we can show an error to the user and not continue.
To prevent further execution of this function,
we learned that we can use the return keyword,
the return statement.
Once this executed, any code thereafter,
like this code, won't execute.
And I don't wanna execute this code
if we have invalid input,
which is the case if either of these two players
doesn't have a user chosen name.
We can also show an error and here I'll do it with an alert,
where I just say, please set custom player names
for both players.
You could also output this somewhere else,
you could add a brand new modal with that message in there.
That might be a nice extra practice,
but here I'll use the good old built in alert,
which we can use here in the browser.
Now with that, if I save this,
if I don't set my own player names,
if I click start new game, I get this warning,
and the game board doesn't show up.
If on the other hand,
I do set my own player names for both players,
then we don't get the warning,
and instead we get the player board.
If I reload and I only set this for one of the two players,
then I still get the warning,
because we are checking both player names here.
And we have the or operator here, and not the and operator,
because we wanna ensure that if either of the two names
hasn't been set, we show this.
If we use the end operator instead,
then we would only show this warning
if both players haven't been set,
but we would be fine if just one of them was set.
That's not what we want here,
we wanna ensure that both players were set,
and therefore we check if either of the two hasn't been set,
because only one player not being set
is enough for us to show this warning.
And now we have the correct logic here for starting a game,
and for showing this game board then.
So for this, let me enter this again,
test this one last time, and now that's here.
And now we can continue with that,
and we can now work on the actual logic
for making these fields clickable,
because at the moment they only look like they're clickable,
nothing happens if you do click them.
And then thereafter, we also add the logic
for checking whether we have a winner.