Play App Architecture Overview

Current as of June 30, 2023:

This page describes the architecture of the play app and the various components that exist within it. Generally, play can be broken down into three important subcomponents:

Pregame (route: '/'):

In the Pregame, the app is driven by user input, as they enter in a game code, input their name and select an avatar and update the backend with that information.

GameInProgress (route: '/game'):

Once the app has received the required information from the user, the GameInProgress branch is switched to. This side of the app is controlled via the backend subscription and is updated by the teacher on the host app. This carries the user through the various stages of the game and into the leaderboard. When a game is ended, the play drops back to the original SplashScreen and the app is back in the Pregame phase.

LocalStorage:

The hinge point between these two branches is the localStorage object. When a player completes the Pregame phase, their team data and the gameSession id is stored in their localStorage. This data allows them to both subscribe to the gameSession in the GameInProgress phase, as well as rejoin and resubscribe in the event of a crash or navigation away from the page.

Diagram:

The overall structure of the app can be seen in the below diagram:

The flow of a game is thus:

1. Player onboards through Pregame, entering a gamecode, their name and selecting an avatar. At this point, a call to the backend adds the team to the gameSession object and the required info for rejoining is stored in the localStorage. The Pregame phase is now complete and the app navigates to /game to begin GameInProgress
2. Upon navigating to /game, the react-router-dom loader is triggered to load the localStorage data and use it to subscribe to the gameSession. The player is now in the lobby, awaiting the teacher to start the game by updating the gameSession object.
3. Player will continue through until the end of the game, where the teacher updates the gameSession object state to FINISHED and the play app will move back to the Pregame state on route /.
4. If the player leaves the page and wants to rejoin, upon navigating to /game the react-router-dom will reload the localStorage data and resubscribe accordingly. A hasRejoined flag will be tripped to prevent duplicated behaviour (such as entering answers twice).