UIManager API

Core UI management system for CASCADA Framework.

Overview

UIManager provides a centralized way to manage UI components across different game scenes and modes.

Basic Usage

import { UIManager } from "@core/ui/UIManager";

// Initialize UI manager
const uiManager = new UIManager(scene);

// Register UI component
uiManager.register("main-menu", MainMenuComponent);

// Show/hide UI
uiManager.show("main-menu");
uiManager.hide("main-menu");

Methods

register(id: string, component: any)

Register a UI component with a unique ID.

uiManager.register("game-hud", GameHUD);
uiManager.register("main-menu", MainMenuUI);

show(id: string)

Show a registered UI component.

uiManager.show("game-hud");

hide(id: string)

Hide a registered UI component.

uiManager.hide("main-menu");

toggle(id: string)

Toggle visibility of a UI component.

uiManager.toggle("debug-panel");

isVisible(id: string): boolean

Check if a UI component is currently visible.

if (uiManager.isVisible("game-hud")) {
  // HUD is visible
}

getComponent(id: string)

Get a registered UI component instance.

const hud = uiManager.getComponent("game-hud");

unregister(id: string)

Remove a UI component from the manager.

uiManager.unregister("old-menu");

Vue Integration

UIManager works seamlessly with VueUIBridge for Vue.js components:

import { VueUIBridge } from "@core/ui/VueUIBridge";
import MainMenuUI from "@game/ui/MainMenuUI.vue";

const vueBridge = new VueUIBridge(uiManager);
vueBridge.mount("main-menu", MainMenuUI, {
  // Vue component props
});

Best Practices

1. Register early: Register UI components during scene initialization
2. Use descriptive IDs: Choose clear, unique identifiers
3. Clean up: Unregister components when scenes are destroyed
4. Layer management: Use UIManager for consistent z-index management

Example

export class GameScene extends Phaser.Scene {
  private uiManager!: UIManager;

  create() {
    // Initialize UI manager
    this.uiManager = new UIManager(this);

    // Register UI components
    this.uiManager.register("game-hud", GameHUD);
    this.uiManager.register("pause-menu", PauseMenu);

    // Show main UI
    this.uiManager.show("game-hud");
  }

  onPause() {
    this.uiManager.show("pause-menu");
  }

  onResume() {
    this.uiManager.hide("pause-menu");
  }
}

See Also

• VueUIBridge - Vue.js integration
• GameModeManager - Game mode management
• ViewportManager - Viewport management