@rpgjs/client 5.0.0-beta.23 → 5.0.0-beta.24

package/src/Game/Object.ts

@@ -29,12 +29,49 @@ type ConfigurableTrigger<T> = Omit<Trigger<T>, "start"> & {
   start(config?: T): Promise<void>;
 };
 
+const toFiniteScale = (value: unknown, fallback: number): number => {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim()) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+
+const normalizeGraphicScale = (value: unknown, fallback: [number, number] = [1, 1]): [number, number] => {
+  if (typeof value === "number" || typeof value === "string") {
+    const scale = toFiniteScale(value, fallback[0]);
+    return [scale, scale];
+  }
+  if (Array.isArray(value)) {
+    const x = toFiniteScale(value[0], fallback[0]);
+    const y = toFiniteScale(value[1] ?? value[0], x);
+    return [x, y];
+  }
+  if (value && typeof value === "object") {
+    const scale = value as { x?: unknown; y?: unknown };
+    const x = toFiniteScale(scale.x, fallback[0]);
+    const y = toFiniteScale(scale.y ?? scale.x, x);
+    return [x, y];
+  }
+  return fallback;
+};
+
+export const multiplyGraphicDisplayScale = (
+  baseScale: unknown,
+  instanceScale: unknown,
+): [number, number] => {
+  const base = normalizeGraphicScale(baseScale);
+  const instance = normalizeGraphicScale(instanceScale);
+  return [base[0] * instance[0], base[1] * instance[1]];
+};
+
 export const withGraphicDisplayScale = (spritesheet: any, scale: unknown): any => {
   if (!spritesheet || typeof spritesheet !== "object") return spritesheet;
   if (scale === undefined || scale === null) return spritesheet;
   return {
     ...spritesheet,
-    displayScale: scale,
+    displayScale: multiplyGraphicDisplayScale(spritesheet.displayScale, scale),
   };
 };
 
@@ -47,6 +84,24 @@ export const appendFramePayload = (current: unknown, items: unknown): Frame[] =>
   return currentFrames.concat(nextFrames);
 };
 
+export const getFrameTimestamp = (frame: Frame): number => {
+  const timestamp = Number(frame.ts);
+  return Number.isFinite(timestamp) ? timestamp : 0;
+};
+
+export const mergeFreshFramePayload = (
+  current: unknown,
+  items: unknown,
+  lastAppliedFrameTs = 0,
+): Frame[] => {
+  return appendFramePayload(current, items)
+    .filter((frame) => {
+      const timestamp = getFrameTimestamp(frame);
+      return timestamp === 0 || timestamp > lastAppliedFrameTs;
+    })
+    .sort((a, b) => getFrameTimestamp(a) - getFrameTimestamp(b));
+};
+
 export abstract class RpgClientObject extends RpgCommonPlayer {
   abstract _type: string;
   emitParticleTrigger = trigger();
@@ -57,6 +112,7 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
   frames: Frame[] = [];
   graphicsSignals = signal<any[]>([]);
   flashTrigger: ConfigurableTrigger<FlashTriggerOptions> = trigger<FlashTriggerOptions>();
+  private lastAppliedFrameTs = 0;
   private animationRestoreState?: {
     animationName: string;
     graphics: any[];
@@ -70,7 +126,11 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
     this._frames.observable.subscribe(({ items }) => {
       if (!this.id) return;
       //if (this.id == this.engine.playerIdSignal()!) return;
-      this.frames = appendFramePayload(this.frames, items);
+      this.frames = mergeFreshFramePayload(
+        this.frames,
+        items,
+        this.lastAppliedFrameTs,
+      );
     });
 
     const graphics$ = this.graphics.observable.pipe(map(({ items }) => items));
@@ -102,16 +162,25 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
         const frame = this.frames.shift();
         if (frame) {
           if (typeof frame.x !== "number" || typeof frame.y !== "number") return;
+          const frameTs = this.getFrameTimestamp(frame);
+          if (frameTs > 0 && frameTs <= this.lastAppliedFrameTs) return;
           engine.scene.setBodyPosition(
             this.id,
             frame.x,
             frame.y,
             "top-left"
           );
+          if (frameTs > this.lastAppliedFrameTs) {
+            this.lastAppliedFrameTs = frameTs;
+          }
         }
       });
   }
 
+  private getFrameTimestamp(frame: Frame): number {
+    return getFrameTimestamp(frame);
+  }
+
   /**
    * Access the shared client hook registry.
    *

package/src/components/character.ce

@@ -521,6 +521,16 @@
     });
   };
 
+  let lastEscapeActionAt = 0;
+  const processEscapeInput = () => {
+    const now = Date.now();
+    if (now - lastEscapeActionAt < 50) return;
+    lastEscapeActionAt = now;
+    if (canControls()) {
+      client.processAction({ action: 'escape' })
+    }
+  };
+
   const actionBind = () => getKeyboardControlBind(keyboardControls.action);
   const keyboardEventId = (event) => `${event.keyCode}:${event.code}:${event.key}`;
 
@@ -616,17 +626,13 @@
     back: {
       bind: keyboardControls.escape,
       keyDown() {
-        if (canControls()) {
-          client.processAction({ action: 'escape' })
-        }
+        processEscapeInput()
       },
     },
     escape: {
       bind: keyboardControls.escape,
       keyDown() {
-        if (canControls()) {
-          client.processAction({ action: 'escape' })
-        }
+        processEscapeInput()
       },
     },
     joystick: {

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

@@ -1,49 +1,52 @@
 <DOMContainer width="100%" height="100%" controls={dialogControls}>
-    <div
-        class="rpg-ui-dialog-container"
-        data-position={dialogPosition()}
-        data-full-width={isFullWidth() ? "true" : "false"}
-        data-has-face={hasFace() ? "true" : "false"}
-    >
-        <div class="rpg-ui-dialog rpg-anim-fade-in">
-            <div class="rpg-ui-dialog-body">
-               <div>
-                    @if (speakerName()) {
-                        <div class="rpg-ui-dialog-speaker">{speakerName()}</div>
-                    }
-                    <div class="rpg-ui-dialog-content">
-                        {displayMessage()}
+    <div class="rpg-ui-dialog-layer" click={closeDialogFromPointer}>
+        <button class="rpg-ui-close-button" type="button" title="Close" aria-label="Close dialog" click={closeDialogFromPointer}>x</button>
+        <div
+            class="rpg-ui-dialog-container"
+            data-position={dialogPosition()}
+            data-full-width={isFullWidth() ? "true" : "false"}
+            data-has-face={hasFace() ? "true" : "false"}
+        >
+            <div class="rpg-ui-dialog rpg-anim-fade-in" click={stopEvent}>
+                <div class="rpg-ui-dialog-body">
+                   <div>
+                        @if (speakerName()) {
+                            <div class="rpg-ui-dialog-speaker">{speakerName()}</div>
+                        }
+                        <div class="rpg-ui-dialog-content">
+                            {displayMessage()}
+                        </div>
+                        @if (hasChoices()) {
+                            <Navigation tabindex={selectedItem} controls={controls}>
+                                <div class="rpg-ui-dialog-choices">
+                                    @for ((choice,index) of dialogChoices()) {
+                                        <div
+                                            class="rpg-ui-dialog-choice"
+                                            class={{active: selectedItem() === index}}
+                                            tabindex={index}
+                                            data-choice-index={index}
+                                            click={selectChoice(index)}
+                                        >{{ choice.text }}</div>
+                                    }
+                                </div>
+                            </Navigation>
+                        }
                     </div>
-                    @if (hasChoices()) {
-                        <Navigation tabindex={selectedItem} controls={controls}>
-                            <div class="rpg-ui-dialog-choices">
-                                @for ((choice,index) of dialogChoices()) {
-                                    <div
-                                        class="rpg-ui-dialog-choice"
-                                        class={{active: selectedItem() === index}}
-                                        tabindex={index}
-                                        data-choice-index={index}
-                                        click={selectChoice(index)}
-                                    >{{ choice.text }}</div>
-                                }
-                            </div>
-                        </Navigation>
+                    @if (hasFace()) {
+                        <div class="rpg-ui-dialog-face">
+                            <DOMSprite
+                                sheet={faceSheet(dialogFace())}
+                                width="100%"
+                                height="100%"
+                                objectFit="contain"
+                            />
+                        </div>
                     }
                 </div>
-                @if (hasFace()) {
-                    <div class="rpg-ui-dialog-face">
-                        <DOMSprite
-                            sheet={faceSheet(dialogFace())}
-                            width="100%"
-                            height="100%"
-                            objectFit="contain"
-                        />
-                    </div>
+                @if (showIndicator) {
+                    <div class="rpg-ui-dialog-indicator"></div>
                 }
             </div>
-            @if (showIndicator) {
-                <div class="rpg-ui-dialog-indicator"></div>
-            }
         </div>
     </div>
 </DOMContainer>
@@ -160,6 +163,19 @@
         if (onFinish) onFinish(value, normalizeOpenId(guiOpenId));
     }
 
+    const stopEvent = (event) => {
+        event?.stopPropagation?.();
+    };
+
+    const closeDialog = () => {
+        _onFinish();
+    };
+
+    const closeDialogFromPointer = (event) => {
+        stopEvent(event);
+        closeDialog();
+    };
+
     const onSelect = (index) => {
         _onFinish(index);
     };

package/src/components/gui/hud/hud.ce

@@ -5,8 +5,8 @@
                 <div class="rpg-avatar-face">
                     <DOMSprite 
                         sheet={faceSheet(face())} 
-                        width={64} 
-                        height={64} 
+                        width="100%" 
+                        height="100%" 
                         objectFit="contain" 
                     />
                 </div>

package/src/components/gui/menu/items-menu.ce

@@ -63,8 +63,9 @@
             </div>
         </div>
         @if (confirmOpen) {
-            <div class="rpg-ui-menu-confirm">
-                <div class="rpg-ui-menu-confirm-card">
+            <div class="rpg-ui-menu-confirm" click={cancelConfirmFromPointer}>
+                <button class="rpg-ui-close-button" type="button" title="Close" aria-label="Close confirmation" click={cancelConfirmFromPointer}>x</button>
+                <div class="rpg-ui-menu-confirm-card" click={stopEvent}>
                     <div class="rpg-ui-menu-confirm-title">{t("rpg.menu.use")} {confirmItem()?.name}?</div>
                     <Navigation tabindex={selectedConfirm} controls={confirmControls}>
                         <div class="rpg-ui-menu-confirm-actions">
@@ -197,6 +198,15 @@
         });
     };
 
+    const stopEvent = (event) => {
+        event?.stopPropagation?.();
+    };
+
+    const cancelConfirmFromPointer = (event) => {
+        stopEvent(event);
+        cancelConfirm();
+    };
+
     function confirmSelect(index) {
         return function() {
             selectedConfirm.set(index);

package/src/components/gui/menu/main-menu.ce

@@ -1,6 +1,8 @@
 <DOMContainer width="100%" height="100%" controls={menuControls}>
-    <div class="rpg-ui-main-menu rpg-anim-fade-in">
-        <div class="rpg-ui-main-menu-layout">
+    <div class="rpg-ui-main-menu rpg-anim-fade-in" click={closeMenuFromPointer}>
+        <div class="rpg-ui-main-menu-backdrop"></div>
+        <button class="rpg-ui-close-button" type="button" title="Close" aria-label="Close menu" click={closeMenuFromPointer}>x</button>
+        <div class="rpg-ui-main-menu-layout" click={stopEvent}>
             <div class="rpg-ui-main-menu-left rpg-ui-menu rpg-ui-panel">
                 <div class="rpg-ui-menu-header">{t("rpg.menu.title")}</div>
                 <div class="rpg-ui-main-menu-list">
@@ -77,8 +79,8 @@
         </div>
         @if (saveOverlay) {
             <div class="rpg-ui-main-menu-overlay">
-                <div class="rpg-ui-main-menu-overlay-backdrop"></div>
-                <div class="rpg-ui-main-menu-overlay-content">
+                <div class="rpg-ui-main-menu-overlay-backdrop" click={closeSaveOverlayFromPointer}></div>
+                <div class="rpg-ui-main-menu-overlay-content" click={stopEvent}>
                     <SaveLoadComponent
                         data={saveLoadData}
                         onFinish={closeSaveOverlay}
@@ -202,6 +204,28 @@
         });
     };
 
+    const stopEvent = (event) => {
+        event?.stopPropagation?.();
+    };
+
+    const closeSaveOverlayFromPointer = (event) => {
+        stopEvent(event);
+        closeSaveOverlay();
+    };
+
+    const closeMenu = () => {
+        if (saveOverlay()) {
+            closeSaveOverlay();
+            return;
+        }
+        onFinish();
+    };
+
+    const closeMenuFromPointer = (event) => {
+        stopEvent(event);
+        closeMenu();
+    };
+
     const confirmExit = () => {
         if (onInteraction) onInteraction("exit");
     };
@@ -285,11 +309,18 @@
     });
 
     mount((element) => {
+        const inputLockToken = {};
+        const previousStopProcessingInput = engine.stopProcessingInput;
+        const previousGamePause = engine.gamePause();
+        engine.__rpgMainMenuInputLock = inputLockToken;
+        engine.stopProcessingInput = true;
         engine.gamePause.set(true);
         return () => {
             delay(() => {
-                engine.stopProcessingInput = false;
-                engine.gamePause.set(false);
+                if (engine.__rpgMainMenuInputLock !== inputLockToken) return;
+                engine.__rpgMainMenuInputLock = undefined;
+                engine.stopProcessingInput = previousStopProcessingInput;
+                engine.gamePause.set(previousGamePause);
             });
         }
     });

package/src/components/gui/save-load.ce

@@ -1,35 +1,38 @@
 <DOMContainer width="100%" height="100%">
-    <div class="rpg-ui-save-load rpg-anim-fade-in">
-        <div class="rpg-ui-save-load-header">
-            <div class="rpg-ui-save-load-title">{title()}</div>
-            <div class="rpg-ui-save-load-subtitle">{subtitle()}</div>
-        </div>
-        <Navigation tabindex={selectedSlot} controls={controls}>
-            <div class="rpg-ui-save-load-list">
-                @for ((item,displayIndex) of displaySlots) {
-                    <div
-                        class="rpg-ui-save-load-slot"
-                        class={{active: selectedSlot() === displayIndex}}
-                        tabindex={displayIndex}
-                        data-slot-index={displayIndex}
-                        click={selectSlot(displayIndex)}
-                    >
-                        <div class="rpg-ui-save-load-slot-index">{item.label}</div>
-                        @if (item.slot) {
-                            <div class="rpg-ui-save-load-slot-meta">
-                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.level")}: {item.slot.level ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.exp")}: {item.slot.exp ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.map")}: {item.slot.map ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.date")}: {item.slot.date ?? "-"}</div>
-                            </div>
-                        }
-                        @else {
-                            <div class="rpg-ui-save-load-slot-empty">{t("rpg.save.empty-slot")}</div>
-                        }
-                    </div>
-                }
+    <div class="rpg-ui-save-load-layer" click={closeSaveLoadFromPointer}>
+        <button class="rpg-ui-close-button" type="button" title="Close" aria-label="Close save menu" click={closeSaveLoadFromPointer}>x</button>
+        <div class="rpg-ui-save-load rpg-anim-fade-in" click={stopEvent}>
+            <div class="rpg-ui-save-load-header">
+                <div class="rpg-ui-save-load-title">{title()}</div>
+                <div class="rpg-ui-save-load-subtitle">{subtitle()}</div>
             </div>
-        </Navigation>
+            <Navigation tabindex={selectedSlot} controls={controls}>
+                <div class="rpg-ui-save-load-list">
+                    @for ((item,displayIndex) of displaySlots) {
+                        <div
+                            class="rpg-ui-save-load-slot"
+                            class={{active: selectedSlot() === displayIndex}}
+                            tabindex={displayIndex}
+                            data-slot-index={displayIndex}
+                            click={selectSlot(displayIndex)}
+                        >
+                            <div class="rpg-ui-save-load-slot-index">{item.label}</div>
+                            @if (item.slot) {
+                                <div class="rpg-ui-save-load-slot-meta">
+                                    <div class="rpg-ui-save-load-slot-line">{t("rpg.save.level")}: {item.slot.level ?? "-"}</div>
+                                    <div class="rpg-ui-save-load-slot-line">{t("rpg.save.exp")}: {item.slot.exp ?? "-"}</div>
+                                    <div class="rpg-ui-save-load-slot-line">{t("rpg.save.map")}: {item.slot.map ?? "-"}</div>
+                                    <div class="rpg-ui-save-load-slot-line">{t("rpg.save.date")}: {item.slot.date ?? "-"}</div>
+                                </div>
+                            }
+                            @else {
+                                <div class="rpg-ui-save-load-slot-empty">{t("rpg.save.empty-slot")}</div>
+                            }
+                        </div>
+                    }
+                </div>
+            </Navigation>
+        </div>
     </div>
 </DOMContainer>
 
@@ -169,6 +172,20 @@
         }
     }
 
+    const stopEvent = (event) => {
+        event?.stopPropagation?.();
+    };
+
+    const closeSaveLoad = () => {
+        if (onFinish) onFinish();
+        gui.hide(PrebuiltGui.Save);
+    };
+
+    const closeSaveLoadFromPointer = (event) => {
+        stopEvent(event);
+        closeSaveLoad();
+    };
+
     const controls = signal({
         up: {
             repeat: true,
@@ -195,8 +212,7 @@
         escape: {
             bind: keyboardControls.escape,
             keyDown() {
-                if (onFinish) onFinish();
-                gui.hide(PrebuiltGui.Save);
+                closeSaveLoad();
             }
         },
         gamepad: {

package/src/components/gui/shop/shop.ce

@@ -1,5 +1,7 @@
     <DOMContainer width="100%" height="100%">
-        <div class="rpg-shop-container rpg-anim-fade-in">
+        <div class="rpg-shop-layer" click={closeShopFromPointer}>
+        <button class="rpg-ui-close-button" type="button" title="Close" aria-label="Close shop" click={closeShopFromPointer}>x</button>
+        <div class="rpg-shop-container rpg-anim-fade-in" click={stopEvent}>
             <div class="rpg-shop-header">
                 <div class="rpg-shop-merchant">
                     <div>
@@ -143,8 +145,8 @@
                     </div>
                 }
                 @if (quantityDialogOpen) {
-                    <div class="rpg-shop-modal">
-                        <div class="rpg-shop-modal-card">
+                    <div class="rpg-shop-modal" click={closeQuantityDialogFromPointer}>
+                        <div class="rpg-shop-modal-card" click={stopEvent}>
                             <div class="rpg-shop-modal-title">{{ actionLabel }}</div>
                             <div class="rpg-shop-modal-item">{{ currentItem()?.name || "" }}</div>
                             @if (currentItem()?.quantity !== undefined) {
@@ -174,6 +176,7 @@
                 </div>
             </div>
         </div>
+        </div>
     </DOMContainer>
 
 <script>
@@ -351,6 +354,28 @@
         }
     }
 
+    const stopEvent = (event) => {
+        event?.stopPropagation?.()
+    }
+
+    const closeQuantityDialogFromPointer = (event) => {
+        stopEvent(event)
+        quantityDialogOpen.set(false)
+    }
+
+    const closeShop = () => {
+        if (quantityDialogOpen()) {
+            quantityDialogOpen.set(false)
+            return
+        }
+        onFinish()
+    }
+
+    const closeShopFromPointer = (event) => {
+        stopEvent(event)
+        closeShop()
+    }
+
     function confirmTrade() {
         return function() {
             const item = currentItem()