UI Components

The UI components in the Souless project are a collection of modular Phaser classes designed to display critical real-time game state information to the player. These components are responsible for visualizing player attributes such as health, mana, experience, and skill cooldowns. Each component is encapsulated in its own class, typically located in the src/ui/ directory, and is instantiated and managed by a Phaser Scene.

The primary in-game UI components include UIHealthMana, UIExpBar, and UISkillCooldown. These are complemented by informational components like UICharacterStats. The UITestScene provides a clear example of how these components are instantiated, managed, and updated with mock data, serving as a valuable reference for their integration.

Core UI Class Structure

The UI components are implemented as distinct classes, each managing a specific part of the heads-up display (HUD). They are added to a scene's display list and are typically set to ignore camera scrolling to remain fixed on the screen.

The diagram below shows the basic structure of the main UI classes.

UIHealthMana

This component is responsible for rendering the player's Health (HP) and Mana (MP) bars. It provides a clear visual indication of the player's current resource levels.

Sources: src/ui/UIHealthMana.js

Architecture

UIHealthMana creates a container with Phaser.GameObjects.Graphics objects to draw the bars. It consists of a background, the bar itself, a border, and a text overlay for each resource.

• Constructor: constructor(scene, centerX, y)

  • Initializes the graphics objects for HP and MP bars, including borders, backgrounds, and text elements.
  • All elements are added to a main container which is set to setScrollFactor(0) to remain static on the screen.
  • The depth is set to 1001 to ensure it appears above most game elements.

• Update Logic: update(player)

  • This method is called every frame to reflect the player's current status.
  • It reads player.health, player.maxHealth, player.mana, and player.maxMana.
  • It calculates the percentage of each resource and redraws the hpBar and mpBar graphics objects with a gradient color.
  • The text is updated to show the numerical values (e.g., "HP: 80 / 100").
  • A visual pulsing effect is applied to the HP text when health is below 25%.

The following flowchart illustrates the logic within the update method.

UIExpBar

The UIExpBar component displays two separate experience bars: one for the player's total account level and another for the currently controlled character's level.

Sources: src/ui/UIExpBar.js

Architecture

This class manages two containers, totalExpContainer and playerExpContainer, each with its own label, background, bar, and text.

• Total Experience Bar:

  • Labeled "🌟 TOTAL LEVEL".
  • The updateTotalExp() method asynchronously loads data from SaveSlotManager.load() to get the levelSystem object, which contains the total level, current XP, and XP to the next level.
  • The bar is colored with a yellow/gold gradient.

• Character Experience Bar:

  • Labeled "⚔️ CHARACTER".
  • The updatePlayerExpSync(characterType, exp) method gets level information from the levelSystem present in the GameScene.
  • It displays the level, current XP, and XP to the next level for the specific character.
  • The bar is colored with a blue gradient.

Data Flow for Total Experience

The updateTotalExp method involves an asynchronous call to the save manager to retrieve the latest level system data.

UISkillCooldown

This component displays the character's skill icons, cooldown overlays, and lock status. It is a critical part of the combat UI.

Sources: src/scenes/UITestScene.js:100-101, 287-296, 335-344

Integration and Methods

Based on its usage in UITestScene.js, the UISkillCooldown class has the following responsibilities:

The skill icons themselves are loaded via SkillIconLoader, which updates the textures of the skill slots in the UISkillCooldown container based on the current character.

Sources: src/scenes/UITestScene.js

UICharacterStats

UICharacterStats is a simple text-based component used to display a summary of the player's experience points.

Sources: src/ui/UICharacterStats.js

Functionality

• The class creates a Phaser.GameObjects.Text element inside a container.
• The refresh() method is an async function that fetches experience data using SaveManager.getExpData().
• It then formats this data into a multi-line string, showing the total EXP and the EXP for each character, and updates the text element.

// src/ui/UICharacterStats.js:15-23
  async refresh() {
    const { totalExp, characterExp } = await SaveManager.getExpData();
    const lines = [`🌟 Total EXP: ${totalExp}`];

    for (const [char, exp] of Object.entries(characterExp)) {
      lines.push(`${char.toUpperCase()} EXP: ${exp}`);
    }

    this.text.setText(lines.join('\n'));
  }

Sources: src/ui/UICharacterStats.js:15-23, src/utils/SaveManager.js:206-210