@rpgjs/client 5.0.0-beta.2 → 5.0.0-beta.20

package/dist/Game/ProjectileManager.js

@@ -0,0 +1,196 @@
+import { normalizeRoomMapId } from "../utils/mapId.js";
+import { computed, signal } from "canvasengine";
+//#region src/Game/ProjectileManager.ts
+var ProjectileManager = class {
+	constructor(hooks, predictionResolver) {
+		this.hooks = hooks;
+		this.predictionResolver = predictionResolver;
+		this.components = /* @__PURE__ */ new Map();
+		this.projectiles = /* @__PURE__ */ new Map();
+		this.version = signal(0);
+		this.impactDurationMs = 350;
+		this.current = computed(() => {
+			this.version();
+			const now = Date.now();
+			const rendered = [];
+			for (const projectile of this.projectiles.values()) {
+				const props = this.toProps(projectile, now);
+				if (!props) continue;
+				rendered.push({
+					id: projectile.spawn.id,
+					type: projectile.spawn.type,
+					component: projectile.component,
+					props
+				});
+			}
+			return rendered;
+		});
+	}
+	register(type, component) {
+		this.components.set(type, component);
+		return component;
+	}
+	get(type) {
+		return this.components.get(type);
+	}
+	setMapId(mapId) {
+		const normalizedMapId = normalizeRoomMapId(mapId);
+		if (this.mapId === normalizedMapId) return;
+		this.mapId = normalizedMapId;
+		this.clear();
+	}
+	getMapId() {
+		return this.mapId;
+	}
+	spawnBatch(projectiles, clock = {}) {
+		if (!this.acceptsMap(clock.mapId)) return;
+		const now = clock.now ?? Date.now();
+		for (const projectile of projectiles) {
+			const component = this.components.get(projectile.type);
+			if (!component) continue;
+			const runtime = {
+				spawn: {
+					...projectile,
+					delay: projectile.delay ?? 0,
+					index: projectile.index ?? 0,
+					count: projectile.count ?? 1
+				},
+				component,
+				createdAt: now
+			};
+			this.setPredictedImpact(runtime);
+			this.projectiles.set(projectile.id, runtime);
+			this.hooks.callHooks("client-projectiles-onSpawn", runtime.spawn).subscribe();
+		}
+		this.touch();
+	}
+	impactBatch(impacts, context = {}) {
+		if (!this.acceptsMap(context.mapId)) return;
+		const now = Date.now();
+		for (const impact of impacts) {
+			const projectile = this.projectiles.get(impact.id);
+			if (!projectile) continue;
+			this.setImpact(projectile, impact, now);
+			this.hooks.callHooks("client-projectiles-onImpact", this.toProps(projectile, now)).subscribe();
+		}
+		this.touch();
+	}
+	destroyBatch(projectiles, context = {}) {
+		if (!this.acceptsMap(context.mapId)) return;
+		const now = Date.now();
+		for (const destroyed of projectiles) {
+			const projectile = this.projectiles.get(destroyed.id);
+			if (!projectile) continue;
+			if (destroyed.reason === "hit") {
+				const current = this.toProps(projectile, now);
+				this.setImpact(projectile, {
+					id: destroyed.id,
+					targetId: destroyed.targetId ?? projectile.impact?.targetId,
+					x: destroyed.x ?? projectile.impact?.x ?? current?.x ?? projectile.spawn.origin.x,
+					y: destroyed.y ?? projectile.impact?.y ?? current?.y ?? projectile.spawn.origin.y,
+					distance: destroyed.distance ?? projectile.impact?.distance ?? current?.distance
+				}, now);
+			}
+			projectile.destroyReason = destroyed.reason;
+			projectile.destroyAt = projectile.destroyAt ?? (projectile.impact && projectile.impactStartedAt !== void 0 ? projectile.impactStartedAt + this.impactDurationMs : now);
+			this.hooks.callHooks("client-projectiles-onDestroy", this.toProps(projectile, now)).subscribe();
+		}
+		this.touch();
+	}
+	clear() {
+		this.projectiles.clear();
+		this.touch();
+	}
+	step() {
+		const now = Date.now();
+		let changed = false;
+		for (const [id, projectile] of this.projectiles) if (!this.toProps(projectile, now) && !this.isWaitingForDelay(projectile, now) || projectile.destroyAt !== void 0 && now >= projectile.destroyAt) {
+			this.projectiles.delete(id);
+			changed = true;
+		}
+		this.touch(changed || this.projectiles.size > 0);
+	}
+	toProps(projectile, now) {
+		const spawn = projectile.spawn;
+		const delayMs = (spawn.delay ?? 0) * 1e3;
+		const elapsedMs = now - projectile.createdAt - delayMs;
+		if (elapsedMs < 0) return null;
+		const elapsed = elapsedMs / 1e3;
+		const ttl = Math.max(.001, spawn.ttl);
+		const rawDistance = Math.min(spawn.speed * elapsed, spawn.range);
+		const predictedImpact = this.getActivePredictedImpact(projectile, now, rawDistance);
+		const visualImpact = projectile.visualImpact ?? projectile.impact;
+		const distance = visualImpact?.distance ?? predictedImpact?.distance ?? rawDistance;
+		const progress = Math.min(1, distance / spawn.range);
+		const x = visualImpact?.x ?? predictedImpact?.x ?? spawn.origin.x + spawn.direction.x * distance;
+		const y = visualImpact?.y ?? predictedImpact?.y ?? spawn.origin.y + spawn.direction.y * distance;
+		const impactElapsedMs = projectile.impactStartedAt !== void 0 ? Math.max(0, now - projectile.impactStartedAt) : void 0;
+		return {
+			...spawn,
+			x,
+			y,
+			angle: Math.atan2(spawn.direction.y, spawn.direction.x),
+			distance,
+			elapsed,
+			progress,
+			impact: projectile.impact,
+			impactElapsed: impactElapsedMs === void 0 ? void 0 : impactElapsedMs / 1e3,
+			impactProgress: impactElapsedMs === void 0 ? void 0 : Math.min(1, impactElapsedMs / this.impactDurationMs),
+			destroyed: projectile.destroyAt !== void 0,
+			ttl
+		};
+	}
+	acceptsMap(mapId) {
+		const normalizedMapId = normalizeRoomMapId(mapId);
+		return !normalizedMapId || !this.mapId || normalizedMapId === this.mapId;
+	}
+	isWaitingForDelay(projectile, now) {
+		const delayMs = (projectile.spawn.delay ?? 0) * 1e3;
+		return now - projectile.createdAt - delayMs < 0;
+	}
+	setPredictedImpact(projectile) {
+		if (projectile.spawn.predictImpact === false) return;
+		const impact = this.predictionResolver?.(projectile.spawn);
+		if (!impact || !Number.isFinite(impact.x) || !Number.isFinite(impact.y)) return;
+		const distance = typeof impact.distance === "number" && Number.isFinite(impact.distance) ? impact.distance : Math.hypot(impact.x - projectile.spawn.origin.x, impact.y - projectile.spawn.origin.y);
+		if (!Number.isFinite(distance) || distance < 0 || distance > projectile.spawn.range) return;
+		projectile.predictedImpact = {
+			...impact,
+			distance
+		};
+	}
+	getActivePredictedImpact(projectile, now, rawDistance) {
+		if (!projectile.predictedImpact || projectile.impact) return;
+		const distance = projectile.predictedImpact.distance;
+		if (distance === void 0 || rawDistance < distance) return;
+		return projectile.predictedImpact;
+	}
+	setImpact(projectile, impact, now) {
+		projectile.visualImpact = this.resolveVisualImpact(projectile, impact, now);
+		projectile.impact = impact;
+		projectile.predictedImpact = void 0;
+		projectile.impactStartedAt = projectile.impactStartedAt ?? now;
+		const impactDestroyAt = projectile.impactStartedAt + this.impactDurationMs;
+		projectile.destroyAt = Math.max(projectile.destroyAt ?? 0, impactDestroyAt);
+	}
+	resolveVisualImpact(projectile, impact, now) {
+		const predicted = projectile.predictedImpact;
+		if (!predicted || !this.isSameTarget(predicted, impact)) return impact;
+		const distance = predicted.distance;
+		if (distance === void 0) return impact;
+		const delayMs = (projectile.spawn.delay ?? 0) * 1e3;
+		const elapsedMs = now - projectile.createdAt - delayMs;
+		if (elapsedMs < 0) return impact;
+		return Math.min(projectile.spawn.speed * (elapsedMs / 1e3), projectile.spawn.range) >= distance ? predicted : impact;
+	}
+	isSameTarget(a, b) {
+		return a.targetId !== void 0 && a.targetId === b.targetId;
+	}
+	touch(force = true) {
+		if (force) this.version.update((value) => value + 1);
+	}
+};
+//#endregion
+export { ProjectileManager };
+
+//# sourceMappingURL=ProjectileManager.js.map

package/dist/Game/ProjectileManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectileManager.js","names":[],"sources":["../../src/Game/ProjectileManager.ts"],"sourcesContent":["import { computed, signal } from \"canvasengine\";\nimport { Hooks } from \"@rpgjs/common\";\nimport { normalizeRoomMapId } from \"../utils/mapId\";\n\nexport interface ClientProjectileSpawn {\n  id: string;\n  type: string;\n  ownerId?: string;\n  origin: { x: number; y: number };\n  direction: { x: number; y: number };\n  speed: number;\n  range: number;\n  ttl: number;\n  spawnTick: number;\n  delay?: number;\n  index?: number;\n  count?: number;\n  params?: Record<string, unknown>;\n  collisionMask?: number;\n  ignoreOwner?: boolean;\n  predictImpact?: boolean;\n}\n\nexport interface ClientProjectileImpact {\n  id: string;\n  targetId?: string;\n  x: number;\n  y: number;\n  distance?: number;\n}\n\nexport interface ClientProjectileDestroy {\n  id: string;\n  reason?: string;\n  targetId?: string;\n  x?: number;\n  y?: number;\n  distance?: number;\n}\n\nexport interface RenderedProjectileProps extends ClientProjectileSpawn {\n  x: number;\n  y: number;\n  angle: number;\n  distance: number;\n  elapsed: number;\n  progress: number;\n  impact?: ClientProjectileImpact;\n  impactElapsed?: number;\n  impactProgress?: number;\n  destroyed?: boolean;\n}\n\nexport interface RenderedProjectile {\n  id: string;\n  type: string;\n  component: any;\n  props: RenderedProjectileProps;\n}\n\nexport type ProjectilePredictionResolver = (\n  projectile: ClientProjectileSpawn,\n) => ClientProjectileImpact | null | undefined;\n\nexport interface ProjectileSpawnClock {\n  now?: number;\n  currentServerTick?: number;\n  tickDurationMs?: number;\n  mapId?: string;\n}\n\ninterface RuntimeProjectile {\n  spawn: ClientProjectileSpawn;\n  component: any;\n  createdAt: number;\n  impact?: ClientProjectileImpact;\n  visualImpact?: ClientProjectileImpact;\n  predictedImpact?: ClientProjectileImpact;\n  impactStartedAt?: number;\n  destroyAt?: number;\n  destroyReason?: string;\n}\n\nexport class ProjectileManager {\n  private readonly components = new Map<string, any>();\n  private readonly projectiles = new Map<string, RuntimeProjectile>();\n  private readonly version = signal(0);\n  private readonly impactDurationMs = 350;\n  private mapId?: string;\n\n  constructor(\n    private readonly hooks: Hooks,\n    private readonly predictionResolver?: ProjectilePredictionResolver,\n  ) {}\n\n  current = computed<RenderedProjectile[]>(() => {\n    this.version();\n    const now = Date.now();\n    const rendered: RenderedProjectile[] = [];\n    for (const projectile of this.projectiles.values()) {\n      const props = this.toProps(projectile, now);\n      if (!props) {\n        continue;\n      }\n      rendered.push({\n        id: projectile.spawn.id,\n        type: projectile.spawn.type,\n        component: projectile.component,\n        props,\n      });\n    }\n    return rendered;\n  });\n\n  register(type: string, component: any): any {\n    this.components.set(type, component);\n    return component;\n  }\n\n  get(type: string): any {\n    return this.components.get(type);\n  }\n\n  setMapId(mapId: string | undefined): void {\n    const normalizedMapId = normalizeRoomMapId(mapId);\n    if (this.mapId === normalizedMapId) return;\n    this.mapId = normalizedMapId;\n    this.clear();\n  }\n\n  getMapId(): string | undefined {\n    return this.mapId;\n  }\n\n  spawnBatch(projectiles: ClientProjectileSpawn[], clock: ProjectileSpawnClock = {}): void {\n    if (!this.acceptsMap(clock.mapId)) return;\n    const now = clock.now ?? Date.now();\n    for (const projectile of projectiles) {\n      const component = this.components.get(projectile.type);\n      if (!component) {\n        continue;\n      }\n      const runtime: RuntimeProjectile = {\n        spawn: {\n          ...projectile,\n          delay: projectile.delay ?? 0,\n          index: projectile.index ?? 0,\n          count: projectile.count ?? 1,\n        },\n        component,\n        createdAt: now,\n      };\n      this.setPredictedImpact(runtime);\n      this.projectiles.set(projectile.id, runtime);\n      this.hooks.callHooks(\"client-projectiles-onSpawn\", runtime.spawn).subscribe();\n    }\n    this.touch();\n  }\n\n  impactBatch(impacts: ClientProjectileImpact[], context: { mapId?: string } = {}): void {\n    if (!this.acceptsMap(context.mapId)) return;\n    const now = Date.now();\n    for (const impact of impacts) {\n      const projectile = this.projectiles.get(impact.id);\n      if (!projectile) {\n        continue;\n      }\n      this.setImpact(projectile, impact, now);\n      this.hooks.callHooks(\"client-projectiles-onImpact\", this.toProps(projectile, now)).subscribe();\n    }\n    this.touch();\n  }\n\n  destroyBatch(projectiles: ClientProjectileDestroy[], context: { mapId?: string } = {}): void {\n    if (!this.acceptsMap(context.mapId)) return;\n    const now = Date.now();\n    for (const destroyed of projectiles) {\n      const projectile = this.projectiles.get(destroyed.id);\n      if (!projectile) {\n        continue;\n      }\n      if (destroyed.reason === \"hit\") {\n        const current = this.toProps(projectile, now);\n        this.setImpact(projectile, {\n          id: destroyed.id,\n          targetId: destroyed.targetId ?? projectile.impact?.targetId,\n          x: destroyed.x ?? projectile.impact?.x ?? current?.x ?? projectile.spawn.origin.x,\n          y: destroyed.y ?? projectile.impact?.y ?? current?.y ?? projectile.spawn.origin.y,\n          distance: destroyed.distance ?? projectile.impact?.distance ?? current?.distance,\n        }, now);\n      }\n      projectile.destroyReason = destroyed.reason;\n      projectile.destroyAt = projectile.destroyAt ?? (\n        projectile.impact && projectile.impactStartedAt !== undefined\n          ? projectile.impactStartedAt + this.impactDurationMs\n          : now\n      );\n      this.hooks.callHooks(\"client-projectiles-onDestroy\", this.toProps(projectile, now)).subscribe();\n    }\n    this.touch();\n  }\n\n  clear(): void {\n    this.projectiles.clear();\n    this.touch();\n  }\n\n  step(): void {\n    const now = Date.now();\n    let changed = false;\n    for (const [id, projectile] of this.projectiles) {\n      const props = this.toProps(projectile, now);\n      if (\n        (!props && !this.isWaitingForDelay(projectile, now)) ||\n        (projectile.destroyAt !== undefined && now >= projectile.destroyAt)\n      ) {\n        this.projectiles.delete(id);\n        changed = true;\n      }\n    }\n    this.touch(changed || this.projectiles.size > 0);\n  }\n\n  private toProps(projectile: RuntimeProjectile, now: number): RenderedProjectileProps | null {\n    const spawn = projectile.spawn;\n    const delayMs = (spawn.delay ?? 0) * 1000;\n    const elapsedMs = now - projectile.createdAt - delayMs;\n    if (elapsedMs < 0) {\n      return null;\n    }\n    const elapsed = elapsedMs / 1000;\n    const ttl = Math.max(0.001, spawn.ttl);\n    const rawDistance = Math.min(spawn.speed * elapsed, spawn.range);\n    const predictedImpact = this.getActivePredictedImpact(projectile, now, rawDistance);\n    const visualImpact = projectile.visualImpact ?? projectile.impact;\n    const distance = visualImpact?.distance ?? predictedImpact?.distance ?? rawDistance;\n    const progress = Math.min(1, distance / spawn.range);\n    const x = visualImpact?.x ?? predictedImpact?.x ?? spawn.origin.x + spawn.direction.x * distance;\n    const y = visualImpact?.y ?? predictedImpact?.y ?? spawn.origin.y + spawn.direction.y * distance;\n    const impactElapsedMs = projectile.impactStartedAt !== undefined\n      ? Math.max(0, now - projectile.impactStartedAt)\n      : undefined;\n    return {\n      ...spawn,\n      x,\n      y,\n      angle: Math.atan2(spawn.direction.y, spawn.direction.x),\n      distance,\n      elapsed,\n      progress,\n      impact: projectile.impact,\n      impactElapsed: impactElapsedMs === undefined ? undefined : impactElapsedMs / 1000,\n      impactProgress: impactElapsedMs === undefined\n        ? undefined\n        : Math.min(1, impactElapsedMs / this.impactDurationMs),\n      destroyed: projectile.destroyAt !== undefined,\n      ttl,\n    };\n  }\n\n  private acceptsMap(mapId: string | undefined): boolean {\n    const normalizedMapId = normalizeRoomMapId(mapId);\n    return !normalizedMapId || !this.mapId || normalizedMapId === this.mapId;\n  }\n\n  private isWaitingForDelay(projectile: RuntimeProjectile, now: number): boolean {\n    const delayMs = (projectile.spawn.delay ?? 0) * 1000;\n    return now - projectile.createdAt - delayMs < 0;\n  }\n\n  private setPredictedImpact(projectile: RuntimeProjectile): void {\n    if (projectile.spawn.predictImpact === false) {\n      return;\n    }\n    const impact = this.predictionResolver?.(projectile.spawn);\n    if (!impact || !Number.isFinite(impact.x) || !Number.isFinite(impact.y)) {\n      return;\n    }\n    const distance = typeof impact.distance === \"number\" && Number.isFinite(impact.distance)\n      ? impact.distance\n      : Math.hypot(impact.x - projectile.spawn.origin.x, impact.y - projectile.spawn.origin.y);\n    if (!Number.isFinite(distance) || distance < 0 || distance > projectile.spawn.range) {\n      return;\n    }\n    projectile.predictedImpact = {\n      ...impact,\n      distance,\n    };\n  }\n\n  private getActivePredictedImpact(\n    projectile: RuntimeProjectile,\n    now: number,\n    rawDistance: number,\n  ): ClientProjectileImpact | undefined {\n    if (!projectile.predictedImpact || projectile.impact) {\n      return undefined;\n    }\n    const distance = projectile.predictedImpact.distance;\n    if (distance === undefined || rawDistance < distance) {\n      return undefined;\n    }\n    return projectile.predictedImpact;\n  }\n\n  private setImpact(projectile: RuntimeProjectile, impact: ClientProjectileImpact, now: number): void {\n    projectile.visualImpact = this.resolveVisualImpact(projectile, impact, now);\n    projectile.impact = impact;\n    projectile.predictedImpact = undefined;\n    projectile.impactStartedAt = projectile.impactStartedAt ?? now;\n    const impactDestroyAt = projectile.impactStartedAt + this.impactDurationMs;\n    projectile.destroyAt = Math.max(projectile.destroyAt ?? 0, impactDestroyAt);\n  }\n\n  private resolveVisualImpact(\n    projectile: RuntimeProjectile,\n    impact: ClientProjectileImpact,\n    now: number,\n  ): ClientProjectileImpact {\n    const predicted = projectile.predictedImpact;\n    if (!predicted || !this.isSameTarget(predicted, impact)) {\n      return impact;\n    }\n    const distance = predicted.distance;\n    if (distance === undefined) {\n      return impact;\n    }\n    const delayMs = (projectile.spawn.delay ?? 0) * 1000;\n    const elapsedMs = now - projectile.createdAt - delayMs;\n    if (elapsedMs < 0) {\n      return impact;\n    }\n    const rawDistance = Math.min(projectile.spawn.speed * (elapsedMs / 1000), projectile.spawn.range);\n    return rawDistance >= distance ? predicted : impact;\n  }\n\n  private isSameTarget(a: ClientProjectileImpact, b: ClientProjectileImpact): boolean {\n    return a.targetId !== undefined && a.targetId === b.targetId;\n  }\n\n  private touch(force = true): void {\n    if (force) {\n      this.version.update((value) => value + 1);\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/Game/ProjectileManager.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Gui/Gui.d.ts

@@ -4,7 +4,7 @@ import { Subscription } from 'rxjs';
 interface GuiOptions {
     name?: string;
     id?: string;
-    component: any;
+    component?: any;
     display?: boolean;
     data?: any;
     /**
@@ -24,14 +24,19 @@ interface GuiOptions {
      * @default false
      */
     attachToSprite?: boolean;
+    /**
+     * Vue v4 compatibility flag. Prefer attachToSprite in v5 projects.
+     */
+    rpgAttachToSprite?: boolean;
 }
-interface GuiInstance {
+export interface GuiInstance {
     name: string;
     component: any;
     display: WritableSignal<boolean>;
     data: WritableSignal<any>;
+    openId?: string;
     autoDisplay: boolean;
-    dependencies?: () => Signal[];
+    dependencies?: Signal[];
     subscription?: Subscription;
     attachToSprite?: boolean;
 }
@@ -79,7 +84,7 @@ export declare class RpgGui {
      */
     _initializeVueComponents(): void;
     guiInteraction(guiId: string, name: string, data: any): void;
-    guiClose(guiId: string, data?: any): void;
+    guiClose(guiId: string, data?: any, guiOpenId?: unknown): void;
     /**
      * Add a GUI component to the system
      *
@@ -113,7 +118,7 @@ export declare class RpgGui {
      * });
      * ```
      */
-    add(gui: GuiOptions): void;
+    add(gui: GuiOptions | any): void;
     registerOptimisticReducer(guiId: string, reducer: OptimisticReducer): void;
     /**
      * Get all attached GUI components (attachToSprite: true)
@@ -130,6 +135,8 @@ export declare class RpgGui {
      * ```
      */
     getAttachedGuis(): GuiInstance[];
+    getVueGuis(): GuiInstance[];
+    getAttachedVueGuis(): GuiInstance[];
     /**
      * Check if a player should display attached GUIs
      *
@@ -161,7 +168,7 @@ export declare class RpgGui {
      * gui.display('shop', { shopId: 1 }, [playerSignal, shopSignal]);
      * ```
      */
-    display(id: string, data?: {}, dependencies?: Signal[]): void;
+    display(id: string, data?: {}, dependencies?: Signal[], openId?: string): void;
     isDisplaying(id: string): boolean;
     /**
      * Handle Vue component display logic
@@ -187,6 +194,13 @@ export declare class RpgGui {
      */
     hide(id: string): void;
     private isVueComponent;
+    private isVueComponentInstance;
+    private removeCanvasGui;
+    private removeVueGui;
+    private resolveComponent;
+    private resolveGuiId;
+    private resolveAttachToSprite;
+    private toGuiState;
     private clearPendingActions;
     private applyReducers;
     private applyOptimisticAction;

package/dist/Gui/Gui.js

@@ -1,12 +1,12 @@
-import { inject } from "../node_modules/.pnpm/@signe_di@2.9.0/node_modules/@signe/di/dist/index.js";
+import { inject } from "../node_modules/.pnpm/@signe_di@3.1.0/node_modules/@signe/di/dist/index.js";
 import { WebSocketToken } from "../services/AbstractSocket.js";
-import component from "../components/gui/dialogbox/index.ce.js";
-import component$1 from "../components/gui/shop/shop.ce.js";
-import component$2 from "../components/gui/save-load.ce.js";
-import component$3 from "../components/gui/menu/main-menu.ce.js";
-import component$4 from "../components/gui/notification/notification.ce.js";
-import component$5 from "../components/gui/title-screen.ce.js";
-import component$6 from "../components/gui/gameover.ce.js";
+import __ce_component from "../components/gui/dialogbox/index.ce.js";
+import __ce_component$1 from "../components/gui/shop/shop.ce.js";
+import __ce_component$2 from "../components/gui/save-load.ce.js";
+import __ce_component$3 from "../components/gui/menu/main-menu.ce.js";
+import __ce_component$4 from "../components/gui/notification/notification.ce.js";
+import __ce_component$5 from "../components/gui/title-screen.ce.js";
+import __ce_component$6 from "../components/gui/gameover.ce.js";
 import "../components/gui/index.js";
 import { signal } from "canvasengine";
 import { PrebuiltGui } from "@rpgjs/common";
@@ -86,41 +86,45 @@ var RpgGui = class {
 		this.webSocket = inject(context, WebSocketToken);
 		this.add({
 			name: "rpg-dialog",
-			component
+			component: __ce_component
 		});
 		this.add({
 			name: PrebuiltGui.MainMenu,
-			component: component$3
+			component: __ce_component$3
 		});
 		this.add({
 			name: PrebuiltGui.Shop,
-			component: component$1
+			component: __ce_component$1
 		});
 		this.add({
 			name: PrebuiltGui.Notification,
-			component: component$4,
+			component: __ce_component$4,
 			autoDisplay: true
 		});
 		this.add({
 			name: PrebuiltGui.Save,
-			component: component$2
+			component: __ce_component$2
 		});
 		this.add({
 			name: PrebuiltGui.TitleScreen,
-			component: component$5
+			component: __ce_component$5
 		});
 		this.add({
 			name: PrebuiltGui.Gameover,
-			component: component$6
+			component: __ce_component$6
 		});
 		this.registerOptimisticReducer(PrebuiltGui.MainMenu, mainMenuOptimisticReducer);
 	}
 	async _initialize() {
 		this.webSocket.on("gui.open", (data) => {
 			this.clearPendingActions(data.guiId);
-			this.display(data.guiId, data.data);
+			this.display(data.guiId, data.data, [], data.guiOpenId);
 		});
-		this.webSocket.on("gui.exit", (guiId) => {
+		this.webSocket.on("gui.exit", (payload) => {
+			const guiId = typeof payload === "string" ? payload : payload.guiId;
+			const guiOpenId = typeof payload === "string" ? void 0 : payload.guiOpenId;
+			const current = this.get(guiId);
+			if (guiOpenId && current?.openId && current.openId !== guiOpenId) return;
 			this.hide(guiId);
 		});
 		this.webSocket.on("gui.update", (payload) => {
@@ -146,6 +150,7 @@ var RpgGui = class {
 	*/
 	_setVueGuiInstance(vueGuiInstance) {
 		this.vueGuiInstance = vueGuiInstance;
+		this._initializeVueComponents();
 	}
 	/**
 	* Notify VueGui about GUI state changes
@@ -156,35 +161,16 @@ var RpgGui = class {
 	* @param data - Component data
 	*/
 	_notifyVueGui(guiId, display, data = {}) {
-		if (this.vueGuiInstance && this.vueGuiInstance.vm) {
-			const extraGui = this.extraGuis.find((gui) => gui.name === guiId);
-			if (extraGui) {
-				this.vueGuiInstance.vm.gui[guiId] = {
-					name: guiId,
-					display,
-					data,
-					attachToSprite: extraGui.attachToSprite || false
-				};
-				this.vueGuiInstance.vm.gui = Object.assign({}, this.vueGuiInstance.vm.gui);
-			}
-		}
+		const extraGui = this.extraGuis.find((gui) => gui.name === guiId);
+		if (!extraGui) return;
+		this.vueGuiInstance?.updateGuiState?.(this.toGuiState(extraGui, display, data));
 	}
 	/**
 	* Initialize Vue components in the VueGui instance
 	* This should be called after VueGui is mounted
 	*/
 	_initializeVueComponents() {
-		if (this.vueGuiInstance && this.vueGuiInstance.vm) {
-			this.extraGuis.forEach((gui) => {
-				this.vueGuiInstance.vm.gui[gui.name] = {
-					name: gui.name,
-					display: gui.display(),
-					data: gui.data(),
-					attachToSprite: gui.attachToSprite || false
-				};
-			});
-			this.vueGuiInstance.vm.gui = Object.assign({}, this.vueGuiInstance.vm.gui);
-		}
+		this.vueGuiInstance?.initializeGuiStates?.(this.extraGuis.map((gui) => this.toGuiState(gui)));
 	}
 	guiInteraction(guiId, name, data) {
 		const clientActionId = globalThis.crypto?.randomUUID?.() || `${Date.now()}-${Math.random()}`;
@@ -204,9 +190,11 @@ var RpgGui = class {
 			data: actionData
 		});
 	}
-	guiClose(guiId, data) {
+	guiClose(guiId, data, guiOpenId) {
+		const normalizedOpenId = typeof guiOpenId === "string" && guiOpenId.length > 0 ? guiOpenId : void 0;
 		this.webSocket.emit("gui.exit", {
 			guiId,
+			guiOpenId: normalizedOpenId,
 			data
 		});
 	}
@@ -244,24 +232,35 @@ var RpgGui = class {
 	* ```
 	*/
 	add(gui) {
-		const guiId = gui.name || gui.id;
+		const component = this.resolveComponent(gui);
+		const guiId = this.resolveGuiId(gui, component);
 		if (!guiId) throw new Error("GUI must have a name or id");
+		const attachToSprite = this.resolveAttachToSprite(gui, component);
 		const guiInstance = {
 			name: guiId,
-			component: gui.component,
+			component,
 			display: signal(gui.display || false),
 			data: signal(gui.data || {}),
+			openId: void 0,
 			autoDisplay: gui.autoDisplay || false,
 			dependencies: gui.dependencies ? gui.dependencies() : [],
-			attachToSprite: gui.attachToSprite || false
+			attachToSprite
 		};
-		if (typeof gui.component !== "function") {
-			guiInstance.component = gui;
-			this.extraGuis.push(guiInstance);
-			if (guiInstance.autoDisplay) this._notifyVueGui(guiId, true, gui.data || {});
+		if (this.isVueComponentInstance(guiInstance)) {
+			this.removeCanvasGui(guiId);
+			const existingIndex = this.extraGuis.findIndex((existing) => existing.name === guiId);
+			if (existingIndex >= 0) {
+				this.extraGuis[existingIndex].subscription?.unsubscribe();
+				this.extraGuis[existingIndex] = guiInstance;
+			} else this.extraGuis.push(guiInstance);
+			this._initializeVueComponents();
+			if (guiInstance.autoDisplay) this.display(guiId, gui.data);
+			else this._notifyVueGui(guiId, guiInstance.display(), guiInstance.data());
 			return;
 		}
+		this.removeVueGui(guiId);
 		this.gui()[guiId] = guiInstance;
+		this._initializeVueComponents();
 		if (guiInstance.autoDisplay && typeof gui.component === "function") this.display(guiId, gui.data);
 	}
 	registerOptimisticReducer(guiId, reducer) {
@@ -283,8 +282,13 @@ var RpgGui = class {
 	* ```
 	*/
 	getAttachedGuis() {
-		const allGuis = this.getAll();
-		return Object.values(allGuis).filter((gui) => gui.attachToSprite === true);
+		return Object.values(this.gui()).filter((gui) => gui.attachToSprite === true);
+	}
+	getVueGuis() {
+		return [...this.extraGuis];
+	}
+	getAttachedVueGuis() {
+		return this.extraGuis.filter((gui) => gui.attachToSprite === true);
 	}
 	/**
 	* Check if a player should display attached GUIs
@@ -331,11 +335,12 @@ var RpgGui = class {
 	* gui.display('shop', { shopId: 1 }, [playerSignal, shopSignal]);
 	* ```
 	*/
-	display(id, data = {}, dependencies = []) {
+	display(id, data = {}, dependencies = [], openId) {
 		if (!this.exists(id)) throw throwError(id);
 		const guiInstance = this.get(id);
-		if (this.extraGuis.some((gui) => gui.name === id)) this._handleVueComponentDisplay(id, data, dependencies, guiInstance);
+		if (this.extraGuis.some((gui) => gui.name === id)) this._handleVueComponentDisplay(id, data, dependencies, guiInstance, openId);
 		else {
+			guiInstance.openId = openId;
 			guiInstance.data.set(data);
 			guiInstance.display.set(true);
 		}
@@ -353,15 +358,16 @@ var RpgGui = class {
 	* @param dependencies - Runtime dependencies
 	* @param guiInstance - GUI instance
 	*/
-	_handleVueComponentDisplay(id, data, dependencies, guiInstance) {
+	_handleVueComponentDisplay(id, data, dependencies, guiInstance, openId) {
 		if (guiInstance.subscription) {
 			guiInstance.subscription.unsubscribe();
 			guiInstance.subscription = void 0;
 		}
-		const deps = dependencies.length > 0 ? dependencies : guiInstance.dependencies ? guiInstance.dependencies() : [];
+		const deps = dependencies.length > 0 ? dependencies : guiInstance.dependencies ?? [];
 		if (deps.length > 0) {
 			guiInstance.subscription = combineLatest(deps.map((dependency) => dependency.observable)).subscribe((values) => {
 				if (values.every((value) => value !== void 0)) {
+					guiInstance.openId = openId;
 					guiInstance.data.set(data);
 					guiInstance.display.set(true);
 					this._notifyVueGui(id, true, data);
@@ -369,6 +375,7 @@ var RpgGui = class {
 			});
 			return;
 		}
+		guiInstance.openId = openId;
 		guiInstance.data.set(data);
 		guiInstance.display.set(true);
 		this._notifyVueGui(id, true, data);
@@ -394,11 +401,46 @@ var RpgGui = class {
 			guiInstance.subscription = void 0;
 		}
 		guiInstance.display.set(false);
+		guiInstance.openId = void 0;
 		if (this.extraGuis.some((gui) => gui.name === id)) this._notifyVueGui(id, false);
 	}
 	isVueComponent(id) {
 		return this.extraGuis.some((gui) => gui.name === id);
 	}
+	isVueComponentInstance(gui) {
+		return typeof gui.component !== "function";
+	}
+	removeCanvasGui(guiId) {
+		const current = this.gui();
+		if (!(guiId in current)) return;
+		const next = { ...current };
+		delete next[guiId];
+		this.gui.set(next);
+	}
+	removeVueGui(guiId) {
+		const removed = this.extraGuis.filter((existing) => existing.name === guiId);
+		removed.forEach((gui) => gui.subscription?.unsubscribe());
+		if (removed.length > 0) this.extraGuis = this.extraGuis.filter((existing) => existing.name !== guiId);
+	}
+	resolveComponent(gui) {
+		return gui?.component ?? gui;
+	}
+	resolveGuiId(gui, component) {
+		return gui?.name || gui?.id || component?.name || component?.__name;
+	}
+	resolveAttachToSprite(gui, component) {
+		return !!(gui?.attachToSprite || gui?.rpgAttachToSprite || component?.attachToSprite || component?.rpgAttachToSprite);
+	}
+	toGuiState(gui, display = gui.display(), data = gui.data()) {
+		return {
+			name: gui.name,
+			component: gui.component,
+			display,
+			data,
+			openId: gui.openId,
+			attachToSprite: gui.attachToSprite || false
+		};
+	}
 	clearPendingActions(guiId) {
 		this.pendingActions.delete(guiId);
 	}