Jet-Set-Gamify III: Teams & Leaderboards

The Jet-Set-Gamify tutorial series focusses on helping you create a kick-ass Gamified app from scratch using the Playlyfe Platform.

This is the fourth part of the series. View All Parts

In the last article we saw how we could very easily create rules for achievements and levels and also had a brief look at the realtime leaderboards. In this post, we will try to add some collaborative elements to our app by bringing in the concept of teams.

We will keep things simple, so in our todo app, you can basically either create or join a team. The progress of each member in a team would contribute to the overall progress of the team. The code for this article can be found in the step-3 branch.

git checkout step-3  

So lets start off, head over to your application on playlyfe.com and navigate to Menu > Design > Teams. Create a new team by pressing the + button. Now fill in the Team Name and Description. Keep the Team ID as sample_team.

In the Access Permissions, we basically define the various roles within the team. For each role, there are a set of permissions that can be set, they are:

1. Lock - Lock the team, no one can now leave or join the team till it is unlocked.
2. Peer - Invite other players into the team with the same role.
3. Assign - Invite other players into the team with a role lower than his role.
4. Leave - Leave the team.

Creater roles are the roles given to the player who creates the team.

For our app, we will have 1 team definition with the following roles.

1. Manager - Permissions: Lock, Peer, Assign
2. Senior - Permissions: Peer, Assign, Leave
3. Junior - Permissions: Leave

We will be using the manager role as the creator role. In the app, members will join the team with the Junior role.

Joining channel basically controls how a player can join the team. It has 3 options:

• Free to join - Players can join/leave the team with any role.
• Request based - Players will need to send a request to join a team.
• Invite only - Players will be able to join only via invitations.

For our app, we will make teams free to join.

In the advanced settings, we can add creational requirements as well as some restrictions. For our app, we will have a creational rule which basically allows only players with a state Experienced to create a team. In the advanced settings, we restrict players to join only 1 team.

With that we are done with teams. Now we will add some leaderboards for teams. Go to Menu > Design > Leaderboards and create a new leaderboard. Select the type to be Team and select the team definition for which we need to create the leaderboard. The base metric selected should be Reputation. Rest of the options can be left default.

With the design complete, lets see how we can integrate it.

Integrating your app

We will need to add code to view all teams, create teams, join teams, leave teams and disband teams.
For a more detailed look at all the options, you can have a look at out API documentation.

This is the code to get all the teams that the player can join:

// /public/js/controllers/main.js
$scope.showTeams = function(){
  $scope.options.tab = 2;
  // if the player isn't a part of any team, show the list of available teams that he can join
  if($scope.player.teams.length === 0){
    // get all the teams that the player can join
    client.api(buildRoute('/teams'),'GET', function(teams){
      $scope.$apply(function(){
        $scope.team_list = teams.data;
      });
    });
  }else{
    // if the player is part of a team
    player_team = $scope.player.teams[0];
    $scope.player_team = player_team;
    // get the list of all members in the team
    client.api(buildRoute('/teams/'+player_team.id+'/members'), 'GET', function(members){
      $scope.$apply(function(){
        console.log("members ",members);
        $scope.player_team.members = members.data;
      });
    });
    // get the name of the team
    client.api(buildRoute('/teams/'+player_team.id),'GET',function(team){
      $scope.$apply(function(){
        $scope.player_team.name = team.name;
      });
    });
  }
};

Since initially there might be no teams, this route would return nothing. Next, we add a function to create a team. For that we include the following lines in the code.

// /public/js/controller/main.js
$scope.createTeam = function(new_team_name){
  // create a team
 client.api(buildRoute('/definitions/teams/'+team_definition_id),'POST',{
    'name': new_team_name,
    'access': 'PUBLIC'
  },
  function(team){
    client.api(buildRoute('/player'),'GET', function(data){
      $scope.$apply(function(){
        $scope.player = data;
        $scope.showTeams();
      });
    });
  });
};

Here the variable team_definition_id is the ID of the team that we had created on Playlyfe.com. In our case, that would be sample_team.

Now to join a team, its only a few lines of code.

// /public/js/controllers/main.js
$scope.joinTeam = function(team){
  // join the team with the role "Junior"
  client.api(buildRoute("/teams/"+team.id+"/join"),"POST",{"Junior": true},function(data){
    client.api(buildRoute('/player'),'GET', function(data){
      $scope.$apply(function(){
        $scope.player = data;
        $scope.showTeams();
      });
    });
  });
};

To leave a team, we add the function leaveTeam:

// /public/js/controllers/main.js
$scope.leaveTeam = function(team){
  client.api(buildRoute('/teams/'+team.id+'/leave'),"POST", function(data){
    $scope.player.teams=[];
  });
};

To delete a team, we add the deleteTeam function:

// /public/js/controllers/main.js
$scope.deleteTeam = function(team){
  client.api(buildRoute('/teams/'+team.id),"DELETE",function(data){
    $scope.player.teams=[];
    $scope.showTeams();
  });
};

To get the team leaderboards up and running, we just have to add a simple request in the showTeamLeaderboard function to update the leaderboard.

// /public/js/controllers/main.js
$scope.showTeamLeaderboard = function(){
  $scope.options.tab = 4;
  client.api(buildRoute('/leaderboards/'+team_leaderboard_id,'cycle=alltime'), 'GET', function(leaderboard){
    $scope.$apply(function(){
      $scope.team_lb = leaderboard.data;
    });
  });
};

Once this is done, we are pretty much finished. To get the complete code for this stage, you can checkout the step-3 branch.

Run the app and you should see some more tabs near your profile. Under the Teams tab you will find options to either create or join teams. Remember, only players with the Rank Experienced will be able to create teams.

With that we come to the end of the Jet-Set-Gamify series of tutorials. Notice how easy it is to integrate Playlyfe with our application. After the integration, you can change/modify the game design without having to touch any code.

There is a lot more that can be done using Playlyfe that's not covered in this tutorial and will be covered shortly in future blog posts, so keep checking in. For any questions, queries or feature requests, you can find us at our forums. For any other support, you can mail us at [email protected].