@rpgjs/client 5.0.0-alpha.0 → 5.0.0-alpha.10

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)],
+              },
+            }
+          : {}),
+      },
+    };
+  };
+  

package/src/services/loadMap.ts

@@ -3,12 +3,45 @@ import { UpdateMapToken, UpdateMapService } from "@rpgjs/common";
 
 export const LoadMapToken = 'LoadMapToken'
 
-export type LoadMapOptions = (mapId: string) => Promise<void>
+/**
+ * Represents the structure of map data that should be returned by the load map callback.
+ * This interface defines all the properties that can be provided when loading a custom map.
+ * 
+ * @interface MapData
+ */
+type MapData = {
+  /** Raw map data that will be passed to the map component */
+  data: any;
+  /** CanvasEngine component that will render the map */
+  component: any;
+  /** Optional map width in pixels, used for viewport calculations */
+  width?: number;
+  /** Optional map height in pixels, used for viewport calculations */
+  height?: number;
+  /** Optional map events data (NPCs, interactive objects, etc.) */
+  events?: any;
+  /** Optional map identifier, defaults to the mapId parameter if not provided */
+  id?: string;
+}
+
+/**
+ * Callback function type for loading map data.
+ * This function receives a map ID and should return either a MapData object directly
+ * or a Promise that resolves to a MapData object.
+ * 
+ * @callback LoadMapOptions
+ * @param {string} mapId - The identifier of the map to load
+ * @returns {Promise<MapData> | MapData} The map data object or a promise resolving to it
+ */
+export type LoadMapOptions = (mapId: string) => Promise<MapData> | MapData 
 
 export class LoadMapService {
   private updateMapService: UpdateMapService;
 
   constructor(private context: Context, private options: LoadMapOptions) {
+    if (context['side'] === 'server') {
+      return
+    }
     this.updateMapService = inject(context, UpdateMapToken);
   }
 
@@ -19,11 +52,107 @@ export class LoadMapService {
   }
 }
 
+/**
+ * Creates a dependency injection configuration for custom map loading on the client side.
+ * 
+ * This function allows you to customize how maps are loaded and displayed by providing
+ * a callback that defines custom map data and rendering components. It's designed to work
+ * with the RPG-JS dependency injection system and enables integration of custom map formats
+ * like Tiled TMX files or any other map data structure.
+ * 
+ * The function sets up the necessary service providers for map loading, including:
+ * - UpdateMapToken: Handles map updates in the client context
+ * - LoadMapToken: Provides the LoadMapService with your custom loading logic
+ * 
+ * **Design Concept:**
+ * The function follows the provider pattern, creating a modular way to inject custom
+ * map loading behavior into the RPG-JS client engine. It separates the concern of
+ * map data fetching from map rendering, allowing developers to focus on their specific
+ * map format while leveraging the engine's rendering capabilities.
+ * 
+ * @param {LoadMapOptions} options - Callback function that handles map loading logic
+ * @returns {Array<Object>} Array of dependency injection provider configurations
+ * 
+ * @example
+ * ```typescript
+ * import { provideLoadMap } from '@rpgjs/client'
+ * import { createModule } from '@rpgjs/common'
+ * import MyTiledMapComponent from './MyTiledMapComponent.ce'
+ * 
+ * // Basic usage with JSON map data
+ * export function provideCustomMap() {
+ *   return createModule("CustomMap", [
+ *     provideLoadMap(async (mapId) => {
+ *       const response = await fetch(`/maps/${mapId}.json`)
+ *       const mapData = await response.json()
+ *       
+ *       return {
+ *         data: mapData,
+ *         component: MyTiledMapComponent,
+ *         width: mapData.width,
+ *         height: mapData.height,
+ *         events: mapData.events
+ *       }
+ *     })
+ *   ])
+ * }
+ * 
+ * // Advanced usage with Tiled TMX files
+ * export function provideTiledMap() {
+ *   return createModule("TiledMap", [
+ *     provideLoadMap(async (mapId) => {
+ *       // Load TMX file
+ *       const tmxResponse = await fetch(`/tiled/${mapId}.tmx`)
+ *       const tmxData = await tmxResponse.text()
+ *       
+ *       // Parse TMX data (using a TMX parser)
+ *       const parsedMap = parseTMX(tmxData)
+ *       
+ *       return {
+ *         data: parsedMap,
+ *         component: TiledMapRenderer,
+ *         width: parsedMap.width * parsedMap.tilewidth,
+ *         height: parsedMap.height * parsedMap.tileheight,
+ *         events: parsedMap.objectGroups?.find(g => g.name === 'events')?.objects
+ *       }
+ *     })
+ *   ])
+ * }
+ * 
+ * // Synchronous usage for static maps
+ * export function provideStaticMap() {
+ *   return createModule("StaticMap", [
+ *     provideLoadMap((mapId) => {
+ *       const staticMaps = {
+ *         'town': { tiles: [...], npcs: [...] },
+ *         'dungeon': { tiles: [...], monsters: [...] }
+ *       }
+ *       
+ *       return {
+ *         data: staticMaps[mapId],
+ *         component: StaticMapComponent,
+ *         width: 800,
+ *         height: 600
+ *       }
+ *     })
+ *   ])
+ * }
+ * ```
+ * 
+ * @since 4.0.0
+ * @see {@link LoadMapOptions} for callback function signature
+ * @see {@link MapData} for return data structure
+ */
 export function provideLoadMap(options: LoadMapOptions) {
   return [
     {
       provide: UpdateMapToken,
-      useFactory: (context: Context) => console.warn('UpdateMapToken is not overridden'),
+      useFactory: (context: Context) => {
+        if (context['side'] === 'client') {
+          console.warn('UpdateMapToken is not overridden')
+        }
+        return
+      },
     },
     {
       provide: LoadMapToken,

package/src/services/mmorpg.ts

@@ -6,23 +6,28 @@ import { AbstractWebsocket, WebSocketToken } from "./AbstractSocket";
 import { UpdateMapService, UpdateMapToken } from "@rpgjs/common";
 
 interface MmorpgOptions {
-    host: string;
+    host?: string;
 }
 
 class BridgeWebsocket extends AbstractWebsocket {
     private socket: any;
 
-  constructor(protected context: Context, private options: MmorpgOptions) {
+  constructor(protected context: Context, private options: MmorpgOptions = {}) {
     super(context);
   }
 
-  async connection() {
+  async connection(listeners?: (data: any) => void) {
     // tmp
     class Room {
         
     }
     const instance = new Room()
-    this.socket = await connectionRoom(this.options, instance)
+    this.socket = await connectionRoom({
+        host: this.options.host || window.location.host,
+        room: "lobby-1",
+    }, instance)
+
+    listeners?.(this.socket)
   }
 
   on(key: string, callback: (data: any) => void) {
@@ -36,6 +41,17 @@ class BridgeWebsocket extends AbstractWebsocket {
   emit(event: string, data: any) {
     this.socket.emit(event, data);
   }
+
+  updateProperties({ room }: { room: any }) {
+    this.socket.conn.updateProperties({
+      room: room,
+      host: this.options.host
+    })
+  }
+
+  async reconnect(listeners?: (data: any) => void) {
+   this.socket.conn.reconnect()
+  }
 }
 
 class UpdateMapStandaloneService extends UpdateMapService {

package/tsconfig.json

@@ -30,6 +30,6 @@
     ],
     "typeRoots": [
         "node_modules/@types",
-        "src/types"
+        "node_modules/@rpgjs/client"
     ],
   }

package/vite.config.ts

@@ -24,7 +24,7 @@ export default defineConfig({
       fileName: 'index'
     },
     rollupOptions: {
-      external: [/@rpgjs/, 'esbuild', 'canvasengine', '@canvasengine/presets', 'rxjs'],
+      external: [/@rpgjs/, 'esbuild', 'canvasengine', '@canvasengine/presets', 'rxjs', 'pixi.js'],
       output: {
         preserveModules: true,
         preserveModulesRoot: 'src'

package/dist/Game/EffectManager.d.ts

@@ -1,5 +0,0 @@
-import { RpgCommonPlayer } from '@rpgjs/common';
-export declare class EffectManager {
-    current: import('canvasengine').WritableArraySignal<any[]>;
-    displayEffect(params: any, player: RpgCommonPlayer): void;
-}

package/dist/components/effects/index.d.ts

@@ -1,4 +0,0 @@
-export declare const PrebuiltEffects: {
-    Hit: any;
-    Animation: any;
-};

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

@@ -1,23 +0,0 @@
-<Sprite image rectangle x y zIndex />
-
-<script>
-const {
-    image,
-    rect,
-    drawIn,
-    id,
-} = defineProps()
-
-const rectangle = {
-    x: rect[0],
-    y: rect[1],
-    width: rect[2],
-    height: rect[3]
-}
-
-const x = drawIn[0]
-const y = drawIn[1]
-
-const zIndex = y + rectangle.height
-</script>
-