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

package/src/services/save.ts

@@ -0,0 +1,103 @@
+import type { SaveSlotList, SaveSlotMeta } from "@rpgjs/common";
+import { inject } from "../core/inject";
+import { AbstractWebsocket, WebSocketToken } from "./AbstractSocket";
+
+export const SaveClientToken = "SaveClientToken";
+
+type SaveListResult = {
+  requestId: string;
+  slots: SaveSlotList;
+};
+
+type SaveSaveResult = {
+  requestId: string;
+  index: number;
+  slots: SaveSlotList;
+};
+
+type SaveLoadResult = {
+  requestId: string;
+  index: number;
+  ok: boolean;
+  slot?: SaveSlotMeta;
+};
+
+type SaveErrorResult = {
+  requestId: string;
+  message: string;
+};
+
+type PendingRequest = {
+  resolve: (value: any) => void;
+  reject: (error: Error) => void;
+};
+
+export class SaveClientService {
+  private webSocket: AbstractWebsocket = inject(WebSocketToken);
+  private pending: Map<string, PendingRequest> = new Map();
+  private requestCounter = 0;
+
+  initialize() {
+    const saveListResult = (data: SaveListResult) => this.resolveRequest(data.requestId, data);
+    const saveSaveResult = (data: SaveSaveResult) => this.resolveRequest(data.requestId, data);
+    const saveLoadResult = (data: SaveLoadResult) => this.resolveRequest(data.requestId, data);
+    const saveErrorResult = (data: SaveErrorResult) => this.rejectRequest(data.requestId, data.message);
+    this.webSocket.off("save.list.result", saveListResult);
+    this.webSocket.off("save.save.result", saveSaveResult);
+    this.webSocket.off("save.load.result", saveLoadResult);
+    this.webSocket.off("save.error", saveErrorResult);
+    this.webSocket.on("save.list.result", saveListResult);
+    this.webSocket.on("save.save.result", saveSaveResult);
+    this.webSocket.on("save.load.result", saveLoadResult);
+    this.webSocket.on("save.error", saveErrorResult);
+  }
+
+  listSlots(): Promise<SaveSlotList> {
+    return this.request<SaveListResult>("save.list", {}).then((result) => result.slots);
+  }
+
+  saveSlot(index: number, meta: SaveSlotMeta = {}): Promise<SaveSlotList> {
+    return this.request<SaveSaveResult>("save.save", { index, meta }).then((result) => result.slots);
+  }
+
+  loadSlot(index: number): Promise<boolean> {
+    return this.request<SaveLoadResult>("save.load", { index }).then((result) => result.ok);
+  }
+
+  private request<T>(event: string, payload: Record<string, any>): Promise<T> {
+    return new Promise((resolve, reject) => {
+      if (!this.webSocket) {
+        this.initialize();
+      }
+      const requestId = this.nextRequestId();
+      this.pending.set(requestId, { resolve, reject });
+      this.webSocket?.emit(event, { requestId, ...payload });
+    });
+  }
+
+  private resolveRequest(requestId: string, result: any) {
+    const pending = this.pending.get(requestId);
+    if (!pending) return;
+    this.pending.delete(requestId);
+    pending.resolve(result);
+  }
+
+  private rejectRequest(requestId: string, message: string) {
+    const pending = this.pending.get(requestId);
+    if (!pending) return;
+    this.pending.delete(requestId);
+    pending.reject(new Error(message));
+  }
+
+  private nextRequestId(): string {
+    this.requestCounter += 1;
+    return `${Date.now()}-${this.requestCounter}`;
+  }
+}
+
+export function provideSaveClient() {
+  return {
+    provide: SaveClientService,
+    useClass: SaveClientService,
+  };
+}

package/src/services/standalone.ts

@@ -1,29 +1,55 @@
-import { AbstractWebsocket, WebSocketToken } from "./AbstractSocket";
+import { AbstractWebsocket, SocketUpdateProperties, 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";
+import { provideKeyboardControls } from "./keyboardControls";
+import { provideSaveClient } from "./save";
 
 type ServerIo = any;
 type ClientIo = any;
 
+interface StandaloneOptions {
+  env?: Record<string, any>;
+}
+
 class BridgeWebsocket extends AbstractWebsocket {
   private room: ServerIo;
   private socket: ClientIo;
+  private pendingOn: Array<{ event: string; callback: (data: any) => void }> = [];
+  private rooms = {
+    partyFn: async (roomId: string) => {
+      this.room = new ServerIo(roomId, this.rooms);
+      const server = new this.server(this.room)
+      await server.onStart();
+      await server.subRoom.onStart()
+      this.context.set('server', server)
+      return server
+    },
+    env: {}
+  }
+  private serverInstance: any;
 
-  constructor(protected context: Context, private server: any) {
+  constructor(protected context: Context, private server: any, options: StandaloneOptions = {}) {
     super(context);
     // fake room
-    this.room = new ServerIo("lobby-1");
+    this.rooms.env = options.env || {};
+    this.room = new ServerIo("lobby-1", this.rooms);
   }
 
   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);
+    this.serverInstance = new this.server(this.room);
+    await this.serverInstance.onStart();
+    await this.serverInstance.subRoom.onStart()
+    this.context.set('server', this.serverInstance)
+    return this._connection(listeners)
+  }
+
+  private async _connection(listeners?: (data: any) => void) {
+    this.serverInstance = this.context.get('server')
+    this.socket = new ClientIo(this.serverInstance, 'player-client-id');
     const url = new URL('http://localhost')
     const request = new Request(url.toString(), {
       method: 'GET',
@@ -32,21 +58,29 @@ class BridgeWebsocket extends AbstractWebsocket {
       }
     })
     listeners?.(this.socket)
-    await server.onConnect(this.socket.conn as any, { request } as any);
+    await this.serverInstance.onConnect(this.socket.conn as any, { request } as any);
     this.room.clients.set(this.socket.id, this.socket);
+    this.pendingOn.forEach(({ event, callback }) => this.socket.addEventListener(event, callback));
+    this.pendingOn = [];
     return this.socket
   }
 
   on(key: string, callback: (data: any) => void) {
-    this.socket.addEventListener("message", (event) => {
+    const handler = (event) => {
       const object = JSON.parse(event);
       if (object.type === key) {
         callback(object.value);
       }
-    });
+    };
+    if (!this.socket) {
+      this.pendingOn.push({ event: "message", callback: handler });
+      return;
+    }
+    this.socket.addEventListener("message", handler);
   }
 
   off(event: string, callback: (data: any) => void) {
+    if (!this.socket) return;
     this.socket.removeEventListener(event, callback);
   }
 
@@ -57,24 +91,80 @@ class BridgeWebsocket extends AbstractWebsocket {
     });
   }
 
-  updateProperties({ room }: { room: any }) {
-    this.room = new ServerIo(room);
+  /**
+   * Update underlying connection properties before a reconnect
+   *
+   * Design
+   * - Dynamically register a factory for the requested room to ensure a fresh server instance
+   * - Swap the internal ServerIo to target the new room
+   *
+   * @param params - Properties to update
+   * @param params.room - The target room id (e.g. `map-simplemap2`)
+   *
+   * @example
+   * ```ts
+   * websocket.updateProperties({ room: 'map-simplemap2' })
+   * await websocket.reconnect()
+   * ```
+   */
+  updateProperties(_params: SocketUpdateProperties) {
+    // empty
   }
 
-  async reconnect(listeners?: (data: any) => void) {
-    await this.connection((socket) => {
+  /**
+   * Reconnect the client to the current Party room
+   *
+   * Design
+   * - Must be called after `updateProperties()` when switching rooms
+   * - Rebuilds the client <-> server bridge and re-triggers connection listeners
+   *
+   * @param listeners - Optional callback to re-bind event handlers on the new socket
+   *
+   * @example
+   * ```ts
+   * websocket.updateProperties({ room: 'map-dungeon' })
+   * await websocket.reconnect((socket) => {
+   *   // re-bind events here
+   * })
+   * ```
+   */
+  async reconnect(listeners?: (data: any) => void): Promise<void> {
+    await this._connection((socket) => {
       listeners?.(socket)
     })
   }
+
+  getServer() {
+    return this.serverInstance
+  }
+
+  getSocket() {
+    return this.socket
+  }
 }
 
 class UpdateMapStandaloneService extends UpdateMapService {
   private server: any;
 
-  async update(mapId: string, map: any) {
+  /**
+   * Update the current room map data on the server side
+   *
+   * Design
+   * - Uses the in-memory server instance stored in context (standalone mode)
+   * - Builds a local HTTP-like request to the current Party room endpoint
+   *
+   * @param map - The map payload to apply on the server
+   *
+   * @example
+   * ```ts
+   * await updateMapService.update({ width: 1024, height: 768, events: [] })
+   * ```
+   */
+  async update(map: any) {
     this.server = this.context.get('server')
+    const roomId = this.server?.room?.id ?? 'lobby-1'
     const req = {
-      url: `http://localhost/parties/main/${mapId}/map/update`,
+      url: `http://localhost/parties/main/${roomId}/map/update`,
       method: 'POST',
       headers: new Headers({}),
       json: async () => {
@@ -85,16 +175,18 @@ class UpdateMapStandaloneService extends UpdateMapService {
   }
 }
 
-export function provideRpg(server: any) {
+export function provideRpg(server: any, options: StandaloneOptions = {}) {
   return [
     {
       provide: WebSocketToken,
-      useFactory: (context: Context) => new BridgeWebsocket(context, server),
+      useFactory: (context: Context) => new BridgeWebsocket(context, server, options),
     },
     {
       provide: UpdateMapToken,
       useClass: UpdateMapStandaloneService,
     },
+    provideKeyboardControls(),
+    provideSaveClient(),
     RpgGui,
     RpgClientEngine,
   ];

package/src/utils/getEntityProp.ts

@@ -0,0 +1,87 @@
+import { computed, Signal } from "canvasengine";
+import { RpgClientObject } from "../Game/Object";
+
+const BUILTIN_PARAM_KEYS = [
+  "maxHp",
+  "maxSp",
+  "atk",
+  "pdef",
+  "sdef",
+  "str",
+  "agi",
+  "int",
+  "dex",
+] as const;
+
+type BuiltInParamKey = typeof BUILTIN_PARAM_KEYS[number];
+type ParamPropKey = `params.${BuiltInParamKey}` | `params.${string}`;
+
+const entityPropMap = {
+  level: (entity: RpgClientObject) => entity._level(),
+  exp: (entity: RpgClientObject) => entity._exp(),
+  gold: (entity: RpgClientObject) => entity._gold(),
+  hp: (entity: RpgClientObject) => entity.hpSignal(),
+  sp: (entity: RpgClientObject) => entity.spSignal(),
+  name: (entity: RpgClientObject) => entity.name(),
+  type: (entity: RpgClientObject) => entity.type(),
+  x: (entity: RpgClientObject) => entity.x(),
+  y: (entity: RpgClientObject) => entity.y(),
+  z: (entity: RpgClientObject) => entity.z(),
+  tint: (entity: RpgClientObject) => entity.tint(),
+  direction: (entity: RpgClientObject) => entity.direction(),
+  speed: (entity: RpgClientObject) => entity.speed(),
+  hitbox: (entity: RpgClientObject) => entity.hitbox(),
+  animation: (entity: RpgClientObject) => entity.animationName(),
+  canMove: (entity: RpgClientObject) => entity.canMove(),
+  graphics: (entity: RpgClientObject) => entity.graphics(),
+  items: (entity: RpgClientObject) => entity.items(),
+  equipments: (entity: RpgClientObject) => entity.equipments(),
+  states: (entity: RpgClientObject) => entity.states(),
+  skills: (entity: RpgClientObject) => entity.skills(),
+  effects: (entity: RpgClientObject) => entity._effects(),
+  componentsTop: (entity: RpgClientObject) => entity.componentsTop(),
+  componentsBottom: (entity: RpgClientObject) => entity.componentsBottom(),
+  componentsCenter: (entity: RpgClientObject) => entity.componentsCenter(),
+  componentsLeft: (entity: RpgClientObject) => entity.componentsLeft(),
+  componentsRight: (entity: RpgClientObject) => entity.componentsRight(),
+} as const;
+
+type EntityPropMap = typeof entityPropMap;
+type EntityPropKey = keyof EntityPropMap | ParamPropKey;
+type EntityPropValue<K extends EntityPropKey> = K extends keyof EntityPropMap
+  ? ReturnType<EntityPropMap[K]>
+  : K extends `params.${string}`
+  ? number | undefined
+  : never;
+
+const isSignal = <T>(value: unknown): value is Signal<T> =>
+  typeof value === "function";
+
+const toSignal = <T>(value: Signal<T> | T): Signal<T> =>
+  isSignal<T>(value) ? value : computed(() => value);
+
+export const getEntityProp = <K extends EntityPropKey>(
+  entity: Signal<RpgClientObject | undefined> | RpgClientObject | undefined,
+  key: K
+): Signal<EntityPropValue<K>> => {
+  const entitySignal = toSignal(entity);
+
+  return computed(() => {
+    const current = entitySignal();
+    if (!current) {
+      return undefined as EntityPropValue<K>;
+    }
+
+    if (Object.prototype.hasOwnProperty.call(entityPropMap, key)) {
+      const getter = entityPropMap[key as keyof EntityPropMap];
+      return getter(current) as EntityPropValue<K>;
+    }
+
+    if (key.startsWith("params.")) {
+      const paramKey = key.slice("params.".length);
+      return current._param?.()?.[paramKey] as EntityPropValue<K>;
+    }
+
+    return undefined as EntityPropValue<K>;
+  });
+};

package/vite.config.ts

@@ -19,9 +19,11 @@ export default defineConfig({
     sourcemap: true,
     minify: false,
     lib: {
-      entry: 'src/index.ts',
+      entry: {
+        index: 'src/index.ts'
+      },
       formats: ['es'],
-      fileName: 'index'
+      fileName: (format, entryName) => `${entryName}.js`
     },
     rollupOptions: {
       external: [/@rpgjs/, 'esbuild', 'canvasengine', '@canvasengine/presets', 'rxjs', 'pixi.js'],

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/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/index10.js

@@ -1,8 +0,0 @@
-import component from './index23.js';
-
-const PrebuiltGui = {
-  Dialogbox: component
-};
-
-export { PrebuiltGui };
-//# sourceMappingURL=index10.js.map

package/dist/index10.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index10.js","sources":["../src/components/gui/index.ts"],"sourcesContent":["import Dialogbox from \"./dialogbox/index.ce\";\n\nexport const PrebuiltGui = {\n    Dialogbox\n}"],"names":["Dialogbox"],"mappings":";;AAEO,MAAM,WAAc,GAAA;AAAA,aACvBA;AACJ;;;;"}

package/dist/index11.js

@@ -1,10 +0,0 @@
-import component$1 from './index24.js';
-import component from './index25.js';
-
-const PrebuiltEffects = {
-  Hit: component$1,
-  Animation: component
-};
-
-export { PrebuiltEffects };
-//# sourceMappingURL=index11.js.map

package/dist/index11.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index11.js","sources":["../src/components/effects/index.ts"],"sourcesContent":["import Hit from \"./hit.ce\";\nimport Animation from \"./animation.ce\";\n\nexport const PrebuiltEffects = {\n    Hit,\n    Animation\n}"],"names":["Hit","Animation"],"mappings":";;;AAGO,MAAM,eAAkB,GAAA;AAAA,OAC3BA,WAAA;AAAA,aACAC;AACJ;;;;"}

package/dist/index12.js

@@ -1,8 +0,0 @@
-import { RMSpritesheet } from './index26.js';
-
-const Presets = {
-  RMSpritesheet
-};
-
-export { Presets };
-//# sourceMappingURL=index12.js.map

package/dist/index12.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index12.js","sources":["../src/presets/index.ts"],"sourcesContent":["import { RMSpritesheet } from \"./rmspritesheet\";\n\nexport const Presets = {\n    RMSpritesheet\n}"],"names":[],"mappings":";;AAEO,MAAM,OAAU,GAAA;AAAA,EACnB;AACJ;;;;"}

package/dist/index13.js

@@ -1,17 +0,0 @@
-import { useProps, useDefineProps, h, Container, loop } from 'canvasengine';
-import { inject } from './index6.js';
-import { RpgClientEngine } from './index2.js';
-import component$1 from './index14.js';
-
-function component($$props) {
-        useProps($$props);
-        useDefineProps($$props);
-        var engine = inject(RpgClientEngine);
-var players = engine.sceneMap.players;
-var events = engine.sceneMap.events;
-        let $this = h(Container, { sortableChildren: true }, [loop(events, (event, id) => h(component$1, { id: id, object: event })), loop(players, (player, id) => h(component$1, { id: id, object: player }))]);
-        return $this
-      }
-
-export { component as default };
-//# sourceMappingURL=index13.js.map

package/dist/index13.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index13.js","sources":["../src/components/scenes/event-layer.ce"],"sourcesContent":["<Container sortableChildren={true}>\n    @for ((event,id) of events) {\n        <Character id={id} object={event}  />\n    }\n\n    @for ((player,id) of players) {\n        <Character id={id} object={player} />\n    }\n</Container>\n\n<script>\n    import { effect, signal } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import Character from \"../character.ce\";\n   \n    const engine = inject(RpgClientEngine);\n    const players = engine.sceneMap.players\n    const events = engine.sceneMap.events\n</script>"],"names":["Character"],"mappings":";;;;;AAQqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAA4B,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AAC5C,IAAI,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,OAAO;AACrC,IAAI,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC7B,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,CAACA,WAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,CAACA,WAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AAC5M,QAAQ,OAAO;AACf;;;;"}

package/dist/index14.js

@@ -1,107 +0,0 @@
-import { useProps, useDefineProps, computed, signal, mount, tick, h, Container, loop, Sprite } from 'canvasengine';
-import { Particle } from '@canvasengine/presets';
-import { Direction, ModulesToken } from '@rpgjs/common';
-import { RpgClientEngine } from './index2.js';
-import { inject } from './index6.js';
-
-function component($$props) {
-        useProps($$props);
-        const defineProps = useDefineProps($$props);
-        var _a = defineProps(), object = _a.object, id = _a.id;
-var client = inject(RpgClientEngine);
-var hooks = inject(ModulesToken);
-var spritesheets = client.spritesheets;
-var playerId = client.playerId;
-var componentsBehind = client.spriteComponentsBehind;
-var componentsInFront = client.spriteComponentsInFront;
-var isMe = computed(function () { return id() === playerId; });
-var x = object.x;
-var y = object.y;
-var tint = object.tint;
-var direction = object.direction;
-var animationName = object.animationName;
-var emitParticleTrigger = object.emitParticleTrigger;
-var particleSettings = client.particleSettings;
-var particleName = object.particleName;
-var graphics = object.graphics;
-var hitbox = object.hitbox;
-var widthShadow = 10;
-computed(function () { return ({
-    x: hitbox().w / 2,
-    y: hitbox().h - (hitbox().h / 2),
-    width: hitbox().w + widthShadow,
-    height: hitbox().h,
-}); });
-var canControls = function () { return isMe() && object.canMove(); };
-var keyboardControls = client.globalConfig.keyboardControls;
-var controls = signal({
-    down: {
-        repeat: true,
-        bind: keyboardControls.down,
-        keyDown: function () {
-            if (canControls())
-                client.processInput({ input: Direction.Down });
-        },
-    },
-    up: {
-        repeat: true,
-        bind: keyboardControls.up,
-        keyDown: function () {
-            if (canControls())
-                client.processInput({ input: Direction.Up });
-        },
-    },
-    left: {
-        repeat: true,
-        bind: keyboardControls.left,
-        keyDown: function () {
-            if (canControls())
-                client.processInput({ input: Direction.Left });
-        },
-    },
-    right: {
-        repeat: true,
-        bind: keyboardControls.right,
-        keyDown: function () {
-            if (canControls())
-                client.processInput({ input: Direction.Right });
-        },
-    },
-    action: {
-        bind: keyboardControls.action,
-        keyDown: function () {
-            if (canControls()) {
-                client.processAction({ action: 'action' });
-                // particleName.set('hit') 
-                // emitParticleTrigger.start()
-                // object.flash('red')
-            }
-        },
-    },
-});
-var sheet = function (graphicId) {
-    return {
-        definition: spritesheets.get(graphicId),
-        playing: animationName,
-        params: {
-            direction: direction
-        },
-    };
-};
-mount(function (element) {
-    hooks.callHooks("client-sprite-onInit", element.componentInstance);
-    hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, element.componentInstance);
-    return function () {
-        hooks.callHooks("client-sprite-onDestroy", element.componentInstance);
-        hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, element.componentInstance);
-    };
-});
-tick(function () {
-    hooks.callHooks("client-sprite-onUpdate");
-});
-        let $this = h(Container, { x, y, zIndex: y, viewportFollow: isMe, controls }, [loop(componentsBehind, component => h(Container, null, h(component, { object }))), h(Particle, { emit: emitParticleTrigger, settings: particleSettings, zIndex: 1000, name: particleName }), h(Container, null, loop(graphics, graphicId => h(Sprite, { sheet: sheet(graphicId), direction, tint }))), loop(componentsInFront, component => h(Container, null, h(component, { object })))]);
-        return $this
-      }
-
-export { component as default };
-//# sourceMappingURL=index14.js.map

package/dist/index14.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index14.js","sources":["../src/components/character.ce"],"sourcesContent":["<Container x y zIndex={y} viewportFollow={isMe} controls>\n  @for (component of componentsBehind) {\n    <Container>\n      <component object />\n    </Container>\n  } \n  <Particle emit={@emitParticleTrigger} settings={@particleSettings} zIndex={1000} name={particleName} />\n  <Container>\n    @for (graphicId of graphics) {\n      <Sprite sheet={@sheet(@graphicId)} direction tint />\n    }\n  </Container>\n  @for (component of componentsInFront) {\n    <Container>\n      <component object />\n    </Container>\n  } \n  <!-- <Ellipse \n    x={shadow.@x} \n    y={shadow.@y} \n    width={shadow.@width} \n    height={shadow.@height} \n    color=\"black\" \n    blur={10} \n    alpha={0.5}\n  /> -->\n</Container>\n\n<script>\n  import { signal, effect, mount, computed, tick } from \"canvasengine\";\n  import { Particle } from \"@canvasengine/presets\";\n  import { GameEngineToken, ModulesToken } from \"@rpgjs/common\";\n  import { RpgClientEngine } from \"../RpgClientEngine\";\n  import { inject } from \"../core/inject\";  \n  import { Direction } from \"@rpgjs/common\";\n  import Hit from \"./effects/hit.ce\";\n\n  const { object, id } = defineProps();\n  \n  const client = inject(RpgClientEngine);\n  const hooks = inject(ModulesToken);\n\n  const spritesheets = client.spritesheets;\n  const playerId = client.playerId;\n  const componentsBehind = client.spriteComponentsBehind;\n  const componentsInFront = client.spriteComponentsInFront;\n  const isMe = computed(() => id() === playerId);\n\n  const x = object.x;\n  const y = object.y;\n  const tint = object.tint;\n  const direction = object.direction;\n  const animationName = object.animationName;\n  const emitParticleTrigger = object.emitParticleTrigger;\n  const particleSettings = client.particleSettings;\n  const particleName = object.particleName;\n  const graphics = object.graphics;\n\n  const hitbox = object.hitbox;\n  const widthShadow = 10;\n  const shadow = computed(() => ({\n    x: hitbox().w / 2,\n    y: hitbox().h - (hitbox().h / 2),\n    width: hitbox().w + widthShadow,\n    height: hitbox().h,\n  }))\n  const canControls = () => isMe() && object.canMove()\n  const keyboardControls = client.globalConfig.keyboardControls;\n\n  const controls = signal({\n    down: {\n      repeat: true,\n      bind: keyboardControls.down,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Down })\n      },\n    },\n    up: {\n      repeat: true,\n      bind: keyboardControls.up,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Up })\n      },\n    },\n    left: {\n      repeat: true,\n      bind: keyboardControls.left,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Left })\n      },\n    },\n    right: {\n      repeat: true,\n      bind: keyboardControls.right,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Right })\n      },\n    },\n    action: {\n      bind: keyboardControls.action,\n      keyDown() {\n        if (canControls()) {\n          client.processAction({ action: 'action' })\n           // particleName.set('hit') \n          // emitParticleTrigger.start()\n          // object.flash('red')\n        }\n      },\n    },\n  });\n\n  const sheet = (graphicId) => {\n    return {\n      definition: spritesheets.get(graphicId),\n      playing: animationName,\n      params: {\n        direction\n      },\n    };\n  }\n\n  mount((element) => {\n    hooks.callHooks(\"client-sprite-onInit\", element.componentInstance)\n    hooks.callHooks(\"client-sceneMap-onAddSprite\", client.sceneMap, element.componentInstance)\n\n    return () => {\n      hooks.callHooks(\"client-sprite-onDestroy\", element.componentInstance)\n      hooks.callHooks(\"client-sceneMap-onRemoveSprite\", client.sceneMap, element.componentInstance)\n    }\n  })\n\n  tick(() => {\n    hooks.callHooks(\"client-sprite-onUpdate\")\n  })\n</script>"],"names":[],"mappings":"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"}

package/dist/index15.js

@@ -1,50 +0,0 @@
-import { useProps, useDefineProps, computed, effect, h, Canvas, loop, Viewport, cond, Container } from 'canvasengine';
-import { inject } from './index6.js';
-import { RpgClientEngine } from './index2.js';
-import component$1 from './index29.js';
-import { RpgGui } from './index9.js';
-
-function component($$props) {
-        useProps($$props);
-        useDefineProps($$props);
-        var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var engine = inject(RpgClientEngine);
-var guiService = inject(RpgGui);
-var sceneData = engine.sceneMap.data;
-var gui = guiService.gui;
-var worldWidth = computed(function () { var _a; return (_a = sceneData()) === null || _a === void 0 ? void 0 : _a.width; });
-var worldHeight = computed(function () { var _a; return (_a = sceneData()) === null || _a === void 0 ? void 0 : _a.height; });
-effect(function () {
-    if (sceneData() && !sceneData().component) {
-        throw new Error("Warning ! You need to define a component for the scene. Use provideLoadMap() to define a component for the scene.");
-    }
-});
-var onGuiFinish = function (gui, data) {
-    guiService.guiClose(gui.name, data);
-};
-var onGuiInteraction = function (gui, name, data) {
-    guiService.guiInteraction(gui.name, name, data);
-};
-var clamp = {
-    direction: "all"
-};
-        let $this = h(Canvas, { width: computed(() => engine.width()), height: computed(() => engine.height()) }, [h(Viewport, { worldWidth, worldHeight, clamp }, cond(sceneData, () => h(component$1))), loop(gui, gui => h(Container, { display: 'flex' }, cond(gui.display, () => h(gui.component, { ...gui.data(), onFinish: (data) => {
-          onGuiFinish(gui, data);
-        }, onInteraction: (name, data) => {
-          onGuiInteraction(gui, name, data);
-        } }))))]);
-        return $this
-      }
-
-export { component as default };
-//# sourceMappingURL=index15.js.map