@rpgjs/client 5.0.0-alpha.9 → 5.0.0-beta.10

package/src/components/character.ce

@@ -1,73 +1,320 @@
-<Container x y zIndex={y} viewportFollow={isMe} controls>
-  @for (component of componentsBehind) {
+<Container x={smoothX} y={smoothY} zIndex={z} viewportFollow={shouldFollowCamera} controls onBeforeDestroy  visible>
+  @for (compConfig of normalizedComponentsBehind) {
     <Container>
-      <component object />
+      <compConfig.component object ...compConfig.props />
     </Container>
   } 
-  <Particle emit={@emitParticleTrigger} settings={@particleSettings} zIndex={1000} name={particleName} />
+  <PlayerComponents object position="bottom" graphicBounds />
+  <PlayerComponents object position="left" graphicBounds />
+  <Particle emit={emitParticleTrigger} settings={particleSettings} zIndex={1000} name={particleName} />
   <Container>
-    @for (graphicId of graphics) {
-      <Sprite sheet={@sheet(@graphicId)} direction tint />
+    @for (graphicObj of graphicsSignals) {
+      <Container scale={graphicScale(graphicObj)}>
+        <Sprite 
+          sheet={sheet(graphicObj)} 
+          direction 
+          tint 
+          hitbox
+          shadowCaster={shadowCaster(graphicObj)}
+          flash={flashConfig}
+        />
+      </Container>
     }
   </Container>
-  @for (component of componentsInFront) {
-    <Container>
-      <component object />
+  <PlayerComponents object position="center" graphicBounds />
+  <PlayerComponents object position="right" graphicBounds />
+  <PlayerComponents object position="top" graphicBounds />
+  @for (compConfig of normalizedComponentsInFront) {
+    <Container dependencies={compConfig.dependencies}>
+      <compConfig.component object ...compConfig.props />
     </Container>
-  } 
-  <!-- <Ellipse 
-    x={shadow.@x} 
-    y={shadow.@y} 
-    width={shadow.@width} 
-    height={shadow.@height} 
-    color="black" 
-    blur={10} 
-    alpha={0.5}
-  /> -->
+  }
+  @for (attachedGui of attachedGuis) {
+    @if (shouldDisplayAttachedGui) {
+      <Container>
+        <attachedGui.component ...attachedGui.data() dependencies={attachedGui.dependencies} object={object} onFinish={(data) => {
+          onAttachedGuiFinish(attachedGui, data)
+        }} onInteraction={(name, data) => {
+          onAttachedGuiInteraction(attachedGui, name, data)
+        }} />
+      </Container>
+    }
+  }
 </Container>
 
 <script>
-  import { signal, effect, mount, computed, tick } from "canvasengine";
+  import { signal, effect, mount, computed, tick, animatedSignal, on } from "canvasengine";
+  import { Assets } from "pixi.js";
+
+  import { lastValueFrom, combineLatest, pairwise, filter, map, startWith } from "rxjs";
   import { Particle } from "@canvasengine/presets";
   import { GameEngineToken, ModulesToken } from "@rpgjs/common";
   import { RpgClientEngine } from "../RpgClientEngine";
   import { inject } from "../core/inject";  
-  import { Direction } from "@rpgjs/common";
+  import { Direction, Animation } from "@rpgjs/common";
   import Hit from "./effects/hit.ce";
+  import PlayerComponents from "./player-components.ce";
+  import { RpgGui } from "../Gui/Gui";
+  import { getCanMoveValue } from "../utils/readPropValue";
 
   const { object, id } = defineProps();
-  
+
   const client = inject(RpgClientEngine);
   const hooks = inject(ModulesToken);
+  const guiService = inject(RpgGui);
 
   const spritesheets = client.spritesheets;
-  const playerId = client.playerId;
   const componentsBehind = client.spriteComponentsBehind;
   const componentsInFront = client.spriteComponentsInFront;
-  const isMe = computed(() => id() === playerId);
-
-  const x = object.x;
-  const y = object.y;
-  const tint = object.tint;
-  const direction = object.direction;
-  const animationName = object.animationName;
-  const emitParticleTrigger = object.emitParticleTrigger;
+  const readProp = (value) => typeof value === 'function' ? value() : value;
+  const isCurrentPlayer = () => {
+    const playerId = client.playerIdSignal();
+    const currentPlayer = playerId ? client.sceneMap?.players?.()?.[playerId] : undefined;
+    return readProp(id) === playerId
+      || readProp(object?.id) === playerId
+      || object === currentPlayer
+      || object === client.sceneMap?.getCurrentPlayer?.();
+  };
+  const isMe = computed(isCurrentPlayer);
+  const shadowsEnabled = computed(() => {
+    const lighting = client.sceneMap?.lighting?.();
+    return Boolean(lighting?.shadows?.enabled || (lighting?.spots?.length ?? 0) > 0);
+  });
+
+  /**
+   * Normalize a single sprite component configuration
+   * 
+   * Handles both direct component references and configuration objects with optional props and dependencies.
+   * Extracts the component reference and creates a computed function that returns the props.
+   * 
+   * ## Design
+   * 
+   * Supports two formats:
+   * 1. Direct component: `ShadowComponent`
+   * 2. Configuration object: `{ component: LightHalo, props: {...}, dependencies: (object) => [...] }`
+   * 
+   * The normalization process:
+   * - Extracts the actual component from either format
+   * - Extracts dependencies function if provided
+   * - Creates a computed function that returns props (static object or dynamic function result)
+   * - Returns a normalized object with `component`, `props`, and `dependencies`
+   * 
+   * @param comp - Component reference or configuration object
+   * @returns Normalized component configuration with component, props, and dependencies
+   * 
+   * @example
+   * ```ts
+   * // Direct component
+   * normalizeComponent(ShadowComponent)
+   * // => { component: ShadowComponent, props: {}, dependencies: undefined }
+   * 
+   * // With static props
+   * normalizeComponent({ component: LightHalo, props: { radius: 30 } })
+   * // => { component: LightHalo, props: { radius: 30 }, dependencies: undefined }
+   * 
+   * // With dynamic props and dependencies
+   * normalizeComponent({ 
+   *   component: HealthBar, 
+   *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),
+   *   dependencies: (object) => [object.hp, object.param.maxHp]
+   * })
+   * // => { component: HealthBar, props: {...}, dependencies: (object) => [...] }
+   * ```
+   */
+  const normalizeComponent = (comp) => {
+    let componentRef;
+    let propsValue;
+    let dependenciesFn;
+    
+    // If it's a direct component reference
+    if (typeof comp === 'function' || (comp && typeof comp === 'object' && !comp.component)) {
+      componentRef = comp;
+      propsValue = undefined;
+      dependenciesFn = undefined;
+    }
+    // If it's a configuration object with component and props
+    else if (comp && typeof comp === 'object' && comp.component) {
+      componentRef = comp.component;
+      // Support both "data" (legacy) and "props" (new) for backward compatibility
+      propsValue = comp.props !== undefined ? comp.props : comp.data;
+      dependenciesFn = comp.dependencies;
+    }
+    // Fallback: treat as direct component
+    else {
+      componentRef = comp;
+      propsValue = undefined;
+      dependenciesFn = undefined;
+    }
+    
+    // Return props directly (object or function), not as computed
+    // The computed will be created in the template when needed
+    return {
+      component: componentRef,
+      props: typeof propsValue === 'function' ? propsValue(object) : propsValue || {},
+      dependencies: dependenciesFn ? dependenciesFn(object) : []
+    };
+  };
+
+  /**
+   * Normalize an array of sprite components
+   * 
+   * Applies normalization to each component in the array using `normalizeComponent`.
+   * 
+   * @param components - Array of component references or configuration objects
+   * @returns Array of normalized component configurations
+   */
+  const normalizeComponents = (components) => {
+    return components.map((comp) => normalizeComponent(comp));
+  };
+
+
+  /**
+   * Normalized components to render behind sprites
+   * Handles both direct component references and configuration objects with optional props and dependencies
+   * 
+   * Supports multiple formats:
+   * 1. Direct component: `ShadowComponent`
+   * 2. Configuration object: `{ component: LightHalo, props: {...} }`
+   * 3. With dynamic props: `{ component: LightHalo, props: (object) => {...} }`
+   * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`
+   * 
+   * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).
+   * The object is passed to the dependencies function to allow sprite-specific dependency resolution.
+   * 
+   * @example
+   * ```ts
+   * // Direct component
+   * componentsBehind: [ShadowComponent]
+   * 
+   * // With static props
+   * componentsBehind: [{ component: LightHalo, props: { radius: 30 } }]
+   * 
+   * // With dynamic props and dependencies
+   * componentsBehind: [{ 
+   *   component: HealthBar, 
+   *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),
+   *   dependencies: (object) => [object.hp, object.param.maxHp]
+   * }]
+   * ```
+   */
+  const normalizedComponentsBehind = computed(() => {
+    return normalizeComponents(componentsBehind());
+  });
+
+  /**
+   * Normalized components to render in front of sprites
+   * Handles both direct component references and configuration objects with optional props and dependencies
+   * 
+   * See `normalizedComponentsBehind` for format details.
+   * Components with dependencies will only be displayed when all dependencies are resolved.
+   */
+  const normalizedComponentsInFront = computed(() => {
+    return normalizeComponents(componentsInFront());
+  });
+  
+  /**
+   * Determine if the camera should follow this sprite
+   * 
+   * The camera follows this sprite if:
+   * - It's explicitly set as the camera follow target, OR
+   * - It's the current player and no explicit target is set (default behavior)
+   */
+  const shouldFollowCamera = computed(() => {
+    const cameraTargetId = client.cameraFollowTargetId();
+    // If a target is explicitly set, only follow if this sprite is the target
+    if (cameraTargetId !== null) {
+      return id() === cameraTargetId;
+    }
+    // Otherwise, follow the current player (default behavior)
+    return isMe();
+  });
+
+  /**
+   * Get all attached GUI components that should be rendered on sprites
+   * These are GUIs with attachToSprite: true
+   */
+  const attachedGuis = computed(() => {
+    return guiService.getAttachedGuis();
+  });
+
+  /**
+   * Check if attached GUIs should be displayed for this sprite
+   * This is controlled by showAttachedGui/hideAttachedGui on the server
+   */
+  const shouldDisplayAttachedGui = computed(() => {
+    return guiService.shouldDisplayAttachedGui(id());
+  });
+
+  const { 
+    x, 
+    y, 
+    tint, 
+    direction, 
+    animationName, 
+    animationCurrentIndex,
+    emitParticleTrigger, 
+    particleName, 
+    graphics, 
+    hitbox,
+    isConnected,
+    graphicsSignals,
+    flashTrigger
+  } = object;
+
+  /**
+   * Flash configuration signals for dynamic options
+   * These signals are updated when the flash trigger is activated with options
+   */
+  const flashType = signal<'alpha' | 'tint' | 'both'>('alpha');
+  const flashDuration = signal(300);
+  const flashCycles = signal(1);
+  const flashAlpha = signal(0.3);
+  const flashTint = signal(0xffffff);
+
+  /**
+   * Listen to flash trigger to update configuration dynamically
+   * When flash is triggered with options, update the signals
+   */
+  on(flashTrigger, (data) => {
+    if (data && typeof data === 'object') {
+      if (data.type !== undefined) flashType.set(data.type);
+      if (data.duration !== undefined) flashDuration.set(data.duration);
+      if (data.cycles !== undefined) flashCycles.set(data.cycles);
+      if (data.alpha !== undefined) flashAlpha.set(data.alpha);
+      if (data.tint !== undefined) flashTint.set(data.tint);
+    }
+  });
+
+  /**
+   * Flash configuration for the sprite
+   * 
+   * This configuration is used by the flash directive to create visual feedback effects.
+   * The flash trigger is exposed through the object, allowing both server events and
+   * client-side code to trigger flash animations. Options can be passed dynamically
+   * through the trigger, which updates the reactive signals.
+   */
+  const flashConfig = computed(() => ({
+    trigger: flashTrigger,
+    type: flashType(),
+    duration: flashDuration(),
+    cycles: flashCycles(),
+    alpha: flashAlpha(),
+    tint: flashTint(),
+  }));
+
   const particleSettings = client.particleSettings;
-  const particleName = object.particleName;
-  const graphics = object.graphics;
-
-  const hitbox = object.hitbox;
-  const widthShadow = 10;
-  const shadow = computed(() => ({
-    x: hitbox().w / 2,
-    y: hitbox().h - (hitbox().h / 2),
-    width: hitbox().w + widthShadow,
-    height: hitbox().h,
-  }))
-  const canControls = () => isMe() && object.canMove()
+
+  const canControls = () => isMe() && getCanMoveValue(object)
   const keyboardControls = client.globalConfig.keyboardControls;
 
-  const controls = signal({
+  const visible = computed(() => {
+    if (object.isEvent()) {
+      return true
+    }
+    return isConnected()
+  });
+
+  const controls = {
     down: {
       repeat: true,
       bind: keyboardControls.down,
@@ -101,35 +348,530 @@
       keyDown() {
         if (canControls()) {
           client.processAction({ action: 'action' })
-           // particleName.set('hit') 
-          // emitParticleTrigger.start()
-          // object.flash('red')
         }
       },
     },
+    escape: {
+      bind: keyboardControls.escape,
+      keyDown() {
+        if (canControls()) {
+          client.processAction({ action: 'escape' })
+        }
+      },
+    },
+    gamepad: {
+      enabled: true
+    }
+  };
+
+  const smoothX = animatedSignal(x(), {
+    duration: isMe() ? 0 : 0
   });
 
-  const sheet = (graphicId) => {
+  const smoothY = animatedSignal(y(), {
+    duration: isMe() ? 0 : 0,
+  });
+
+  const z = computed(() => {
+    return object.y() + object.z()
+  });
+
+  const realAnimationName = signal(animationName());
+
+  const xSubscription = x.observable.subscribe((value) => {
+    smoothX.set(value);
+  });
+
+  const ySubscription = y.observable.subscribe((value) => {
+    smoothY.set(value);
+  });
+  
+  const sheet = (graphicObject) => {
     return {
-      definition: spritesheets.get(graphicId),
-      playing: animationName,
+      definition: graphicObject,
+      playing: realAnimationName(),
       params: {
-        direction
+        direction: direction()
       },
+      onFinish() {
+        animationCurrentIndex.update(index => index + 1)
+      }
     };
   }
 
-  mount((element) => {
-    hooks.callHooks("client-sprite-onInit", element.componentInstance)
-    hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, element.componentInstance)
+  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;
+  }
+
+  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;
+
+    return {
+      enabled: shadowsEnabled,
+      height,
+      footAnchor: { x: 0.5, y: 1 },
+      footOffset: { x: 0, y: 2 },
+      alpha: 0.5,
+      blur: 3.5,
+      gradientPower: 2,
+      hardness: 0.42,
+      minLength: Math.max(6, (box?.h ?? 32) * 0.25),
+      maxLength: Math.max(90, height * 1.8),
+      contactAlpha: 0.3,
+      contactScale: 0.3,
+    };
+  }
+
+  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;
+  };
+
+  const clampRatio = (value) => Math.min(1, Math.max(0, value));
+
+  const normalizePair = (value, fallback = [1, 1]) => {
+    if (Array.isArray(value)) {
+      const x = toFiniteNumber(value[0], fallback[0]);
+      const y = toFiniteNumber(value[1] ?? value[0], x);
+      return [x, y];
+    }
+    if (typeof value === 'number') {
+      return [value, value];
+    }
+    if (value && typeof value === 'object') {
+      const x = toFiniteNumber(value.x, fallback[0]);
+      const y = toFiniteNumber(value.y ?? value.x, x);
+      return [x, y];
+    }
+    return fallback;
+  };
+
+  const normalizeAnchor = (value) => {
+    if (!Array.isArray(value)) return undefined;
+    const [x, y] = normalizePair(value, [0, 0]);
+    return [clampRatio(x), clampRatio(y)];
+  };
+
+  const resolveImageSource = (image) => {
+    if (typeof image === 'string') return image;
+    if (typeof image?.default === 'string') return image.default;
+    return undefined;
+  };
 
-    return () => {
-      hooks.callHooks("client-sprite-onDestroy", element.componentInstance)
-      hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, element.componentInstance)
+  const parentTextureOptions = (graphicObject) => {
+    const props = [
+      'width',
+      'height',
+      'framesHeight',
+      'framesWidth',
+      'rectWidth',
+      'rectHeight',
+      'offset',
+      'image',
+      'sound',
+      'spriteRealSize',
+      'scale',
+      'anchor',
+      'pivot',
+      'x',
+      'y',
+      'opacity'
+    ];
+
+    return props.reduce((options, prop) => {
+      if (graphicObject?.[prop] !== undefined) {
+        options[prop] = graphicObject[prop];
+      }
+      return options;
+    }, {});
+  };
+
+  const resolveTextureOptions = (graphicObject) => {
+    const textures = graphicObject?.textures ?? {};
+    const texture =
+      textures[realAnimationName()] ??
+      textures[Animation.Stand] ??
+      Object.values(textures)[0] ??
+      {};
+
+    return {
+      ...parentTextureOptions(graphicObject),
+      ...texture
+    };
+  };
+
+  const resolveFirstAnimationFrame = (textureOptions) => {
+    const animations = textureOptions?.animations;
+    if (!animations) return {};
+
+    try {
+      const frames = typeof animations === 'function'
+        ? animations({ direction: direction() })
+        : animations;
+      if (!Array.isArray(frames)) return {};
+      const firstGroup = frames[0];
+      return Array.isArray(firstGroup) ? firstGroup[0] ?? {} : firstGroup ?? {};
+    }
+    catch {
+      return {};
     }
+  };
+
+  const optionValue = (prop, frame, textureOptions, graphicObject) => {
+    return frame?.[prop] ?? textureOptions?.[prop] ?? graphicObject?.[prop];
+  };
+
+  const resolveFrameSize = (textureOptions, dimensions) => {
+    const framesWidth = toPositiveNumber(textureOptions?.framesWidth) ?? 1;
+    const framesHeight = toPositiveNumber(textureOptions?.framesHeight) ?? 1;
+    const imageSource = resolveImageSource(textureOptions?.image);
+    const loadedSize = imageSource ? dimensions[imageSource] : undefined;
+    const fullWidth = toPositiveNumber(textureOptions?.width) ?? loadedSize?.width;
+    const fullHeight = toPositiveNumber(textureOptions?.height) ?? loadedSize?.height;
+    const width = toPositiveNumber(textureOptions?.rectWidth) ??
+      toPositiveNumber(textureOptions?.spriteWidth) ??
+      (fullWidth ? fullWidth / framesWidth : undefined);
+    const height = toPositiveNumber(textureOptions?.rectHeight) ??
+      toPositiveNumber(textureOptions?.spriteHeight) ??
+      (fullHeight ? fullHeight / framesHeight : undefined);
+
+    return {
+      width,
+      height
+    };
+  };
+
+  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)) {
+      return;
+    }
+
+    loadingImageDimensions.add(source);
+    Assets.load(source)
+      .then((texture) => {
+        const width = toPositiveNumber(texture?.width);
+        const height = toPositiveNumber(texture?.height);
+        if (!width || !height) return;
+
+        imageDimensions.update((dimensions) => ({
+          ...dimensions,
+          [source]: { width, height }
+        }));
+      })
+      .catch(() => {})
+      .finally(() => {
+        loadingImageDimensions.delete(source);
+      });
+  };
+
+  effect(() => {
+    const sources = new Set();
+
+    graphicsSignals().forEach((graphicObject) => {
+      const baseImage = resolveImageSource(graphicObject?.image);
+      if (baseImage) sources.add(baseImage);
+
+      Object.values(graphicObject?.textures ?? {}).forEach((textureOptions) => {
+        const image = resolveImageSource(textureOptions?.image ?? graphicObject?.image);
+        if (image) sources.add(image);
+      });
+    });
+
+    sources.forEach((source) => loadImageDimensions(source));
+  });
+
+  const hitboxBounds = computed(() => {
+    const box = hitbox();
+    const width = box?.w ?? 0;
+    const height = box?.h ?? 0;
+
+    return {
+      left: 0,
+      top: 0,
+      right: width,
+      bottom: height,
+      width,
+      height,
+      centerX: width / 2,
+      centerY: height / 2
+    };
+  });
+
+  const graphicBounds = computed(() => {
+    const box = hitbox();
+    const fallback = hitboxBounds();
+    const dimensions = imageDimensions();
+    const graphics = graphicsSignals();
+    let bounds = null;
+
+    graphics.forEach((graphicObject) => {
+      const textureOptions = resolveTextureOptions(graphicObject);
+      const frame = resolveFirstAnimationFrame(textureOptions);
+      const size = resolveFrameSize(textureOptions, dimensions);
+      const spriteWidth = size.width ?? box?.w;
+      const spriteHeight = size.height ?? box?.h;
+
+      if (!spriteWidth || !spriteHeight) {
+        return;
+      }
+
+      const explicitAnchor = normalizeAnchor(optionValue('anchor', frame, textureOptions, graphicObject));
+      const anchor = explicitAnchor ?? resolveHitboxAnchor(
+        spriteWidth,
+        spriteHeight,
+        optionValue('spriteRealSize', frame, textureOptions, graphicObject),
+        box
+      );
+      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];
+      const rightEdge = (1 - anchor[0]) * spriteWidth * scale[0];
+      const topEdge = -anchor[1] * spriteHeight * scale[1];
+      const bottomEdge = (1 - anchor[1]) * spriteHeight * scale[1];
+      const graphic = {
+        left: x + Math.min(leftEdge, rightEdge),
+        top: y + Math.min(topEdge, bottomEdge),
+        right: x + Math.max(leftEdge, rightEdge),
+        bottom: y + Math.max(topEdge, bottomEdge)
+      };
+
+      bounds = bounds
+        ? {
+            left: Math.min(bounds.left, graphic.left),
+            top: Math.min(bounds.top, graphic.top),
+            right: Math.max(bounds.right, graphic.right),
+            bottom: Math.max(bounds.bottom, graphic.bottom)
+          }
+        : graphic;
+    });
+
+    if (!bounds) {
+      return fallback;
+    }
+
+    const width = bounds.right - bounds.left;
+    const height = bounds.bottom - bounds.top;
+
+    return {
+      ...bounds,
+      width,
+      height,
+      centerX: bounds.left + width / 2,
+      centerY: bounds.top + height / 2
+    };
+  });
+
+  // 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
+
+  const stateX$ = smoothX.animatedState.observable;
+  const stateY$ = smoothY.animatedState.observable;
+  const animationName$ = animationName.observable;
+
+  const moving$ = combineLatest([stateX$, stateY$]).pipe(
+    map(([sx, sy]) => {
+      const xFinished = Math.abs(sx.value.current - sx.value.end) <= epsilon;
+      const yFinished = Math.abs(sy.value.current - sy.value.end) <= epsilon;
+      return !xFinished || !yFinished; // moving if X or Y is not finished
+    }),
+    startWith(false)
+  );
+
+  const animationChange$ = animationName$.pipe(
+    startWith(animationName()),
+    pairwise(),
+    filter(([prev, curr]) => prev !== curr)
+  );
+
+  let beforeRemovePromise = null;
+  let beforeRemoveTransitionValue = null;
+  const resolveRemoveContext = () => {
+    if (!object._removeTransition) return null;
+    const value = object._removeTransition();
+    if (!value || typeof value !== 'string') return null;
+    try {
+      const context = JSON.parse(value);
+      if (!context || typeof context !== 'object' || !context.active) return null;
+      context.__transitionValue = value;
+      return context;
+    }
+    catch {
+      return null;
+    }
+  };
+
+  const withTimeout = (promise, timeoutMs = 0) => {
+    if (!timeoutMs || timeoutMs <= 0) return promise;
+    return Promise.race([
+      promise,
+      new Promise((resolve) => setTimeout(resolve, timeoutMs)),
+    ]);
+  };
+
+  const runBeforeRemove = () => {
+    const context = resolveRemoveContext();
+    if (!context) return Promise.resolve();
+    if (beforeRemovePromise && beforeRemoveTransitionValue === context.__transitionValue) {
+      return beforeRemovePromise;
+    }
+    beforeRemoveTransitionValue = context.__transitionValue;
+    beforeRemovePromise = withTimeout(
+      lastValueFrom(hooks.callHooks("client-sprite-onBeforeRemove", object, context)),
+      context.timeoutMs
+    );
+    return beforeRemovePromise;
+  };
+
+  const removeTransitionSubscription = object._removeTransition?.observable?.subscribe(() => {
+    if (resolveRemoveContext()) {
+      runBeforeRemove();
+    }
+  });
+
+  const animationMovementSubscription = combineLatest([animationChange$, moving$]).subscribe(([[prev, curr], isMoving]) => {
+    if (curr == 'stand' && !isMoving) {
+      realAnimationName.set(curr);
+    }
+    else if (curr == 'walk' && isMoving) {
+      realAnimationName.set(curr);
+    }
+    else if (!movementAnimations.includes(curr)) {
+      realAnimationName.set(curr);
+    }
+    if (!isMoving && object.animationIsPlaying && object.animationIsPlaying()) {
+      if (movementAnimations.includes(curr)) {
+        if (typeof object.resetAnimationState === 'function') {
+          object.resetAnimationState();
+        }
+      }
+    }
+  });
+
+  /**
+   * Cleanup subscriptions and call hooks before sprite destruction.
+   *
+   * # Design
+   * - Prevent memory leaks by unsubscribing from all local subscriptions created in this component.
+   * - Execute destruction hooks to notify modules and scene map of sprite removal.
+   *
+   * @example
+   * await onBeforeDestroy();
+   */
+  const waitForTemporaryAnimationEnd = (maxDuration = 1200) => {
+    if (!object.animationIsPlaying || !object.animationIsPlaying()) {
+      return Promise.resolve();
+    }
+
+    return new Promise((resolve) => {
+      let finished = false;
+      let timeout;
+      let subscription;
+      const finish = () => {
+        if (finished) return;
+        finished = true;
+        clearTimeout(timeout);
+        subscription?.unsubscribe();
+        resolve();
+      };
+      timeout = setTimeout(finish, maxDuration);
+      subscription = object.animationIsPlaying.observable.subscribe((isPlaying) => {
+        if (!isPlaying) finish();
+      });
+      if (finished) subscription.unsubscribe();
+    });
+  };
+
+  const onBeforeDestroy = async () => {
+    await runBeforeRemove();
+    await waitForTemporaryAnimationEnd();
+    removeTransitionSubscription?.unsubscribe();
+    animationMovementSubscription.unsubscribe();
+    xSubscription.unsubscribe();
+    ySubscription.unsubscribe();
+    await lastValueFrom(hooks.callHooks("client-sprite-onDestroy", object)) 
+    await lastValueFrom(hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, object))
+  }
+
+  mount((element) => {
+    hooks.callHooks("client-sprite-onAdd", object).subscribe()
+    hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, object).subscribe()
+    effect(() => {
+      if (isCurrentPlayer()) {
+        client.setKeyboardControls(element.directives.controls)
+      }
+    })
   })
 
+  /**
+   * Handle attached GUI finish event
+   * 
+   * @param gui - The GUI instance
+   * @param data - Data passed from the GUI component
+   */
+  const onAttachedGuiFinish = (gui, data) => {
+    guiService.guiClose(gui.name, data);
+  };
+
+  /**
+   * Handle attached GUI interaction event
+   * 
+   * @param gui - The GUI instance
+   * @param name - Interaction name
+   * @param data - Interaction data
+   */
+  const onAttachedGuiInteraction = (gui, name, data) => {
+    guiService.guiInteraction(gui.name, name, data);
+  };
+
   tick(() => {
-    hooks.callHooks("client-sprite-onUpdate")
+    hooks.callHooks("client-sprite-onUpdate").subscribe()
   })
-</script>
+</script>