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

package/src/components/character.ce

@@ -23,12 +23,12 @@
   <Particle emit={emitParticleTrigger} settings={particleSettings} zIndex={1000} name={particleName} />
   <Container>
     @for (graphicObj of renderedGraphics) {
-      <Container scale={graphicScale(graphicObj)}>
+      <Container scale={graphicContainerScale(graphicObj)}>
         <Sprite 
           sheet={sheet(graphicObj)} 
           direction 
           tint 
-          hitbox
+          hitbox={graphicHitbox(graphicObj)}
           shadowCaster={shadowCaster(graphicObj)}
           flash={flashConfig}
         />
@@ -76,6 +76,7 @@
   import { GameEngineToken, ModulesToken, shouldRenderLightingShadows } from "@rpgjs/common";
   import { RpgClientEngine } from "../RpgClientEngine";
   import { applyCameraFollow, clearCameraFollowPlugins, ownsCameraFollowRevision } from "../services/cameraFollow";
+  import { resolveScaledHitboxAnchor, scaleHitboxForGraphicDisplay, toPositiveNumber } from "./character-hitbox";
   import { inject } from "../core/inject";  
   import { Direction, Animation } from "@rpgjs/common";
   import { normalizeEventComponent } from "../Game/EventComponentResolver";
@@ -520,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}`;
 
@@ -615,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: {
@@ -685,7 +692,7 @@
   }
 
   const graphicScale = (graphicObject) => {
-    const scale = graphicObject?.displayScale ?? graphicObject?.scale;
+    const scale = graphicObject?.scale;
     if (Array.isArray(scale)) return scale;
     if (typeof scale === 'number') return [scale, scale];
     if (scale && typeof scale === 'object') {
@@ -696,12 +703,34 @@
     return undefined;
   }
 
+  const graphicContainerScale = (graphicObject) => {
+    const scale = graphicObject?.displayScale;
+    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 [1, 1];
+  }
+
+  const multiplyScale = (left, right) => {
+    const a = normalizePair(left);
+    const b = normalizePair(right);
+    return [a[0] * b[0], a[1] * b[1]];
+  }
+
+  const graphicHitbox = (graphicObject) => {
+    const box = hitbox();
+    const scale = graphicEffectiveScale(graphicObject);
+    return scaleHitboxForGraphicDisplay(box, scale);
+  }
+
   const shadowCaster = (graphicObject) => {
     const box = hitbox();
     const bounds = graphicBounds();
-    const scale = graphicScale(graphicObject);
-    const scaleY = Array.isArray(scale) && typeof scale[1] === 'number' ? Math.abs(scale[1]) : 1;
-    const height = Math.max(bounds?.height ?? box?.h ?? 32, box?.h ?? 32) * scaleY;
+    const height = Math.max(bounds?.height ?? box?.h ?? 32, box?.h ?? 32);
 
     return {
       enabled: shadowsEnabled,
@@ -722,11 +751,6 @@
   const imageDimensions = signal({});
   const loadingImageDimensions = new Set();
 
-  const toPositiveNumber = (value) => {
-    const number = typeof value === 'number' ? value : parseFloat(value);
-    return Number.isFinite(number) && number > 0 ? number : undefined;
-  };
-
   const toFiniteNumber = (value, fallback = 0) => {
     const number = typeof value === 'number' ? value : parseFloat(value);
     return Number.isFinite(number) ? number : fallback;
@@ -826,6 +850,13 @@
     return frame?.[prop] ?? textureOptions?.[prop] ?? graphicObject?.[prop];
   };
 
+  const graphicEffectiveScale = (graphicObject) => {
+    const textureOptions = resolveTextureOptions(graphicObject);
+    const frame = resolveFirstAnimationFrame(textureOptions);
+    const spriteScale = normalizePair(optionValue('scale', frame, textureOptions, graphicObject) ?? graphicScale(graphicObject));
+    return multiplyScale(spriteScale, graphicContainerScale(graphicObject));
+  };
+
   const resolveFrameSize = (textureOptions, dimensions) => {
     const framesWidth = toPositiveNumber(textureOptions?.framesWidth) ?? 1;
     const framesHeight = toPositiveNumber(textureOptions?.framesHeight) ?? 1;
@@ -846,31 +877,6 @@
     };
   };
 
-  const resolveHitboxAnchor = (spriteWidth, spriteHeight, realSize, box) => {
-    if (!spriteWidth || !spriteHeight || !box) {
-      return [0, 0];
-    }
-
-    const heightOfSprite = typeof realSize === 'number' ? realSize : realSize?.height;
-    const resolvedHeight = toPositiveNumber(heightOfSprite) ?? spriteHeight;
-    const gap = Math.max(0, (spriteHeight - resolvedHeight) / 2);
-    const hitboxTopLeftX = clampRatio((spriteWidth - box.w) / 2 / spriteWidth);
-    const hitboxTopLeftY = clampRatio((spriteHeight - box.h - gap) / spriteHeight);
-    const hitboxCenterX = clampRatio(hitboxTopLeftX + box.w / 2 / spriteWidth);
-    const hitboxCenterY = clampRatio(hitboxTopLeftY + box.h / 2 / spriteHeight);
-    const footY = clampRatio((spriteHeight - gap) / spriteHeight);
-
-    switch (box.anchorMode ?? 'top-left') {
-      case 'center':
-        return [hitboxCenterX, hitboxCenterY];
-      case 'foot':
-        return [hitboxCenterX, footY];
-      case 'top-left':
-      default:
-        return [hitboxTopLeftX, hitboxTopLeftY];
-    }
-  };
-
   const loadImageDimensions = (image) => {
     const source = resolveImageSource(image);
     if (!source || imageDimensions()[source] || loadingImageDimensions.has(source)) {
@@ -950,14 +956,15 @@
         return;
       }
 
+      const scale = graphicEffectiveScale(graphicObject);
       const explicitAnchor = normalizeAnchor(optionValue('anchor', frame, textureOptions, graphicObject));
-      const anchor = explicitAnchor ?? resolveHitboxAnchor(
+      const anchor = explicitAnchor ?? resolveScaledHitboxAnchor(
         spriteWidth,
         spriteHeight,
         optionValue('spriteRealSize', frame, textureOptions, graphicObject),
-        box
+        box,
+        scale
       );
-      const scale = normalizePair(optionValue('scale', frame, textureOptions, graphicObject) ?? graphicScale(graphicObject));
       const x = toFiniteNumber(optionValue('x', frame, textureOptions, graphicObject), 0);
       const y = toFiniteNumber(optionValue('y', frame, textureOptions, graphicObject), 0);
       const leftEdge = -anchor[0] * spriteWidth * scale[0];

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()

package/src/services/standalone.spec.ts

@@ -51,4 +51,51 @@ describe("standalone websocket bridge", () => {
     expect(standaloneProvider.useFactory(context).mode).toBe("standalone");
     expect(mmorpgProvider.useFactory(context).mode).toBe("mmorpg");
   });
+
+  test("reconnects standalone rooms with updated room and query", async () => {
+    const connects: Array<{ roomId: string; url: string; sessionId: string }> = [];
+    class Server {
+      subRoom = {
+        onStart: vi.fn(),
+      };
+
+      constructor(public room: any) {}
+
+      async onStart() {}
+
+      async onConnect(conn: any, ctx: any) {
+        connects.push({
+          roomId: this.room.id,
+          url: ctx.request.url,
+          sessionId: conn.sessionId,
+        });
+      }
+    }
+
+    const context = new Context();
+    const standaloneProvider = provideRpg(Server).find(
+      (provider: any) => provider.provide === WebSocketToken,
+    ) as any;
+    const socket = standaloneProvider.useFactory(context);
+
+    await socket.connection();
+    socket.updateProperties({
+      room: "map-center-map",
+      query: { transferToken: "token-1" },
+    });
+    await socket.reconnect();
+
+    expect(connects).toEqual([
+      expect.objectContaining({
+        roomId: "lobby-1",
+        sessionId: "player-client-id",
+      }),
+      expect.objectContaining({
+        roomId: "map-center-map",
+        sessionId: "player-client-id",
+      }),
+    ]);
+    expect(connects[1].url).toContain("transferToken=token-1");
+    expect(socket.getServer().room.id).toBe("map-center-map");
+  });
 });