5.7 Listing the Moves

Now that our chess players can actually make moves during their game, why don't we add a list of the moves that have been made so they can look over the past moves as they make their next move? And also, of course, we should tell them whose turn it is, so they don't have to figure that out by clicking on the pieces themselves. So if we look back at our game.html file. We've got our row here. And inside this, we have one column for the board. Let's go ahead and duplicate this column. And in here we're going to have our moves list. So we're going to need a couple of things first. The first thing I guess we should figure out, is whose turn is it. So let's go back to our game.js file here. And let's add a current turn function here. And this is going to be another helper. And we'll do this as we've already done it before I think. So we'll get to game by calling our get game function. And then we know that we need game.black or game.white to get the id of the player's current turn. And we happen to know that that would be within game.board, right. So if I say game.board, we have our Forsyth-Edwards notation. We can split on the space. And get the second item with the index of 1. From that array and that will give us either a black or a white. So then we wrap that in square braces and put game on the front, so we have game.black or game.white. And that will give us the ID. And then we wrap that in a call to get.Username and return all of that. And that should return the name of the user whose turn it is. Okay, so we can come back here. And let's have an h2 and we'll say Currently, currentTurn's turn. All right, let's see if that works. So I'll go ahead and enter one of these games. And there you go, we can see Currently, paul's turn. However, if I go to an archived game, you can see it says, currently Cameron's turn, but the game is over, so that's not really accurate. So we should change this if the game has a result. First, we have to get that result. So underneath currentTurn here, let's add a result function. We can say var result = getGame().result(). And we know this is gonna be a couple of things. It's either gonna be an id, or it's gonna be null. Or it's going to be the word draw. So if there's no result. Then let's just return null. However, if result is equal to the word draw, then let's just return the text Draw. Otherwise, we can just return getUsername and pass in the result and say they won. So those are the three cases. The game is not over. The game is over, and it was a draw. Or the game is over, and somebody won. Okay. So now, we have to reuse this function in our template. Let's wrap our current h2 here in an if block. So we'll say, if there is a result then we'll go ahead and use that result, otherwise we'll use our currently somebody's turn. So we can say h2 and let's just put the result right in there. And now if we come back to our game here and let it refresh, you can see we have the text, andrew won. All right, now underneath this header. Let's have a list of the moves that have been played during this game, so have an h3 and we'll just say moves. And we're going to need to get a list of the current moves. Okay, so if we go back to the game, let's get a list of those moves. And we'll make this another helper function. And we already know that we can say getMoves() to get an array of moves. However the way we want to display these moves, is going to be similar to the portable graphics notation. We'll have one. And then we'll go ahead and have the mov syntax, so we will say e4 e5. And then we'll say 2 on the next line. And we could say something like night to f3 and something like that. However when we call getMoves, we get these things in an array. So we have e4 and then we have e5 and then we have night f3. And these things are in an array like this. So we need to pair them up into sets of two. So let's write a pair function. And I'll just wrap that around there. Okay, why don't we just put it right under our helpers here? I can say function pair. And this will take an array. This will be pretty simple. Let's just create a counter here, i = 0. And an array to return. And then we can just say, well i is less than array.length. We can say ret.push and we'll push in a new array, that has array i++ and array i++. And then at the end we'll return our new array. So this array here. We just push in smaller arrays of two items at a time. And that should work just fine. Okay, so now pairs. So now par(getMoves) will return an array of arrays, but what we actually want is an array of strings. So let's go ahead and map this. And we'll take each array here, and this will be pretty simple, we'll just return arr[0] plus a space and arr[1]. And the truth here is that if there is an odd number of moves then arr[1] here is gonna be undefined. And when we concatenate undefined to a string, we'll get the string undefined. So let's just wrap this part of it here in arr[1] or an empty string. Okay, and now we actually just need to return this. And that should give us exactly what we need. So now if we go back to our game template here, underneath our h3, let's let's make this a sub template. So we'll say the moveList. And we'll pass in our moves, okay. So let's add this template down below here, template with the name of the moveList. All right, so this is gonna be an ordered list. We don't use that very often and we'll say for each in this. I will say for each move in this. That'll make that a little bit easier. Because then in here, we'll have a list item and we'll just say put the move right in there. So it should be that simple. Let's see if we've made any mistakes. If we come back to our game here, you can see that this is exactly what we want. Right now, we have a list of all the moves that were made in this game. Let's go back to a game that we can play. And let me open up another browser window here and log in as Paul. So that we can see ourselves, add some new games to that list. Right now, if I go ahead and make a move. You can see that our turn switches. That it's currently the other players turn. And the first move was listed in our moves list. And I can go ahead and make the next move. And I can go ahead and make another move. You notice that we do get the capture notation. That's excellent. All right, so that allows our user to see whose turn it is and what set of moves we've made already. Excellent. So there's one more feature that we want and that is our chat box which is gonna go right over here. So in the next lesson, we'll build that chat box.