@rpgjs/client 4.3.0 → 5.0.0-alpha.0

package/src/core/setup.ts

@@ -0,0 +1,18 @@
+import { Context, FactoryProvider, findProvider, findProviders, inject, injector, Providers } from "@signe/di";
+import { RpgClientEngine } from "../RpgClientEngine";
+import { setInject } from "./inject";
+
+interface SetupOptions {
+  providers: Providers;
+}
+
+export async function startGame(options: SetupOptions) {
+  const context = new Context();
+  setInject(context);
+
+  await injector(context, options.providers);
+
+  const engine = inject(context, RpgClientEngine);
+  await engine.start();
+  return context;
+}

package/src/index.ts

@@ -1,29 +1,13 @@
-export { Direction, Control, Input, PrebuiltGui, HookServer, HookClient, RpgPlugin, RpgModule, RpgCommonPlayer as RpgSpriteLogic } from '@rpgjs/common'
-export { default as entryPoint } from './clientEntryPoint'
-export type { RpgClient, RpgSceneHooks, RpgSceneMapHooks, RpgSpriteHooks, RpgClientEngineHooks } from './RpgClient'
-export { RpgRenderer } from './Renderer'
-export { Scene as RpgScene } from './Scene/Scene'
-export { RpgClientEngine } from './RpgClientEngine'
-export { Spritesheet } from './Sprite/Spritesheet'
-export { Sound } from './Sound/Sound'
-export { Howler as RpgGlobalSound }  from 'howler'
-export { RpgSound } from './Sound/RpgSound'
-export * as Presets from './Presets/AnimationSpritesheet'
-export { Animation } from './Effects/AnimationCharacter'
-export { Animation as AnimationClass } from './Effects/Animation'
-export type { ISpriteCharacter } from './Interfaces/Character'
-export { SceneData } from './Scene/SceneData'
-export { SceneMap as RpgSceneMap } from './Scene/Map'
-export { RpgGui } from './Gui/Gui';
-export { Timeline, Ease } from './Effects/Timeline';
-export { RpgComponent, RpgComponent as RpgSprite } from './Components/Component'
-export { KeyboardControls } from './KeyboardControls'
-export { World, room } from 'simple-room-client'
-
-import { spritesheets } from './Sprite/Spritesheets'
-import { sounds } from './Sound/Sounds'
-export const RpgResource = {
-    spritesheets,
-    sounds
-}
-export { inject } from './inject'
+export * from "./RpgClientEngine";
+export type * from "./RpgClient";
+export * from "./services/standalone";
+export * from "./services/mmorpg";
+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 "./presets";
+export * from "./components";

package/src/module.ts

@@ -0,0 +1,93 @@
+import { findModules, provideModules } from "@rpgjs/common";
+import { RpgClientEngine } from "./RpgClientEngine";
+import { RpgClient } from "./RpgClient";
+import { inject } from "@signe/di";
+import { RpgGui } from "./Gui/Gui";
+
+export function provideClientModules(modules: RpgClient[]) {
+  return provideModules(modules, "client", (modules, context) => {
+    const mainModuleClient = findModules(context, 'Client')
+    modules = [...mainModuleClient, ...modules]
+    modules = modules.map((module) => {
+      if ('client' in module) {
+        module = module.client as any;
+      }
+      if (module.spritesheets) {
+        const spritesheets = [...module.spritesheets];
+        module.spritesheets = {
+          load: (engine: RpgClientEngine) => {
+            spritesheets.forEach((spritesheet) => {
+              engine.addSpriteSheet(spritesheet);
+            });
+          },
+        };
+      }
+      if (module.sounds) {
+        const sounds = [...module.sounds];
+        module.sounds = {
+          load: (engine: RpgClientEngine) => {
+            sounds.forEach((sound) => {
+              engine.addSound(sound);
+            });
+          },
+        };
+      }
+      if (module.gui) {
+        const gui = [...module.gui];
+        module.gui = {
+          load: (engine: RpgClientEngine) => {
+            const guiService = inject(engine.context, RpgGui);
+            gui.forEach((gui) => {
+              guiService.add(gui);
+            });
+          },
+        };
+      }
+      if (module.effects) {
+        const effects = [...module.effects];
+        module.effects = {
+          load: (engine: RpgClientEngine) => {
+            effects.forEach((effect) => {
+              engine.addEffect(effect);
+            });
+          },
+        };
+      }
+      if (module.particles) {
+        const particles = [...module.particles];
+        module.particles = {
+          load: (engine: RpgClientEngine) => {
+            particles.forEach((particle) => {
+              engine.addParticle(particle);
+            });
+          },
+        };
+      }
+      return module;
+    });
+    return modules
+  });
+}
+
+export const GlobalConfigToken = "GlobalConfigToken";
+
+export function provideGlobalConfig(config: any) {
+  return {
+    provide: GlobalConfigToken,
+    useValue: config ?? {},
+  };
+}
+
+export function provideClientGlobalConfig(config: any = {}) {
+  if (!config.keyboardControls) {
+    config.keyboardControls = {
+      up: 'up',
+      down: 'down',
+      left: 'left',
+      right: 'right',
+      action: 'space'
+    }
+  }
+  return provideGlobalConfig(config)
+}
+

package/src/presets/index.ts

@@ -0,0 +1,5 @@
+import { RMSpritesheet } from "./rmspritesheet";
+
+export const Presets = {
+    RMSpritesheet
+}

package/src/{Presets/AnimationSpritesheet.ts → presets/rmspritesheet.ts}

@@ -1,5 +1,4 @@
-import { Direction } from '@rpgjs/common'
-import { Animation } from '../Effects/AnimationCharacter'
+import { Direction, Animation } from '@rpgjs/common'
 
 export const RMSpritesheet = (framesWidth: number, framesHeight: number, frameStand: number = 1) => {
 
@@ -31,13 +30,13 @@ export const RMSpritesheet = (framesWidth: number, framesHeight: number, frameSt
     return {
         textures: {
             [Animation.Stand]: {
-                animations: direction => [stand(direction)]
+                animations: ({direction}) => [stand(direction)]
             },
             [Animation.Walk]: {
-                animations: direction => [walk(direction)]
+                animations: ({direction}) => [walk(direction)]
             }
         },
         framesHeight,
         framesWidth
     }
-}
+}

package/src/services/AbstractSocket.ts

@@ -0,0 +1,14 @@
+import { Context } from "@signe/di";
+
+export const WebSocketToken = "websocket";
+
+export abstract class AbstractWebsocket {
+  constructor(protected context: Context) {}
+
+  abstract connection(listeners?: (data: any) => void): Promise<void>;
+  abstract emit(event: string, data: any): void;
+  abstract on(event: string, callback: (data: any) => void): void;
+  abstract off(event: string, callback: (data: any) => void): void;
+  abstract updateProperties(params: { room: string, host?: string }): void;
+  abstract reconnect(listeners?: (data: any) => void): void;
+}

package/src/services/loadMap.ts

@@ -0,0 +1,33 @@
+import { Context, inject } from "@signe/di";
+import { UpdateMapToken, UpdateMapService } from "@rpgjs/common";
+
+export const LoadMapToken = 'LoadMapToken'
+
+export type LoadMapOptions = (mapId: string) => Promise<void>
+
+export class LoadMapService {
+  private updateMapService: UpdateMapService;
+
+  constructor(private context: Context, private options: LoadMapOptions) {
+    this.updateMapService = inject(context, UpdateMapToken);
+  }
+
+  async load(mapId: string) {
+    const map = await this.options(mapId.replace('map-', ''))
+    await this.updateMapService.update(mapId, map);
+    return map;
+  }
+}
+
+export function provideLoadMap(options: LoadMapOptions) {
+  return [
+    {
+      provide: UpdateMapToken,
+      useFactory: (context: Context) => console.warn('UpdateMapToken is not overridden'),
+    },
+    {
+      provide: LoadMapToken,
+      useFactory: (context: Context) => new LoadMapService(context, options),
+    },
+  ];
+}

package/src/services/mmorpg.ts

@@ -0,0 +1,64 @@
+import { Context } from "@signe/di";
+import { connectionRoom } from "@signe/sync/client";
+import { RpgGui } from "../Gui/Gui";
+import { RpgClientEngine } from "../RpgClientEngine";
+import { AbstractWebsocket, WebSocketToken } from "./AbstractSocket";
+import { UpdateMapService, UpdateMapToken } from "@rpgjs/common";
+
+interface MmorpgOptions {
+    host: string;
+}
+
+class BridgeWebsocket extends AbstractWebsocket {
+    private socket: any;
+
+  constructor(protected context: Context, private options: MmorpgOptions) {
+    super(context);
+  }
+
+  async connection() {
+    // tmp
+    class Room {
+        
+    }
+    const instance = new Room()
+    this.socket = await connectionRoom(this.options, instance)
+  }
+
+  on(key: string, callback: (data: any) => void) {
+    this.socket.on(key, callback);
+  }
+
+  off(event: string, callback: (data: any) => void) {
+    this.socket.off(event, callback);
+  }
+
+  emit(event: string, data: any) {
+    this.socket.emit(event, data);
+  }
+}
+
+class UpdateMapStandaloneService extends UpdateMapService {
+  constructor(protected context: Context, private options: MmorpgOptions) {
+    super(context);
+  }
+
+  async update(map: any) {
+    // nothing
+  }
+}
+
+export function provideMmorpg(options: MmorpgOptions) {
+  return [
+    {
+      provide: WebSocketToken,
+      useFactory: (context: Context) => new BridgeWebsocket(context, options),
+    },
+    {
+      provide: UpdateMapToken,
+      useFactory: (context: Context) => new UpdateMapStandaloneService(context, options),
+    },
+    RpgGui,
+    RpgClientEngine,
+  ];
+}

package/src/services/standalone.ts

@@ -0,0 +1,101 @@
+import { AbstractWebsocket, WebSocketToken } from "./AbstractSocket";
+import { ClientIo, ServerIo } from "@signe/room";
+import { Context } from "@signe/di";
+import { RpgClientEngine } from "../RpgClientEngine";
+import { UpdateMapService, UpdateMapToken } from "@rpgjs/common";
+import { LoadMapToken } from "./loadMap";
+import { RpgGui } from "../Gui/Gui";
+
+type ServerIo = any;
+type ClientIo = any;
+
+class BridgeWebsocket extends AbstractWebsocket {
+  private room: ServerIo;
+  private socket: ClientIo;
+
+  constructor(protected context: Context, private server: any) {
+    super(context);
+    // fake room
+    this.room = new ServerIo("lobby-1");
+  }
+
+  async connection(listeners?: (data: any) => void) {
+    const server = new this.server(this.room);
+    await server.onStart();
+    this.context.set('server', server)
+    this.socket = new ClientIo(server);
+    const url = new URL('http://localhost')
+    const request = new Request(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    listeners?.(this.socket)
+    await server.onConnect(this.socket.conn as any, { request } as any);
+    this.room.clients.set(this.socket.id, this.socket);
+    return this.socket
+  }
+
+  on(key: string, callback: (data: any) => void) {
+    this.socket.addEventListener("message", (event) => {
+      const object = JSON.parse(event);
+      if (object.type === key) {
+        callback(object.value);
+      }
+    });
+  }
+
+  off(event: string, callback: (data: any) => void) {
+    this.socket.removeEventListener(event, callback);
+  }
+
+  emit(event: string, data: any) {
+    this.socket.send({
+      action: event,
+      value: data,
+    });
+  }
+
+  updateProperties({ room }: { room: any }) {
+    this.room = new ServerIo(room);
+  }
+
+  async reconnect(listeners?: (data: any) => void) {
+    await this.connection((socket) => {
+      listeners?.(socket)
+    })
+  }
+}
+
+class UpdateMapStandaloneService extends UpdateMapService {
+  private server: any;
+
+  async update(mapId: string, map: any) {
+    this.server = this.context.get('server')
+    const req = {
+      url: `http://localhost/parties/main/${mapId}/map/update`,
+      method: 'POST',
+      headers: new Headers({}),
+      json: async () => {
+        return map;
+      }
+    };
+    await this.server.onRequest(req)
+  }
+}
+
+export function provideRpg(server: any) {
+  return [
+    {
+      provide: WebSocketToken,
+      useFactory: (context: Context) => new BridgeWebsocket(context, server),
+    },
+    {
+      provide: UpdateMapToken,
+      useClass: UpdateMapStandaloneService,
+    },
+    RpgGui,
+    RpgClientEngine,
+  ];
+}

package/src/types/canvas-engine.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Canvas Engine Component Type Declarations
+ * 
+ * This file declares module types for Canvas Engine components (.ce files)
+ * to enable TypeScript support and proper import resolution.
+ */
+
+declare module "*.ce" {
+  /**
+   * Canvas Engine Component
+   * 
+   * @description Represents a Canvas Engine component that can be imported
+   * and used within the application. These components combine template markup
+   * with reactive JavaScript logic.
+   * 
+   * @example
+   * ```typescript
+   * import MyComponent from "./components/my-component.ce";
+   * 
+   * // Use the component in your application
+   * const componentInstance = MyComponent;
+   * ```
+   */
+  const component: any;
+  export default component;
+} 

package/tsconfig.json

@@ -9,7 +9,7 @@
       "sourceMap": true,
       "strictNullChecks": true,
       "strictPropertyInitialization": false,
-      "moduleResolution": "node",
+      "moduleResolution": "bundler",
       "esModuleInterop": true,
       "removeComments": false,
       "noUnusedParameters": false,
@@ -24,7 +24,12 @@
       "skipLibCheck": true
     },
     "include": [
-        "src"
+        "src",
+        "src/types/**/*",
+        "node_modules/canvasengine/*"
+    ],
+    "typeRoots": [
+        "node_modules/@types",
+        "src/types"
     ],
-    
   }

package/vite.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig } from 'vite'
+import canvasengine from '@canvasengine/compiler'
+import dts from 'vite-plugin-dts'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export default defineConfig({
+  plugins: [
+    canvasengine(),
+    dts({ 
+      include: ['src/**/*.ts'],
+      outDir: 'dist'
+    })
+  ],
+  build: {
+    target: 'esnext',
+    sourcemap: true,
+    minify: false,
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['es'],
+      fileName: 'index'
+    },
+    rollupOptions: {
+      external: [/@rpgjs/, 'esbuild', 'canvasengine', '@canvasengine/presets', 'rxjs'],
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: 'src'
+      }
+    },
+  },
+})

package/CHANGELOG.md

@@ -1,189 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [4.3.0](https://github.com/RSamaium/RPG-JS/compare/v4.2.2...v4.3.0) (2024-01-29)
-
-
-### Features
-
-* loading the game in a React app ([437917a](https://github.com/RSamaium/RPG-JS/commit/437917ace5de1a88777d84c4b39a48e147f77de4))
-* reat app integration ([1b9b5d8](https://github.com/RSamaium/RPG-JS/commit/1b9b5d8bb5dd02bcf4a68ccd5eee19c6fc00a4eb))
-
-
-
-
-
-## [4.2.2](https://github.com/RSamaium/RPG-JS/compare/v4.2.1...v4.2.2) (2024-01-15)
-
-**Note:** Version bump only for package @rpgjs/client
-
-
-
-
-
-## [4.2.1](https://github.com/RSamaium/RPG-JS/compare/v4.2.0...v4.2.1) (2024-01-12)
-
-
-### Bug Fixes
-
-* #community-261 ([8221085](https://github.com/RSamaium/RPG-JS/commit/8221085a962b1555aa20ba154b6790d4522da971)), closes [#community-261](https://github.com/RSamaium/RPG-JS/issues/community-261)
-
-
-
-
-
-# [4.2.0](https://github.com/RSamaium/RPG-JS/compare/v4.1.3...v4.2.0) (2023-12-09)
-
-
-### Features
-
-* inject function ([902e62f](https://github.com/RSamaium/RPG-JS/commit/902e62ff4fdd9b5bd26ee7d5be9ccae2b051f248))
-* propagate event directive ([edbab50](https://github.com/RSamaium/RPG-JS/commit/edbab506a2552ff64d2f638d1e088748cbc8cc86))
-
-
-
-
-
-## [4.1.3](https://github.com/RSamaium/RPG-JS/compare/v4.1.2...v4.1.3) (2023-11-17)
-
-**Note:** Version bump only for package @rpgjs/client
-
-
-
-
-
-## [4.1.2](https://github.com/RSamaium/RPG-JS/compare/v4.1.1...v4.1.2) (2023-10-30)
-
-
-### Bug Fixes
-
-* **gui:** don't propagate events ([1439e0f](https://github.com/RSamaium/RPG-JS/commit/1439e0fa4718cbdc07cd2ceb8ff4067e116cef9b))
-
-
-
-
-
-## [4.1.1](https://github.com/RSamaium/RPG-JS/compare/v4.1.0...v4.1.1) (2023-10-27)
-
-
-### Bug Fixes
-
-* **gui:** get vue instance #community-215 ([2874815](https://github.com/RSamaium/RPG-JS/commit/287481517028196f1bf8bc327b68134e8f5f63d0)), closes [#community-215](https://github.com/RSamaium/RPG-JS/issues/community-215)
-* **scene:** click in scene map ([04d56d6](https://github.com/RSamaium/RPG-JS/commit/04d56d6e07c58e2c039732e35ae3b94fc6751fa5))
-
-
-
-
-
-# [4.1.0](https://github.com/RSamaium/RPG-JS/compare/v4.0.5...v4.1.0) (2023-10-20)
-
-**Note:** Version bump only for package @rpgjs/client
-
-
-
-
-
-## 4.0.5 (2023-10-18)
-
-
-### Bug Fixes
-
-* flickering motion of an event as it moves ([b2b8832](https://github.com/RSamaium/RPG-JS/commit/b2b8832a1582933afb64c698f40d1b0e72021780))
-
-
-
-
-
-## 4.0.4 (2023-10-13)
-
-**Note:** Version bump only for package @rpgjs/client
-
-
-
-
-
-## 4.0.3 (2023-10-10)
-
-**Note:** Version bump only for package @rpgjs/client
-
-
-
-
-
-## 4.0.2 (2023-10-03)
-
-**Note:** Version bump only for package @rpgjs/client
-
-
-
-
-
-## 4.0.1 (2023-10-03)
-
-**Note:** Version bump only for package @rpgjs/client
-
-
-
-
-
-# 4.0.0-rc.13 (2023-09-09)
-
-**Note:** Version bump only for package @rpgjs/client
-
-
-
-
-
-# 4.0.0-rc.12 (2023-09-08)
-
-**Note:** Version bump only for package @rpgjs/client
-
-
-
-
-
-# 4.0.0-rc.11 (2023-08-30)
-
-**Note:** Version bump only for package @rpgjs/client
-
-
-
-
-
-# 4.0.0-rc.10 (2023-08-28)
-
-**Note:** Version bump only for package @rpgjs/client
-
-
-
-
-
-# 4.0.0-rc.9 (2023-08-25)
-
-**Note:** Version bump only for package @rpgjs/client
-
-
-
-
-
-# 4.0.0-rc.8 (2023-08-23)
-
-**Note:** Version bump only for package @rpgjs/client
-
-
-
-
-
-# [4.0.0-rc.6](https://github.com/RSamaium/RPG-JS/compare/v4.0.0-rc.5...v4.0.0-rc.6) (2023-08-20)
-
-**Note:** Version bump only for package @rpgjs/client
-
-
-
-
-
-# [4.0.0-rc.5](https://github.com/RSamaium/RPG-JS/compare/v4.0.0-rc.4...v4.0.0-rc.5) (2023-08-16)
-
-**Note:** Version bump only for package @rpgjs/client