Breakout

Introduction / Summary

Breakout is a fun speed networking experience.

Built With

Client

Server

Key Features

• Be assigned into groups which will switch in timed intervals
• Admins set the configurations
• Be nice and interact with your partners

Canvas elements & interactions

• Key Asset - Breakout Sign: When clicked this asset will open the drawer and allow users and admins to start interacting with the app.

Drawer content

• How to configure instructions
• Configuration Screen
• Countdowns and Round Counter

Admin features

• Access: Click on the key asset to open the drawer and then select the Admin tab. Any changes you make here will only affect this instance of the application and will not impact other instances dropped in this or other worlds.

• Admins can configure and start a breakout session. Anyone who is in the breakout area at the start of a round will be included in the experience.

• The number of groups may be adjusted at the start of a round to account for the increase or decrease in the number of participants.

• The Admin who started the breakout session cannot leave the world while the session is in progress, otherwise it will be halted.

Data objects

We use data objects to store information about each implementation of the app per world.

• Key Asset: the data object attached to the dropped key asset will store information related to this specific implementation of the app and would be deleted if the key asset is removed from world. Example data:
  • isResetInProgress
  • lastInteraction
  • lastPlayerTurn
  • playerCount
  • resetCount
  • turnCount
• World: the data object attached to the world will store analytics information for every instance of the app in a given world by keyAssetId and will persist even if a specific instance is removed from world. Example data:
  • gamesPlayedByUser (keyAssets.${assetId}.gamesPlayedByUser.${profileId}.count)
  • gamesWonByUser (keyAssets.${keyAssetId}.gamesWonByUser.${profileId}.count)
  • totalGamesResetCount (keyAssets.${assetId}.totalGamesResetCount)
  • totalGamesWonCount (keyAssets.${assetId}.totalGamesWonCount)

Environment Variables

Create a .env file in the root directory. See .env-example for a template.

Variable	Description	Required
PORT	Server port	Yes
INSTANCE_PROTOCOL	Protocol for Topia API (https for production)	Yes
NODE_ENV	Node environment	No
APP_URL	Public URL for the app, used for webhook callbacks	Yes
INSTANCE_DOMAIN	Topia API domain (api.topia.io for production, api-stage.topia.io for staging)	Yes
INTERACTIVE_KEY	Topia interactive app key	Yes
INTERACTIVE_SECRET	Topia interactive app secret	Yes

Developers:

Getting Started

• Clone this repository
• Run npm i in server
• cd client
• Run npm i in client
• cd .. back to project root
• Run npm i in project root
• Run npm run dev

Add your .env environmental variables

See Environment Variables above.

Where to find INTERACTIVE_KEY and INTERACTIVE_SECRET

Topia Dev Account Dashboard

Topia Production Account Dashboard

Helpful links

• SDK Developer docs
• View it in action!
• Notion One Pager
• To see an example of an on canvas turn based game check out TicTacToe:
  • github
  • demo