How To: Add an End User Assignment Page to your Multiplayer Game

This example steps through how to add an end user assignment page to your multiplayer game.

Use Case

Once you've set up a team project which is a multiplayer game, you need to decide how end users will be assigned to worlds within the project, and what, if any, roles each end user plays in each world. This assignment can be completed either by team members or by end users with a role of facilitator.

There are two options:

• An author (team member) or a end user with a role of facilitator assigns end users to worlds from within the Epicenter UI. See details on how to do this.
• An author (team member) or a end user with a role of facilitator assigns end users to worlds from within the project itself.

This example describes the second option. You may prefer the second option because it simplifies things for your facilitators: they only have to work within your project. They never need to work within the Epicenter authoring interface, or even know how to access it.

What You Need

• A team subscription (more information)
• A team project (more information) which is a multiplayer project (more information)
• End users for your team, assigned to one or more groups (more information on creating groups and adding end users)
• A facilitator for your group (more information)
• The Assignment Component provided as part of Epicenter.js (details below)

Solution Outline

1. Copy the Assignment Component from Epicenter.js into your multiplayer project.
2. Edit the Assignment Component index.html page to add parameters for your project. (The index.html page is not intended to be used as-is; you need to update it with specifics from your project and the logged in user.)

Solution Implementation

1. Copy the Assignment Component from Epicenter.js into your team project.

   The assignment component is a set of files available from GitHub. Copy all of the files and upload them to the Interface folder of your project.

   Taken together, the files in this component allow a facilitator for your project to:

   • View all end users in this group
   • Automatically assign all end users to worlds
   • Manually assign particular end users to particular worlds or roles
   • Unassign an end user from a world
   • Exclude an end user from being assigned to a world (make the end user 'inactive')

2. Edit the Assignment Component index.html page to add parameters for your project.

   The index.html page is not intended to be used as-is; you need to update it with specific from your project and the logged in user.

   Follow the comments provided within the index.html file to customize it for your project:

   First, find the new window.forio.MultiplayerAssignmentComponent() call and update the parameters for your project. You need to get information from the user's session and pass that information in to this call.

   Then, use the Authorization Manager to get the values for these parameters.

   You can get the values for all of the required parameters — account, project, group, groupId, token — by using the Epicenter.js Authorization Manager and calling its getCurrentUserSessionInfo() method. However, you need to add in these calls to the Authorization Manager yourself:

    // the current user needs to be logged in in order for you to access his or her data
    // see the Login Component for a more detailed example
    // of getting these login parameters from a form in your project
    var auth = new F.manager.AuthManager();
    auth.login({
        userName: $('#username').val(),
        password: $('#password').val()
    });
    var sessionObj = auth.getCurrentUserSessionInfo();
   
    // replace the dummy parameter values in the MultiplayerAssignmentComponent() call
    // with info from the current user
    new window.forio.MultiplayerAssignmentComponent({
        el: '#assignment-component',
        account: sessionObj.account,
        project: sessionObj.project,
        group: sessionObj.groupName,
        groupId: sessionObj.groupId,
        token: sessionObj.auth_token
    }).load();

   A more detailed example of the Authorization Manager in use is in the Login Component, in the login.js file. In particular, if the facilitator making the assignments is in more than one group, you'll need to include the groupId in the auth.login() call. If your project's user interface is hosted on your own server, you'll need to include the account (Team ID) and project (Project ID) in the auth.login() call as well.

More information about the assignment component is available on the Epicenter.js overview page, or in the components README file in GitHub.