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

package/src/components/character.ce

@@ -8,7 +8,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 +20,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 />
@@ -52,11 +57,17 @@
   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 { 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 +224,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 +286,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 +337,87 @@
 
   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 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 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,35 +431,35 @@
       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())
         }
       },
     },
@@ -648,6 +758,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;
@@ -779,17 +893,27 @@
   });
 
   const animationMovementSubscription = combineLatest([animationChange$, moving$]).subscribe(([[prev, curr], isMoving]) => {
+    const isMovementAnimation = movementAnimations.includes(curr);
+    const isTemporaryAnimationPlaying =
+      sprite.animationIsPlaying && sprite.animationIsPlaying();
+
+    if (sprite.animationFixed && isMovementAnimation && isTemporaryAnimationPlaying) {
+      return;
+    }
+
     if (curr == 'stand' && !isMoving) {
-      realAnimationName.set(curr);
+      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 +921,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 +968,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 +982,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(() => {

package/src/index.ts

@@ -27,5 +27,6 @@ export { RpgClientObject } from "./Game/Object";
 export { RpgClientPlayer } from "./Game/Player";
 export { RpgClientEvent } from "./Game/Event";
 export * from "./Game/ProjectileManager";
+export * from "./Game/ClientVisuals";
 export { withMobile } from "./components/gui/mobile";
 export * from "./services/AbstractSocket";

package/src/module.ts

@@ -155,6 +155,14 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
           },
         };
       }
+      if (module.clientVisuals) {
+        const clientVisuals = { ...module.clientVisuals };
+        module.clientVisuals = {
+          load: (engine: RpgClientEngine) => {
+            engine.registerClientVisuals(clientVisuals);
+          },
+        };
+      }
       if (module.projectiles) {
         const projectiles = { ...module.projectiles };
         module.projectiles = {
@@ -213,6 +221,9 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
                 engine.registerSpriteComponent(id, component);
               });
             }
+            if (sprite.eventComponent) {
+              engine.addEventComponentResolver(sprite.eventComponent);
+            }
           },
         };
       }

package/src/services/actionInput.spec.ts

@@ -1,10 +1,15 @@
 import { describe, expect, test } from "vitest";
 import {
   getKeyboardControlBind,
+  keyboardEventMatchesBind,
   normalizeActionInput,
   resolveKeyboardActionInput,
+  resolveKeyboardDirectionInput,
 } from "./actionInput";
 
+const keyboardEvent = (values: Partial<KeyboardEvent>) =>
+  values as KeyboardEvent;
+
 describe("normalizeActionInput", () => {
   test("keeps simple actions compatible", () => {
     expect(normalizeActionInput("action")).toEqual({
@@ -98,4 +103,53 @@ describe("keyboard action controls", () => {
       action: "projectile:shoot",
     });
   });
+
+  test("matches keyboard events against string, numeric, and array binds", () => {
+    expect(
+      keyboardEventMatchesBind(
+        keyboardEvent({ key: " ", code: "Space", keyCode: 32 }),
+        "space"
+      )
+    ).toBe(true);
+    expect(
+      keyboardEventMatchesBind(
+        keyboardEvent({ key: "ArrowUp", code: "ArrowUp", keyCode: 38 }),
+        "up"
+      )
+    ).toBe(true);
+    expect(
+      keyboardEventMatchesBind(
+        keyboardEvent({ key: "x", code: "KeyX", keyCode: 88 }),
+        ["space", "x"]
+      )
+    ).toBe(true);
+    expect(
+      keyboardEventMatchesBind(
+        keyboardEvent({ key: "Escape", code: "Escape", keyCode: 27 }),
+        27
+      )
+    ).toBe(true);
+    expect(
+      keyboardEventMatchesBind(
+        keyboardEvent({ key: "a", code: "KeyA", keyCode: 65 }),
+        "space"
+      )
+    ).toBe(false);
+  });
+
+  test("resolves directional keyboard controls from a native keyboard event", () => {
+    const controls = {
+      up: "up",
+      down: "down",
+      left: "left",
+      right: "right",
+    };
+
+    expect(
+      resolveKeyboardDirectionInput(
+        keyboardEvent({ key: "ArrowRight", code: "ArrowRight", keyCode: 39 }),
+        controls
+      )
+    ).toBe("right");
+  });
 });

package/src/services/actionInput.ts

@@ -1,4 +1,4 @@
-import type { RpgActionInput, RpgActionName } from "@rpgjs/common";
+import { Direction, type RpgActionInput, type RpgActionName } from "@rpgjs/common";
 
 export type KeyboardActionDataResolver<TClient = any, TSprite = any> = (
   client: TClient,
@@ -32,6 +32,53 @@ export function getKeyboardControlBind(control: any): any {
   return isKeyboardActionConfig(control) ? control.bind : control;
 }
 
+const KEY_CODE_NAMES: Record<number, string> = {
+  32: "space",
+  27: "escape",
+  37: "left",
+  38: "up",
+  39: "right",
+  40: "down",
+};
+
+const normalizeKeyboardName = (value: unknown): string | undefined => {
+  if (typeof value !== "string") return undefined;
+  const normalized = value.toLowerCase();
+  if (
+    normalized === " " ||
+    normalized === "spacebar" ||
+    normalized === "space"
+  ) {
+    return "space";
+  }
+  if (normalized.startsWith("arrow")) {
+    return normalized.slice("arrow".length);
+  }
+  return normalized;
+};
+
+export function keyboardEventMatchesBind(
+  event: KeyboardEvent,
+  bind: any
+): boolean {
+  if (Array.isArray(bind)) {
+    return bind.some(item => keyboardEventMatchesBind(event, item));
+  }
+
+  if (typeof bind === "number") {
+    return event.keyCode === bind;
+  }
+
+  const expected = normalizeKeyboardName(bind);
+  if (!expected) return false;
+
+  return (
+    normalizeKeyboardName(event.key) === expected ||
+    normalizeKeyboardName(event.code) === expected ||
+    KEY_CODE_NAMES[event.keyCode] === expected
+  );
+}
+
 export function resolveKeyboardActionInput(
   control: any,
   client: any,
@@ -51,3 +98,23 @@ export function resolveKeyboardActionInput(
     ? { action }
     : { action, data };
 }
+
+export function resolveKeyboardDirectionInput(
+  event: KeyboardEvent,
+  keyboardControls: any
+): Direction | undefined {
+  const directions: Array<[any, Direction]> = [
+    [keyboardControls?.up, Direction.Up],
+    [keyboardControls?.down, Direction.Down],
+    [keyboardControls?.left, Direction.Left],
+    [keyboardControls?.right, Direction.Right],
+  ];
+
+  for (const [control, direction] of directions) {
+    if (keyboardEventMatchesBind(event, getKeyboardControlBind(control))) {
+      return direction;
+    }
+  }
+
+  return undefined;
+}

package/src/services/standalone.ts

@@ -19,7 +19,12 @@ interface StandaloneOptions {
 class BridgeWebsocket extends AbstractWebsocket {
   private room: ServerIo;
   private socket: ClientIo;
-  private pendingOn: Array<{ event: string; callback: (data: any) => void }> = [];
+  private socketRoom?: ServerIo;
+  private listeners: Array<{
+    event: string;
+    callback: (data: any) => void;
+    handler: (event: any) => void;
+  }> = [];
   private rooms = {
     partyFn: async (roomId: string) => {
       this.room = new ServerIo(roomId, this.rooms);
@@ -49,6 +54,7 @@ class BridgeWebsocket extends AbstractWebsocket {
   }
 
   private async _connection(listeners?: (data: any) => void) {
+    this.detachCurrentSocket();
     this.serverInstance = this.context.get('server')
     this.socket = new ClientIo(this.serverInstance, 'player-client-id');
     const url = new URL('http://localhost')
@@ -60,29 +66,42 @@ class BridgeWebsocket extends AbstractWebsocket {
     })
     listeners?.(this.socket)
     this.room.clients.set(this.socket.id, this.socket);
-    this.pendingOn.forEach(({ event, callback }) => this.socket.addEventListener(event, callback));
-    this.pendingOn = [];
+    this.socketRoom = this.room;
+    this.listeners.forEach(({ handler }) => {
+      this.socket.addEventListener("message", handler);
+    });
     await this.serverInstance.onConnect(this.socket.conn as any, { request } as any);
     return this.socket
   }
 
   on(key: string, callback: (data: any) => void) {
+    if (
+      this.listeners.some(
+        (listener) => listener.event === key && listener.callback === callback
+      )
+    ) {
+      return;
+    }
     const handler = (event) => {
       const object = normalizeStandaloneMessage(event);
       if (object.type === key) {
         callback(object.value);
       }
     };
-    if (!this.socket) {
-      this.pendingOn.push({ event: "message", callback: handler });
-      return;
-    }
-    this.socket.addEventListener("message", handler);
+    this.listeners.push({ event: key, callback, handler });
+    this.socket?.addEventListener("message", handler);
   }
 
   off(event: string, callback: (data: any) => void) {
-    if (!this.socket) return;
-    this.socket.removeEventListener(event, callback);
+    const remaining: typeof this.listeners = [];
+    for (const listener of this.listeners) {
+      if (listener.event === event && listener.callback === callback) {
+        this.socket?.removeEventListener("message", listener.handler);
+        continue;
+      }
+      remaining.push(listener);
+    }
+    this.listeners = remaining;
   }
 
   emit(event: string, data: any) {
@@ -135,6 +154,16 @@ class BridgeWebsocket extends AbstractWebsocket {
     })
   }
 
+  private detachCurrentSocket() {
+    if (!this.socket) return;
+    this.listeners.forEach(({ handler }) => {
+      this.socket.removeEventListener("message", handler);
+    });
+    this.socketRoom?.clients?.delete?.(this.socket.id);
+    this.socket = undefined as any;
+    this.socketRoom = undefined;
+  }
+
   getServer() {
     return this.serverInstance
   }

package/src/utils/mapId.ts

@@ -0,0 +1,2 @@
+export const normalizeRoomMapId = (mapId: string | undefined): string | undefined =>
+  typeof mapId === "string" ? mapId.replace(/^map-/, "") : undefined;