Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 New Game Form

In this lesson we're going to create a form that asigned in user can use to create a new game. Now here's the way game creation and game play is going to work in our application. The user can be playing up to one game at a time with a given friend. So if they have three friends, they can be playing up to three games with those three friends. But then because friends are kind of a one way thing in our game, the person who holds the friend list can suggest a game with anyone who they have chosen as a friend. Now, of course, we know from the demo that anyone has the right to reject a game, but assuming they have accepted and you are playing a game with them, then you cannot create a second game with them until that game is completed. So, This means that we need to start by finding a list of all of the friends who you could start a new game with. And that's basically all the friends you have that you are not currently playing with. So we're going to need this list of friends in our games template, so let's start by creating a helper function for that list. So we'll say and we're going to call this possibleOpponents. Now this is going to be a little bit tricky but I'm sure we can figure this out. So first of all let's get the currently logging user by saying user equals Meteor.user. Then we're going to get their list of friends which is going to be user dot profiles.friends, or if they have no friends, we'll just replace that with an empty array. Now we want to remove all the friends from this a ray who they are already playing a game with. So let's find all of the games they are currently playing. And we can say Games.find and we can find games where the result Is equal to null. Now here's what you need to know about our game objects. First of all remember when we say games.find here, we're not actually looking through all the games in the database. We're looking through all the games that we have published to the front end. Right, so the back end publishers games to the front end the front end holds those games In a mini Mongo instance. Which basically acts like a Mongo collection but it is a subset that we have selected on the server side. So we're only returning games where they are either the black player or the white player. Which of course means only games that they are playing. So what we're saying here is out of all the games that the user is a part of, find the ones where the result field is not null. Which means. No result has been set yet. Which means the game has not been finished. When the game is over we'll set this result field. So basically find all the games that are currently in play. And then let's loop over each one of these games. Then we have to find the color of the opponent player. So we can do this by saying if game.w = user._id. Then we know that the logged in users the white player. So we will return black. Otherwise the user is the black player. So we will return white. Then for this game we can get the idea of the opponent by doing game square bracket color, right? And so let's check to see if this ID is in our friends list. So we're going to say var idx equals friends dot index off game square bracket color. So basically we're finding that user in the friends array. Finally, we'll say, if the index is greater than minus one, meaning that it was in the array then we can do on in place edit on the array and say friends dot splice I d x and one. So we're going to slice from that index, and we're gonna slice one element out. So we'll only remove that one friend from the array. So, after we have finished our for each loop here, we know that our friend's array will now only have the list of friends that we are not currently playing a game with. And so now what we can do here is return meteor.users.find. And remember this is a collection of all users. So we'll go ahead and search through this. And we can find all records where the ID is and we're going to say where it is $in, and we're going to pass in the friends array. This is MongoDB's in operator. It allows us to search basically for an array of items. So where friends is an array of IDs, we're going to find all the records with those IDs. And so this will return the set of friends that we can play a game with. Okay. However we need to change this up just a little bit. Because if this friends list is empty then they can't start any new games. So instead of showing them a form with an empty drop down box we wanna show them a message saying that you can't create any more games right now. And to do this we need this return value to be something that would be boolean false if this is empty. In JavaScript an empty array is not a false e value. So what we can do is say friends.length. And if friends.length is zero, that is a falsey value. So we know that if friends.length is true, we can return our list of friends here. Otherwise, we'll just return null. So now, we can use possible opponents as both a boolean value and an array. Okay, so now over here in our games template, underneath our games header here, let's say if possibleOpponents then we wanna go ahead and create our form. So we'll create a form, and let's give it some classes here. We'll give it the boot class='form-inline. And that will be all for classes. Then let's add a label here and we'll say, start new game with. And then underneath this, let's have a select box and we'll give this the name of, otherPlayer and we'll give it a class of form-control. And let's close the select and then in here we'll loop over possible opponents. So we'll say each opp, why not, as an abbreviation there, in possible opponents. And then in here we create our option elements. So we'll say option should have a value of opp._id and then inside of this we'll put opp.username. There we go. So this should give us a select element with each one of our possible opponents as options in our drop down. Now, I'm just going to copy this a label and select here and paste it below. And I'm gonna change the label text to, I will play. And let's change the select name to color. And instead of having a loop, here we'll just have two options. The first one will be b, for black of course. And we'll just have the text, Black. And then we'll add one where the value is w. And of course the color is white, and this will of course allow them to choose whether they want to play black or white. And finally, let's add our button. So right at the bottom we'll have a button. Let's give it a class of button and button-primary. And then we'll just say create game as the button text. Let's see how this looks in the browser. Now, if we come to the browser, it seems like we have nothing showing up here at all. And I wonder if that's because for some reason our array is coming up empty. Let's see. We can see if this is happening by, of course, adding our else block to our template here. So if there are no opponents, and let's add a paragraph here. And we'll just say, let's say before starting the game, you need to make some friends or maybe you’re already playing with all your friends. Simple message. If we come back to the browser it seems that that is exactly what's happening. Okay, so let's do some console logging to figure out what's going on here. And right here at the bottom of our possible opponents function, let's just console.log(friends) for a start. Okay. So if we come back and Meteor automatically refresh the page. It seems like we're actually getting nothing which means this function is not even being called. So I see the problem is I've misspelled opponents there are three p's instead of two. If we correct that, okay, so if we go back to the browser look that's great. Okay here's our form. So, notice we do have our list being logged here. Because we only have one friend we have one dropdown box here. That's excellent. Let me actually go ahead and sign out. And notice that we are asked to sign in again. Let me create a new person here so I'll create a new user account called Paul. Notice, even though we are signed in, we don't have any friends. So if I go to Find Friends and I add two friends, go back to Play Chess, and now I have a list of two friends that I can choose to play chess with. Now, right now, when we click Create Game, nothing actually happens. In fact, notice, when I click that, the form submitted normally and we have this query string added to our URL. However, we don't want this form to submit normally. We wanna handle that ourselves. So in the next lesson, we will look at using that button to actually create a game record.

Back to the top