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

package/src/components/scenes/draw-map.ce

@@ -1,39 +1,73 @@
-<Container sound={backgroundMusic} >
+<Container sound={backgroundMusic} shake={shakeConfig} freeze={engine.gamePause}>
   <Container sound={backgroundAmbientSound} />
 
-  <sceneComponent() data={map.@data} params={map.@params} />
-  
-  @for (effect of effects) {
+  @if (map() && sceneComponent()) {
+    <sceneComponent() data={map().data} params={map().params} />
+  }
+
+  @for (componentAnimation of componentAnimations) {
     <Container>
-      @for (animation of effect.current) {
-        <effect.component ...animation />
+      @for (animation of componentAnimation.current) {
+        <componentAnimation.component ...animation />
       }
     </Container>
   }
+
+  @if (weatherProps()) {
+    <Weather ...weatherProps() />
+  }
 </Container>
 
 <script>
-    import { effect, signal, computed, mount } from 'canvasengine'
+    import { computed } from 'canvasengine'
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
+    import { Weather } from '@canvasengine/presets'
 
     const engine = inject(RpgClientEngine);
-    const effects = engine.effects
-    const map = engine.sceneMap.data
+    const componentAnimations = engine.componentAnimations
+    const map = engine.sceneMap?.data
     const sceneComponent = computed(() => map()?.component)
-    const sceneParams = map()?.params
-    const mapParams = map().params
-    const animations = engine.sceneMap.animations
+    const mapParams = map()?.params
+    const weather = engine.sceneMap.weather
     const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }
     const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }
-    
-    const data = signal(map().data)
 
-    const scale = mapParams?.scale || 1
-    const worldWidth = (mapParams?.width || 2048) * scale
-    const worldHeight = (mapParams?.height || 2048) * scale
-   
-    const clamp = {
-      direction: "all"
+    const shakeConfig = {
+      trigger: engine.mapShakeTrigger,
+      intensity: 10,
+      duration: 500,
+      frequency: 10,
+      direction: 'both'
     }
-</script>
+
+    const weatherProps = computed(() => {
+      const state = weather?.()
+      if (!state) {
+        return null
+      }
+      const validEffects = ['rain', 'snow', 'fog', 'cloud']
+      if (!validEffects.includes(state.effect)) {
+        return null
+      }
+      const params = state.params ?? {}
+      return {
+        effect: state.effect,
+        speed: params.speed,
+        windDirection: params.windDirection,
+        windStrength: params.windStrength,
+        density: params.density,
+        maxDrops: params.maxDrops,
+        height: params.height,
+        scale: params.scale,
+        sunIntensity: params.sunIntensity,
+        sunAngle: params.sunAngle,
+        raySpread: params.raySpread,
+        rayTwinkle: params.rayTwinkle,
+        rayTwinkleSpeed: params.rayTwinkleSpeed,
+        zIndex: params.zIndex ?? 1000,
+        alpha: params.alpha,
+        blendMode: params.blendMode,
+      }
+    })
+</script>

package/src/components/scenes/event-layer.ce

@@ -6,15 +6,21 @@
     @for ((player,id) of players) {
         <Character id={id} object={player} />
     }
+
+    @for (child of children) {
+        <child />
+    }
 </Container>
 
 <script>
-    import { effect, signal } from 'canvasengine'
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import Character from "../character.ce";
+    import LightHalo from "../prebuilt/light-halo.ce";
    
     const engine = inject(RpgClientEngine);
+    const { children } = defineProps()
+    
     const players = engine.sceneMap.players
     const events = engine.sceneMap.events
-</script>
+</script>

package/src/components/scenes/transition.ce

@@ -0,0 +1,60 @@
+<Rect
+  x={0} 
+  y={0} 
+  width={engine.width} 
+  height={engine.height} 
+  fill={color} 
+  alpha={opacity} 
+  zIndex={100000}
+/>
+
+<script>
+  import { animatedSignal, mount, computed, signal } from "canvasengine";
+  import { inject } from "../../core/inject";
+  import { RpgClientEngine } from "../../RpgClientEngine";
+
+  const {
+    onFinish,
+    duration,
+    color,
+    fadeIn
+  } = defineProps({
+    duration: {
+      default: 1000
+    },
+    color: {
+      default: 'black'
+    },
+    fadeIn: {
+      default: true
+    }
+  });
+
+  const engine = inject(RpgClientEngine);
+  
+  // Calculate width and height from engine
+  const width = computed(() => {
+    const w = engine.width();
+    return typeof w === 'string' ? parseInt(w) || 1920 : w;
+  });
+  
+  const height = computed(() => {
+    const h = engine.height();
+    return typeof h === 'string' ? parseInt(h) || 1080 : h;
+  });
+
+  // Animation: fade in from transparent to opaque, or fade out from opaque to transparent
+  const opacity = animatedSignal(fadeIn() ? 0 : 1, {
+    duration: duration(),
+    onComplete: () => {
+      if (onFinish) {
+        onFinish();
+      }
+    }
+  });
+
+  mount(() => {
+    // Start the fade animation
+    opacity.set(fadeIn() ? 1 : 0);
+  });
+</script>

package/src/core/setup.ts

@@ -14,7 +14,7 @@ export async function startGame(options: SetupOptions) {
 
   await injector(context, options.providers);
 
-  const engine = inject(context, RpgClientEngine);
+  const engine = inject<RpgClientEngine>(context, RpgClientEngine);
   await engine.start();
   return context;
-}
+}

package/src/decorators/spritesheet.ts

@@ -0,0 +1,8 @@
+export function Spritesheet(options: Record<string, any> = {}) {
+  return (target: any) => {
+    Object.assign(target, options);
+    if (target.prototype) {
+      Object.assign(target.prototype, options);
+    }
+  };
+}

package/src/index.ts

@@ -2,12 +2,27 @@ export * from "./RpgClientEngine";
 export type * from "./RpgClient";
 export * from "./services/standalone";
 export * from "./services/mmorpg";
+export * from "./services/save";
 export * from "./core/setup";
 export * from "./core/inject";
 export * from "./services/loadMap";
 export * from "./module";
 export * from "./Gui/Gui";
 export * from "./components/gui";
-export * from "./components/effects";
+export * from "./components/animations";
+export * from "./components/prebuilt";
 export * from "./presets";
-export * from "./components";
+export * from "./components";
+export * from "./components/gui";
+export * from "./Sound";
+export * from "./Resource";
+export * from "./decorators/spritesheet";
+export * from "./utils/getEntityProp";
+export { Context } from "@signe/di";
+export { KeyboardControls, Input } from "canvasengine";
+export { Control } from "./services/keyboardControls";
+export { RpgClientObject } from "./Game/Object";
+export { RpgClientPlayer } from "./Game/Player";
+export { RpgClientEvent } from "./Game/Event";
+export { withMobile } from "./components/gui/mobile";
+export * from "./services/AbstractSocket";

package/src/module.ts

@@ -1,14 +1,69 @@
 import { findModules, provideModules } from "@rpgjs/common";
+import { FactoryProvider } from "@signe/di";
 import { RpgClientEngine } from "./RpgClientEngine";
 import { RpgClient } from "./RpgClient";
 import { inject } from "@signe/di";
 import { RpgGui } from "./Gui/Gui";
+import { getSoundMetadata } from "./Sound";
 
-export function provideClientModules(modules: RpgClient[]) {
+/**
+ * Type for client modules that can be either:
+ * - An object implementing RpgClient interface
+ * - A class decorated with @RpgModule decorator
+ */
+export type RpgClientModule = RpgClient | (new () => any);
+
+/**
+ * Provides client modules configuration to Dependency Injection
+ * 
+ * This function accepts an array of client modules that can be either:
+ * - Objects implementing the RpgClient interface
+ * - Classes decorated with the @RpgModule decorator (which will be instantiated)
+ * 
+ * @param modules - Array of client modules (objects or classes)
+ * @returns FactoryProvider configuration for DI
+ * @example
+ * ```ts
+ * // Using an object
+ * provideClientModules([
+ *   {
+ *     engine: {
+ *       onConnected(engine) {
+ *         console.log('Client connected')
+ *       }
+ *     }
+ *   }
+ * ])
+ * 
+ * // Using a decorated class
+ * @RpgModule<RpgClient>({
+ *   engine: {
+ *     onStart(engine) {
+ *       console.log('Client started')
+ *     }
+ *   }
+ * })
+ * class MyClientModule {}
+ * 
+ * provideClientModules([MyClientModule])
+ * ```
+ */
+export function provideClientModules(modules: RpgClientModule[]): FactoryProvider {
   return provideModules(modules, "client", (modules, context) => {
     const mainModuleClient = findModules(context, 'Client')
     modules = [...mainModuleClient, ...modules]
     modules = modules.map((module) => {
+      // If module is a class (constructor function), instantiate it
+      // The RpgModule decorator adds properties to the prototype, which will be accessible via the instance
+      if (typeof module === 'function') {
+        const instance = new module() as any;
+        // Copy all enumerable properties (including from prototype) to a plain object
+        const moduleObj: any = {};
+        for (const key in instance) {
+          moduleObj[key] = instance[key];
+        }
+        module = moduleObj;
+      }
       if ('client' in module) {
         module = module.client as any;
       }
@@ -22,33 +77,95 @@ export function provideClientModules(modules: RpgClient[]) {
           },
         };
       }
+      if (module.spritesheetResolver) {
+        const resolver = module.spritesheetResolver;
+        module.spritesheetResolver = {
+          load: (engine: RpgClientEngine) => {
+            engine.setSpritesheetResolver(resolver);
+          },
+        };
+      }
       if (module.sounds) {
         const sounds = [...module.sounds];
         module.sounds = {
           load: (engine: RpgClientEngine) => {
             sounds.forEach((sound) => {
-              engine.addSound(sound);
+              // Check if it's a class decorated with @Sound
+              if (typeof sound === 'function' || (sound && sound.constructor && sound.constructor !== Object)) {
+                const metadata = getSoundMetadata(sound);
+                if (metadata) {
+                  // Handle single sound
+                  if (metadata.id && metadata.sound) {
+                    engine.addSound({
+                      id: metadata.id,
+                      src: metadata.sound,
+                      loop: metadata.loop,
+                      volume: metadata.volume,
+                    });
+                  }
+                  // Handle multiple sounds
+                  if (metadata.sounds) {
+                    Object.entries(metadata.sounds).forEach(([soundId, soundSrc]) => {
+                      engine.addSound({
+                        id: soundId,
+                        src: soundSrc,
+                        loop: metadata.loop,
+                        volume: metadata.volume,
+                      });
+                    });
+                  }
+                } else {
+                  // Not a decorated class, treat as regular sound object
+                  engine.addSound(sound);
+                }
+              } else {
+                // Regular sound object
+                engine.addSound(sound);
+              }
             });
           },
         };
       }
+      if (module.soundResolver) {
+        const resolver = module.soundResolver;
+        module.soundResolver = {
+          load: (engine: RpgClientEngine) => {
+            engine.setSoundResolver(resolver);
+          },
+        };
+      }
       if (module.gui) {
         const gui = [...module.gui];
         module.gui = {
           load: (engine: RpgClientEngine) => {
-            const guiService = inject(engine.context, RpgGui);
+            const guiService = inject(engine.context, RpgGui) as RpgGui;
             gui.forEach((gui) => {
               guiService.add(gui);
             });
           },
         };
       }
-      if (module.effects) {
-        const effects = [...module.effects];
-        module.effects = {
+      if (module.componentAnimations) {
+        const componentAnimations = [...module.componentAnimations];
+        module.componentAnimations = {
           load: (engine: RpgClientEngine) => {
-            effects.forEach((effect) => {
-              engine.addEffect(effect);
+            componentAnimations.forEach((componentAnimation) => {
+              engine.addComponentAnimation(componentAnimation);
+            });
+          },
+        };
+      }
+      if (module.transitions) {
+        const transitions = [...module.transitions];
+        module.transitions = {
+          load: (engine: RpgClientEngine) => {
+            const guiService = inject(engine.context, RpgGui) as RpgGui;
+            transitions.forEach((transition) => {
+              guiService.add({
+                name: transition.id,
+                component: transition.component,
+                data: transition.props || {}
+              });
             });
           },
         };
@@ -78,6 +195,11 @@ export function provideClientModules(modules: RpgClient[]) {
                 engine.addSpriteComponentInFront(component);
               });
             }
+            if (sprite.components) {
+              Object.entries(sprite.components).forEach(([id, component]) => {
+                engine.registerSpriteComponent(id, component);
+              });
+            }
           },
         };
       }
@@ -103,9 +225,9 @@ export function provideClientGlobalConfig(config: any = {}) {
       down: 'down',
       left: 'left',
       right: 'right',
-      action: 'space'
+      action: 'space',
+      escape: 'escape'
     }
   }
   return provideGlobalConfig(config)
 }
-

package/src/presets/animation.ts

@@ -0,0 +1,46 @@
+/**
+ * Creates an animation spritesheet preset with automatic frame generation
+ * 
+ * This function generates animation frames based on the provided width and height dimensions.
+ * It creates a sequence of frames that progresses through the spritesheet from left to right,
+ * top to bottom, with each frame having a 10ms time increment.
+ * 
+ * @param {number} framesWidth - The number of frames horizontally in the spritesheet
+ * @param {number} framesHeight - The number of frames vertically in the spritesheet
+ * @returns {Object} Animation preset configuration object
+ * 
+ * @example
+ * ```javascript
+ * // For a 4x4 spritesheet
+ * const preset = AnimationSpritesheetPreset(4, 4);
+ * // This will generate 16 frames with coordinates from (0,0) to (3,3)
+ * ```
+ */
+export const AnimationSpritesheetPreset = (framesWidth: number, framesHeight: number) => {
+    
+    const animations: Array<{ time: number; frameX: number; frameY: number }> = [];
+
+    for (let y = 0; y < framesHeight; y++) {
+        for (let x = 0; x < framesWidth; x++) {
+            const frameIndex = y * framesWidth + x;
+            animations.push({ 
+                time: frameIndex * 10, 
+                frameX: x, 
+                frameY: y 
+            });
+        }
+    }
+    
+    return {
+        framesWidth,
+        framesHeight,
+        textures: {
+            default: {
+                animations: () => [
+                    animations
+                ],
+            }
+        }
+    };
+};
+  

package/src/presets/faceset.ts

@@ -0,0 +1,60 @@
+/**
+ * Creates a faceset preset for character expressions
+ * 
+ * This preset allows you to define multiple facial expressions for a character,
+ * where each expression corresponds to a specific frame position (frameX, frameY)
+ * within a single faceset texture. Each expression is defined by its position
+ * in the faceset grid.
+ * 
+ * @param options - Object containing the faceset configuration
+ * @param framesWidth - Number of frames horizontally in the faceset texture
+ * @param framesHeight - Number of frames vertically in the faceset texture
+ * @param expressions - Object mapping expression names to their frame positions as tuples [frameX, frameY]
+ * @returns Faceset configuration with animations for each expression
+ * 
+ * @example
+ * ```typescript
+ * const faceset = FacesetPreset({
+ *   id: "facesetId",
+ *   image: "faceset.png",
+ *   width: 1024,
+ *   height: 1024,
+ * }, 4, 2, {
+ *   happy: [0, 0],
+ *   sad: [1, 0],
+ *   angry: [2, 0],
+ *   surprised: [3, 0]
+ * });
+ * ```
+ */
+export const FacesetPreset = (
+    options: any,
+    framesWidth: number, 
+    framesHeight: number,
+    expressions: Record<string, [number, number]>,
+) => {
+    
+    const textures: Record<string, any> = {};
+    
+    // Create texture configuration for each expression
+    Object.keys(expressions).forEach((expressionName) => {
+        const [frameX, frameY] = expressions[expressionName];
+        textures[expressionName] = {
+            animations: () => [
+                [{ 
+                    time: 0, 
+                    frameX: frameX, 
+                    frameY: frameY 
+                }]
+            ],
+        };
+    });
+    
+    return {
+        ...options,
+        framesWidth,
+        framesHeight,
+        textures
+    };
+};
+  

package/src/presets/icon.ts

@@ -0,0 +1,17 @@
+export const IconPreset = (options: {
+    image: string;
+    framesWidth: number;
+    framesHeight: number;
+    id: string;
+}) => {
+    return {
+        textures: {
+            default: {
+                animations: () => [
+                    [{ time: 0, frameX: 0, frameY: 0 }]
+                ]
+            }
+        },
+        ...options
+    }
+}

package/src/presets/index.ts

@@ -1,5 +1,13 @@
+import { AnimationSpritesheetPreset } from "./animation";
+import { LPCSpritesheetPreset } from "./lpc";
 import { RMSpritesheet } from "./rmspritesheet";
+import { FacesetPreset } from "./faceset";
+import { IconPreset } from "./icon";
 
 export const Presets = {
-    RMSpritesheet
+    RMSpritesheet,
+    LPCSpritesheetPreset,
+    AnimationSpritesheetPreset,
+    FacesetPreset,
+    IconPreset
 }

package/src/presets/lpc.ts

@@ -0,0 +1,108 @@
+import { Animation, Direction } from "@rpgjs/common";
+
+export const LPCSpritesheetPreset = (options: {
+    id: string;
+    imageSource: string;
+    width: number;
+    height: number;
+    ratio?: number;
+  }) => {
+    const ratio = options.ratio ?? 1;
+
+    const frameY = (direction: Direction) => {
+      return {
+        [Direction.Down]: 2,
+        [Direction.Left]: 1,
+        [Direction.Right]: 3,
+        [Direction.Up]: 0,
+      }[direction];
+    };
+  
+    const stand = (direction: Direction) => [
+      { time: 0, frameX: 0, frameY: frameY(direction) },
+    ];
+    const anim = (
+      direction: Direction,
+      framesWidth: number,
+      speed: number = 5
+    ) => {
+      const array: any = [];
+      for (let i = 0; i < framesWidth; i++) {
+        array.push({ time: i * speed, frameX: i, frameY: frameY(direction) });
+      }
+      return array;
+    };
+  
+    return {
+      id: options.id,
+      image: options.imageSource,
+      width: options.width,
+      height: options.height,
+      opacity: 1,
+      rectWidth: 64 * ratio,
+      rectHeight: 64 * ratio,
+      framesWidth: 6,
+      framesHeight: 4,
+      spriteRealSize: {
+        width: 48 * ratio,
+        height: 52 * ratio,
+      },
+      textures: {
+        [Animation.Stand]: {
+          offset: {
+            x: 0,
+            y: 512 * ratio,
+          },
+          animations: ({ direction }) => [stand(direction)],
+        },
+        [Animation.Walk]: {
+          offset: {
+            x: 0,
+            y: 512 * ratio,
+          },
+          framesWidth: 9,
+          framesHeight: 4,
+          animations: ({ direction }) => [anim(direction, 9)],
+        },
+        [Animation.Attack]: {
+          offset: {
+            x: 0,
+            y: 768 * ratio,
+          },
+          framesWidth: 6,
+          framesHeight: 4,
+          animations: ({ direction }) => [anim(direction, 6, 3)],
+        },
+        [Animation.Skill]: {
+          framesWidth: 7,
+          framesHeight: 4,
+          animations: ({ direction }) => [anim(direction, 7, 3)],
+        },
+        attack2: {
+          offset: {
+            x: 0,
+            y: 256 * ratio,
+          },
+          framesWidth: 7,
+          framesHeight: 8,
+          animations: ({ direction }) => [anim(direction, 7, 3)],
+        },
+        ...(options.height > 3000
+          ? {
+              attack3: {
+                offset: {
+                  x: 0,
+                  y: 5568 - 288 * 4,
+                },
+                rectWidth: 288,
+                rectHeight: 288,
+                framesWidth: 6,
+                framesHeight: 4,
+                animations: ({ direction }) => [anim(direction, 6, 3)],
+              },
+            }
+          : {}),
+      },
+    };
+  };
+