Client Module Level Overview

Component Tree Overview

• App.js
  • Entry.js
  • RoomComponent.js
  • GameComponent.js
    • StartComponent.js
    • GamePhaseComponent.js
      • DrawComponent.js
        • DrawCanvas.js
      • GuessComponent.js
    • SpectateComponent.js
      • ChainLinkView.js

Component Level Overview

App.js

Main component of the React App.

Responsibilities

• Creates or joins rooms in Firebase, then holds a reference in state.
• Establishes user's presence in room.
• Establishes listener for game settings to start game.
• Renders one of its direct children based on current state.

Direct Children

• Entry.js (GUI for user inputted room name and nickname).
• RoomComponent.js
• GameComponent.js

RoomComponent.js

Waiting lobby.

Responsibilities

• Renders GUI for users with presence in room.
• Renders GUI for shared game settings.
• Writes game settings to trigger game start in App.js.

GameComponent.js

Game Manager.

Responsibilities

• Establishes user presence under activePlayers.
• Establishes listener to progress state (change chains) when no players have presence as notReady.
• Renders one of its direct children based on current state.

Direct Children

• StartComponent.js
• GamePhaseComponent.js (switches between drawing or guessing phase based on latest entry in chain).
  • DrawComponent.js
  • GuessComponent.js
• SpectateComponent.js

StartComponent.js

Start a chalk chain.

Responsibilities

• Renders GUI for user inputted initial word/phrase.
• Establishes user presence under notReady until ready.
• Pushes new chain into chains in game in Firebase.

DrawComponent.js

Add a drawing to the current chain.

Responsibilities

• Renders GUI for users to draw the latest word/phrase in the current chain.
• Establishes user presence under notReady until ready.
• Add the new image to the current chain.

GuessComponent.js

Add a guess to the current chain.

Responsibilities

• Renders GUI for users to guess the latest image in the current chain.
• Establishes user presence under notReady until ready.
• Add the word/phrase to the current chain.

SpectateComponent.js

View game results.

Responsibilities

• Renders GUI to view entire chain at a time.
• Establishes listener to share current chain view with other players.
• Moves back to RoomComponent.js via callback.