Multiplayer With One Editor

This template is for an application in which several players must agree on a decision at each step of the game. Then one of the players makes the updates in the application UI. This player is called Editor. Each player can become Editor in turn.

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. Under Roles, click + Add Role.
4. Set the properties:
   1. Role Name: "Player"
   2. Minimum: 1
   3. Maximum: Check No Max.
   4. Auto-Assign Objective: Leave blank.
5. In the setting that determines how the Multiplayer Assignments page starts, select Most Recent Run Configuration.
6. 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#become-editor my-project: to clone the become-editor 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 a user 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 the participant has been auto-assigned:

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: