Welcome back, my friends, to another lecture today where we are going to do is we going to deal with
how we can fix those blocks when we have like a result here, how we can just make those blocks here.
So six I should have six blocks on this side.
And when I have six on the other side, six here, I will have.
So that's strange.
Now, how are we going to do that?
So there are different ways, different approaches.
But actually we want to mimic this one here just to be dynamic from the Jaspan.
Now, what I would suggest to do is to create a function and that function will name square block in
inside the function that will have a for loop and that for bloop bloop based on these dice result or
based on the player score area.
How much does values there, how much is holding the value.
Oh sorry I didn't say correctly.
So based on the array value, we need to loop it as many times and we need to put here this HTML content.
Right.
So create a score block.
So the reason why I'm not going to put some parsing, some arguments or the arguments that I would ideally
best will be this player scores my area in the live player.
So two arguments, but because they're defined up here, I don't need to use them so I can use them
right here.
Score block.
So I hope you understand what this score.
So what I'm trying to say, for example, everything that is defined here, this variable dies.
For example, if I want to get out from the condo lock and put it dies.
So if we want to get out from this event, listener these days is a local variable.
So it's only visible.
Its scope is visible here in this in this square selecter.
Right.
Just going to close that one.
And it should give me undefined error or reference error.
That is not defined.
Now, if I tried to use Livescribe flair, I would be able to access it.
And that is zero.
So because this livelier the area, they are declared outside globally right now.
Now, I'm glad you understand all of these things.
So what we need to do is actually call this function.
Call the function.
Score block, so score, block, function, score, block, and here what I will say is let's just grab
the size of the players area of life later and what I'm trying to do here, I'm going to create a switch
statement.
So in this lecture, we are going to repeat what we have learned we got to do for loop switch statement
and we got to do some inner HTML probably right now switch statement.
Remember that a switch statement requires here to have a parameter.
So based on that parameter, the case, we will have different cases.
In my situation.
I'm going to say break here.
I'm going to have two cases, right.
Case one and case zero one, because I only have two players, zero and one.
So they cannot be something else.
So in the first case, I'm going to do for loop with the variable I that will be equal to zero.
I will be smaller than the size of the array that I'm passing for the current player.
And I will say I plus plus no above here in this one, I would like to do something.
So what I want to do is actually to reset.
So first to grab this to show you, I want to grab this div here.
And if anything, that's because the div every look, what we're going to have is going to contain some
blocks.
So I just want to do a basic reset there and you will see why.
So far I'm going to say I'm not going to store it in a variable.
So document dot get element by the key and I'm going to paste is here.
I'm going to say in HTML to empty.
Right.
Otherwise, we will have a problem and you will see I will just comment on that one later.
Now here I will say document that she's going to copy the entire thing and that will be equal to code
black.
Yeah.
Now, this code black, it's a little bit strange for you.
So I'm going to miss one step here and probably I'm going to do this.
I'm going to comment it like this.
Now, these enraged yellow code black should be a variable.
Declared it in the beginning.
Right.
This code black.
I want to contain something.
Code black will contain this HTML structure here, this entire div.
But in order to work here, you need to put it in quotes like that so I now can do whatever I want.
So let's test it out.
So it's going to go for the player zero.
It's going to go in this case.
It's going to look through the size and we are going to have this code block attached.
OK, let's see now.
I'm just going to close it here because we're not cancelling anything.
It is one and it's giving me one there.
So when I go five, six, it's not working, although the size is working.
So if we print out the size, you will see that it's working on the log.
The size is good.
So this loop should be OK, right?
This size should loop as many times as we have.
I am just going to inspect the element console.
So the size is zero at the beginning.
Three nine.
Here it is.
But we don't see this console, these blocks here.
The reason is why.
Because we didn't we we just put only one right now with this.
Plus everything was stored inside.
We're going to append again.
Right.
Same simple logic.
OK, now we're going to have another problem.
So one OK, now I have three.
OK, now I have six.
Good.
Let's count them.
One, two, three, four, five, six, seven, eight, nine, ten.
How come this happened?
Well, this happened because we don't restore every time the size.
I want to start from zero and I want to go to that particular size.
For example, if there are ten elements, I want to look ten times and I want to create ten here because
I do have six at the moment, because I do have six here.
I want to loop six times not to store the previous value.
So by doing this, I'm going to reset reset the inner HTML of this one here to zero every time I loop
before I loop.
So now I'm going to have the exact number of blocks.
Right.
Let's check it out for I've got four then I got ten.
So ten.
One, two, three, four, five, six, seven, eight, nine, ten.
That is good.
But we have one problem.
It's late for one step.
OK, let's fix this up for the other one.
And we need to change the player.
Score this one in order to work.
Why?
Because we do have this.
This is for Player zero score block and we do have another score block for the other guy.
So I'm just going to roll the dice, OK, too.
But I didn't see that change immediately there.
Right.
So now somehow it's working, but it's not working as we want.
So it stop because this guy reached twenty one.
It's even this one here.
It's not filled.
Should be at least twenty one twenty and plus should overflow a little bit here.
And I will tell you how are we going to fix that overflowing issue.
Now the way this is working, it's because we didn't put the function in the right place.
We just put a function after we switch the player.
And I should when we store it in this one, the the area we want to call the function.
OK, so now I expect when I hit the dice, I want the result that I'm going to have here.
I want to be the same one here.
So three.
Yeah I see three there.
On the other hand.
One I see one so eight five plus three was eight.
This reset it before and after that loop eight times now for one plus three was four.
Now the other guy is twelve.
We it first set to empty and loop it twelve times.
He can create deadlock.
Now 18 and we have 23, here he is now, it's overflowing, you can't see it here.
Here is if I if I zoom in, that's why I always told you, make sure that you watch this one on one
hundred so you can see that there are cubes here overflowing.
Right.
And if I don't have this, I'm going to tell you here something.
If style overflow hidden is uncommented from the both of the blocks, you will see what will happen
now.
Yeah, it's overflowing again, but you can't see it doesn't matter, just return back to normal.
I just want to show you something else.
So how are we going to fix this?
It's a very easy fix here.
I'm just going to remove this council size and I'm going to check if size is greater than 20.
Right.
So, for example, if I have 20, let's 20.
Right.
So if it's greater than 20, it's going to be 22.
I want to make the size.
So that will be true.
And I want to reset the size to 20.
Now, this size will always if it's go above 20.
So we'll check in before the switch statement and that size will reset back to 20.
So now I will not be able to see that overflowing.
Doesn't matter what.
So I have 20.
That was my luck today.
Right.
So I'm just going to refresh.
I want to have more than here is so I have 22, but I don't see this overflowing box blocks here.
Two more.
Right.
I should have two more, but I don't have two more because I just with this one, I just shrink the
size of the array for that particular player to 20 in a loop 20 times.
That's it.
Easy, easy fix.
So that is working.
So yeah, that is pretty much for this class.
Now we need to announce the winner.
Right.
And the winner should have pop up here image.
So this guy should have an image.
If this is if this guy wins, the image should be on the other side.
So thank you very much.
I hope you enjoy this one.
We achieved something great.
I'm just going to recap it.
If we create a scoreboard function and that scoreboard function is actually having a switch statement
with a live player and based on the live player, because left player can be zero and one, we have
two cases zero.
And one, we have not going to be able to have any other case there.
Now, if that is the case of zero one, first we set the block what we want to build the blocks and
after that, a loop through the size of this one.
Now, in order to stop overflowing, if the size is 22 in a hat and I want to have 20 blocks exact before
that with this, if I just check it or even here, you can just check it here locally.
I mean, inside this if but I'm going to do it here so you can check it even inside here.
And we reset the sides back to twenty and we looked 20 times.
So that is pretty much it.
And what else we call the function.
And also we create another variable called code block and that variable is actually holding the entire
def def block here.
All right.
So entire def, that is with the so we attach every time and we're looping as many times as we have
the array, as many times as the size of yeary.
Right.
So make sure that you change this one to one because it's not going to work.
It's going to put for the other player.
Right.
So that is pretty much it for this lecture.
I hope you enjoy it.
I hope you like it.
Please.
If you don't understand, just watch it or try to figure out a little bit harder.
Try to think a little bit harder.
Why is this happening?
And you will find the answer.
Right.
So thank you very much.
And I will see you in the next one.