Multiplayer With Roles

This template is for an application where each participant has their own role in the game and makes decisions in the application UI at every step.

Follow this guide to deploy and run the application.

Create a project

First, create an Epicenter project:

1. Log in to Epicenter.
2. To create a project, follow the steps in the Team Projects guide.

Update settings

To configure your project:

1. Open the project settings page.
2. Under General Settings, expand Advanced Settings.
3. Under Push Channel, select Enabled.
4. Under Web Access, select Allow access to all URLs by default.
5. Under Allow Channel Workshop Default, select Enabled.
6. At the bottom of the page, click Save Project Settings.

Update Multiplayer Settings

1. At the top of the Settings page, click Multiplayer Settings.
2. Under Multiplayer, select Enabled. The multiplayer settings pane expands.
3. Add three roles with the following properties:
   1. Role Name: "animals"; Minimum: 1; Maximum: 1
   2. Role Name: "colors"; Minimum: 1; Maximum: 1
   3. Role Name: "places"; Minimum: 1; Maximum: 1
4. Under On the Multiplayer Assignments page, start with assignments belonging to the, select Most Recent Run Configuration.
5. Click Save Multiplayer Settings.

Deploy Project Files

Now let's clone the template repository to a local folder and deploy the model and the application UI to Epicenter.

Note

In the steps below, replace my-project with a directory name of your choice.

In a local directory, run the following shell commands:

1. npx degit forio/dev-base-build#multiplayer-roles my-project: to clone the multiplayer-roles branch to a local directory called my-project.
2. cd my-project: to change to the new project directory.
3. npm install: to install dependencies listed in \my-project\package.json.
4. npm run deploy to deploy the files to an Epicenter server. During the deployment, you must enter:
   1. SERVER: The Epicenter server URL (defaults to https://forio.com).
   2. ACCOUNT_SHORT_NAME: Your organization's account short name. It is displayed on the organization settings page under Organization ID.
   3. PROJECT_SHORT_NAME: The project short name.
   4. ADMIN_HANDLE: The email you used to log in when you created the project in the Epicenter UI.
   5. ADMIN_PASSWORD: Your Epicenter UI password.

These values are saved to \my-project\cli\config.json, which you can edit later.

Add users to your project

To allow people to use your Epicenter application, you create a workshop and add users to it.

1. Create a workshop. For this project, you don't need to edit the optional workshop parameters.
2. On the workshop page, follow these steps to add a user of type Facilitator.
3. Repeat the steps to add two or more users of type Participant.

Learn more

To learn about the Participant and Facilitator user types, read the admin guide on Users.

Assign roles

In a multiplayer project, you must assign users to roles.

For this project, you can use the auto-assign functionality.

Here is an example where two participants have been auto-assigned to roles:

Configure the local instance

Edit the variable values in the \my-project\.env file:

1. VITE_PROJECT_NAME - this can be displayed in your application's UI as the app name.
2. VITE_DEV_ACCOUNT_SHORT_NAME - this value must match your account short name.
3. VITE_DEV_PROJECT_SHORT_NAME - this should match your project short name.
4. VITE_DEV_API_HOST - the Epicenter API host for your server. Corresponds to SERVER above, but without the https:// prefix.

Note

The VITE_DEV_* variables in the .env file are required only for your app's local instance. When the application runs on Epicenter, the values are inferred from the project's URL.

Run the application

Now you can run the application locally or on the Epicenter server.

Local instance

To start the app in development mode:

1. In command line, go to your local \my-project folder.
2. Run npm run dev.

The application runs on http://localhost:8888/.

Run on Epicenter

To run your application on Epicenter:

1. Open your project in Epicenter.
2. Use one of these options to run the app:
   • On the left, click Run Project.
   • Click the project URL under the project name.
   • Open a workshop and click the mask icon in the Actions column to log in as one of the users.

For example, here is a workshop in the single-player application with a Facilitator and a Participant: