Framework Bridges

Ready-to-use integrations for popular UI frameworks

---

Overview

CASCADA Framework provides ready-to-use bridges for popular frameworks, so you can start building UI immediately without writing integration code.

Available:

• VueUIBridge - Vue 3 Composition API (ready)
• 🔮 ReactUIBridge - React Hooks (planned)
• 🔮 SvelteUIBridge - Svelte Compiler (planned)

Or create your own!

---

VueUIBridge

Features

• 100% Reactive - Wrapper Component pattern
• TypeScript - Full type safety
• Composition API - Modern Vue 3
• Event Bus - Bidirectional UI ↔ Game
• Auto-cleanup - Lifecycle management

Quick Start

import { UIManager } from "@core/ui/ui-manager";
import { VueUIBridge } from "@core/ui/vue-ui-bridge";
import MyComponent from "@game/ui/my-component.vue";

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

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

    // Mount Vue component
    this.vueBridge.mount("hud", MyComponent, {
      props: { score: 0 },
      events: {
        action: () => this.handleAction(),
      },
    });

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

  update() {
    // Reactive updates!
    this.vueBridge.updateProps("hud", {
      score: this.currentScore,
    });
  }

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

Vue Component

<template>
  <div class="hud">
    <div class="score">Score: {{ score }}</div>
    <button @click="$emit('action')">Action</button>
  </div>
</template>

<script setup lang="ts">
defineProps<{ score: number }>();
</script>

<style scoped>
.hud {
  position: fixed;
  top: 20px;
  right: 20px;
  color: white;
  font-family: monospace;
}
</style>

API

class VueUIBridge {
  // Mount Vue component
  mount(id: string, component: Component, config?: {
    props?: Record<string, any>;
    events?: Record<string, Function>;
    layer?: number;
  }): void;

  // Update props reactively
  updateProps(id: string, props: Record<string, any>): void;

  // Show component
  show(id: string, animated?: boolean): void;

  // Hide component
  hide(id: string, animated?: boolean): void;

  // Unmount component
  unmount(id: string): void;

  // Unmount all components
  unmountAll(): void;
}

Full documentation: Vue Integration Guide

---

🔮 ReactUIBridge (Planned)

Features (Planned)

• React Hooks support
• TypeScript support
• Event Bus integration
• Auto-cleanup

API (Draft)

import { UIManager } from "@core/ui/ui-manager";
import { ReactUIBridge } from "@core/ui/react-ui-bridge"; // TODO

const bridge = new ReactUIBridge(uiManager);

bridge.mount("hud", MyComponent, {
  props: { score: 0 },
  events: {
    onAction: () => console.log("Action!"),
  },
});

Status: 🔮 Planned for v0.3.0

---

🔮 SvelteUIBridge (Planned)

Features (Planned)

• Svelte compiler integration
• Store support
• TypeScript support
• Auto-cleanup

API (Draft)

import { UIManager } from "@core/ui/ui-manager";
import { SvelteUIBridge } from "@core/ui/svelte-ui-bridge"; // TODO

const bridge = new SvelteUIBridge(uiManager);

bridge.mount("hud", MyComponent, {
  props: { score: 0 },
  events: {
    action: () => console.log("Action!"),
  },
});

Status: 🔮 Planned for v0.4.0

---

Creating Your Own Bridge

Want to integrate a different framework? Here's how:

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

export class MyFrameworkBridge {
  private components: Map<string, any> = new Map();

  constructor(private uiManager: UIManager) {}

  mount(id: string, component: any, config: any) {
    // 1. Create HTML container
    const container = document.createElement("div");
    container.className = `my-framework-${id}`;

    // 2. Initialize your framework
    const instance = MyFramework.create(component, {
      target: container,
      props: config.props,
    });

    // 3. Setup event handlers
    if (config.events) {
      for (const [event, handler] of Object.entries(config.events)) {
        instance.on(event, handler);
      }
    }

    // 4. Register with UIManager
    this.uiManager.register(id, container, config.layer || 0);
    this.components.set(id, instance);
  }

  updateProps(id: string, props: any) {
    const instance = this.components.get(id);
    if (instance) {
      instance.setProps(props);
    }
  }

  unmount(id: string) {
    const instance = this.components.get(id);
    if (instance) {
      instance.destroy();
      this.uiManager.remove(id);
      this.components.delete(id);
    }
  }

  unmountAll() {
    for (const id of this.components.keys()) {
      this.unmount(id);
    }
  }
}

Then contribute it to CASCADA! 🎉

---

📚 Examples

LINX Game (Vue)

See complete Vue integration example:

• LINX Game Documentation
• Source: src/game/ui/*.vue

---

Which Bridge to Use?

Vue:

• Ready now
• Best for: Composition API fans, TypeScript projects
• Performance: Excellent (reactive system)

React: (coming soon)

• 🔮 Planned
• Best for: Hooks lovers, large ecosystems
• Performance: Excellent (virtual DOM)

Svelte: (coming soon)

• 🔮 Planned
• Best for: Compiler fans, smallest bundles
• Performance: Best (no runtime)

Vanilla JS:

• Always available (UIManager)
• Best for: Prototyping, maximum control
• Performance: Best (no framework overhead)

---

CASCADA provides the bridges, you choose your path!