Skip to content

Core Framework - Overview

Welcome to the CASCADA Framework core! This directory contains universal, reusable systems that are independent of any specific game and can be used in any Phaser project.


What's Included

UI Layer (src/core/ui/)

System for managing HTML/CSS user interface, integrated with Vue 3.

Features:

  • Centralized UI component management
  • Bidirectional UI ↔ Game communication via Event Bus
  • 100% reactivity with Vue 3 (Wrapper Component pattern)
  • Responsive and styleable via CSS
  • Support for any UI framework

Documentation:

Entity Registry (src/core/systems/entity-registry.ts)

Centralized registry for tracking all game entities (nodes, edges, territories, players).

Features:

  • Automatic object registration
  • Indexing by region/owner/type
  • Automatic visual object destruction
  • Event Bus for entity lifecycle events

Documentation:

Sphere of Influence System (IoS) (src/core/systems/sphere-of-influence-system.ts)

System for managing multi-level data, validating actions, and cascading events between different game world abstraction levels.

Features:

  • Region management with multi-level data
  • Player action validation
  • Event cascading between levels (NANO, MICRO, MACRO)

Documentation:

Game Mode Manager (src/core/systems/game-mode-manager.ts)

System for managing different game modes and switching between them.

Features:

  • Abstract modes (MODE_1, MODE_2, ...)
  • Mode aliases (NANO, MICRO, MESO, MACRO, MEGA)
  • Mode switching based on viewport or user input

Documentation:

Viewport Manager (src/core/utils/viewport-manager.ts)

Utility for adaptive management of visible game area based on screen size and orientation.

Features:

  • Dynamic visible area adjustment
  • Proportional scaling
  • Mobile device and browser window resize adaptation

Documentation:

Visual Themes (src/core/config/visual-themes.ts)

Centralized visual theme management.

Features:

  • Define color palettes, effects, sizes
  • Switch themes with localStorage persistence
  • Integration with tsParticles for background animations

Documentation:

Geometry Renderer (src/core/rendering/geometry-renderer.ts)

Utility for rendering geometric primitives without sprites.

Features:

  • Procedural geometry generation
  • Effects (glow, particles)
  • Neo Tokyo / Synthwave style support

Documentation:


How to Use Core Framework

All Core Framework systems are designed as independent modules. You can import and use only the parts you need.

Example:

typescript
// src/game/scenes/my-game-scene.ts
import { UIManager } from "@core/ui/ui-manager";
import { VueUIBridge } from "@core/ui/vue-ui-bridge";
import MyUI from "@game/ui/my-ui.vue"; // Your Vue component

export class MyGameScene extends Phaser.Scene {
  private uiManager!: UIManager;
  private vueBridge!: VueUIBridge;

  create() {
    this.uiManager = new UIManager(this);
    this.vueBridge = new VueUIBridge(this.uiManager);

    this.vueBridge.mount("ui", MyUI, {
      props: { score: 0 },
      events: { action: () => this.handleAction() },
    });

    this.vueBridge.show("ui");
  }

  handleAction() {
    console.log("Action from UI!");
  }

  shutdown() {
    this.vueBridge.unmountAll();
    this.uiManager.shutdown();
  }
}

Complete Documentation

TopicDocument
UI Layerui-layer.md
Vue Integrationvue-integration.md
IoS Systemsphere-of-influence.md
Architecturearchitecture.md
Game Modesgame-modes.md

Core Framework Roadmap

v0.1.0 - Foundation

  • Basic project structure
  • Phaser 3 + TypeScript + Vite
  • Adaptive Viewport
  • Multi-Scale Gameplay (abstractions)

v0.2.0 - Current

  • UI Layer (UIManager + VueUIBridge)
  • EntityRegistry
  • Visual Themes (ThemeManager)
  • Node/Edge Terminology

v0.3.0 - Planned

  • Full IoS integration
  • Event-driven architecture
  • ActionValidator

v0.4.0 - Future

  • 🔮 Physics helpers
  • 🔮 AI utilities
  • 🔮 Networking abstractions

MIT Licensed