Hello and welcome back.
In this lesson, we're going to be doing some bug fixes, tweaks to the code and we noticed in the last
one and where we last left off, when we do the start game, then we're not actually clearing out all
of this content and we've got the content repeating itself.
So it doesn't look very good.
So this is one of the options that we need to do is to clear out that element and all of the content
happens within the gameplay area so we can clear out all of gameplay and have that completely cleared
out and reset back to its original so that we can do that as we start the game, taking the gameplay
object and just simply clearing out all of the inner HTML, sending it back to blank.
So that's just to double quotes there.
So see how that works.
And I'm going to keep the amount of cards to a minimum so that we can really get a better sense of how
this is working.
We're also trying to apply style to card that didn't exist.
So what happened here is that we actually ran out of cards so we had no clear winner.
So we need to have a default winner in both of them actually ended up losing.
So in this type of scenario, this is probably going to happen very, very rarely when we get more cards.
But it is a good thing that it did catch this, that we do see this error being thrown.
And this means that we need to have a default winner no matter what.
So the problem here is that we don't actually have a default winner and we're still trying to pass it
into the updater.
So we don't have a current winner.
But we didn't end up with the playoff round because both of them ended up as zero.
So the current player.
So by default, we should always set a current player and maybe, for instance, the default player
for this round.
It should be whoever the player list is and whoever the first player in the player list is.
So set the current winner to be that player and again, within that current winner.
And this one actually should be no.
So let's update that.
And I don't know if we can reproduce that, but at any point, we're always going to have at least one
winner and it's going to be the first person coming in if it's a complete tie game, if both of them
are running out of cards.
So in this case, we do see that we've got a clear winner here, loser, loser, loss, loss, total
cards.
So we also need to maybe move down this winner, this lost value as it does look like it's coming in
and we're updating the inner HTML.
So let's add in to this.
We'll just add in a line break in front of those because we are updating the HTML.
So let's do a quick refresh and start again so we can list the number of tax and eventually we end up
with the winner and then we end up with the start game.
So let's start and in this case, let's do 10 attacks and see what happens.
So what happened here is we ended up with the winner and it didn't continue to play because obviously
we've got a winner.
So we need to actually update and have it out of place where we set that inplay default value.
We need to set that as false so that the game stops playing so it ceases to play once we do have a winner.
So we're setting that.
And once we do determine a winner within that win condition, this is where we can set this value,
the inplay value to false.
So that won't continuously keep playing after we've already found a winner.
So see what happens in this case so we can do the attack and let's do one hundred rounds.
So really what should happen here is and what actually did happen is we only ended up playing two more.
So let's refresh and try that one more time just to make sure that the gameplay once again is as expected.
So if we do 10 attacks, we end up with the winner there and we can see that that's coming in as a winner.
We also probably want to adjust some of our styling that we want.
So there's an overlap here.
So we don't necessarily maybe want that to happen and.
Within that play area, we can set a background color if we want a gameplay area, background if we
want.
Where do we have some settings for that player area, so we've got a height, so maybe if we want to
set a minimum height for that and then the gameplay area, we can have a background color for that so
that this one can always adjust and it's always going to have a white background.
So that way we don't have the overlap as we saw earlier.
So we've got some more space to play with this time.
So let's do 10 attacks, see what happens.
We always end up with the winner or loser, so let's try a different number of players.
So in this case, we've got four players and we can shut the console, we'll get rid of the console
messages.
So one attack and then we've got the last attack ends up with all eight cards.
So this is the end of the game and we should be starting a new round.
Something's gone wrong here where we're not actually looping through and we're not playing the restart.
So something has gone wrong there when we switch the number of players.
And this is why you do really need to try this out and make sure that things are working as expected.
So also, if we only have that one active player, that means that that one active player is the winner.
So where we're sending and we're listing out the make cards, let's check to see if this one and if
the length of player list is equal to one.
So there's another condition here.
If player length.
If the player length is equal to one that we know we've got a game over situation so we can run the
win game function once again.
So let's try that one more time.
We'll do the same thing where we've got the four players.
And we'll run a bunch of.
And we should also have a more clear message here that the game is over, so we've got our basic first
attack there and there wasn't really much of a difference between what was happening with how I guess
how the how many players.
So let's update some of the styling there when we start the game and we output that information to the
user.
As we're still using that same message element, we want to make some updates to that.
So default when we start the game.
Let's select the message elements and style and we'll update the color of it to be read, so we come
in, it's going to be red when we select the number of players.
And then as we play the game and when we hit the start button, we'll update the style and the background
color of it to be black.
And that means that we're going to set it to be red again when we've got the win condition.
So we can better distinguish between when we're starting the game and when the game is in place.
So going back down to our win condition, we're going to update the style value.
And we might also want to make the message bigger as well within our success.
So, again, there's a number of different tweaks that you might want to apply to the game at this point.
So setting up a font size adding.
And so now it's more distinct that the game is over and that we're restarting.
We might also want to change the button colors, the input colors.
So there's another option that we can do where we've got buttons and we've got the two buttons there.
So we'd have to loop through both of them in order to apply styling to them, and that's if we wanted
to apply the styling to them.
So maybe we do want to have a different button for the start, different color for the button for the
start, as well as a different one for the attack.
So going into this, let's set a class of start and this one is going to have a class of attack.
And then within the style properties, you can update those.
You can also do it with JavaScript.
It's going to be a little bit more complex.
So font size and maybe want to make at one point five.
Text line, central line podding and let's sort of background color for this, so set the background
color to blue.
And it's font color to be white and for attack, make the button different so that we can distinguish
between the buttons.
So this is one of the things with the buttons when we had them the same, then it was hard to distinguish
as we flip through the two different buttons.
So now we've got start and we've got attacks.
So it's a little bit different.
Also, maybe we can do it black as well.
Also for the input, we can update the size of the input as well.
So now it looks a little bit small so we can set a default width for this one.
And I don't want to make it too wide.
Let's have a really big font size and see what that looks like.
It needs to be a little bit wider than that.
So refresh and because the font is so big, we need even wider.
And actually even wider than that, so we can enter in three characters there.
So the number of players, 300 players didn't really work out well.
So let's do three players will make it big and number of tax, so do 100 attacks.
So we end up with the winner.
We only end up with four rounds there.
Let's see now we're back onto the start.
So we need to select the number of players so we can do six players.
We've got attack.
So this one has seven cards that one has won.
So I end up with another attack here and we can play it round by round.
You see, that works no matter how many players we end up with.
And now we're back on selecting the number of players.
So it does take some time to play through it.
And you can, of course, adjust how many cards you have by adjusting the number of ranks.
And this is really good for testing.
So once you've completed all of the testing on the application and you're happy with the way that it
works, you can readjust the values and we can have 10 players if we want.
And so everyone's going to get an equal number of cards.
You see that now it's going on to another row.
So it's not really ideal for the size of screen.
Made a little bit smaller.
We do the attacks and you can see that everything is still working and we end up with the ones that
are winning and losing.
And this one, maybe we want to do ten rounds and another ten rounds until one of them actually or two
of them drop out and we get a clear winner.
So it looks like we're down to two and the functionality is working properly.
We end up with the winner total of 52 cards and we can restart the game.
So it's working on the larger scale as well as we adjust the numbers.
So now it's up to you.
Take the code, try it out for yourself, make some adjustments, make some tweaks to it.
And remember, when you are in testing, it works better if you have less cards to deal with and then
you can scale it up and try it out on the larger scale.
You can also go through and you can clean out all of the console messages as we don't need them anymore.
So just going through I've cleaned all of those console messages out.
And coming up next, we'll do a quick code review.