The lifecycle of a UI instance is independent of the lifecycle of the Player. The UI can be initialized at any time after the Player is created, but it should not outlast the corresponding Player instance. When the Player instance is destroyed, the UI should also be destroyed.

UI Initialisation

The initialisation of a UI happens with the creation of the UIManager. Since the constructor of the UIManager requires a Player instance as well as the final UI tree (UIVariants or an UIContainer), we can treat it as a two-phased initialization.

Since the UI tree UIComponents need to be initiated already before the UIManager, the initialization process has two phases. That means that Components do not have access to a Player and its state within the constructor. To address this, the UIManager will traverse through the components tree within the initialization process and call the configure function of all Components.

Component configuration

The Component.configure function can act on the player instance, e.g. by registering event listeners or accessing the current player state accordingly. This is the place where all the magic happens, where components typically subscribe and react to events (on their DOM element, the Player, or the UIManager), and basically, everything that makes them interactive.

The configure method is called only once when the UIManager initializes the UI.

Example

To showcase this in action, have a look at the following example of initialising the UIManager. It also contains a sample component which initialises its state within the configure function.