@rpgjs/client 5.0.0-beta.3 → 5.0.0-beta.5

package/dist/components/gui/dialogbox/index.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.ce.js","names":[],"sources":["../../../../src/components/gui/dialogbox/index.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" controls={dialogControls}>\n    <div\n        class=\"rpg-ui-dialog-container\"\n        data-position={dialogPosition()}\n        data-full-width={isFullWidth() ? \"true\" : \"false\"}\n        data-has-face={hasFace() ? \"true\" : \"false\"}\n    >\n        <div class=\"rpg-ui-dialog rpg-anim-fade-in\">\n            <div class=\"rpg-ui-dialog-body\">\n               <div>\n                    @if (speakerName()) {\n                        <div class=\"rpg-ui-dialog-speaker\">{speakerName()}</div>\n                    }\n                    <div class=\"rpg-ui-dialog-content\">\n                        {displayMessage()}\n                    </div>\n                    @if (hasChoices()) {\n                        <Navigation tabindex={selectedItem} controls={controls}>\n                            <div class=\"rpg-ui-dialog-choices\">\n                                @for ((choice,index) of choices) {\n                                    <div\n                                        class=\"rpg-ui-dialog-choice\"\n                                        class={{active: selectedItem() === index}}\n                                        tabindex={index}\n                                        data-choice-index={index}\n                                        click={selectChoice(index)}\n                                    >{{ choice.text }}</div>\n                                }\n                            </div>\n                        </Navigation>\n                    }\n               </div>\n                @if (hasFace()) {\n                    <div class=\"rpg-ui-dialog-face\">\n                        <DOMSprite sheet={faceSheet(face.id, face.expression)} />\n                    </div>\n                }\n            </div>\n            @if (showIndicator) {\n                <div class=\"rpg-ui-dialog-indicator\"></div>\n            }\n        </div>\n    </div>\n</DOMContainer>\n    \n<script>\n    import { effect, signal, computed, createTabindexNavigator, mount } from \"canvasengine\";\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\n    import { delay } from \"@rpgjs/common\";\n\n    const engine = inject(RpgClientEngine);\n    const currentPlayer = engine.scene.currentPlayer\n    const keyboardControls = engine.globalConfig.keyboardControls;\n\n    engine.stopProcessingInput = true;\n\n    const selectedItem = signal(0)\n    let isDestroyed = false;\n\n    const {\n        data,\n        onFinish,\n        onInteraction\n    } = defineProps();\n\n    const { message, choices, face, speaker, position, typewriterEffect, autoClose } = data();\n    const fullWidth = computed(() => data().fullWidth || false);\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n\n    const speakerName = computed(() => {\n        const value = resolveProp(speaker);\n        return value ? String(value) : \"\";\n    });\n\n    const dialogPosition = computed(() => resolveProp(position) || \"bottom\");\n    const isFullWidth = computed(() => resolveProp(fullWidth) !== false);\n    const hasFace = computed(() => !!resolveProp(face));\n\n    const displayMessage = signal(\"\");\n    const fullMessage = signal(\"\");\n    const isTyping = signal(false);\n    let typewriterTimer = null;\n    let rootElement = null;\n\n    mount((element) => {\n        rootElement = element;\n    });\n\n    const startTypewriter = (text) => {\n        if (typewriterTimer) clearInterval(typewriterTimer);\n        displayMessage.set(\"\");\n        if (!text) return;\n        let index = 0;\n        isTyping.set(true);\n        typewriterTimer = setInterval(() => {\n            index += 1;\n            displayMessage.set(text.slice(0, index));\n            if (index >= text.length) {\n                clearInterval(typewriterTimer);\n                typewriterTimer = null;\n                isTyping.set(false);\n            }\n        }, 20);\n    };\n\n    const finishTyping = () => {\n        if (typewriterTimer) clearInterval(typewriterTimer);\n        typewriterTimer = null;\n        displayMessage.set(fullMessage());\n        isTyping.set(false);\n    };\n\n    effect(() => {\n        const text = resolveProp(message) || \"\";\n        fullMessage.set(text);\n        const useTypewriter = resolveProp(typewriterEffect) !== false;\n        if (!useTypewriter) {\n            finishTyping();\n            return;\n        }\n        startTypewriter(text);\n    });\n\n\n    const hasChoices = computed(() => choices.length > 0);\n    const showIndicator = computed(() => !hasChoices() && !isTyping());\n    const nav = createTabindexNavigator(selectedItem, { count: () => choices.length }, 'wrap');\n\n    function selectChoice(index) {\n        return function() {\n            selectedItem.set(index);\n            onSelect(index);\n        }\n    }\n\n    function _onFinish(value) {\n        if (onFinish) onFinish(value);\n    }\n\n    const onSelect = (index) => {\n        _onFinish(index);\n    };\n\n    const controls = signal({\n        up: {\n            repeat: true,\n            bind: keyboardControls.up,\n            throttle: 150,\n            keyDown() {\n                if (!hasChoices()) return;\n                nav.next(-1);\n            }\n        },\n        down: {\n            repeat: true,\n            bind: keyboardControls.down,\n            throttle: 150,\n            keyDown() {\n                if (!hasChoices()) return;\n                nav.next(1);\n            }\n        },\n        action: {\n            bind: keyboardControls.action,\n            keyDown() {\n                if (isTyping()) {\n                    finishTyping();\n                    return;\n                }\n                if (!hasChoices()) return;\n                onSelect(selectedItem());\n            }\n        },\n        gamepad: {\n            enabled: true\n        }\n    });\n    \n    const dialogControls = signal({\n        action: {\n            bind: keyboardControls.action,\n            keyDown() {\n                if (isTyping()) {\n                    finishTyping();\n                    return;\n                }\n                if (hasChoices()) return;\n                _onFinish();\n            }\n        },\n    })\n\n    const faceSheet = (graphicId, animationName) => {\n        return {\n            definition: engine.getSpriteSheet(graphicId),\n            playing: animationName,\n        };\n    }\n\n    mount((element) => {\n        return () => {\n            isDestroyed = true;\n            // Wait destroy is finished before start processing input\n            delay(() => {\n                engine.stopProcessingInput = false;\n            })\n        }\n  })\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"index.ce.js","names":[],"sources":["../../../../src/components/gui/dialogbox/index.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" controls={dialogControls}>\n    <div\n        class=\"rpg-ui-dialog-container\"\n        data-position={dialogPosition()}\n        data-full-width={isFullWidth() ? \"true\" : \"false\"}\n        data-has-face={hasFace() ? \"true\" : \"false\"}\n    >\n        <div class=\"rpg-ui-dialog rpg-anim-fade-in\">\n            <div class=\"rpg-ui-dialog-body\">\n               <div>\n                    @if (speakerName()) {\n                        <div class=\"rpg-ui-dialog-speaker\">{speakerName()}</div>\n                    }\n                    <div class=\"rpg-ui-dialog-content\">\n                        {displayMessage()}\n                    </div>\n                    @if (hasChoices()) {\n                        <Navigation tabindex={selectedItem} controls={controls}>\n                            <div class=\"rpg-ui-dialog-choices\">\n                                @for ((choice,index) of choices) {\n                                    <div\n                                        class=\"rpg-ui-dialog-choice\"\n                                        class={{active: selectedItem() === index}}\n                                        tabindex={index}\n                                        data-choice-index={index}\n                                        click={selectChoice(index)}\n                                    >{{ choice.text }}</div>\n                                }\n                            </div>\n                        </Navigation>\n                    }\n                </div>\n                @if (hasFace()) {\n                    <div class=\"rpg-ui-dialog-face\">\n                        <DOMSprite\n                            sheet={faceSheet(dialogFace())}\n                            width=\"100%\"\n                            height=\"100%\"\n                            objectFit=\"contain\"\n                        />\n                    </div>\n                }\n            </div>\n            @if (showIndicator) {\n                <div class=\"rpg-ui-dialog-indicator\"></div>\n            }\n        </div>\n    </div>\n</DOMContainer>\n    \n<script>\n    import { effect, signal, computed, createTabindexNavigator, mount } from \"canvasengine\";\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\n    import { delay } from \"@rpgjs/common\";\n\n    const engine = inject(RpgClientEngine);\n    const currentPlayer = engine.scene.currentPlayer\n    const keyboardControls = engine.globalConfig.keyboardControls;\n\n    engine.stopProcessingInput = true;\n\n    const selectedItem = signal(0)\n    let isDestroyed = false;\n\n    const {\n        data,\n        onFinish,\n        onInteraction\n    } = defineProps();\n\n    const { message, choices, face, speaker, position, typewriterEffect, autoClose } = data();\n    const fullWidth = computed(() => data().fullWidth || false);\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n\n    const speakerName = computed(() => {\n        const value = resolveProp(speaker);\n        return value ? String(value) : \"\";\n    });\n\n    const dialogPosition = computed(() => resolveProp(position) || \"bottom\");\n    const isFullWidth = computed(() => resolveProp(fullWidth) !== false);\n    const dialogFace = computed(() => resolveProp(face));\n    const hasFace = computed(() => {\n        const value = dialogFace();\n        return !!(value && value.id);\n    });\n\n    const displayMessage = signal(\"\");\n    const fullMessage = signal(\"\");\n    const isTyping = signal(false);\n    let typewriterTimer = null;\n    let rootElement = null;\n\n    mount((element) => {\n        rootElement = element;\n    });\n\n    const startTypewriter = (text) => {\n        if (typewriterTimer) clearInterval(typewriterTimer);\n        displayMessage.set(\"\");\n        if (!text) return;\n        let index = 0;\n        isTyping.set(true);\n        typewriterTimer = setInterval(() => {\n            index += 1;\n            displayMessage.set(text.slice(0, index));\n            if (index >= text.length) {\n                clearInterval(typewriterTimer);\n                typewriterTimer = null;\n                isTyping.set(false);\n            }\n        }, 20);\n    };\n\n    const finishTyping = () => {\n        if (typewriterTimer) clearInterval(typewriterTimer);\n        typewriterTimer = null;\n        displayMessage.set(fullMessage());\n        isTyping.set(false);\n    };\n\n    effect(() => {\n        const text = resolveProp(message) || \"\";\n        fullMessage.set(text);\n        const useTypewriter = resolveProp(typewriterEffect) !== false;\n        if (!useTypewriter) {\n            finishTyping();\n            return;\n        }\n        startTypewriter(text);\n    });\n\n\n    const hasChoices = computed(() => choices.length > 0);\n    const showIndicator = computed(() => !hasChoices() && !isTyping());\n    const nav = createTabindexNavigator(selectedItem, { count: () => choices.length }, 'wrap');\n\n    function selectChoice(index) {\n        return function() {\n            selectedItem.set(index);\n            onSelect(index);\n        }\n    }\n\n    function _onFinish(value) {\n        if (onFinish) onFinish(value);\n    }\n\n    const onSelect = (index) => {\n        _onFinish(index);\n    };\n\n    const controls = signal({\n        up: {\n            repeat: true,\n            bind: keyboardControls.up,\n            throttle: 150,\n            keyDown() {\n                if (!hasChoices()) return;\n                nav.next(-1);\n            }\n        },\n        down: {\n            repeat: true,\n            bind: keyboardControls.down,\n            throttle: 150,\n            keyDown() {\n                if (!hasChoices()) return;\n                nav.next(1);\n            }\n        },\n        action: {\n            bind: keyboardControls.action,\n            keyDown() {\n                if (isTyping()) {\n                    finishTyping();\n                    return;\n                }\n                if (!hasChoices()) return;\n                onSelect(selectedItem());\n            }\n        },\n        gamepad: {\n            enabled: true\n        }\n    });\n    \n    const dialogControls = signal({\n        action: {\n            bind: keyboardControls.action,\n            keyDown() {\n                if (isTyping()) {\n                    finishTyping();\n                    return;\n                }\n                if (hasChoices()) return;\n                _onFinish();\n            }\n        },\n    })\n\n    const faceSheet = (faceValue) => {\n        return {\n            definition: engine.getSpriteSheet(faceValue.id),\n            playing: faceValue.expression || \"default\",\n        };\n    }\n\n    mount((element) => {\n        return () => {\n            isDestroyed = true;\n            // Wait destroy is finished before start processing input\n            delay(() => {\n                engine.stopProcessingInput = false;\n            })\n        }\n  })\n</script>\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/client",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-beta.5",
   "description": "RPGJS is a framework for creating RPG/MMORPG games",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,9 +22,9 @@
     "pixi.js": "^8.9.2"
   },
   "dependencies": {
-    "@rpgjs/common": "5.0.0-beta.3",
-    "@rpgjs/server": "5.0.0-beta.3",
-    "@rpgjs/ui-css": "5.0.0-beta.3",
+    "@rpgjs/common": "5.0.0-beta.5",
+    "@rpgjs/server": "5.0.0-beta.5",
+    "@rpgjs/ui-css": "5.0.0-beta.5",
     "@signe/di": "^2.9.0",
     "@signe/room": "^2.9.0",
     "@signe/sync": "^2.9.0",

package/src/Game/Object.ts

@@ -1,6 +1,6 @@
 import { Hooks, ModulesToken, RpgCommonPlayer } from "@rpgjs/common";
 import { trigger, signal, effect } from "canvasengine";
-import { filter, from, map, Subscription, switchMap } from "rxjs";
+import { filter, from, map, of, Subscription, switchMap } from "rxjs";
 import { inject } from "../core/inject";
 import { RpgClientEngine } from "../RpgClientEngine";
 import TextComponent from "../components/dynamics/text.ce";
@@ -11,6 +11,11 @@ const DYNAMIC_COMPONENTS = {
 
 type Frame = { x: number; y: number; ts: number };
 
+type AnimationRestoreOptions = {
+  restoreAnimationName?: string;
+  restoreGraphics?: any[];
+};
+
 export abstract class RpgClientObject extends RpgCommonPlayer {
   abstract _type: string;
   emitParticleTrigger = trigger();
@@ -22,6 +27,10 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
   graphicsSignals = signal<any[]>([]);
   _component = {} // temporary component memory
   flashTrigger = trigger();
+  private animationRestoreState?: {
+    animationName: string;
+    graphics: any[];
+  };
 
   constructor() {
     super();
@@ -39,8 +48,10 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
     this.graphics.observable
     .pipe(
       map(({ items }) => items),
-      filter(graphics => graphics.length > 0),
-      switchMap(graphics => from(Promise.all(graphics.map(graphic => this.engine.getSpriteSheet(graphic)))))
+      switchMap(graphics => {
+        if (graphics.length === 0) return of([]);
+        return from(Promise.all(graphics.map(graphic => this.engine.getSpriteSheet(graphic))));
+      })
     )
     .subscribe((sheets) => {  
       this.graphicsSignals.set(sheets);
@@ -101,6 +112,30 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
   }
 
   private animationSubscription?: Subscription;
+  private animationResetTimeout?: ReturnType<typeof setTimeout>;
+
+  private clearAnimationControls() {
+    if (this.animationSubscription) {
+      this.animationSubscription.unsubscribe();
+      this.animationSubscription = undefined;
+    }
+    if (this.animationResetTimeout) {
+      clearTimeout(this.animationResetTimeout);
+      this.animationResetTimeout = undefined;
+    }
+  }
+
+  private finishTemporaryAnimation() {
+    const restoreState = this.animationRestoreState;
+    this.clearAnimationControls();
+    this.animationCurrentIndex.set(0);
+    if (restoreState) {
+      this.animationName.set(restoreState.animationName);
+      this.graphics.set([...restoreState.graphics]);
+    }
+    this.animationRestoreState = undefined;
+    this.animationIsPlaying.set(false);
+  }
 
   /**
    * Trigger a flash animation on this sprite
@@ -199,12 +234,13 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
    * ```
    */
   resetAnimationState() {
+    if (this.animationRestoreState) {
+      this.finishTemporaryAnimation();
+      return;
+    }
     this.animationIsPlaying.set(false);
     this.animationCurrentIndex.set(0);
-    if (this.animationSubscription) {
-      this.animationSubscription.unsubscribe();
-      this.animationSubscription = undefined;
-    }
+    this.clearAnimationControls();
   }
 
   /**
@@ -226,7 +262,7 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
    * player.setAnimation('spell');
    * ```
    */
-  setAnimation(animationName: string, nbTimes?: number): void;
+  setAnimation(animationName: string, nbTimes?: number, options?: AnimationRestoreOptions): void;
   /**
    * Set a custom animation with temporary graphic change
    *
@@ -244,30 +280,52 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
    * player.setAnimation('attack', 'hero_attack', 3);
    * ```
    */
-  setAnimation(animationName: string, graphic?: string | string[], nbTimes?: number): void;
-  setAnimation(animationName: string, graphicOrNbTimes?: string | string[] | number, nbTimes?: number): void {
-    if (this.animationIsPlaying()) return;
-    this.animationIsPlaying.set(true);
-    const previousAnimationName = this.animationName();
-    const previousGraphics = this.graphics();
-    this.animationCurrentIndex.set(0);
-
+  setAnimation(animationName: string, graphic?: string | string[], nbTimes?: number, options?: AnimationRestoreOptions): void;
+  setAnimation(
+    animationName: string,
+    graphicOrNbTimes?: string | string[] | number,
+    nbTimesOrOptions?: number | AnimationRestoreOptions,
+    options?: AnimationRestoreOptions
+  ): void {
     let graphic: string | string[] | undefined;
     let finalNbTimes: number = Infinity;
+    let restoreOptions: AnimationRestoreOptions | undefined = options;
 
     // Handle overloads
     if (typeof graphicOrNbTimes === 'number') {
       // setAnimation(animationName, nbTimes)
       finalNbTimes = graphicOrNbTimes;
+      restoreOptions = typeof nbTimesOrOptions === 'object' ? nbTimesOrOptions : options;
     } else if (graphicOrNbTimes !== undefined) {
       // setAnimation(animationName, graphic, nbTimes)
       graphic = graphicOrNbTimes;
-      finalNbTimes = nbTimes ?? Infinity;
+      if (typeof nbTimesOrOptions === 'number') {
+        finalNbTimes = nbTimesOrOptions;
+      } else {
+        finalNbTimes = Infinity;
+        restoreOptions = nbTimesOrOptions ?? options;
+      }
     } else {
       // setAnimation(animationName) - nbTimes remains Infinity
       finalNbTimes = Infinity;
     }
 
+    if (this.animationIsPlaying()) {
+      this.finishTemporaryAnimation();
+    }
+
+    this.animationIsPlaying.set(true);
+    const previousAnimationName =
+      restoreOptions?.restoreAnimationName ?? this.animationName();
+    const previousGraphics = restoreOptions?.restoreGraphics
+      ? [...restoreOptions.restoreGraphics]
+      : [...this.graphics()];
+    this.animationRestoreState = {
+      animationName: previousAnimationName,
+      graphics: previousGraphics,
+    };
+    this.animationCurrentIndex.set(0);
+
     // Temporarily change graphic if provided
     if (graphic !== undefined) {
       if (Array.isArray(graphic)) {
@@ -277,27 +335,23 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
       }
     }
 
-    // Clean up any existing subscription
-    if (this.animationSubscription) {
-      this.animationSubscription.unsubscribe();
-    }
+    this.clearAnimationControls();
 
     this.animationSubscription =
       this.animationCurrentIndex.observable.subscribe((index) => {
         if (index >= finalNbTimes) {
-          this.animationCurrentIndex.set(0);
-          this.animationName.set(previousAnimationName);
-          // Reset graphic to previous value if it was changed
-          if (graphic !== undefined) {
-            this.graphics.set(previousGraphics);
-          }
-          this.animationIsPlaying.set(false);
-          if (this.animationSubscription) {
-            this.animationSubscription.unsubscribe();
-            this.animationSubscription = undefined;
-          }
+          this.finishTemporaryAnimation();
         }
       });
+
+    if (finalNbTimes !== Infinity) {
+      this.animationResetTimeout = setTimeout(() => {
+        if (this.animationIsPlaying()) {
+          this.finishTemporaryAnimation();
+        }
+      }, Math.max(1000, finalNbTimes * 1000));
+    }
+
     this.animationName.set(animationName);
   }
 

package/src/RpgClientEngine.ts

@@ -374,15 +374,27 @@ export class RpgClientEngine<T = any> {
       this.notificationManager.add(data);
     });
 
-     this.webSocket.on("setAnimation", (data) => {    
-      const { animationName, nbTimes, object, graphic } = data;
-       const player = this.sceneMap.getObjectById(object);
-       if (graphic !== undefined) {
-         player.setAnimation(animationName, graphic, nbTimes);
-       } else {
-         player.setAnimation(animationName, nbTimes);
-       }
-     })
+    this.webSocket.on("setAnimation", (data) => {
+      const {
+        animationName,
+        nbTimes,
+        object,
+        graphic,
+        restoreAnimationName,
+        restoreGraphics,
+      } = data;
+      const player = object ? this.sceneMap.getObjectById(object) : undefined;
+      if (!player) return;
+      const restoreOptions = {
+        restoreAnimationName,
+        restoreGraphics,
+      };
+      if (graphic !== undefined) {
+        player.setAnimation(animationName, graphic, nbTimes, restoreOptions);
+      } else {
+        player.setAnimation(animationName, nbTimes, restoreOptions);
+      }
+    })
 
     this.webSocket.on("playSound", (data) => {
       const { soundId, volume, loop } = data;
@@ -1174,6 +1186,18 @@ export class RpgClientEngine<T = any> {
   }
 
   async processInput({ input }: { input: Direction }) {
+    if (this.stopProcessingInput) return;
+
+    const currentPlayer = this.sceneMap.getCurrentPlayer() as any;
+    const canMove =
+      !currentPlayer ||
+      typeof currentPlayer.canMove !== "function" ||
+      currentPlayer.canMove();
+    if (!canMove) {
+      this.interruptCurrentPlayerMovement(currentPlayer);
+      return;
+    }
+
     const timestamp = Date.now();
     let frame: number;
     let tick: number;
@@ -1188,7 +1212,6 @@ export class RpgClientEngine<T = any> {
     this.inputFrameCounter = frame;
     this.hooks.callHooks("client-engine-onInput", this, { input, playerId: this.playerId }).subscribe();
 
-    const currentPlayer = this.sceneMap.getCurrentPlayer();
     const bodyReady = this.ensureCurrentPlayerBody();
     if (currentPlayer && bodyReady) {
       currentPlayer.changeDirection(input);
@@ -1207,6 +1230,13 @@ export class RpgClientEngine<T = any> {
 
   processAction({ action }: { action: number }) {
     if (this.stopProcessingInput) return;
+    const currentPlayer = this.sceneMap.getCurrentPlayer() as any;
+    const canMove =
+      !currentPlayer ||
+      typeof currentPlayer.canMove !== "function" ||
+      currentPlayer.canMove();
+    if (!canMove) return;
+
     this.hooks.callHooks("client-engine-onInput", this, { input: 'action', playerId: this.playerId }).subscribe();
     this.webSocket.emit('action', { action })
   }
@@ -1337,6 +1367,15 @@ export class RpgClientEngine<T = any> {
     if (!this.predictionEnabled || !this.prediction) {
       return;
     }
+    const player = this.sceneMap?.getCurrentPlayer?.() as any;
+    if (
+      player &&
+      typeof player.canMove === "function" &&
+      !player.canMove()
+    ) {
+      this.interruptCurrentPlayerMovement(player);
+      return;
+    }
     const pendingInputs = this.prediction.getPendingInputs();
     if (pendingInputs.length === 0) {
       return;
@@ -1475,6 +1514,34 @@ export class RpgClientEngine<T = any> {
     this.lastMovePathSentFrame = 0;
   }
 
+  /**
+   * Stop local movement immediately and discard pending predicted movement.
+   *
+   * Use this before a blocking action such as an A-RPG attack, dialog, dash
+   * startup, or any client-side state where already buffered movement inputs
+   * must not be replayed after server reconciliation.
+   *
+   * @param player - Player object to stop. Defaults to the current player.
+   * @returns `true` when a player was found and interrupted.
+   *
+   * @example
+   * ```ts
+   * engine.interruptCurrentPlayerMovement();
+   * ```
+   */
+  interruptCurrentPlayerMovement(player: any = this.sceneMap?.getCurrentPlayer?.()): boolean {
+    if (!player) {
+      return false;
+    }
+    (this.sceneMap as any)?.stopMovement?.(player);
+    this.prediction?.clearPendingInputs();
+    this.pendingPredictionFrames = [];
+    this.lastInputTime = 0;
+    this.lastMovePathSentAt = Date.now();
+    this.lastMovePathSentFrame = this.inputFrameCounter;
+    return true;
+  }
+
   /**
    * Trigger a flash animation on a sprite
    * 
@@ -1560,7 +1627,7 @@ export class RpgClientEngine<T = any> {
     if (typeof ack.x !== "number" || typeof ack.y !== "number") {
       return;
     }
-    const player = this.getCurrentPlayer();
+    const player = this.getCurrentPlayer() as any;
     const myId = this.playerIdSignal();
     if (!player || !myId) {
       return;
@@ -1583,10 +1650,14 @@ export class RpgClientEngine<T = any> {
     authoritativeState: PredictionState<Direction>,
     pendingInputs: PredictionHistoryEntry<Direction>[],
   ): void {
-    const player = this.getCurrentPlayer();
+    const player = this.getCurrentPlayer() as any;
     if (!player) {
       return;
     }
+    if (typeof player.canMove === "function" && !player.canMove()) {
+      this.interruptCurrentPlayerMovement(player);
+      return;
+    }
 
     (this.sceneMap as any).stopMovement(player);
     this.applyAuthoritativeState(authoritativeState);

package/src/components/character.ce

@@ -9,6 +9,7 @@
     @for (graphicObj of graphicsSignals) {
       <Sprite 
         sheet={sheet(graphicObj)} 
+        scale={graphicScale(graphicObj)}
         direction 
         tint 
         hitbox
@@ -377,6 +378,18 @@
     };
   }
 
+  const graphicScale = (graphicObject) => {
+    const scale = graphicObject?.scale;
+    if (Array.isArray(scale)) return scale;
+    if (typeof scale === 'number') return [scale, scale];
+    if (scale && typeof scale === 'object') {
+      const x = typeof scale.x === 'number' ? scale.x : 1;
+      const y = typeof scale.y === 'number' ? scale.y : x;
+      return [x, y];
+    }
+    return undefined;
+  }
+
   // 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
@@ -467,4 +480,4 @@
   tick(() => {
     hooks.callHooks("client-sprite-onUpdate").subscribe()
   })
-</script>
+</script>

package/src/components/gui/dialogbox/index.ce

@@ -29,10 +29,15 @@
                             </div>
                         </Navigation>
                     }
-               </div>
+                </div>
                 @if (hasFace()) {
                     <div class="rpg-ui-dialog-face">
-                        <DOMSprite sheet={faceSheet(face.id, face.expression)} />
+                        <DOMSprite
+                            sheet={faceSheet(dialogFace())}
+                            width="100%"
+                            height="100%"
+                            objectFit="contain"
+                        />
                     </div>
                 }
             </div>
@@ -76,7 +81,11 @@
 
     const dialogPosition = computed(() => resolveProp(position) || "bottom");
     const isFullWidth = computed(() => resolveProp(fullWidth) !== false);
-    const hasFace = computed(() => !!resolveProp(face));
+    const dialogFace = computed(() => resolveProp(face));
+    const hasFace = computed(() => {
+        const value = dialogFace();
+        return !!(value && value.id);
+    });
 
     const displayMessage = signal("");
     const fullMessage = signal("");
@@ -192,10 +201,10 @@
         },
     })
 
-    const faceSheet = (graphicId, animationName) => {
+    const faceSheet = (faceValue) => {
         return {
-            definition: engine.getSpriteSheet(graphicId),
-            playing: animationName,
+            definition: engine.getSpriteSheet(faceValue.id),
+            playing: faceValue.expression || "default",
         };
     }