1.2 Application Demo

Before we begin building this project, let me take you on a tour through the project so you can get an idea for the kind of features we're gonna be building. This is the home page that the user will initially see. And from here we have really only two links they can go to. They can go to the Find Friends link, which will show a list of all the users that currently exist. And if they were signed in, they would be able to add and remove these users from their own friends list. But when they're not logged in, we can just see their names. Then on the play games page, if they were signed in, they'd be able to create a new game or continue to play an existing game with one of their friends. So let's go ahead and sign in. And I will sign into the Andrew account. After we sign in, we have a couple of options. You can see at the top, we can start a new game with one of our friends. And we can choose whether we'll play white or black. And we could go ahead and start it. Otherwise, we would have a list of Current Games and underneath that we have a list of Archived Games, which is the games that have been completed. So I have Joseph as one of my friends, so I'll go ahead and start a new game with Joseph. I'll play white and I'll click Start. Now, notice two things. First of all, we can only play one game with a friend at a time, so that means that after we've started a game with all of our friends, we can't start anymore games, so that's why that form just disappeared and we have this message instead. And now we also have one current game, a game with Andrew and Joseph. However when we decide to start a new game with a player, they get to decide whether or not they accept that game. So you can see right now, this game is waiting for confirmation by Joseph. So I'll open another browser window here. And let me sign in with the Joseph account. Once we've signed in, I'll go to the Play Games page. And you can see that we have a game request from Andrew right here. And we have the option to accept it or reject it. If I click Accept you can see that this now becomes a link to the game. And if I go back to the window that has Andrew's account you can see that this link is now active as well. So let's go ahead and open that up. So this is what our games page looks like. And if I go back over to Joseph's window and click on that, you can see it looks pretty much the same for him. Except, notice of course that from Joseph's window, since he's playing black, the black pawns and pieces appear at the bottom of the screen here and in Andrew's window they appear at the bottom here. All right, so First of all, notice we have a simple chat window over here. So Andrew can say hi and Joseph can see that he says hi. And Joseph can say let's play. And the messaging can go back and forth like that. For actual turns, notice we say currently it's Andrew's turn. Okay, so this is the Andrew window. So I will select a pawn and I'll go ahead and move it. Notice a couple of things here. First of all, when it's your turn, you can click on one of your pieces and then click on another cell to move that piece to that cell. And we are doing some chess logic behind the scenes. We won't write this, but we will use a JaveScript library that can calculate possible moves. And so we will make sure the pieces only move in the way that they are supposed to in the game of chess. Notice a couple of other things here. Our moves will appear here in a list using the algebraic notation that is usually used to record chess moves. And then of course this switches to say Currently, joseph's turn. So I'll flip over here. Notice that my move has been made in Joseph's window. So I can go ahead and click on a piece. If I click a different cell where this piece cannot move to notice that nothing happens. If I click another one of black's pieces nothing happens. However if I click that piece again we can deselect it. So if I click that piece and I can move it like that, then you can see that the move has been recorded and now it's Andrew's turn again. So let me come over here and I'll move a bishop out like that. And back over here, let's move a bishop like that. Back on white's side, let's move a queen out like that. This time let's choose to move a pawn up like this, maybe they're gonna attack that bishop. However, before they have a chance to do that white can go ahead and take this queen, come down and take it right here and you can see that now, we actually have checkmate. So we've just done a really quick game and our game engine knows right away when checkmate occurs. Notice that in the chat we have this message printed into the chat, Game over; andrew won. This message at the top also changes to say Game Over! And then we also have this new button, above the Moves list which allows the player to step through the game. And I should point out that if we go back to Joseph's window, all these features are exactly the same. So let's go ahead and step through the game. And you can see we start out, blank slate, and I can say next and we can step through the game so users can see a record of the game at each move. And as we step through each move is made and the piece moves accordingly. And then we get right to the end there with the checkmate. Excellent. So they can just say, good game. And he can say thanks. And now if we go back to the play games list, you can see that now we have a second archived game here, Andrew versus Joseph, Andrew won. All right, so that is the game we're going to be making. It's pretty basic as far as a web application goes. But this is going to give us a chance to get familiar with many of the features of Meteor. So I think you're gonna find this a lot of fun. So in the next lesson we'll start by creating our project directory.