@rpgjs/client 5.0.0-alpha.7 → 5.0.0-alpha.8

package/dist/RpgClient.d.ts

@@ -10,7 +10,7 @@ export interface RpgClientEngineHooks {
      * @prop { (engine: RpgClientEngine) => boolean | any } [onStart]
      * @memberof RpgEngineHooks
      */
-    onStart?: (engine: RpgClientEngine) => boolean | void;
+    onStart?: (engine: RpgClientEngine) => boolean | void | Promise<boolean | void>;
     /**
      * Each frame
      *

package/dist/index4.js

@@ -5,16 +5,20 @@ import { WebSocketToken, AbstractWebsocket } from './index17.js';
 import { UpdateMapToken, UpdateMapService } from '@rpgjs/common';
 
 class BridgeWebsocket extends AbstractWebsocket {
-  constructor(context, options) {
+  constructor(context, options = {}) {
     super(context);
     this.context = context;
     this.options = options;
   }
-  async connection() {
+  async connection(listeners) {
     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, callback) {
     this.socket.on(key, callback);
@@ -25,6 +29,15 @@ class BridgeWebsocket extends AbstractWebsocket {
   emit(event, data) {
     this.socket.emit(event, data);
   }
+  updateProperties({ room }) {
+    this.socket.conn.updateProperties({
+      room,
+      host: this.options.host
+    });
+  }
+  async reconnect(listeners) {
+    this.socket.conn.reconnect();
+  }
 }
 class UpdateMapStandaloneService extends UpdateMapService {
   constructor(context, options) {

package/dist/index4.js.map

@@ -1 +1 @@
-{"version":3,"file":"index4.js","sources":["../src/services/mmorpg.ts"],"sourcesContent":["import { Context } from \"@signe/di\";\nimport { connectionRoom } from \"@signe/sync/client\";\nimport { RpgGui } from \"../Gui/Gui\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { AbstractWebsocket, WebSocketToken } from \"./AbstractSocket\";\nimport { UpdateMapService, UpdateMapToken } from \"@rpgjs/common\";\n\ninterface MmorpgOptions {\n    host: string;\n}\n\nclass BridgeWebsocket extends AbstractWebsocket {\n    private socket: any;\n\n  constructor(protected context: Context, private options: MmorpgOptions) {\n    super(context);\n  }\n\n  async connection() {\n    // tmp\n    class Room {\n        \n    }\n    const instance = new Room()\n    this.socket = await connectionRoom(this.options, instance)\n  }\n\n  on(key: string, callback: (data: any) => void) {\n    this.socket.on(key, callback);\n  }\n\n  off(event: string, callback: (data: any) => void) {\n    this.socket.off(event, callback);\n  }\n\n  emit(event: string, data: any) {\n    this.socket.emit(event, data);\n  }\n}\n\nclass UpdateMapStandaloneService extends UpdateMapService {\n  constructor(protected context: Context, private options: MmorpgOptions) {\n    super(context);\n  }\n\n  async update(map: any) {\n    // nothing\n  }\n}\n\nexport function provideMmorpg(options: MmorpgOptions) {\n  return [\n    {\n      provide: WebSocketToken,\n      useFactory: (context: Context) => new BridgeWebsocket(context, options),\n    },\n    {\n      provide: UpdateMapToken,\n      useFactory: (context: Context) => new UpdateMapStandaloneService(context, options),\n    },\n    RpgGui,\n    RpgClientEngine,\n  ];\n}\n"],"names":[],"mappings":";;;;;;AAWA,MAAM,wBAAwB,iBAAkB,CAAA;AAAA,EAG9C,WAAA,CAAsB,SAA0B,OAAwB,EAAA;AACtE,IAAA,KAAA,CAAM,OAAO,CAAA;AADO,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAA0B,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAAA;AAEhD,EAEA,MAAM,UAAa,GAAA;AAAA,IAEjB,MAAM,IAAK,CAAA;AAAA;AAGX,IAAM,MAAA,QAAA,GAAW,IAAI,IAAK,EAAA;AAC1B,IAAA,IAAA,CAAK,MAAS,GAAA,MAAM,cAAe,CAAA,IAAA,CAAK,SAAS,QAAQ,CAAA;AAAA;AAC3D,EAEA,EAAA,CAAG,KAAa,QAA+B,EAAA;AAC7C,IAAK,IAAA,CAAA,MAAA,CAAO,EAAG,CAAA,GAAA,EAAK,QAAQ,CAAA;AAAA;AAC9B,EAEA,GAAA,CAAI,OAAe,QAA+B,EAAA;AAChD,IAAK,IAAA,CAAA,MAAA,CAAO,GAAI,CAAA,KAAA,EAAO,QAAQ,CAAA;AAAA;AACjC,EAEA,IAAA,CAAK,OAAe,IAAW,EAAA;AAC7B,IAAK,IAAA,CAAA,MAAA,CAAO,IAAK,CAAA,KAAA,EAAO,IAAI,CAAA;AAAA;AAEhC;AAEA,MAAM,mCAAmC,gBAAiB,CAAA;AAAA,EACxD,WAAA,CAAsB,SAA0B,OAAwB,EAAA;AACtE,IAAA,KAAA,CAAM,OAAO,CAAA;AADO,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAA0B,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAAA;AAEhD,EAEA,MAAM,OAAO,GAAU,EAAA;AAAA;AAGzB;AAEO,SAAS,cAAc,OAAwB,EAAA;AACpD,EAAO,OAAA;AAAA,IACL;AAAA,MACE,OAAS,EAAA,cAAA;AAAA,MACT,YAAY,CAAC,OAAA,KAAqB,IAAI,eAAA,CAAgB,SAAS,OAAO;AAAA,KACxE;AAAA,IACA;AAAA,MACE,OAAS,EAAA,cAAA;AAAA,MACT,YAAY,CAAC,OAAA,KAAqB,IAAI,0BAAA,CAA2B,SAAS,OAAO;AAAA,KACnF;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"index4.js","sources":["../src/services/mmorpg.ts"],"sourcesContent":["import { Context } from \"@signe/di\";\nimport { connectionRoom } from \"@signe/sync/client\";\nimport { RpgGui } from \"../Gui/Gui\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { AbstractWebsocket, WebSocketToken } from \"./AbstractSocket\";\nimport { UpdateMapService, UpdateMapToken } from \"@rpgjs/common\";\n\ninterface MmorpgOptions {\n    host?: string;\n}\n\nclass BridgeWebsocket extends AbstractWebsocket {\n    private socket: any;\n\n  constructor(protected context: Context, private options: MmorpgOptions = {}) {\n    super(context);\n  }\n\n  async connection(listeners?: (data: any) => void) {\n    // tmp\n    class Room {\n        \n    }\n    const instance = new Room()\n    this.socket = await connectionRoom({\n        host: this.options.host || window.location.host,\n        room: \"lobby-1\",\n    }, instance)\n\n    listeners?.(this.socket)\n  }\n\n  on(key: string, callback: (data: any) => void) {\n    this.socket.on(key, callback);\n  }\n\n  off(event: string, callback: (data: any) => void) {\n    this.socket.off(event, callback);\n  }\n\n  emit(event: string, data: any) {\n    this.socket.emit(event, data);\n  }\n\n  updateProperties({ room }: { room: any }) {\n    this.socket.conn.updateProperties({\n      room: room,\n      host: this.options.host\n    })\n  }\n\n  async reconnect(listeners?: (data: any) => void) {\n   this.socket.conn.reconnect()\n  }\n}\n\nclass UpdateMapStandaloneService extends UpdateMapService {\n  constructor(protected context: Context, private options: MmorpgOptions) {\n    super(context);\n  }\n\n  async update(map: any) {\n    // nothing\n  }\n}\n\nexport function provideMmorpg(options: MmorpgOptions) {\n  return [\n    {\n      provide: WebSocketToken,\n      useFactory: (context: Context) => new BridgeWebsocket(context, options),\n    },\n    {\n      provide: UpdateMapToken,\n      useFactory: (context: Context) => new UpdateMapStandaloneService(context, options),\n    },\n    RpgGui,\n    RpgClientEngine,\n  ];\n}\n"],"names":[],"mappings":";;;;;;AAWA,MAAM,wBAAwB,iBAAkB,CAAA;AAAA,EAG9C,WAAsB,CAAA,OAAA,EAA0B,OAAyB,GAAA,EAAI,EAAA;AAC3E,IAAA,KAAA,CAAM,OAAO,CAAA;AADO,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAA0B,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAAA;AAEhD,EAEA,MAAM,WAAW,SAAiC,EAAA;AAAA,IAEhD,MAAM,IAAK,CAAA;AAAA;AAGX,IAAM,MAAA,QAAA,GAAW,IAAI,IAAK,EAAA;AAC1B,IAAK,IAAA,CAAA,MAAA,GAAS,MAAM,cAAe,CAAA;AAAA,MAC/B,IAAM,EAAA,IAAA,CAAK,OAAQ,CAAA,IAAA,IAAQ,OAAO,QAAS,CAAA,IAAA;AAAA,MAC3C,IAAM,EAAA;AAAA,OACP,QAAQ,CAAA;AAEX,IAAA,SAAA,GAAY,KAAK,MAAM,CAAA;AAAA;AACzB,EAEA,EAAA,CAAG,KAAa,QAA+B,EAAA;AAC7C,IAAK,IAAA,CAAA,MAAA,CAAO,EAAG,CAAA,GAAA,EAAK,QAAQ,CAAA;AAAA;AAC9B,EAEA,GAAA,CAAI,OAAe,QAA+B,EAAA;AAChD,IAAK,IAAA,CAAA,MAAA,CAAO,GAAI,CAAA,KAAA,EAAO,QAAQ,CAAA;AAAA;AACjC,EAEA,IAAA,CAAK,OAAe,IAAW,EAAA;AAC7B,IAAK,IAAA,CAAA,MAAA,CAAO,IAAK,CAAA,KAAA,EAAO,IAAI,CAAA;AAAA;AAC9B,EAEA,gBAAA,CAAiB,EAAE,IAAA,EAAuB,EAAA;AACxC,IAAK,IAAA,CAAA,MAAA,CAAO,KAAK,gBAAiB,CAAA;AAAA,MAChC,IAAA;AAAA,MACA,IAAA,EAAM,KAAK,OAAQ,CAAA;AAAA,KACpB,CAAA;AAAA;AACH,EAEA,MAAM,UAAU,SAAiC,EAAA;AAChD,IAAK,IAAA,CAAA,MAAA,CAAO,KAAK,SAAU,EAAA;AAAA;AAE9B;AAEA,MAAM,mCAAmC,gBAAiB,CAAA;AAAA,EACxD,WAAA,CAAsB,SAA0B,OAAwB,EAAA;AACtE,IAAA,KAAA,CAAM,OAAO,CAAA;AADO,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAA0B,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAAA;AAEhD,EAEA,MAAM,OAAO,GAAU,EAAA;AAAA;AAGzB;AAEO,SAAS,cAAc,OAAwB,EAAA;AACpD,EAAO,OAAA;AAAA,IACL;AAAA,MACE,OAAS,EAAA,cAAA;AAAA,MACT,YAAY,CAAC,OAAA,KAAqB,IAAI,eAAA,CAAgB,SAAS,OAAO;AAAA,KACxE;AAAA,IACA;AAAA,MACE,OAAS,EAAA,cAAA;AAAA,MACT,YAAY,CAAC,OAAA,KAAqB,IAAI,0BAAA,CAA2B,SAAS,OAAO;AAAA,KACnF;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/index5.js

@@ -1,9 +1,10 @@
-import { injector, inject, Context } from './index16.js';
+import { Context, injector, inject } from './index16.js';
 import { RpgClientEngine } from './index2.js';
 import { setInject } from './index6.js';
 
 async function startGame(options) {
   const context = new Context();
+  context["side"] = "client";
   setInject(context);
   await injector(context, options.providers);
   const engine = inject(context, RpgClientEngine);

package/dist/index5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index5.js","sources":["../src/core/setup.ts"],"sourcesContent":["import { Context, FactoryProvider, findProvider, findProviders, inject, injector, Providers } from \"@signe/di\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { setInject } from \"./inject\";\n\ninterface SetupOptions {\n  providers: Providers;\n}\n\nexport async function startGame(options: SetupOptions) {\n  const context = new Context();\n  setInject(context);\n\n  await injector(context, options.providers);\n\n  const engine = inject(context, RpgClientEngine);\n  await engine.start();\n  return context;\n}"],"names":[],"mappings":";;;;AAQA,eAAsB,UAAU,OAAuB,EAAA;AACrD,EAAM,MAAA,OAAA,GAAU,IAAI,OAAQ,EAAA;AAC5B,EAAA,SAAA,CAAU,OAAO,CAAA;AAEjB,EAAM,MAAA,QAAA,CAAS,OAAS,EAAA,OAAA,CAAQ,SAAS,CAAA;AAEzC,EAAM,MAAA,MAAA,GAAS,MAAO,CAAA,OAAA,EAAS,eAAe,CAAA;AAC9C,EAAA,MAAM,OAAO,KAAM,EAAA;AACnB,EAAO,OAAA,OAAA;AACT;;;;"}
+{"version":3,"file":"index5.js","sources":["../src/core/setup.ts"],"sourcesContent":["import { Context, FactoryProvider, findProvider, findProviders, inject, injector, Providers } from \"@signe/di\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { setInject } from \"./inject\";\n\ninterface SetupOptions {\n  providers: Providers;\n}\n\n\nexport async function startGame(options: SetupOptions) {\n  const context = new Context();\n  context['side'] = 'client'\n  setInject(context);\n\n  await injector(context, options.providers);\n\n  const engine = inject(context, RpgClientEngine);\n  await engine.start();\n  return context;\n}"],"names":[],"mappings":";;;;AASA,eAAsB,UAAU,OAAuB,EAAA;AACrD,EAAM,MAAA,OAAA,GAAU,IAAI,OAAQ,EAAA;AAC5B,EAAA,OAAA,CAAQ,MAAM,CAAI,GAAA,QAAA;AAClB,EAAA,SAAA,CAAU,OAAO,CAAA;AAEjB,EAAM,MAAA,QAAA,CAAS,OAAS,EAAA,OAAA,CAAQ,SAAS,CAAA;AAEzC,EAAM,MAAA,MAAA,GAAS,MAAO,CAAA,OAAA,EAAS,eAAe,CAAA;AAC9C,EAAA,MAAM,OAAO,KAAM,EAAA;AACnB,EAAO,OAAA,OAAA;AACT;;;;"}

package/dist/index7.js

@@ -6,6 +6,9 @@ class LoadMapService {
   constructor(context, options) {
     this.context = context;
     this.options = options;
+    if (context["side"] === "server") {
+      return;
+    }
     this.updateMapService = inject(context, UpdateMapToken);
   }
   async load(mapId) {
@@ -18,7 +21,12 @@ function provideLoadMap(options) {
   return [
     {
       provide: UpdateMapToken,
-      useFactory: (context) => console.warn("UpdateMapToken is not overridden")
+      useFactory: (context) => {
+        if (context["side"] === "client") {
+          console.warn("UpdateMapToken is not overridden");
+        }
+        return;
+      }
     },
     {
       provide: LoadMapToken,

package/dist/index7.js.map

@@ -1 +1 @@
-{"version":3,"file":"index7.js","sources":["../src/services/loadMap.ts"],"sourcesContent":["import { Context, inject } from \"@signe/di\";\nimport { UpdateMapToken, UpdateMapService } from \"@rpgjs/common\";\n\nexport const LoadMapToken = 'LoadMapToken'\n\nexport type LoadMapOptions = (mapId: string) => Promise<void>\n\nexport class LoadMapService {\n  private updateMapService: UpdateMapService;\n\n  constructor(private context: Context, private options: LoadMapOptions) {\n    this.updateMapService = inject(context, UpdateMapToken);\n  }\n\n  async load(mapId: string) {\n    const map = await this.options(mapId.replace('map-', ''))\n    await this.updateMapService.update(mapId, map);\n    return map;\n  }\n}\n\nexport function provideLoadMap(options: LoadMapOptions) {\n  return [\n    {\n      provide: UpdateMapToken,\n      useFactory: (context: Context) => console.warn('UpdateMapToken is not overridden'),\n    },\n    {\n      provide: LoadMapToken,\n      useFactory: (context: Context) => new LoadMapService(context, options),\n    },\n  ];\n}\n"],"names":[],"mappings":";;;AAGO,MAAM,YAAe,GAAA;AAIrB,MAAM,cAAe,CAAA;AAAA,EAG1B,WAAA,CAAoB,SAA0B,OAAyB,EAAA;AAAnD,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAA0B,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAC5C,IAAK,IAAA,CAAA,gBAAA,GAAmB,MAAO,CAAA,OAAA,EAAS,cAAc,CAAA;AAAA;AACxD,EAEA,MAAM,KAAK,KAAe,EAAA;AACxB,IAAM,MAAA,GAAA,GAAM,MAAM,IAAK,CAAA,OAAA,CAAQ,MAAM,OAAQ,CAAA,MAAA,EAAQ,EAAE,CAAC,CAAA;AACxD,IAAA,MAAM,IAAK,CAAA,gBAAA,CAAiB,MAAO,CAAA,KAAA,EAAO,GAAG,CAAA;AAC7C,IAAO,OAAA,GAAA;AAAA;AAEX;AAEO,SAAS,eAAe,OAAyB,EAAA;AACtD,EAAO,OAAA;AAAA,IACL;AAAA,MACE,OAAS,EAAA,cAAA;AAAA,MACT,UAAY,EAAA,CAAC,OAAqB,KAAA,OAAA,CAAQ,KAAK,kCAAkC;AAAA,KACnF;AAAA,IACA;AAAA,MACE,OAAS,EAAA,YAAA;AAAA,MACT,YAAY,CAAC,OAAA,KAAqB,IAAI,cAAA,CAAe,SAAS,OAAO;AAAA;AACvE,GACF;AACF;;;;"}
+{"version":3,"file":"index7.js","sources":["../src/services/loadMap.ts"],"sourcesContent":["import { Context, inject } from \"@signe/di\";\nimport { UpdateMapToken, UpdateMapService } from \"@rpgjs/common\";\n\nexport const LoadMapToken = 'LoadMapToken'\n\n/**\n * Represents the structure of map data that should be returned by the load map callback.\n * This interface defines all the properties that can be provided when loading a custom map.\n * \n * @interface MapData\n */\ntype MapData = {\n  /** Raw map data that will be passed to the map component */\n  data: any;\n  /** CanvasEngine component that will render the map */\n  component: any;\n  /** Optional map width in pixels, used for viewport calculations */\n  width?: number;\n  /** Optional map height in pixels, used for viewport calculations */\n  height?: number;\n  /** Optional map events data (NPCs, interactive objects, etc.) */\n  events?: any;\n  /** Optional map identifier, defaults to the mapId parameter if not provided */\n  id?: string;\n}\n\n/**\n * Callback function type for loading map data.\n * This function receives a map ID and should return either a MapData object directly\n * or a Promise that resolves to a MapData object.\n * \n * @callback LoadMapOptions\n * @param {string} mapId - The identifier of the map to load\n * @returns {Promise<MapData> | MapData} The map data object or a promise resolving to it\n */\nexport type LoadMapOptions = (mapId: string) => Promise<MapData> | MapData \n\nexport class LoadMapService {\n  private updateMapService: UpdateMapService;\n\n  constructor(private context: Context, private options: LoadMapOptions) {\n    if (context['side'] === 'server') {\n      return\n    }\n    this.updateMapService = inject(context, UpdateMapToken);\n  }\n\n  async load(mapId: string) {\n    const map = await this.options(mapId.replace('map-', ''))\n    await this.updateMapService.update(mapId, map);\n    return map;\n  }\n}\n\n/**\n * Creates a dependency injection configuration for custom map loading on the client side.\n * \n * This function allows you to customize how maps are loaded and displayed by providing\n * a callback that defines custom map data and rendering components. It's designed to work\n * with the RPG-JS dependency injection system and enables integration of custom map formats\n * like Tiled TMX files or any other map data structure.\n * \n * The function sets up the necessary service providers for map loading, including:\n * - UpdateMapToken: Handles map updates in the client context\n * - LoadMapToken: Provides the LoadMapService with your custom loading logic\n * \n * **Design Concept:**\n * The function follows the provider pattern, creating a modular way to inject custom\n * map loading behavior into the RPG-JS client engine. It separates the concern of\n * map data fetching from map rendering, allowing developers to focus on their specific\n * map format while leveraging the engine's rendering capabilities.\n * \n * @param {LoadMapOptions} options - Callback function that handles map loading logic\n * @returns {Array<Object>} Array of dependency injection provider configurations\n * \n * @example\n * ```typescript\n * import { provideLoadMap } from '@rpgjs/client'\n * import { createModule } from '@rpgjs/common'\n * import MyTiledMapComponent from './MyTiledMapComponent.ce'\n * \n * // Basic usage with JSON map data\n * export function provideCustomMap() {\n *   return createModule(\"CustomMap\", [\n *     provideLoadMap(async (mapId) => {\n *       const response = await fetch(`/maps/${mapId}.json`)\n *       const mapData = await response.json()\n *       \n *       return {\n *         data: mapData,\n *         component: MyTiledMapComponent,\n *         width: mapData.width,\n *         height: mapData.height,\n *         events: mapData.events\n *       }\n *     })\n *   ])\n * }\n * \n * // Advanced usage with Tiled TMX files\n * export function provideTiledMap() {\n *   return createModule(\"TiledMap\", [\n *     provideLoadMap(async (mapId) => {\n *       // Load TMX file\n *       const tmxResponse = await fetch(`/tiled/${mapId}.tmx`)\n *       const tmxData = await tmxResponse.text()\n *       \n *       // Parse TMX data (using a TMX parser)\n *       const parsedMap = parseTMX(tmxData)\n *       \n *       return {\n *         data: parsedMap,\n *         component: TiledMapRenderer,\n *         width: parsedMap.width * parsedMap.tilewidth,\n *         height: parsedMap.height * parsedMap.tileheight,\n *         events: parsedMap.objectGroups?.find(g => g.name === 'events')?.objects\n *       }\n *     })\n *   ])\n * }\n * \n * // Synchronous usage for static maps\n * export function provideStaticMap() {\n *   return createModule(\"StaticMap\", [\n *     provideLoadMap((mapId) => {\n *       const staticMaps = {\n *         'town': { tiles: [...], npcs: [...] },\n *         'dungeon': { tiles: [...], monsters: [...] }\n *       }\n *       \n *       return {\n *         data: staticMaps[mapId],\n *         component: StaticMapComponent,\n *         width: 800,\n *         height: 600\n *       }\n *     })\n *   ])\n * }\n * ```\n * \n * @since 4.0.0\n * @see {@link LoadMapOptions} for callback function signature\n * @see {@link MapData} for return data structure\n */\nexport function provideLoadMap(options: LoadMapOptions) {\n  return [\n    {\n      provide: UpdateMapToken,\n      useFactory: (context: Context) => {\n        if (context['side'] === 'client') {\n          console.warn('UpdateMapToken is not overridden')\n        }\n        return\n      },\n    },\n    {\n      provide: LoadMapToken,\n      useFactory: (context: Context) => new LoadMapService(context, options),\n    },\n  ];\n}\n"],"names":[],"mappings":";;;AAGO,MAAM,YAAe,GAAA;AAkCrB,MAAM,cAAe,CAAA;AAAA,EAG1B,WAAA,CAAoB,SAA0B,OAAyB,EAAA;AAAnD,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAA0B,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAC5C,IAAI,IAAA,OAAA,CAAQ,MAAM,CAAA,KAAM,QAAU,EAAA;AAChC,MAAA;AAAA;AAEF,IAAK,IAAA,CAAA,gBAAA,GAAmB,MAAO,CAAA,OAAA,EAAS,cAAc,CAAA;AAAA;AACxD,EAEA,MAAM,KAAK,KAAe,EAAA;AACxB,IAAM,MAAA,GAAA,GAAM,MAAM,IAAK,CAAA,OAAA,CAAQ,MAAM,OAAQ,CAAA,MAAA,EAAQ,EAAE,CAAC,CAAA;AACxD,IAAA,MAAM,IAAK,CAAA,gBAAA,CAAiB,MAAO,CAAA,KAAA,EAAO,GAAG,CAAA;AAC7C,IAAO,OAAA,GAAA;AAAA;AAEX;AA6FO,SAAS,eAAe,OAAyB,EAAA;AACtD,EAAO,OAAA;AAAA,IACL;AAAA,MACE,OAAS,EAAA,cAAA;AAAA,MACT,UAAA,EAAY,CAAC,OAAqB,KAAA;AAChC,QAAI,IAAA,OAAA,CAAQ,MAAM,CAAA,KAAM,QAAU,EAAA;AAChC,UAAA,OAAA,CAAQ,KAAK,kCAAkC,CAAA;AAAA;AAEjD,QAAA;AAAA;AACF,KACF;AAAA,IACA;AAAA,MACE,OAAS,EAAA,YAAA;AAAA,MACT,YAAY,CAAC,OAAA,KAAqB,IAAI,cAAA,CAAe,SAAS,OAAO;AAAA;AACvE,GACF;AACF;;;;"}

package/dist/services/loadMap.d.ts

@@ -1,14 +1,135 @@
 import { Context } from '@signe/di';
 export declare 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 declare class LoadMapService {
     private context;
     private options;
     private updateMapService;
     constructor(context: Context, options: LoadMapOptions);
-    load(mapId: string): Promise<void>;
+    load(mapId: string): Promise<MapData>;
 }
+/**
+ * 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 declare function provideLoadMap(options: LoadMapOptions): {
     provide: string;
     useFactory: (context: Context) => void;
 }[];
+export {};

package/dist/services/mmorpg.d.ts

@@ -4,17 +4,21 @@ import { RpgClientEngine } from '../RpgClientEngine';
 import { AbstractWebsocket } from './AbstractSocket';
 import { UpdateMapService } from '@rpgjs/common';
 interface MmorpgOptions {
-    host: string;
+    host?: string;
 }
 declare class BridgeWebsocket extends AbstractWebsocket {
     protected context: Context;
     private options;
     private socket;
-    constructor(context: Context, options: MmorpgOptions);
-    connection(): Promise<void>;
+    constructor(context: Context, options?: MmorpgOptions);
+    connection(listeners?: (data: any) => void): Promise<void>;
     on(key: string, callback: (data: any) => void): void;
     off(event: string, callback: (data: any) => void): void;
     emit(event: string, data: any): void;
+    updateProperties({ room }: {
+        room: any;
+    }): void;
+    reconnect(listeners?: (data: any) => void): Promise<void>;
 }
 declare class UpdateMapStandaloneService extends UpdateMapService {
     protected context: Context;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/client",
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.8",
   "description": "RPGJS is a framework for creating RPG/MMORPG games",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,7 +22,7 @@
     "pixi.js": "^8.9.2"
   },
   "dependencies": {
-    "@rpgjs/common": "5.0.0-alpha.7",
+    "@rpgjs/common": "5.0.0-alpha.8",
     "@signe/di": "^2.3.3",
     "@signe/room": "^2.3.3",
     "@signe/sync": "^2.3.3",

package/src/RpgClient.ts

@@ -12,7 +12,7 @@ export interface RpgClientEngineHooks {
      * @prop { (engine: RpgClientEngine) => boolean | any } [onStart]
      * @memberof RpgEngineHooks
      */
-    onStart?: (engine: RpgClientEngine) => boolean | void
+    onStart?: (engine: RpgClientEngine) => boolean | void | Promise<boolean | void>
 
     /**
      * Each frame

package/src/core/setup.ts

@@ -6,8 +6,10 @@ interface SetupOptions {
   providers: Providers;
 }
 
+
 export async function startGame(options: SetupOptions) {
   const context = new Context();
+  context['side'] = 'client'
   setInject(context);
 
   await injector(context, options.providers);

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 {