@rpgjs/client 5.0.0-beta.11 → 5.0.0-beta.13

package/src/components/animations/fx.ce

@@ -0,0 +1,101 @@
+<Fx
+  name={name}
+  preset={preset}
+  trigger={trigger}
+  autostart={autostart}
+  loop={loop}
+  enabled={enabled}
+  x={x}
+  y={y}
+  rotation={rotation}
+  scale={scale}
+  alpha={alpha}
+  timeScale={timeScale}
+  maxParticles={maxParticles}
+  preload={preload}
+  missingTexture={missingTexture}
+  zIndex={zIndex}
+  onStart={onStart}
+  onComplete={finish}
+  onParticleSpawn={onParticleSpawn}
+/>
+
+<script>
+  import { tick } from "canvasengine";
+  import { Fx } from "@canvasengine/presets";
+
+  const {
+    name,
+    preset,
+    trigger,
+    onFinish,
+    onStart,
+    onComplete,
+    onParticleSpawn,
+    displayDuration,
+    duration,
+    autostart,
+    loop,
+    enabled,
+    x,
+    y,
+    rotation,
+    scale,
+    alpha,
+    timeScale,
+    maxParticles,
+    preload,
+    missingTexture,
+    zIndex,
+  } = defineProps({
+    autostart: {
+      default: true,
+    },
+    loop: {
+      default: false,
+    },
+    enabled: {
+      default: true,
+    },
+    rotation: {
+      default: 0,
+    },
+    scale: {
+      default: 1,
+    },
+    alpha: {
+      default: 1,
+    },
+    timeScale: {
+      default: 1,
+    },
+    maxParticles: {
+      default: 600,
+    },
+    preload: {
+      default: true,
+    },
+    missingTexture: {
+      default: "shape",
+    },
+  });
+
+  let elapsedTime = 0;
+  let finished = false;
+
+  function finish(instance) {
+    if (finished) return;
+    finished = true;
+    onComplete?.(instance);
+    onFinish?.(instance);
+  }
+
+  tick(({ deltaTime }) => {
+    const maxDuration = displayDuration?.() ?? (loop() ? duration?.() : undefined);
+    if (!maxDuration || finished) return;
+    elapsedTime += deltaTime;
+    if (elapsedTime >= maxDuration) {
+      finish();
+    }
+  });
+</script>

package/src/components/animations/index.ts

@@ -1,7 +1,9 @@
 import Hit from "./hit.ce";
 import Animation from "./animation.ce";
+import Fx from "./fx.ce";
 
 export const PrebuiltComponentAnimations = {
     Hit,
-    Animation
-}
+    Animation,
+    Fx
+}

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 />
@@ -8,7 +23,7 @@
   <PlayerComponents object={sprite} position="left" graphicBounds />
   <Particle emit={emitParticleTrigger} settings={particleSettings} zIndex={1000} name={particleName} />
   <Container>
-    @for (graphicObj of graphicsSignals) {
+    @for (graphicObj of renderedGraphics) {
       <Container scale={graphicScale(graphicObj)}>
         <Sprite 
           sheet={sheet(graphicObj)} 
@@ -20,6 +35,11 @@
         />
       </Container>
     }
+    @for (eventComponent of resolvedEventComponents) {
+      <Container dependencies={eventComponent.dependencies}>
+        <eventComponent.component ...eventComponent.props />
+      </Container>
+    }
   </Container>
   <PlayerComponents object={sprite} position="center" graphicBounds />
   <PlayerComponents object={sprite} position="right" graphicBounds />
@@ -29,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)
         }} />
@@ -52,11 +78,18 @@
   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 { getKeyboardControlBind, resolveKeyboardActionInput } from "../services/actionInput";
+  import {
+    getKeyboardControlBind,
+    keyboardEventMatchesBind,
+    resolveKeyboardActionInput,
+    resolveKeyboardDirectionInput,
+  } from "../services/actionInput";
 
   const { object, id } = defineProps();
   const sprite = object();
@@ -213,6 +246,18 @@
   const normalizedComponentsInFront = computed(() => {
     return normalizeComponents(componentsInFront());
   });
+
+  const isEventSprite = () => {
+    return typeof sprite?.isEvent === 'function'
+      ? sprite.isEvent()
+      : sprite?._type === 'event';
+  };
+
+  const resolvedEventComponents = computed(() => {
+    if (!isEventSprite()) return [];
+    const eventComponent = normalizeEventComponent(client.resolveEventComponent(sprite), sprite);
+    return eventComponent ? [eventComponent] : [];
+  });
   
   /**
    * Determine if the camera should follow this sprite
@@ -263,6 +308,12 @@
     flashTrigger
   } = sprite;
 
+  const renderedGraphics = computed(() => {
+    const eventComponent = resolvedEventComponents()[0];
+    if (eventComponent && !eventComponent.renderGraphic) return [];
+    return graphicsSignals();
+  });
+
   /**
    * Flash configuration signals for dynamic options
    * These signals are updated when the flash trigger is activated with options
@@ -308,6 +359,108 @@
 
   const canControls = () => isMe() && getCanMoveValue(sprite)
   const keyboardControls = client.globalConfig.keyboardControls;
+  const activeDirectionKeys = new Map();
+
+  const resolveHeldDirection = () => {
+    const directions = Array.from(activeDirectionKeys.values());
+    return directions[directions.length - 1];
+  };
+
+  const resolveSpriteDirection = () => {
+    const heldDirection = resolveHeldDirection();
+    if (heldDirection) return heldDirection;
+    if (typeof sprite.getDirection === 'function') return sprite.getDirection();
+    if (typeof sprite.direction === 'function') return sprite.direction();
+    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'
+      ? { ...payload.data }
+      : {};
+    return {
+      ...payload,
+      data: {
+        ...data,
+        direction: data.direction ?? resolveSpriteDirection(),
+      },
+    };
+  };
+
+  const resolveCurrentActionInput = () =>
+    withCurrentDirection(
+      resolveKeyboardActionInput(keyboardControls.action, client, sprite)
+    );
+
+  const playPredictedWalkAnimation = () => {
+    if (sprite.animationFixed) return;
+    if (sprite.animationIsPlaying && sprite.animationIsPlaying()) return;
+    realAnimationName.set('walk');
+  };
+
+  const resumeHeldDirectionWalkAnimation = () => {
+    if (!isCurrentPlayer()) return false;
+    if (activeDirectionKeys.size === 0) return false;
+    if (!canControls()) return false;
+    if (sprite.animationFixed) return false;
+    if (sprite.animationIsPlaying && sprite.animationIsPlaying()) return false;
+    realAnimationName.set('walk');
+    return true;
+  };
+
+  const processMovementInput = (input) => {
+    if (!canControls()) return;
+    client.processInput({ input });
+    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}`;
+
+  const handleNativeActionWhileMoving = (event) => {
+    const inputDirection = resolveKeyboardDirectionInput(event, keyboardControls);
+    if (inputDirection) {
+      const keyId = keyboardEventId(event);
+      if (event.type === 'keydown') {
+        activeDirectionKeys.delete(keyId);
+        activeDirectionKeys.set(keyId, inputDirection);
+        resumeHeldDirectionWalkAnimation();
+      }
+      else {
+        activeDirectionKeys.delete(keyId);
+      }
+    }
+
+    if (!isCurrentPlayer()) return;
+    if (event.type !== 'keydown' || event.repeat) return;
+    if (activeDirectionKeys.size === 0) return;
+    if (!keyboardEventMatchesBind(event, actionBind())) return;
+    if (!canControls()) return;
+
+    client.processAction(resolveCurrentActionInput());
+  };
 
   const visible = computed(() => {
     if (sprite.isEvent()) {
@@ -321,38 +474,44 @@
       repeat: true,
       bind: keyboardControls.down,
       keyDown() {
-        if (canControls()) client.processInput({ input: Direction.Down })
+        processMovementInput(Direction.Down)
       },
     },
     up: {
       repeat: true,
       bind: keyboardControls.up,
       keyDown() {
-        if (canControls()) client.processInput({ input: Direction.Up })
+        processMovementInput(Direction.Up)
       },
     },
     left: {
       repeat: true,
       bind: keyboardControls.left,
       keyDown() {
-        if (canControls()) client.processInput({ input: Direction.Left })
+        processMovementInput(Direction.Left)
       },
     },
     right: {
       repeat: true,
       bind: keyboardControls.right,
       keyDown() {
-        if (canControls()) client.processInput({ input: Direction.Right })
+        processMovementInput(Direction.Right)
       },
     },
     action: {
       bind: getKeyboardControlBind(keyboardControls.action),
       keyDown() {
         if (canControls()) {
-          client.processAction(resolveKeyboardActionInput(keyboardControls.action, client, sprite))
+          client.processAction(resolveCurrentActionInput())
         }
       },
     },
+    dash: {
+      bind: keyboardControls.dash,
+      keyDown() {
+        processDashInput()
+      },
+    },
     escape: {
       bind: keyboardControls.escape,
       keyDown() {
@@ -402,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') {
@@ -648,6 +807,10 @@
   const graphicBounds = computed(() => {
     const box = hitbox();
     const fallback = hitboxBounds();
+    const customEventComponent = resolvedEventComponents()[0];
+    if (customEventComponent && !customEventComponent.renderGraphic) {
+      return fallback;
+    }
     const dimensions = imageDimensions();
     const graphics = graphicsSignals();
     let bounds = null;
@@ -710,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
@@ -779,17 +967,28 @@
   });
 
   const animationMovementSubscription = combineLatest([animationChange$, moving$]).subscribe(([[prev, curr], isMoving]) => {
-    if (curr == 'stand' && !isMoving) {
+    const isMovementAnimation = movementAnimations.includes(curr);
+    const isTemporaryAnimationPlaying =
+      sprite.animationIsPlaying && sprite.animationIsPlaying();
+
+    if (sprite.animationFixed && isMovementAnimation) {
       realAnimationName.set(curr);
+      return;
+    }
+
+    if (curr == 'stand' && !isMoving) {
+      if (!resumeHeldDirectionWalkAnimation()) {
+        realAnimationName.set(curr);
+      }
     }
     else if (curr == 'walk' && isMoving) {
       realAnimationName.set(curr);
     }
-    else if (!movementAnimations.includes(curr)) {
+    else if (!isMovementAnimation) {
       realAnimationName.set(curr);
     }
-    if (!isMoving && sprite.animationIsPlaying && sprite.animationIsPlaying()) {
-      if (movementAnimations.includes(curr)) {
+    if (!isMoving && isTemporaryAnimationPlaying) {
+      if (isMovementAnimation) {
         if (typeof sprite.resetAnimationState === 'function') {
           sprite.resetAnimationState();
         }
@@ -797,6 +996,16 @@
     }
   });
 
+  const resumeWalkSubscriptions = [
+    sprite._canMove,
+    sprite._animationFixed,
+    sprite.animationIsPlaying,
+  ]
+    .filter(signal => signal?.observable)
+    .map(signal => signal.observable.subscribe(() => {
+      resumeHeldDirectionWalkAnimation();
+    }));
+
   /**
    * Cleanup subscriptions and call hooks before sprite destruction.
    *
@@ -834,8 +1043,13 @@
   const onBeforeDestroy = async () => {
     await runBeforeRemove();
     await waitForTemporaryAnimationEnd();
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('keydown', handleNativeActionWhileMoving);
+      document.removeEventListener('keyup', handleNativeActionWhileMoving);
+    }
     removeTransitionSubscription?.unsubscribe();
     animationMovementSubscription.unsubscribe();
+    resumeWalkSubscriptions.forEach(subscription => subscription.unsubscribe());
     xSubscription.unsubscribe();
     ySubscription.unsubscribe();
     await lastValueFrom(hooks.callHooks("client-sprite-onDestroy", sprite)) 
@@ -843,6 +1057,10 @@
   }
 
   mount((element) => {
+    if (typeof document !== 'undefined') {
+      document.addEventListener('keydown', handleNativeActionWhileMoving);
+      document.addEventListener('keyup', handleNativeActionWhileMoving);
+    }
     hooks.callHooks("client-sprite-onAdd", sprite).subscribe()
     hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, sprite).subscribe()
     effect(() => {
@@ -858,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);
   };
 
   /**

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

@@ -17,7 +17,7 @@
                     @if (hasChoices()) {
                         <Navigation tabindex={selectedItem} controls={controls}>
                             <div class="rpg-ui-dialog-choices">
-                                @for ((choice,index) of choices) {
+                                @for ((choice,index) of dialogChoices()) {
                                     <div
                                         class="rpg-ui-dialog-choice"
                                         class={{active: selectedItem() === index}}
@@ -62,27 +62,38 @@
     engine.stopProcessingInput = true;
 
     const selectedItem = signal(0)
-    let isDestroyed = false;
+    const ACTION_OPEN_GUARD_MS = 150;
+    const openedAt = Date.now();
 
     const {
         data,
         onFinish,
-        onInteraction
+        onInteraction,
+        guiOpenId
     } = defineProps();
 
-    const { message, choices, face, speaker, position, typewriterEffect, autoClose } = data();
-    const fullWidth = computed(() => data().fullWidth || false);
+    const dialogData = computed(() => data() || {});
+    const dialogChoices = computed(() => Array.isArray(dialogData().choices) ? dialogData().choices : []);
+    const message = computed(() => dialogData().message);
+    const speaker = computed(() => dialogData().speaker);
+    const position = computed(() => dialogData().position);
+    const typewriterEffect = computed(() => dialogData().typewriterEffect);
+    const fullWidth = computed(() => dialogData().fullWidth || false);
 
     const resolveProp = (value) => typeof value === "function" ? value() : value;
+    const normalizeOpenId = (value) => {
+        const resolved = resolveProp(value);
+        return typeof resolved === "string" && resolved.length > 0 ? resolved : undefined;
+    };
 
     const speakerName = computed(() => {
-        const value = resolveProp(speaker);
+        const value = resolveProp(speaker());
         return value ? String(value) : "";
     });
 
-    const dialogPosition = computed(() => resolveProp(position) || "bottom");
+    const dialogPosition = computed(() => resolveProp(position()) || "bottom");
     const isFullWidth = computed(() => resolveProp(fullWidth) !== false);
-    const dialogFace = computed(() => resolveProp(face));
+    const dialogFace = computed(() => resolveProp(dialogData().face));
     const hasFace = computed(() => {
         const value = dialogFace();
         return !!(value && value.id);
@@ -123,9 +134,9 @@
     };
 
     effect(() => {
-        const text = resolveProp(message) || "";
+        const text = resolveProp(message()) || "";
         fullMessage.set(text);
-        const useTypewriter = resolveProp(typewriterEffect) !== false;
+        const useTypewriter = resolveProp(typewriterEffect()) !== false;
         if (!useTypewriter) {
             finishTyping();
             return;
@@ -134,9 +145,9 @@
     });
 
 
-    const hasChoices = computed(() => choices.length > 0);
+    const hasChoices = computed(() => dialogChoices().length > 0);
     const showIndicator = computed(() => !hasChoices() && !isTyping());
-    const nav = createTabindexNavigator(selectedItem, { count: () => choices.length }, 'wrap');
+    const nav = createTabindexNavigator(selectedItem, { count: () => dialogChoices().length }, 'wrap');
 
     function selectChoice(index) {
         return function() {
@@ -146,13 +157,15 @@
     }
 
     function _onFinish(value) {
-        if (onFinish) onFinish(value);
+        if (onFinish) onFinish(value, normalizeOpenId(guiOpenId));
     }
 
     const onSelect = (index) => {
         _onFinish(index);
     };
 
+    const canAcceptAction = () => Date.now() - openedAt >= ACTION_OPEN_GUARD_MS;
+
     const controls = signal({
         up: {
             repeat: true,
@@ -175,6 +188,9 @@
         action: {
             bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
+                if (!canAcceptAction()) {
+                    return;
+                }
                 if (isTyping()) {
                     finishTyping();
                     return;
@@ -192,6 +208,9 @@
         action: {
             bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
+                if (!canAcceptAction()) {
+                    return;
+                }
                 if (isTyping()) {
                     finishTyping();
                     return;
@@ -203,6 +222,9 @@
     })
 
     const faceSheet = (faceValue) => {
+        if (!faceValue || !faceValue.id) {
+            return undefined;
+        }
         return {
             definition: engine.getSpriteSheet(faceValue.id),
             playing: faceValue.expression || "default",
@@ -211,7 +233,6 @@
 
     mount((element) => {
         return () => {
-            isDestroyed = true;
             // Wait destroy is finished before start processing input
             delay(() => {
                 engine.stopProcessingInput = false;

package/src/components/gui/gameover.ce

@@ -34,6 +34,7 @@
     import { getKeyboardControlBind } from "../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const guiService = inject(RpgGui);
     const keyboardControls = engine.globalConfig.keyboardControls;
 
@@ -50,12 +51,12 @@
     });
 
     const defaultEntries = [
-        { id: "title", label: "Title Screen" },
-        { id: "load", label: "Load Game" }
+        { id: "title", label: t("rpg.gameover.title-screen") },
+        { id: "load", label: t("rpg.gameover.load-game") }
     ];
 
     const resolveProp = (value) => typeof value === "function" ? value() : value;
-    const titleText = computed(() => resolveProp(title) || "Game Over");
+    const titleText = computed(() => resolveProp(title) || t("rpg.gameover.title"));
     const subtitleText = computed(() => resolveProp(subtitle) || "");
     const localActionsEnabled = computed(() => resolveProp(localActions) === true);