In the previous lecture, we ended up with a game board like this, and we can show the game board. But all in all, we don't have anything to click yet if we have to start a game. It's kind of pretty boring to write on this console. And in this lecture, I want to change it. I want to add a functionality to start a game. I want to add functionality to join a game, and I want to add some event listeners here in order to actually click on the game board. Okay, let's get started with our HTML. We have to have a couple of buttons and input fields in order to interact with our app in a meaningful way. The first one is a button which, just close like this, and I say, create a new game and the second one is going to be an input field type="text" and I think it can be a placeholder="Game Address". And here we have a button, and we'll call this join a game. And then we're going to add another button, which we call Select Account #2, and that is just for debugging reasons for our game here. How does this look like? Looks pretty basic so far, but I'm happy with it. And now we have to some kind of connect these buttons to our JavaScript and we can do this fairly easy. Inside the button, we'll just say, onclick is App.createNewGame(), and then very important we have to add a return false. Let's have a look if this is working. Create new game; it creates a game. You saw that here. And if you want to join a game, we are going to have onclick is App.joinGame, but inside here, we have to somehow get the contents of this input field because when you think back in our index.js, in our join game, it actually expects the game address. So, we have to get the game address from somewhere and this is going to be from this input field. So, why don't we give this input field a specific id called gameAddress. And then we can use jQuery, select our gameAddress. Well, I'm not sure if this actually works here, but let's give it a try. Let's see if our console complains. Create game, get the game address and then he join game. Oh, it says that jQuery here is not reference. Now, there are two ways. Either we can move the index.js further up or we use native vanilla JavaScript, and in our case, I am going to use vanilla JavaScript. So, instead of jQuery, we can say document.getElementById. And then we say, give me the element with the id, game address, and then it should be the value property so that before we call join the game, we get the value of our input field and whatever is in there, we give it as this argument gameAddress. Go back to our browser Windows. Did I save this? I did not, of course. I'll save this. I create a new game. I copy this. I join the game. I have to do this without the quotes. Yeah, this works fine, and now it's up to you. Let's say, you have to add the functionality for selecting the second account. It should be fairly easy. And if you want to do this, then pause the video now. Give it a try. See if you can make sense of all of this buttons and how they are selected. And I'll see you in around five minutes. I would say five minutes should be enough to finish this coding challenge and if you want to do it, then pause the video now. If not, then just continue watching.

All right, it should be fairly straightforward. Select the second account onclick is App or it selectAccountTwo() and have a return false here just in case the browser attaches a functionality on it. So, in our right window here, I select the second account. I create a game, and I am going to game, no, we cannot join the game here, but I have to remove this double quotes and hit join game, and we have our turn is here, so we have to setStone(1,1) and continue our gameplay. But what is missing obviously is we cannot click anywhere here yet, and there is a trick for it and I want to show you the trick. So, if you go to your index, show a script file and we go to our updateBoard functionality. Then I want to add this onclick event handler over here when it's the turn of the player.

Now, let's make a channel version first, and an onclick event handler works the same way we have an onclick event handler here in our button. Just this time, we are adding it programmatically via jQuery, and we again have to iterate through the two columns and through the column and rows. So, we start again with the row. And I am doing this separately just to have a better overview. board.length; i++, and then we have for j is 0, j is smaller than board [i]. And here we say, if our board at this particular element is still empty, so if a board is empty, then first remove any onclick handlers if you have any, and then add another onclick handler. So, we can say, select the whole element. So, this gives us another jQuery element. And in jQuery, it's quite easy to work with these event handlers. And here we can give it an argument as the first argument of the click event onclick handler, and then a function that is called once the click happens. So, let me write this first, demonstrate it to you and then explain it again. It's quite hard to explain if you have no demo. So, I give you the arguments x as the column, x as the row, y as the column, and they also have to give it an instance and I will tell you in a second why I have to give it an instance.

And I say, I want to call as a callback function the setStone function. Okay, what happens here? First, we are applying an onclick handler to all the fields that are empty. If there is already something inside, I shouldn't be able to click it. And then in case there is already something, there is an onclick handler set, then we are going to remove the onclick handler there and setting a new one. And this one gets an configuration object which gives it the arguments that are transported into this callback function. So, when we click, this callback function is called with an object populated with these arguments. And so, we have to change our setStone function because it will receive an event now. And before it does anything, let me show you what is inside this event. Okay, I save this. And it doesn't do anything yet because there was no event fired yet. But if I create a new game and if you're going to join the game, 'Select Account #2', 'Join a game'. Then our event handler will be set, not only when it's our turn, but it will be set and when we click somewhere, then we see here in the console that there is a jQuery event that is given as an argument for our setStone function. And inside this argument, we can see we have these, where is it, data field and inside the data, we have the actual data which is set to the cell. So if you click the bottom right cell in data, then we see x and y is 2 and 2, and if you click the middle one, then we see x and y is probably 1 and 1. Now, the question is why do we need the instance? And that is a little bit a tricky thing because it becomes a question of the scope we are executing or jQuery or JavaScript is executing the setStone function inside the scope of this onClickHandler. And inside the onClickHandler you have no access to this.activeThreeInARowInstance. So you have to get this.activeThreeInARowInstance from somewhere else. So, I think you can call it aesthetically with app.activeThreeInARowInstance or you just give it the instance here as third parameter into the event, and then you can say event.data.instance.setStone and that would be event.data.x and event.data.y. Let's create a new game. Select the account number 2, join the game, it's our turn. Set it to the left top, it's this turn, set it to the middle, set to the right top here, here and so on until we win the game, but this doesn't pop up anymore. So there is event handlers or something is missing in order to either show the win or the loss, but this is something we are doing in the next lecture. In this lecture, the last thing that I want to do really is making sure that only the person whose turn it is can click somewhere because you see on the right side here there's arrows popping up because we can click somewhere even though it's not our turn. Now, how do we do this? We can in updateBoard say, this should be clickable and if this is clickable, then make this clickable. When is this clickable? When in our event listener, the player is the active account. Then make this clickable or else if you're just waiting then don't make this clickable. There is one last thing which we have to do. We have to remove the event handler. This onClickEventHandler for the table once we are setting the stone, And this is something that I want you to do now, it should be fairly easy based on this template here, just add an off event or just remove the event, click the onClickHandler once the stone is set and then in the next player event it will be set anyway again. All right, here you go. So that solves the challenge, it probably wasn't too hard given this template here, so I'm basically just copying this template and pasting it here and we are just needing this off ( 'click') so I'm removing the rest of the things and what we have to change here is the board length. The board length goes from 0 to 3 and we have also three columns in each row. So, if we do this then it should suffice. Let's check this, it's always the most fun part. Create a new game, copy the game address, select the second account. Join the game, it's our turn here and now let's see what happens and this has worked so we cannot click anywhere else but it's the opponent's turn, it's the left one's turn so he can click but only one time and then we can click again, and then this way we can slowly win this game. But winning the game or drawing the game is not yet implemented and that's something that we are going to do in the next lecture and in the lecture afterwards we are going to beautify this game a little bit because so far it looks pretty boring, very developer style.

Adding HTML Functionality

About