@rpgjs/client 5.0.0-beta.12 → 5.0.0-beta.14

package/src/RpgClientEngine.ts

@@ -6,7 +6,7 @@ import { AbstractWebsocket, WebSocketToken } from "./services/AbstractSocket";
 import { LoadMapService, LoadMapToken } from "./services/loadMap";
 import { RpgSound } from "./Sound";
 import { RpgResource } from "./Resource";
-import { Hooks, ModulesToken, Direction, normalizeLightingState, Vector2 } from "@rpgjs/common";
+import { getOrCreateI18nService, Hooks, ModulesToken, Direction, normalizeLightingState, Vector2, type I18nParams, type I18nService } from "@rpgjs/common";
 import type { EventComponentConfig } from "./RpgClient";
 import type { RpgClientEvent } from "./Game/Event";
 import { load } from "@signe/sync";
@@ -27,6 +27,8 @@ import {
   type PredictionState,
   type RpgActionInput,
   type RpgActionName,
+  type RpgDashInput,
+  type RpgMovementInput,
 } from "@rpgjs/common";
 import { NotificationManager } from "./Gui/NotificationManager";
 import { SaveClientService } from "./services/save";
@@ -35,19 +37,97 @@ import { ProjectileManager, type ClientProjectileImpact, type ClientProjectileSp
 import { ClientVisualRegistry, type ClientVisualHandler, type ClientVisualMap, type ClientVisualPacket } from "./Game/ClientVisuals";
 import { normalizeActionInput } from "./services/actionInput";
 import { createClientPointerContext, type ClientPointerContext } from "./services/pointerContext";
+import { RpgClientInteractions } from "./services/interactions";
 import { normalizeRoomMapId } from "./utils/mapId";
 import { EventComponentResolverRegistry, type EventComponentResolver } from "./Game/EventComponentResolver";
+import { RpgClientBuiltinI18n } from "./i18n";
 
 interface MovementTrajectoryPoint {
   frame: number;
   tick: number;
   timestamp: number;
-  input: Direction;
+  input: RpgMovementInput;
   x: number;
   y: number;
   direction?: Direction;
 }
 
+const DEFAULT_DASH_ADDITIONAL_SPEED = 8;
+const DEFAULT_DASH_DURATION_MS = 180;
+const DEFAULT_DASH_COOLDOWN_MS = 450;
+
+const isDashInput = (input: RpgMovementInput): input is RpgDashInput =>
+  typeof input === "object" && input !== null && input.type === "dash";
+
+const isMoveInput = (
+  input: RpgMovementInput
+): input is { type: "move"; direction: Direction } =>
+  typeof input === "object" && input !== null && input.type === "move";
+
+const resolveMoveDirection = (input: RpgMovementInput): Direction | undefined => {
+  if (isMoveInput(input)) return input.direction;
+  if (typeof input === "string" || typeof input === "number") {
+    return input as Direction;
+  }
+  return undefined;
+};
+
+const directionToVector = (direction: Direction | undefined) => {
+  switch (direction) {
+    case Direction.Left:
+      return { x: -1, y: 0 };
+    case Direction.Right:
+      return { x: 1, y: 0 };
+    case Direction.Up:
+      return { x: 0, y: -1 };
+    case Direction.Down:
+    default:
+      return { x: 0, y: 1 };
+  }
+};
+
+const vectorToDirection = (direction: { x: number; y: number }): Direction => {
+  if (Math.abs(direction.x) > Math.abs(direction.y)) {
+    return direction.x < 0 ? Direction.Left : Direction.Right;
+  }
+  return direction.y < 0 ? Direction.Up : Direction.Down;
+};
+
+const normalizeDashInput = (
+  input: Partial<RpgDashInput>,
+  fallbackDirection: Direction | undefined
+): RpgDashInput | null => {
+  const rawDirection = input.direction ?? directionToVector(fallbackDirection);
+  const rawX = Number(rawDirection?.x ?? 0);
+  const rawY = Number(rawDirection?.y ?? 0);
+  const magnitude = Math.hypot(rawX, rawY);
+  if (!Number.isFinite(magnitude) || magnitude <= 0) return null;
+
+  const additionalSpeed =
+    typeof input.additionalSpeed === "number" && Number.isFinite(input.additionalSpeed)
+      ? Math.max(0, Math.min(input.additionalSpeed, 64))
+      : DEFAULT_DASH_ADDITIONAL_SPEED;
+  const duration =
+    typeof input.duration === "number" && Number.isFinite(input.duration)
+      ? Math.max(1, Math.min(input.duration, 1000))
+      : DEFAULT_DASH_DURATION_MS;
+  const cooldown =
+    typeof input.cooldown === "number" && Number.isFinite(input.cooldown)
+      ? Math.max(0, Math.min(input.cooldown, 5000))
+      : DEFAULT_DASH_COOLDOWN_MS;
+
+  return {
+    type: "dash",
+    direction: {
+      x: rawX / magnitude,
+      y: rawY / magnitude,
+    },
+    additionalSpeed,
+    duration,
+    cooldown,
+  };
+};
+
 type ConfigurableTrigger<T> = Omit<Trigger<T>, "start"> & {
   start(config?: T): Promise<void>;
 };
@@ -73,11 +153,13 @@ export class RpgClientEngine<T = any> {
   width = signal("100%");
   height = signal("100%");
   spritesheets: Map<string | number, any> = new Map();
+  private spritesheetPromises: Map<string | number, Promise<any>> = new Map();
   sounds: Map<string, any> = new Map();
   componentAnimations: any[] = [];
   clientVisuals = new ClientVisualRegistry();
   projectiles: ProjectileManager;
   pointer: ClientPointerContext = createClientPointerContext();
+  interactions: RpgClientInteractions = new RpgClientInteractions(this);
   private spritesheetResolver?: (id: string | number) => any | Promise<any>;
   private soundResolver?: (id: string) => any | Promise<any>;
   particleSettings: {
@@ -103,7 +185,7 @@ export class RpgClientEngine<T = any> {
   gamePause = signal(false);
 
   private predictionEnabled = false;
-  private prediction?: PredictionController<Direction>;
+  private prediction?: PredictionController<RpgMovementInput, Direction>;
   private readonly SERVER_CORRECTION_THRESHOLD = 30;
   private inputFrameCounter = 0;
   private pendingPredictionFrames: number[] = [];
@@ -111,6 +193,7 @@ export class RpgClientEngine<T = any> {
   private frameOffset = 0;
   private latestServerTick?: number;
   private latestServerTickAt = 0;
+  private dashLockedUntil = 0;
   // Ping/Pong for RTT measurement
   private rtt: number = 0; // Round-trip time in ms
   private pingInterval: any = null;
@@ -135,15 +218,21 @@ export class RpgClientEngine<T = any> {
   private tickSubscriptions: any[] = [];
   private resizeHandler?: () => void;
   private pointerMoveHandler?: (event: PointerEvent) => void;
+  private pointerUpHandler?: (event: PointerEvent) => void;
+  private pointerCancelHandler?: (event: PointerEvent) => void;
   private pointerCanvas?: HTMLCanvasElement;
   private pendingSyncPackets: any[] = [];
   private notificationManager: NotificationManager = new NotificationManager();
+  private i18nService: I18nService;
+  private locale?: string;
 
   constructor(public context) {
     this.webSocket = inject(WebSocketToken);
     this.guiService = inject(RpgGui);
     this.loadMapService = inject(LoadMapToken);
     this.hooks = inject<Hooks>(ModulesToken);
+    this.i18nService = getOrCreateI18nService(context);
+    this.i18nService.addMessages(RpgClientBuiltinI18n, "rpgjs-client", 0);
     this.projectiles = new ProjectileManager(
       this.hooks,
       (projectile) => this.predictProjectileImpact(projectile),
@@ -179,6 +268,25 @@ export class RpgClientEngine<T = any> {
     this.initializePredictionController();
   }
 
+  setLocale(locale: string) {
+    this.locale = locale;
+  }
+
+  getLocale(): string {
+    return this.locale || this.i18nService.defaultLocale;
+  }
+
+  t(key: string, params?: I18nParams): string {
+    return this.i18nService.t(key, params, this.getLocale());
+  }
+
+  i18n() {
+    return {
+      locale: this.getLocale(),
+      t: (key: string, params?: I18nParams) => this.t(key, params),
+    };
+  }
+
   /**
    * Assigns a CanvasEngine KeyboardControls instance to the dependency injection context
    * 
@@ -254,7 +362,6 @@ export class RpgClientEngine<T = any> {
     this.renderer = app.renderer as unknown as PIXI.Renderer;
     this.setupPointerTracking();
     this.tick = canvasElement?.propObservables?.context['tick'].observable
-    this.flushPendingSyncPackets();
 
     const inputCheckSubscription = this.tick.subscribe(() => {
       if (Date.now() - this.lastInputTime > 100) {
@@ -268,6 +375,7 @@ export class RpgClientEngine<T = any> {
 
     this.hooks.callHooks("client-spritesheets-load", this).subscribe();
     this.hooks.callHooks("client-spritesheetResolver-load", this).subscribe();
+    this.flushPendingSyncPackets();
     this.hooks.callHooks("client-sounds-load", this).subscribe();
     this.hooks.callHooks("client-soundResolver-load", this).subscribe();
 
@@ -278,6 +386,7 @@ export class RpgClientEngine<T = any> {
     this.hooks.callHooks("client-componentAnimations-load", this).subscribe();
     this.hooks.callHooks("client-clientVisuals-load", this).subscribe();
     this.hooks.callHooks("client-projectiles-load", this).subscribe();
+    this.hooks.callHooks("client-interactions-load", this).subscribe();
     this.hooks.callHooks("client-sprite-load", this).subscribe();
 
     await lastValueFrom(this.hooks.callHooks("client-engine-onStart", this));
@@ -324,7 +433,7 @@ export class RpgClientEngine<T = any> {
     }
 
     this.pointerCanvas = canvas;
-    this.pointerMoveHandler = (event: PointerEvent) => {
+    const updatePointer = (event: PointerEvent) => {
       const rect = canvas.getBoundingClientRect();
       const screen = {
         x: event.clientX - rect.left,
@@ -344,16 +453,67 @@ export class RpgClientEngine<T = any> {
       this.pointer.update(screen, world);
     };
 
+    this.pointerMoveHandler = (event: PointerEvent) => {
+      updatePointer(event);
+      this.interactions.handlePointerMove(event);
+    };
+    this.pointerUpHandler = (event: PointerEvent) => {
+      updatePointer(event);
+      this.interactions.handlePointerUp(event);
+    };
+    this.pointerCancelHandler = (event: PointerEvent) => {
+      updatePointer(event);
+      this.interactions.cancelDrag(event);
+    };
+
     canvas.addEventListener("pointermove", this.pointerMoveHandler);
     canvas.addEventListener("pointerdown", this.pointerMoveHandler);
+    canvas.addEventListener("pointerup", this.pointerUpHandler);
+    canvas.addEventListener("pointercancel", this.pointerCancelHandler);
+    canvas.addEventListener("pointerleave", this.pointerCancelHandler);
+  }
+
+  updatePointerFromInteractionEvent(event: any): void {
+    const global = event?.global ?? event?.data?.global;
+
+    if (!global) {
+      this.pointer.updateFromEvent(event);
+      return;
+    }
+
+    const screen = {
+      x: Number(global.x),
+      y: Number(global.y),
+    };
+    if (!Number.isFinite(screen.x) || !Number.isFinite(screen.y)) {
+      this.pointer.updateFromEvent(event);
+      return;
+    }
+
+    const viewport = this.findViewportInstance();
+    if (viewport && typeof viewport.toWorld === "function") {
+      const point = viewport.toWorld(screen.x, screen.y);
+      this.pointer.update(screen, { x: Number(point.x), y: Number(point.y) });
+      return;
+    }
+
+    this.pointer.update(screen);
   }
 
   private findViewportInstance(): any {
-    const children = (this.canvasApp as any)?.stage?.children ?? [];
-    return children.find((child: any) => (
-      typeof child?.toWorld === "function"
-      || child?.constructor?.name === "Viewport"
-    ));
+    const find = (node: any): any => {
+      if (!node) return undefined;
+      if (typeof node?.toWorld === "function" || node?.constructor?.name === "Viewport") {
+        return node;
+      }
+      for (const child of node.children ?? []) {
+        const viewport = find(child);
+        if (viewport) return viewport;
+      }
+      return undefined;
+    };
+
+    return find((this.canvasApp as any)?.stage);
   }
 
   private prepareSyncPayload(data: any): any {
@@ -793,6 +953,12 @@ export class RpgClientEngine<T = any> {
       throw error;
     }
     const res = await this.loadMapService.load(mapId)
+    const loadedLighting = typeof res?.lighting !== "undefined"
+      ? res.lighting
+      : res?.data?.lighting;
+    if (typeof loadedLighting !== "undefined") {
+      this.sceneMap.lightingState.set(normalizeLightingState(loadedLighting));
+    }
     this.sceneMap.data.set(res)
     
     // Check if playerId is already present
@@ -883,17 +1049,29 @@ export class RpgClientEngine<T = any> {
 
     // If not in cache and resolver exists, use it
     if (this.spritesheetResolver) {
+      if (this.spritesheetPromises.has(id)) {
+        return this.spritesheetPromises.get(id);
+      }
+
       const result = this.spritesheetResolver(id);
 
       // Check if result is a Promise
       if (result instanceof Promise) {
-        return result.then((spritesheet) => {
-          if (spritesheet) {
-            // Cache the resolved spritesheet
-            this.spritesheets.set(id, spritesheet);
-          }
-          return spritesheet;
-        });
+        const promise = result
+          .then((spritesheet) => {
+            if (spritesheet) {
+              // Cache the resolved spritesheet
+              this.spritesheets.set(id, spritesheet);
+            }
+            this.spritesheetPromises.delete(id);
+            return spritesheet;
+          })
+          .catch((error) => {
+            this.spritesheetPromises.delete(id);
+            throw error;
+          });
+        this.spritesheetPromises.set(id, promise);
+        return promise;
       } else {
         // Synchronous result
         if (result) {
@@ -1515,7 +1693,7 @@ export class RpgClientEngine<T = any> {
     });
   }
 
-  async processInput({ input }: { input: Direction }) {
+  async processInput({ input }: { input: RpgMovementInput }) {
     if (this.stopProcessingInput) return;
 
     const currentPlayer = this.sceneMap.getCurrentPlayer() as any;
@@ -1528,10 +1706,20 @@ export class RpgClientEngine<T = any> {
     }
 
     const timestamp = Date.now();
+    const movementInput = isDashInput(input)
+      ? normalizeDashInput(input, currentPlayer?.direction?.())
+      : input;
+    if (!movementInput) return;
+    if (isDashInput(movementInput)) {
+      const cooldown = movementInput.cooldown ?? DEFAULT_DASH_COOLDOWN_MS;
+      if (timestamp < this.dashLockedUntil) return;
+      this.dashLockedUntil = timestamp + cooldown;
+    }
+
     let frame: number;
     let tick: number;
     if (this.predictionEnabled && this.prediction) {
-      const meta = this.prediction.recordInput(input, timestamp);
+      const meta = this.prediction.recordInput(movementInput, timestamp);
       frame = meta.frame;
       tick = meta.tick;
     } else {
@@ -1539,12 +1727,11 @@ export class RpgClientEngine<T = any> {
       tick = this.getPhysicsTick();
     }
     this.inputFrameCounter = frame;
-    this.hooks.callHooks("client-engine-onInput", this, { input, playerId: this.playerId }).subscribe();
+    this.hooks.callHooks("client-engine-onInput", this, { input: movementInput, playerId: this.playerId }).subscribe();
 
     const bodyReady = this.ensureCurrentPlayerBody();
     if (currentPlayer && bodyReady) {
-      currentPlayer.changeDirection(input);
-      (this.sceneMap as any).moveBody(currentPlayer, input);
+      this.applyPredictedMovementInput(currentPlayer, movementInput);
       if (this.predictionEnabled && this.prediction) {
         this.pendingPredictionFrames.push(frame);
         if (this.pendingPredictionFrames.length > 240) {
@@ -1553,8 +1740,21 @@ export class RpgClientEngine<T = any> {
       }
     }
 
-    this.emitMovePacket(input, frame, tick, timestamp, true);
-    this.lastInputTime = Date.now();
+    this.emitMovePacket(movementInput, frame, tick, timestamp, true);
+    this.lastInputTime = isDashInput(movementInput)
+      ? Date.now() + (movementInput.duration ?? DEFAULT_DASH_DURATION_MS)
+      : Date.now();
+  }
+
+  async processDash(input: Partial<RpgDashInput> = {}) {
+    const currentPlayer = this.sceneMap.getCurrentPlayer() as any;
+    const fallbackDirection =
+      typeof currentPlayer?.direction === "function"
+        ? currentPlayer.direction()
+        : currentPlayer?.direction;
+    const dashInput = normalizeDashInput(input, fallbackDirection);
+    if (!dashInput) return;
+    await this.processInput({ input: dashInput });
   }
 
   processAction(action: RpgActionName, data?: any): void;
@@ -1730,7 +1930,7 @@ export class RpgClientEngine<T = any> {
         input: entry.direction,
         x: state.x,
         y: state.y,
-        direction: state.direction ?? entry.direction,
+        direction: state.direction ?? resolveMoveDirection(entry.direction),
       });
     }
     if (trajectory.length > this.MAX_MOVE_TRAJECTORY_POINTS) {
@@ -1740,7 +1940,7 @@ export class RpgClientEngine<T = any> {
   }
 
   private emitMovePacket(
-    input: Direction,
+    input: RpgMovementInput,
     frame: number,
     tick: number,
     timestamp: number,
@@ -1795,6 +1995,22 @@ export class RpgClientEngine<T = any> {
     this.emitMovePacket(latest.direction, latest.frame, latest.tick, now, false);
   }
 
+  private applyPredictedMovementInput(
+    player: any,
+    input: RpgMovementInput
+  ): boolean {
+    if (isDashInput(input)) {
+      const direction = vectorToDirection(input.direction);
+      player.changeDirection(direction);
+      return Boolean((this.sceneMap as any).dashBody?.(player, input));
+    }
+
+    const direction = resolveMoveDirection(input);
+    if (!direction) return false;
+    player.changeDirection(direction);
+    return Boolean((this.sceneMap as any).moveBody?.(player, direction));
+  }
+
   private getLocalPlayerState(): PredictionState<Direction> {
     const currentPlayer = this.sceneMap?.getCurrentPlayer();
     if (!currentPlayer) {
@@ -1838,7 +2054,7 @@ export class RpgClientEngine<T = any> {
         ? configuredMaxEntries
         : Math.max(600, Math.ceil(historyTtlMs / 16) + 120);
     this.sceneMap?.configureClientPrediction?.(true);
-    this.prediction = new PredictionController<Direction>({
+    this.prediction = new PredictionController<RpgMovementInput, Direction>({
       correctionThreshold: (this.globalConfig as any)?.prediction?.correctionThreshold ?? this.SERVER_CORRECTION_THRESHOLD,
       historyTtlMs,
       maxHistoryEntries,
@@ -2053,7 +2269,7 @@ export class RpgClientEngine<T = any> {
 
   private reconcilePrediction(
     authoritativeState: PredictionState<Direction>,
-    pendingInputs: PredictionHistoryEntry<Direction>[],
+    pendingInputs: PredictionHistoryEntry<RpgMovementInput, Direction>[],
   ): void {
     const player = this.getCurrentPlayer() as any;
     if (!player) {
@@ -2075,7 +2291,7 @@ export class RpgClientEngine<T = any> {
     const replayInputs = pendingInputs.slice(-600);
     for (const entry of replayInputs) {
       if (!entry?.direction) continue;
-      (this.sceneMap as any).moveBody(player, entry.direction);
+      this.applyPredictedMovementInput(player, entry.direction);
       this.sceneMap.stepPredictionTick();
       this.prediction?.attachPredictedState(entry.frame, this.getLocalPlayerState());
     }
@@ -2178,7 +2394,16 @@ export class RpgClientEngine<T = any> {
       if (this.pointerMoveHandler && this.pointerCanvas) {
         this.pointerCanvas.removeEventListener('pointermove', this.pointerMoveHandler);
         this.pointerCanvas.removeEventListener('pointerdown', this.pointerMoveHandler);
+        if (this.pointerUpHandler) {
+          this.pointerCanvas.removeEventListener('pointerup', this.pointerUpHandler);
+        }
+        if (this.pointerCancelHandler) {
+          this.pointerCanvas.removeEventListener('pointercancel', this.pointerCancelHandler);
+          this.pointerCanvas.removeEventListener('pointerleave', this.pointerCancelHandler);
+        }
         this.pointerMoveHandler = undefined;
+        this.pointerUpHandler = undefined;
+        this.pointerCancelHandler = undefined;
         this.pointerCanvas = undefined;
       }
 

package/src/components/character.ce

@@ -1,4 +1,19 @@
-<Container x={smoothX} y={smoothY} zIndex={z} viewportFollow={shouldFollowCamera} controls onBeforeDestroy  visible>
+<Container
+  x={smoothX}
+  y={smoothY}
+  zIndex={z}
+  viewportFollow={shouldFollowCamera}
+  controls
+  onBeforeDestroy
+  visible
+  cursor={interactionCursor}
+  pointerover={interactionPointerOver}
+  pointerout={interactionPointerOut}
+  pointerdown={interactionPointerDown}
+  pointerup={interactionPointerUp}
+  pointermove={interactionPointerMove}
+  click={interactionClick}
+>
   @for (compConfig of normalizedComponentsBehind) {
     <Container>
       <compConfig.component object={sprite} ...compConfig.props />
@@ -34,11 +49,17 @@
       <compConfig.component object={sprite} ...compConfig.props />
     </Container>
   }
+  <InteractionComponents
+    object={sprite}
+    bounds={graphicBounds}
+    hitboxBounds={hitboxBounds}
+    graphicBounds={graphicBounds}
+  />
   @for (attachedGui of attachedGuis) {
     @if (shouldDisplayAttachedGui) {
       <Container>
-        <attachedGui.component ...attachedGui.data() dependencies={attachedGui.dependencies} object={sprite} onFinish={(data) => {
-          onAttachedGuiFinish(attachedGui, data)
+        <attachedGui.component ...attachedGui.data() dependencies={attachedGui.dependencies} object={sprite} guiOpenId={attachedGui.openId} onFinish={(data, guiOpenId) => {
+          onAttachedGuiFinish(attachedGui, data, guiOpenId)
         }} onInteraction={(name, data) => {
           onAttachedGuiInteraction(attachedGui, name, data)
         }} />
@@ -53,13 +74,14 @@
 
   import { lastValueFrom, combineLatest, pairwise, filter, map, startWith } from "rxjs";
   import { Particle } from "@canvasengine/presets";
-  import { GameEngineToken, ModulesToken } from "@rpgjs/common";
+  import { GameEngineToken, ModulesToken, shouldRenderLightingShadows } from "@rpgjs/common";
   import { RpgClientEngine } from "../RpgClientEngine";
   import { inject } from "../core/inject";  
   import { Direction, Animation } from "@rpgjs/common";
   import { normalizeEventComponent } from "../Game/EventComponentResolver";
   import Hit from "./effects/hit.ce";
   import PlayerComponents from "./player-components.ce";
+  import InteractionComponents from "./interaction-components.ce";
   import { RpgGui } from "../Gui/Gui";
   import { getCanMoveValue } from "../utils/readPropValue";
   import {
@@ -91,7 +113,7 @@
   const isMe = computed(isCurrentPlayer);
   const shadowsEnabled = computed(() => {
     const lighting = client.sceneMap?.lighting?.();
-    return Boolean(lighting?.shadows?.enabled || (lighting?.spots?.length ?? 0) > 0);
+    return shouldRenderLightingShadows(lighting);
   });
 
   /**
@@ -352,6 +374,20 @@
     return direction();
   };
 
+  const directionToDashVector = (currentDirection) => {
+    switch (currentDirection) {
+      case Direction.Left:
+        return { x: -1, y: 0 };
+      case Direction.Right:
+        return { x: 1, y: 0 };
+      case Direction.Up:
+        return { x: 0, y: -1 };
+      case Direction.Down:
+      default:
+        return { x: 0, y: 1 };
+    }
+  };
+
   const withCurrentDirection = (payload) => {
     if (payload.action !== 'action') return payload;
     const data = payload.data && typeof payload.data === 'object'
@@ -393,6 +429,13 @@
     playPredictedWalkAnimation();
   };
 
+  const processDashInput = () => {
+    if (!canControls()) return;
+    client.processDash({
+      direction: directionToDashVector(resolveSpriteDirection()),
+    });
+  };
+
   const actionBind = () => getKeyboardControlBind(keyboardControls.action);
   const keyboardEventId = (event) => `${event.keyCode}:${event.code}:${event.key}`;
 
@@ -463,6 +506,12 @@
         }
       },
     },
+    dash: {
+      bind: keyboardControls.dash,
+      keyDown() {
+        processDashInput()
+      },
+    },
     escape: {
       bind: keyboardControls.escape,
       keyDown() {
@@ -512,7 +561,7 @@
   }
 
   const graphicScale = (graphicObject) => {
-    const scale = graphicObject?.scale;
+    const scale = graphicObject?.displayScale ?? graphicObject?.scale;
     if (Array.isArray(scale)) return scale;
     if (typeof scale === 'number') return [scale, scale];
     if (scale && typeof scale === 'object') {
@@ -824,6 +873,31 @@
     };
   });
 
+  const interactionBounds = () => ({
+    bounds: graphicBounds(),
+    hitbox: hitboxBounds(),
+    graphic: graphicBounds()
+  });
+
+  const interactionCursor = computed(() =>
+    client.interactions.cursorFor(sprite, interactionBounds())
+  );
+
+  const handleInteraction = (type) => (event) => {
+    client.updatePointerFromInteractionEvent(event);
+    client.interactions.handle(sprite, type, {
+      event,
+      bounds: interactionBounds()
+    });
+  };
+
+  const interactionPointerOver = handleInteraction('pointerover');
+  const interactionPointerOut = handleInteraction('pointerout');
+  const interactionPointerDown = handleInteraction('pointerdown');
+  const interactionPointerUp = handleInteraction('pointerup');
+  const interactionPointerMove = handleInteraction('pointermove');
+  const interactionClick = handleInteraction('click');
+
   // Combine animation change detection with movement state from smoothX/smoothY
   const movementAnimations = ['walk', 'stand'];
   const epsilon = 0; // movement threshold to consider the easing still running
@@ -897,7 +971,8 @@
     const isTemporaryAnimationPlaying =
       sprite.animationIsPlaying && sprite.animationIsPlaying();
 
-    if (sprite.animationFixed && isMovementAnimation && isTemporaryAnimationPlaying) {
+    if (sprite.animationFixed && isMovementAnimation) {
+      realAnimationName.set(curr);
       return;
     }
 
@@ -1001,8 +1076,16 @@
    * @param gui - The GUI instance
    * @param data - Data passed from the GUI component
    */
-  const onAttachedGuiFinish = (gui, data) => {
-    guiService.guiClose(gui.name, data);
+  const normalizeOpenId = (value) => {
+    const resolved = typeof value === "function" ? value() : value;
+    return typeof resolved === "string" && resolved.length > 0 ? resolved : undefined;
+  };
+
+  const onAttachedGuiFinish = (gui, data, guiOpenId) => {
+    const completedOpenId = normalizeOpenId(guiOpenId);
+    const currentOpenId = normalizeOpenId(gui.openId);
+    if (completedOpenId && currentOpenId && completedOpenId !== currentOpenId) return;
+    guiService.guiClose(gui.name, data, completedOpenId ?? currentOpenId);
   };
 
   /**