Original subtitles

Welcome back to project number three

of this section,

and this project is going to be the most exciting one

because now we will take everything that we learned

in the first two projects to a whole new level

and build a really cool and amazing game.

And this is the game that I was talking about

and it's called the pick game.

Now this project here

is really going to be a practice project.

So a project where you and me

will together reinforce all the skills that you have learned

up until this point,

because remember from the last section,

reinforcing knowledge is one of the most important things

that you can do to learn, right?

So in this project,

I will do a little bit less explaining than before,

at least about the stuff that we already learned,

because we are really just practicing here. Okay.

Now, if you're in a hurry and just want to learn the basics,

please feel free to skip this project.

But of course, I would still really advise you

to code along with me here,

but now let's see how this game actually works.

And in fact, you can try that along with me

because this time I hosted this demo, on a live website.

So you can access that by pickgamev2.netlify.app

And the link is also in the read me file

of the repository for this course on github.com.

But anyway, this is more of a real game now

because we actually have two players.

So you can play this with a friend or something

or just against yourself.

So the idea is that we roll a dice.

And so now I'm playing number one.

So this one is now the active player.

So I roll a dice,

And so you see that I rolled a two.

And so this number gets added to my current score down here.

Okay. So this is my current score for the current round.

And this year is my total score.

And so let's see how that's going to work

so I can roll the dice again now if I want to,

and now I rolled a four

and that four got added to the two that it had previously.

So now that's six and now I can choose to hold this score.

So if I click this button,

this score of the current round

will get added to my total score,

which right now is zero.

And so when I hold a den, my score will be zero now.

And we switched to player number two,

and now I can click roll dice again.

So we rolled a two and I can hold again.

And so now play it two as two points.

Now, the thing here is that whenever we roll a one,

we lose all our current score

and it's then the next players turn.

And so that's why sometimes we need to hold or points.

So let me show that to you.

And indeed, I rolled a one right away.

And so now it's player two again.

So let's keep rolling the dice.

And I will now again, wait for one

so that you can see that all my current score will be lost.

So that's a lot of points already there.

And now I rolled a one and a player lost all the points.

Okay. So I could have hold the points

and then I would have added all these points

here to my score.

So let's do that here

and again, a one.

And so yeah, now here I hold

and I edit them to these points.

And I think by now you get how the game works, right?

So the first player to reach 100 points then wins the game.

But I will now not demonstrate that

because that's going to take too long.

So we have these two buttons here,

and then we also have just like in the previous game,

a way of resetting the game.

So when I click here, as you might expect,

this dice will disappear

and all the scores are set back to zero.

And to understand this game a little bit better

for this application,

I designed something called a flow chart.

So let's take a look at that.

And this is what a flow chart looks like.

So basically it's a representation

of everything that can happen in the application.

So on the left side, we have in yellow,

the possible actions that the user can take.

And then from there we see what happens in the application.

As one of these options is basically chosen.

So as one of the actions is executed.

So whenever the user rolls to dice,

so clicks that roll dice button,

then we need to generate a random dice roll.

Then we displayed at dice roll,

and then we check whether it is a one.

If it's not one,

then add the dice roll to the current score.

And of course this play it, right?

So that is exactly the behavior that we saw

when we tested out the game earlier. Right?

Now, if the dice roll is actually a one,

then simply switch the player.

And so in this case, the dice roll will not get added

to the current score.

Next, the other option is that

the user wants to hold his score.

And then we add the current score to the total score.

Once that is done,

we must check if the score is above or equal 100,

because as I said, the player wins whenever the score

is at least 100 points, right?

And if it's not, then we just switch the player

and the game keeps on running.

Finally, when the user chooses to reset the game ,

we simply set all scores to zero

and set the player number one,

back to being the starting player.

All right. So this is a very nice way again,

to visualize what happens in the application.

And it's also a very good guide for us

to actually implement the application in coat.

So usually whenever I built a project like this one,

I like to draw a flow chart like this,

and it doesn't need to have all this precision

right from the start.

So we can just start out with a rough sketch

without the complete plan of what we're going to build.

But anyway, this is very helpful

before we actually start writing code

to have a good idea of what we will have to do.

And if you want to build your own flow charts

that look like this,

you can do so on diagrams.net.

So that's where I designed this flow chart,

and it's a very nice online drawing application

that is completely free and really easy and fast to use.

Now. Okay. And so now as always let's open up

or project folder. So I have to start a files here already,

and now I need a new vs code window.

And then I just opened a Pitt game.

And this time, since the application needs this whole space,

let's actually put it here on a separate desktop.

And then as we attest out,

I will just move here from one desktop to the other.

So let's make this bigger this time.

And so like always, we already have all our files here,

so let's take a look at them and JavaScript.

So here as always just the use strict,

then here we have all the styles

that we need for the application.

And we will take a look at them as we go

through the project.

And then finally the HTML file.

Okay, and they also actually included

the image of this flow chart here for you,

so that you can maybe take a look at it yourself

to make sure that you really understand how it works.

Okay. So take a minute or two to maybe test the app again

and check out this flow chart before we actually start.

Alright. Also, I wanted to show you that I have one image

here for each of the dices.

So dice one looks like this,

like two, it looks like this

and so on and so forth.

So we have one image for each of the possible six numbers.

So that's going to be important later,

but now let's just start to,

write a little bit of code here.

Let's get ourselves a new terminal here

so that we can take a look at the application

as it looks right now.

Interior. I like to minimize it a little bit life server.

Okay. And so this is our life version of the pic game.

So again, we are here at this local host at port 8080.

And if you are seeing some other ports,

that's no problem at all, as long as it works.

So maybe you still have something running on this port,

maybe from the previous project.

And then this project will run on another port.

That doesn't really matter.

So right now in the starting point,

this is what our application looks like.

But of course in the demo,

we don't see the dice in the beginning

and we don't see any scores here.

Okay. And so the first thing that we're going to do

is to basically put these scores to zero

and make this dice disappear.

And so that's going to be basically

the starting condition here.

So let's go back here to the coat.

And let me just tell you where

these initial values come from.

So this is the 43 score that we just saw,

and this is the 24.

And so let's take a moment to inspect the code

because as you already know,

we need the class names.

And in this case also the IDs to then identify

and select the elements.

So basically here we have one of these sections here

for each of the players

and you see that the first one is player zero.

And the second one is player one.

And I will explain you why

the players are called zero and one

instead of one and two,

probably in the next lecture.

So it will make sense by then.

okay. But now about the scores,

they are stored in this element

and in this one here.

And so you'll see both of them have to score class,

but then each of them has a different ID.

And so this time we need to select these two elements

using their unique ID instead of a class name.

So that's the idea of score dash dash zero

and score dash dash one.

So let's do that.

So const score one and then document query selector.

So this is the way that we learned it before.

And now here, we actually need the hash symbol.

So score zero. So actually I'm interested in zero here.

Okay. And so again, now we used the,

this hash because that is the selector for the ID

and a dot that we used to use is only four classes. Okay.

Now, when we're selecting using an ID.

Then there's actually another way of selecting an element.

And right now that's exactly what we're doing.

So we're interested in IDs, not in classes.

And so let me show you that other way of selecting elements

that only works by ID.

So let's call this one, score one,

and then again, we use document,

but then we're not calling query selector.

Instead we call get element by ID.

And then here, we just pass in the name of the ID.

So just score one.

So without the hash here,

because now we're not writing a selector,

we are only passing in the name of the ID

that we're looking for. Okay?

So this works exactly the same as this,

but the get element by ID

is supposed to be a little bit faster than query selector,

but I guess that's only relevant

if you're selecting like thousands of elements at once.

So usually I like to always use query selector,

but I still wanted to show you that there also exists

get element by ID. Alright?

And actually let's call these two here, score zero L,

which stands for element

because you might then confuse maybe this variable

here for simply the score value of players zero. Right?

And so in this case,

we are making it really clear that this is a dumb element.

So score is zero L all right. Okay.

So we're selecting these here

and now we can use the variables to do something on them.

And again, we do that

because probably we will need to do something with

these selected elements multiple times

throughout the application.

And so we just defined them once at the

top of our file instead of having to select

the same elements over and over again.

So let's just add a comment here.

And comments are also a good way of structuring the code

and also of planning how we will build some features.

So selecting elements.

And so in this project,

we will try to get a little bit more used

to actually write in comments. Alright?

Anyway, let's now set these initial conditions

of score zero element.

And then as you know, we use text content

and then we set it to zero. Alright?

And now the same four score one score,

one element.textcontent to zero.

And here we are specifying numbers, not strings,

but JavaScript will then automatically convert them

to strings to actually display them on the page.

So if we go now to the application

that should already be in effect,

and indeed you see that now the scores are actually at zero.

Great. Now all we have to do is to hide this dice here.

And so let's do that using the technique

that we learned in the previous project,

which is basically creating a hidden class

and then add that hidden class here at the beginning. Okay.

So let's go to our style.

And right now I don't have that class yet.

So that's just created

and I can close the terminal here.

Let's just do that at the very end.

So we create a class like this

and then we just set the display to none.

So that's exactly the class that we had in the

previous project as well. Okay.

And so now we can just add that class

to the dice at the beginning of the game.

So that's easy enough,

but first we need to select it.

So let's call it dice L for the dice element.

Let's check out what the ID or the class of it is.

And here we see that it's actually just this dice class.

So this image with his class of a dice,

so document not query selector dice.

And so here we have to start in conditions

and now let's simply do dice element.classlist.add.

And now simply this string,

which contains the name of the class

and that's the hidden class, give it a safe,

let's check it out.

And indeed, now the dice has gone

and let's see the HTML here, actually,

you now indeed we have the hidden class here,

besides the dice class. Great.

And then as we implement the roll dice functionality,

of course, we will want the dyes to be visible.

And then we can simply remove that class

again from the dice. Okay.

And actually that's exactly what we're going to do

in the next video.