Structure of the codebase

This figure indicates the most important files and methods to be aware of in order to start navigating the code. More details below.

Client side

index.html is the entry point for the players. This page loads the client code bundled in dist/client.js, and creates the space where the game canvas will be located.

client/main.js* is where the Phaser game object is configured and created. As part of that configuration, 3 Phaser scenes are created: Boot, UI and Engine (see below).

client/Boot.js defines the Boot scene. This scene displays the title screen while receiving some boot parameters from the server. When everything is ready, the "play" and "tutorial" buttons are displayed and the UI scene is launched.

client/UI.js defines the UI scene. As the name implies, this scene is in charge of the UI elements and menus (although this responsibility is still a bit shared with the Engine scene, which is not ideal). When a new players has selected a starting region, or when a returning player is recognized, the Engine scene is launched.

client/Engine.js is the main scene of the game, containing a big part of the game logic. The key methods of that scene are the following, in order of execution:

• Engine.preload() loads all the assets of the game that haven't been preloaded by the UI scene.
• Engine.create() sets up a lot of necessary data structures, sets up the camera, the animations (by calling Engine.createAnimations() and sets up the input callbacks. In other words, it lays the basic groundwork for the game being able to run. When it is finished, it calls Client.requestData() which fetches from the server all the information about the player and the world around it. When that data is received, Engine.initWorld() is called

Server side