@rpgjs/client 4.1.2 → 4.2.0

package/browser/rpg.client.umd.cjs

@@ -1,257 +1,7 @@
 (function(global2, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@rpgjs/common"), require("rxjs"), require("vue"), require("react-dom"), require("react")) : typeof define === "function" && define.amd ? define(["exports", "@rpgjs/common", "rxjs", "vue", "react-dom", "react"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.RpgClient = {}, global2.common, global2.rxjs, global2.Vue, global2.require$$0$1, global2.react));
-})(this, function(exports2, common, rxjs, vue, require$$0$1, react) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react-dom"), require("react"), require("@rpgjs/common"), require("rxjs"), require("vue")) : typeof define === "function" && define.amd ? define(["exports", "react-dom", "react", "@rpgjs/common", "rxjs", "vue"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.RpgClient = {}, global2.require$$0$1, global2.react, global2.common, global2.rxjs, global2.Vue));
+})(this, function(exports2, require$$0$1, react, common, rxjs, vue) {
   "use strict";
-  class GameEngineClient extends common.RpgCommonGame {
-    constructor() {
-      super(common.GameSide.Client);
-      this._objects = new rxjs.BehaviorSubject({});
-      this._obsObjects = {};
-      this._obsObjectsDeleteNotifier$ = {};
-      this._shapes = new rxjs.BehaviorSubject({});
-      this._objectsChanged = new rxjs.BehaviorSubject({});
-      this.world = {
-        getObjects: this.getObjects.bind(this),
-        getObject: (id) => {
-          const obj = this.getObject(id);
-          if (!obj)
-            return null;
-          return obj.object;
-        },
-        getShape: (id) => {
-          const obj = this.getShape(id);
-          if (!obj)
-            return null;
-          return obj.object;
-        },
-        getAll: (id) => {
-          const obj = this.getObjectAndShape(id);
-          if (!obj)
-            return null;
-          return obj.object;
-        },
-        removeObject: this.removeObject.bind(this),
-        getObjectsOfGroup: () => {
-          return {
-            ...this.getObjects(),
-            ...this.events
-          };
-        },
-        getShapesOfGroup: () => {
-          return this.getShapes();
-        }
-      };
-    }
-    _get(prop, id) {
-      const objects = this[prop].value;
-      const val = objects[id];
-      if (!val)
-        return null;
-      return val;
-    }
-    get objectsChanged() {
-      return this._objectsChanged.asObservable();
-    }
-    setObjectsChanged(val) {
-      this._objectsChanged.next(val);
-    }
-    listenObject(id) {
-      return this._obsObjects[id].asObservable();
-    }
-    get objects() {
-      return this._objects.asObservable();
-    }
-    get shapes() {
-      return this._shapes.asObservable();
-    }
-    get all() {
-      return rxjs.combineLatest([this.objects, this.shapes]).pipe(rxjs.map(([objects, shapes]) => {
-        return {
-          ...objects,
-          ...shapes
-        };
-      }));
-    }
-    getShapes() {
-      return this._shapes.value;
-    }
-    getObjects() {
-      return this._objects.value;
-    }
-    getObject(id) {
-      return this._get("_objects", id);
-    }
-    getShape(id) {
-      return this._get("_shapes", id);
-    }
-    getObjectAndShape(id) {
-      let obj = this.getObject(id);
-      if (!obj)
-        obj = this.getShape(id);
-      return obj;
-    }
-    resetObjects() {
-      for (let id in this._obsObjectsDeleteNotifier$) {
-        this._obsObjectsDeleteNotifier$[id].next();
-        this._obsObjectsDeleteNotifier$[id].complete();
-        this._obsObjects[id].complete();
-      }
-      this._obsObjectsDeleteNotifier$ = {};
-      this._obsObjects = {};
-      this._objects.next({});
-      this._shapes.next({});
-    }
-    getDeleteNotifier(id) {
-      return this._obsObjectsDeleteNotifier$[id].asObservable();
-    }
-    _remove(prop, id) {
-      const logic = prop == "_objects" ? this.getObject(id) : this.getShape(id);
-      if (logic) {
-        const objects = {
-          ...this[prop].value
-        };
-        delete objects[id];
-        this._obsObjectsDeleteNotifier$[id].next();
-        this._obsObjectsDeleteNotifier$[id].complete();
-        this._obsObjects[id].complete();
-        delete this._obsObjects[id];
-        delete this._obsObjectsDeleteNotifier$[id];
-        this[prop].next(objects);
-        return true;
-      }
-      return false;
-    }
-    removeObject(id) {
-      if (this.events[id]) {
-        delete this.events[id];
-      }
-      return this._remove("_objects", id);
-    }
-    removeShape(id) {
-      return this._remove("_shapes", id);
-    }
-    removeObjectAndShape(id) {
-      let bool = this.removeObject(id);
-      if (!bool)
-        bool = this.removeShape(id);
-      return bool;
-    }
-    static toArray(obj, prop) {
-      if (obj[prop])
-        obj[prop] = Object.values(obj[prop]);
-    }
-    updateObject(obj) {
-      const {
-        playerId: id,
-        params,
-        localEvent,
-        paramsChanged,
-        isShape
-      } = obj;
-      if (paramsChanged.components) {
-        paramsChanged.layout = {
-          center: {
-            lines: [{
-              col: paramsChanged.components
-            }]
-          }
-        };
-      }
-      const layoutToArray = (params2) => {
-        const layout = params2.layout;
-        if (layout) {
-          ["center", "top", "right", "bottom", "left"].forEach((key) => {
-            if (!layout[key])
-              return;
-            GameEngineClient.toArray(layout[key], "lines");
-            if (!layout[key].lines)
-              return;
-            layout[key].lines.map((layout2) => {
-              GameEngineClient.toArray(layout2, "col");
-            });
-          });
-        }
-      };
-      layoutToArray(params);
-      GameEngineClient.toArray(params, "polygon");
-      const isMe = () => id == this.playerId;
-      let logic;
-      const createObsForObject = (data) => {
-        this._obsObjectsDeleteNotifier$[id] = new rxjs.Subject();
-        this._obsObjects[id] = new rxjs.BehaviorSubject(data);
-      };
-      if (isShape) {
-        logic = this.world.getShape(id);
-        if (!logic) {
-          logic = this.addShape(params);
-          createObsForObject({
-            logic
-          });
-        }
-      } else {
-        if (localEvent) {
-          logic = this.events[id];
-          if (!logic) {
-            logic = this.addEvent(common.RpgCommonPlayer, id);
-            createObsForObject({
-              logic
-            });
-            this.events[id] = {
-              object: logic
-            };
-          } else {
-            logic = logic.object;
-          }
-        } else {
-          logic = this.world.getObject(id);
-        }
-        if (!logic) {
-          logic = this.addPlayer(common.RpgCommonPlayer, id);
-          createObsForObject({
-            logic
-          });
-        }
-      }
-      logic.prevParamsChanged = Object.assign({}, logic);
-      for (let key in params) {
-        if (!localEvent && (key == "position" || key == "direction" && paramsChanged && paramsChanged.position)) {
-          if (isMe() && logic.canMove)
-            continue;
-        }
-        logic[key] = params[key];
-      }
-      if (paramsChanged) {
-        layoutToArray(paramsChanged);
-        if (paramsChanged.layout)
-          logic.componentChanged = paramsChanged.layout;
-        if (paramsChanged.teleported) {
-          logic.position = {
-            ...params.position
-          };
-          logic.direction = params.direction;
-        }
-        if (!logic.paramsChanged)
-          logic.paramsChanged = {};
-        logic.paramsChanged = paramsChanged;
-      }
-      const newObject = {
-        object: logic,
-        paramsChanged
-      };
-      this.setObject(id, newObject);
-      return newObject;
-    }
-    setObject(id, newObject) {
-      const propName = newObject.object instanceof common.RpgShape ? "_shapes" : "_objects";
-      this[propName].next({
-        ...this[propName].value,
-        ...{
-          [id]: newObject
-        }
-      });
-      this._obsObjects[id].next(newObject);
-    }
-  }
   const keyCodeTable = {
     3: "break",
     8: "backspace",
@@ -436,8 +186,9 @@
   };
   const inverseKeyCodeTable = inverse(keyCodeTable);
   class KeyboardControls {
-    constructor(clientEngine) {
-      this.clientEngine = clientEngine;
+    constructor(context2) {
+      this.context = context2;
+      this.clientEngine = this.context.inject(RpgClientEngine);
       this.keyState = {};
       this.boundKeys = {};
       this.stop = false;
@@ -445,7 +196,7 @@
       this._controlsOptions = {};
       const {
         globalConfig
-      } = clientEngine;
+      } = this.clientEngine;
       this.setupListeners();
       this.setInputs({
         ...common.DefaultInput,
@@ -576,43 +327,56 @@
         this.clientEngine.keyChange.next(keyName);
     }
     /**
-     * From the name of the entry, we retrieve the control information
-     * 
-     * ```ts 
-     * import { Input } from '@rpgjs/client'
+         * From the name of the entry, we retrieve the control information
+         * 
+         * ```ts 
+         * import { Input, inject, KeyboardControls } from '@rpgjs/client'
+         * 
+         * const controls = inject(KeyboardControls)
+         * controls.getControl(Input.Enter)
+    
+         * if (control) {
+         *    console.log(control.actionName) // action
+         * }
+         * ```
+         * @title Get Control
+         * @method getControl(inputName)
+         * @param {string} inputName
+         * @returns { { actionName: string, options: any } | undefined }
+         * @memberof KeyboardControls
+         */
+    getControl(inputName) {
+      return this.boundKeys[inputName];
+    }
+    /**
+     * Returns all controls
      * 
-     * // In method hooks, client is RpgClientEngine
-     * client.controls.getControl(Input.Enter)
-     * if (control) {
-     *    console.log(control.actionName) // action
-     * }
-     * ```
-     * @title Get Control
-     * @method getControl(inputName)
-     * @param {string} inputName
-     * @returns { { actionName: string, options: any } | undefined }
+     * @method getControls()
+     * @since 4.2.0
+     * @returns { { [key: string]: BoundKey } }
      * @memberof KeyboardControls
      */
-    getControl(inputName) {
-      return this.boundKeys[inputName];
+    getControls() {
+      return this.boundKeys;
     }
     /**
      * Triggers an input according to the name of the control
      * 
      * ```ts 
-     * import { Control } from '@rpgjs/client'
+     * import { Control, inject, KeyboardControls } from '@rpgjs/client'
      * 
-     * // In method hooks, client is RpgClientEngine
-     * client.controls.applyControl(Control.Action)
+     * const controls = inject(KeyboardControls)
+     * controls.applyControl(Control.Action)
      * ```
      * 
      * You can put a second parameter or indicate on whether the key is pressed or released
      * 
      * ```ts 
-     * import { Control } from '@rpgjs/client'
+     * import { Control, inject, KeyboardControls } from '@rpgjs/client'
      * 
-     * client.controls.applyControl(Control.Up, true) // keydown
-     * client.controls.applyControl(Control.Up, false) // keyup
+     * const controls = inject(KeyboardControls)
+     * controls.applyControl(Control.Up, true) // keydown
+     * controls.applyControl(Control.Up, false) // keyup
      * ```
      * @title Apply Control
      * @method applyControl(controlName,isDown)
@@ -672,10 +436,10 @@
          *          * delay.otherControls {string | string[]} Indicates the other controls that will also have the delay at the same time
          * 
          * ```ts 
-         * import { Control, Input } from '@rpgjs/client'
+         * import { Control, Input, inject, KeyboardControls } from '@rpgjs/client'
          * 
-         * // In method hooks, client is RpgClientEngine
-         * client.controls.setInputs({
+         * const controls = inject(KeyboardControls)
+         * controls.setInputs({
                 [Control.Up]: {
                     repeat: true,
                     bind: Input.Up
@@ -738,6 +502,18 @@
          * Control.Action | action
          * Control.Back | back
          * 
+         * @enum {string} Mouse Event 
+         * 
+         * click | Click
+         * dblclick | Double Click
+         * mousedown | Mouse Down
+         * mouseup | Mouse Up
+         * mouseover | Mouse Over
+         * mousemove | Mouse Move
+         * mouseout | Mouse Out
+         * contextmenu | Context Menu
+         * 
+         * 
          * @enum {string} Input 
          * 
          * break | Pause
@@ -31888,10 +31664,10 @@ void main(void)
     intersection
   } = common.Utils;
   class TileMap extends Container {
-    constructor(data, renderer) {
+    constructor(context2, data) {
       super();
+      this.context = context2;
       this.data = data;
-      this.renderer = renderer;
       this.background = new Graphics();
       this.tilewidth = 0;
       this.tileheight = 0;
@@ -31900,6 +31676,7 @@ void main(void)
       this.layers = {};
       this.tilesLayer = new Container();
       this.frameTile = 0;
+      this.renderer = this.context.inject(RpgRenderer);
       this.x = 0;
       this.y = 0;
       this.create(data);
@@ -36149,6 +35926,259 @@ void main(void)
       }
     }
   }
+  class GameEngineClient extends common.RpgCommonGame {
+    constructor() {
+      super(...arguments);
+      this._objects = new rxjs.BehaviorSubject({});
+      this._obsObjects = {};
+      this._obsObjectsDeleteNotifier$ = {};
+      this._shapes = new rxjs.BehaviorSubject({});
+      this._objectsChanged = new rxjs.BehaviorSubject({});
+      this.world = {
+        getObjects: this.getObjects.bind(this),
+        getObject: (id) => {
+          const obj = this.getObject(id);
+          if (!obj)
+            return null;
+          return obj.object;
+        },
+        getShape: (id) => {
+          const obj = this.getShape(id);
+          if (!obj)
+            return null;
+          return obj.object;
+        },
+        getAll: (id) => {
+          const obj = this.getObjectAndShape(id);
+          if (!obj)
+            return null;
+          return obj.object;
+        },
+        removeObject: this.removeObject.bind(this),
+        getObjectsOfGroup: () => {
+          return {
+            ...this.getObjects(),
+            ...this.events
+          };
+        },
+        getShapesOfGroup: () => {
+          return this.getShapes();
+        }
+      };
+    }
+    initialize() {
+      super.initialize(common.GameSide.Client);
+    }
+    _get(prop, id) {
+      const objects = this[prop].value;
+      const val = objects[id];
+      if (!val)
+        return null;
+      return val;
+    }
+    get objectsChanged() {
+      return this._objectsChanged.asObservable();
+    }
+    setObjectsChanged(val) {
+      this._objectsChanged.next(val);
+    }
+    listenObject(id) {
+      return this._obsObjects[id].asObservable();
+    }
+    get objects() {
+      return this._objects.asObservable();
+    }
+    get shapes() {
+      return this._shapes.asObservable();
+    }
+    get all() {
+      return rxjs.combineLatest([this.objects, this.shapes]).pipe(rxjs.map(([objects, shapes]) => {
+        return {
+          ...objects,
+          ...shapes
+        };
+      }));
+    }
+    getShapes() {
+      return this._shapes.value;
+    }
+    getObjects() {
+      return this._objects.value;
+    }
+    getObject(id) {
+      return this._get("_objects", id);
+    }
+    getShape(id) {
+      return this._get("_shapes", id);
+    }
+    getObjectAndShape(id) {
+      let obj = this.getObject(id);
+      if (!obj)
+        obj = this.getShape(id);
+      return obj;
+    }
+    resetObjects() {
+      for (let id in this._obsObjectsDeleteNotifier$) {
+        this._obsObjectsDeleteNotifier$[id].next();
+        this._obsObjectsDeleteNotifier$[id].complete();
+        this._obsObjects[id].complete();
+      }
+      this._obsObjectsDeleteNotifier$ = {};
+      this._obsObjects = {};
+      this._objects.next({});
+      this._shapes.next({});
+    }
+    getDeleteNotifier(id) {
+      return this._obsObjectsDeleteNotifier$[id].asObservable();
+    }
+    _remove(prop, id) {
+      const logic = prop == "_objects" ? this.getObject(id) : this.getShape(id);
+      if (logic) {
+        const objects = {
+          ...this[prop].value
+        };
+        delete objects[id];
+        this._obsObjectsDeleteNotifier$[id].next();
+        this._obsObjectsDeleteNotifier$[id].complete();
+        this._obsObjects[id].complete();
+        delete this._obsObjects[id];
+        delete this._obsObjectsDeleteNotifier$[id];
+        this[prop].next(objects);
+        return true;
+      }
+      return false;
+    }
+    removeObject(id) {
+      if (this.events[id]) {
+        delete this.events[id];
+      }
+      return this._remove("_objects", id);
+    }
+    removeShape(id) {
+      return this._remove("_shapes", id);
+    }
+    removeObjectAndShape(id) {
+      let bool = this.removeObject(id);
+      if (!bool)
+        bool = this.removeShape(id);
+      return bool;
+    }
+    static toArray(obj, prop) {
+      if (obj[prop])
+        obj[prop] = Object.values(obj[prop]);
+    }
+    updateObject(obj) {
+      const {
+        playerId: id,
+        params,
+        localEvent,
+        paramsChanged,
+        isShape
+      } = obj;
+      if (paramsChanged.components) {
+        paramsChanged.layout = {
+          center: {
+            lines: [{
+              col: paramsChanged.components
+            }]
+          }
+        };
+      }
+      const layoutToArray = (params2) => {
+        const layout = params2.layout;
+        if (layout) {
+          ["center", "top", "right", "bottom", "left"].forEach((key) => {
+            if (!layout[key])
+              return;
+            GameEngineClient.toArray(layout[key], "lines");
+            if (!layout[key].lines)
+              return;
+            layout[key].lines.map((layout2) => {
+              GameEngineClient.toArray(layout2, "col");
+            });
+          });
+        }
+      };
+      layoutToArray(params);
+      GameEngineClient.toArray(params, "polygon");
+      const isMe = () => id == this.playerId;
+      let logic;
+      const createObsForObject = (data) => {
+        this._obsObjectsDeleteNotifier$[id] = new rxjs.Subject();
+        this._obsObjects[id] = new rxjs.BehaviorSubject(data);
+      };
+      if (isShape) {
+        logic = this.world.getShape(id);
+        if (!logic) {
+          logic = this.addShape(params);
+          createObsForObject({
+            logic
+          });
+        }
+      } else {
+        if (localEvent) {
+          logic = this.events[id];
+          if (!logic) {
+            logic = this.addEvent(common.RpgCommonPlayer, id);
+            createObsForObject({
+              logic
+            });
+            this.events[id] = {
+              object: logic
+            };
+          } else {
+            logic = logic.object;
+          }
+        } else {
+          logic = this.world.getObject(id);
+        }
+        if (!logic) {
+          logic = this.addPlayer(common.RpgCommonPlayer, id);
+          createObsForObject({
+            logic
+          });
+        }
+      }
+      logic.prevParamsChanged = Object.assign({}, logic);
+      for (let key in params) {
+        if (!localEvent && (key == "position" || key == "direction" && paramsChanged && paramsChanged.position)) {
+          if (isMe() && logic.canMove)
+            continue;
+        }
+        logic[key] = params[key];
+      }
+      if (paramsChanged) {
+        layoutToArray(paramsChanged);
+        if (paramsChanged.layout)
+          logic.componentChanged = paramsChanged.layout;
+        if (paramsChanged.teleported) {
+          logic.position = {
+            ...params.position
+          };
+          logic.direction = params.direction;
+        }
+        if (!logic.paramsChanged)
+          logic.paramsChanged = {};
+        logic.paramsChanged = paramsChanged;
+      }
+      const newObject = {
+        object: logic,
+        paramsChanged
+      };
+      this.setObject(id, newObject);
+      return newObject;
+    }
+    setObject(id, newObject) {
+      const propName = newObject.object instanceof common.RpgShape ? "_shapes" : "_objects";
+      this[propName].next({
+        ...this[propName].value,
+        ...{
+          [id]: newObject
+        }
+      });
+      this._obsObjects[id].next(newObject);
+    }
+  }
   const _hoisted_1 = {
     id: "tooltips",
     style: {
@@ -36269,8 +36299,6 @@ void main(void)
         methods: {
           tooltipPosition: parentGui.tooltipPosition.bind(parentGui),
           tooltipFilter: parentGui.tooltipFilter.bind(parentGui)
-        },
-        mounted() {
         }
       };
       this.app = vue.createApp(obj);
@@ -36278,6 +36306,26 @@ void main(void)
       for (let ui of guiVue) {
         this.app.component(ui.name, ui.gui);
       }
+      this.app.directive("propagate", {
+        mounted: (el, binding2) => {
+          el.eventListeners = {};
+          EVENTS_MAP.MouseEvent.forEach((eventType) => {
+            const callback = (ev) => {
+              this.renderer.propagateEvent(ev);
+            };
+            el.eventListeners[eventType] = callback;
+            el.addEventListener(eventType, callback);
+          });
+        },
+        unmounted(el, binding2) {
+          EVENTS_MAP.MouseEvent.forEach((eventType) => {
+            const callback = el.eventListeners[eventType];
+            if (callback) {
+              el.removeEventListener(eventType, callback);
+            }
+          });
+        }
+      });
       this.vm = this.app.mount(rootEl);
       this.renderer.app = this.app;
       this.renderer.vm = this.vm;
@@ -36308,11 +36356,11 @@ void main(void)
       this.currentScene = null;
       this.librariesInstances = [];
     }
-    async _initialize(clientEngine, guiEl) {
+    async _initialize(context2, guiEl) {
       var _a;
-      this.clientEngine = clientEngine;
-      this.renderer = clientEngine.renderer;
-      this.gameEngine = clientEngine.gameEngine;
+      this.clientEngine = context2.inject(RpgClientEngine);
+      this.renderer = context2.inject(RpgRenderer);
+      this.gameEngine = context2.inject(GameEngineClient);
       const {
         gui
       } = this.renderer.options;
@@ -36788,20 +36836,21 @@ void main(void)
   }
   const RpgGui = new Gui();
   let Scene$1 = class Scene {
-    constructor(game) {
-      this.game = game;
+    constructor(context2) {
+      this.context = context2;
       this.objects = /* @__PURE__ */ new Map();
       this.animationLayer = new Container();
+      this.controls = this.context.inject(KeyboardControls);
       this.animations = [];
       this._data = new rxjs.BehaviorSubject({
         data: {},
         partial: {}
       });
+      this.game = this.context.inject(GameEngineClient);
       this.objectsMoving = new rxjs.Subject();
       const {
         globalConfig
       } = this.game.clientEngine;
-      this.controls = this.game.clientEngine.controls;
       const mergeInputs = {
         ...common.DefaultInput,
         ...globalConfig.inputs || {}
@@ -38518,9 +38567,9 @@ void main(void)
     Viewport: PixiViewport
   } = _PixiViewport;
   class SceneMap extends Scene$1 {
-    constructor(game, renderer, options = {}) {
-      super(game);
-      this.game = game;
+    constructor(context2, renderer, options = {}) {
+      super(context2);
+      this.context = context2;
       this.renderer = renderer;
       this.options = options;
       this.players = {};
@@ -38552,7 +38601,7 @@ void main(void)
       this.gameMap.clearCacheTilesets();
       this.constructMethods();
       common.RpgCommonMap.bufferClient.set(obj.id, this.gameMap);
-      this.tilemap = new TileMap(this.gameMap.getData(), this.game.renderer);
+      this.tilemap = new TileMap(this.context, this.gameMap.getData());
       Assets.reset();
       let nbLoad = 0;
       const objects = this.game.world.getObjectsOfGroup();
@@ -38823,6 +38872,8 @@ void main(void)
       this.viewport.on(eventName, (...args) => {
         const ev = args[0];
         const pos = ev.getLocalPosition(this.viewport);
+        if (ev.defaultPrevented)
+          return;
         cb(pos, ev);
       });
     }
@@ -39195,13 +39246,14 @@ void main(void)
     }
   }
   class TransitionScene {
-    constructor(clientEngine, container) {
-      this.clientEngine = clientEngine;
+    constructor(context2, container) {
+      this.context = context2;
       this.container = container;
       this.frameIndex = 0;
       this.animations = [];
       this.complete = () => {
       };
+      this.clientEngine = this.context.inject(RpgClientEngine);
     }
     addFadeIn() {
       return this.addFading(1, 0);
@@ -39256,9 +39308,17 @@ void main(void)
   const {
     elementToPositionAbsolute
   } = common.Utils;
+  const EVENTS_MAP = {
+    MouseEvent: ["click", "dblclick", "mousedown", "mouseup", "mousemove", "mouseenter", "mouseleave", "mouseover", "mouseout", "contextmenu", "wheel"],
+    KeyboardEvent: ["keydown", "keyup", "keypress", "keydownoutside", "keyupoutside", "keypressoutside"],
+    PointerEvent: ["pointerdown", "pointerup", "pointermove", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointercancel"],
+    TouchEvent: ["touchstart", "touchend", "touchmove", "touchcancel"]
+  };
   class RpgRenderer {
-    constructor(clientEngine) {
-      this.clientEngine = clientEngine;
+    constructor(context2) {
+      this.context = context2;
+      this.gameEngine = this.context.inject(GameEngineClient);
+      this.clientEngine = this.context.inject(RpgClientEngine);
       this.stage = new Container();
       this.sceneContainer = new Container();
       this.fadeContainer = new Graphics();
@@ -39267,7 +39327,6 @@ void main(void)
       this.scene = null;
       this._width = 800;
       this._height = 400;
-      this.gameEngine = this.clientEngine.gameEngine;
       this.loadingScene = {
         transitionIn: new rxjs.Subject(),
         transitionOut: new rxjs.Subject()
@@ -39354,8 +39413,23 @@ void main(void)
       this.fadeContainer.addChild(this.spinner);
       this.fadeContainer.visible = false;
       this.fadeContainer.alpha = 0;
-      await RpgGui._initialize(this.clientEngine, this.guiEl);
+      await RpgGui._initialize(this.context, this.guiEl);
       this.resize();
+      this.bindMouseControls();
+    }
+    bindMouseControls() {
+      const controlInstance = this.context.inject(KeyboardControls);
+      const controls = controlInstance.getControls();
+      for (let key in controls) {
+        const {
+          actionName
+        } = controls[key];
+        if (EVENTS_MAP.MouseEvent.includes(key)) {
+          this.canvas.addEventListener(key, (e2) => {
+            controlInstance.applyControl(actionName);
+          });
+        }
+      }
     }
     /** @internal */
     resize() {
@@ -39430,7 +39504,7 @@ void main(void)
         this.loadingScene.transitionOut.complete();
       };
       if (this.transitionMode == 1) {
-        new TransitionScene(this.clientEngine, this.fadeContainer).addFadeOut().onComplete(finish).start();
+        new TransitionScene(this.context, this.fadeContainer).addFadeOut().onComplete(finish).start();
       } else {
         finish();
       }
@@ -39457,7 +39531,7 @@ void main(void)
         switch (name) {
           case Scene.Map:
             const sceneClass = scenes[Scene.Map] || SceneMap;
-            this.scene = new sceneClass(this.gameEngine, this.renderer, {
+            this.scene = new sceneClass(this.context, this.renderer, {
               screenWidth: this.renderer.screen.width,
               screenHeight: this.renderer.screen.height,
               drawMap: this.options.drawMap
@@ -39473,7 +39547,7 @@ void main(void)
           common.RpgPlugin.emit(common.HookClient.AfterSceneLoading, this.scene);
         };
         if (this.transitionMode == 1) {
-          new TransitionScene(this.clientEngine, this.fadeContainer).addFadeIn().onComplete(finish).start();
+          new TransitionScene(this.context, this.fadeContainer).addFadeIn().onComplete(finish).start();
         } else {
           finish();
         }
@@ -39492,12 +39566,18 @@ void main(void)
      * @returns {void}
      */
     propagateEvent(ev) {
-      var _a, _b;
+      const rect = this.canvas.getBoundingClientRect();
+      const canvasX = rect.left + window.scrollX;
+      const canvasY = rect.top + window.scrollY;
+      const realX = ev.clientX - canvasX;
+      const realY = ev.clientY - canvasY;
       const boundary = new EventBoundary(this.stage);
       const event = new FederatedPointerEvent(boundary);
-      event.global.set(ev.clientX, ev.clientY);
+      event.global.set(realX, realY);
       event.type = ev.type;
-      (_b = (_a = this.getScene()) == null ? void 0 : _a.viewport) == null ? void 0 : _b.emit(event.type, event);
+      const hitTestTarget = boundary.hitTest(realX, realY);
+      hitTestTarget == null ? void 0 : hitTestTarget.dispatchEvent(event);
+      this.canvas.dispatchEvent(new MouseEvent(ev.type, ev));
     }
     /***
      * Propagate events from an HTMLElement to the canvas
@@ -39509,13 +39589,7 @@ void main(void)
      * @returns {void}
      */
     addPropagateEventsFrom(el) {
-      const eventMap = {
-        MouseEvent: ["click", "mousedown", "mouseup", "mousemove", "mouseenter", "mouseleave", "mouseover", "mouseout", "contextmenu", "wheel"],
-        KeyboardEvent: ["keydown", "keyup", "keypress", "keydownoutside", "keyupoutside", "keypressoutside"],
-        PointerEvent: ["pointerdown", "pointerup", "pointermove", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointercancel"],
-        TouchEvent: ["touchstart", "touchend", "touchmove", "touchcancel"]
-      };
-      for (let [_Constructor, events] of Object.entries(eventMap)) {
+      for (let [_Constructor, events] of Object.entries(EVENTS_MAP)) {
         for (let type of events) {
           el.addEventListener(type, (e2) => {
             const _class = window[_Constructor] ?? MouseEvent;
@@ -42346,15 +42420,22 @@ void main(void)
      * @param {string} socket
      * @return {World}
      */
-    listen(socket, transformData) {
+    listen(socket, options = {}) {
+      if (options.encoded === void 0)
+        options.encoded = true;
       this.socket = socket;
       this.socket.on("uid", (response) => {
         WorldClass.userId = response;
       });
+      this.socket.on("connect", () => {
+        this.obs$.next({});
+      });
       this.socket.on("w", (response) => {
-        const bufView = new Uint8Array(response);
-        const decode2 = browser.decode(bufView);
-        const [roomId, time, data] = decode2;
+        if (options.encoded) {
+          const bufView = new Uint8Array(response);
+          response = browser.decode(bufView);
+        }
+        const [roomId, time, data] = response;
         const lastRoomId = this.obs$.value.roomId;
         let mergeData = {};
         let resetProps = [];
@@ -43361,8 +43442,8 @@ void main(void)
     isString
   } = common.Utils;
   class RpgClientEngine {
-    constructor(gameEngine, options) {
-      this.gameEngine = gameEngine;
+    constructor(context2, options) {
+      this.context = context2;
       this.options = options;
       this.globalConfig = {};
       this._tick = new rxjs.BehaviorSubject({
@@ -43386,6 +43467,7 @@ void main(void)
       this.serverFps = 60;
       this.scheduler = new common.Scheduler();
       this._serverUrl = "";
+      this.gameEngine = this.context.inject(GameEngineClient);
       this.objects = this.gameEngine.objects;
       this.envs = {};
       this.envs = options.envs || {};
@@ -43398,14 +43480,14 @@ void main(void)
       });
     }
     async _init() {
-      this.renderer = new RpgRenderer(this);
-      const pluginLoadRessource = async (hookName, type) => {
+      this.renderer = this.context.inject(RpgRenderer);
+      const pluginLoadResource = async (hookName, type) => {
         const resource = this.options[type] || [];
         this.options[type] = [...common.Utils.arrayFlat(await common.RpgPlugin.emit(hookName, resource)) || [], ...resource];
       };
-      await pluginLoadRessource(common.HookClient.AddSpriteSheet, "spritesheets");
-      await pluginLoadRessource(common.HookClient.AddGui, "gui");
-      await pluginLoadRessource(common.HookClient.AddSound, "sounds");
+      await pluginLoadResource(common.HookClient.AddSpriteSheet, "spritesheets");
+      await pluginLoadResource(common.HookClient.AddGui, "gui");
+      await pluginLoadResource(common.HookClient.AddSound, "sounds");
       this.renderer.options = {
         selector: "#rpg",
         selectorCanvas: "#canvas",
@@ -43435,7 +43517,7 @@ void main(void)
           });
         }
       }
-      this.controls = new KeyboardControls(this);
+      this.controls = this.context.inject(KeyboardControls);
     }
     addResource(resourceClass, cb) {
       let array2 = resourceClass;
@@ -43544,7 +43626,7 @@ void main(void)
           }
         }
         const envUrl = this.envs.VITE_SERVER_URL;
-        this.connection(serverUri.url ? serverUri.url + ":" + serverUri.port : envUrl ? envUrl : void 0);
+        await this.connection(serverUri.url ? serverUri.url + ":" + serverUri.port : envUrl ? envUrl : void 0);
       }
     }
     /**
@@ -43634,7 +43716,7 @@ void main(void)
      * @returns {void}
      * @memberof RpgClientEngine
      */
-    connection(uri) {
+    async connection(uri) {
       const {
         standalone
       } = this.gameEngine;
@@ -43661,12 +43743,19 @@ void main(void)
       this.socket.on("connect_error", (err) => {
         common.RpgPlugin.emit(common.HookClient.ConnectedError, [this, err, this.socket], true);
       });
-      this.socket.on("preLoadScene", (name) => {
-        if (this.lastScene == name) {
+      this.socket.on("preLoadScene", ({
+        id,
+        reconnect
+      }) => {
+        if (this.lastScene == id) {
           return;
         }
-        this.lastScene = name;
-        this.renderer.transitionScene(name);
+        this.lastScene = id;
+        this.renderer.transitionScene(id);
+        if (reconnect) {
+          this.roomJoin.next("");
+          this.roomJoin.complete();
+        }
       });
       this.socket.on(SocketEvents.GameReload, () => {
         window.location.reload();
@@ -43677,7 +43766,7 @@ void main(void)
       }) => {
         this.renderer.loadScene(name, data);
       });
-      this.socket.on(SocketEvents.ChangeServer, ({
+      this.socket.on(SocketEvents.ChangeServer, async ({
         url: url2,
         port
       }) => {
@@ -43849,7 +43938,7 @@ void main(void)
       });
       RpgGui._setSocket(this.socket);
       if (standalone) {
-        this.socket.connection({
+        await this.socket.connection({
           auth: {
             token: this.session
           }
@@ -43994,6 +44083,13 @@ void main(void)
       RpgSound.clear();
     }
   }
+  let instanceContext = null;
+  function inject(service, args = []) {
+    return instanceContext.inject(service, args);
+  }
+  function setInject(context2) {
+    instanceContext = context2;
+  }
   const clientEntryPoint = (modules, options) => {
     if (!options.globalConfig)
       options.globalConfig = {};
@@ -44034,9 +44130,9 @@ void main(void)
         engine: relationsEngine
       }
     });
-    const gameEngine = new GameEngineClient();
-    const clientEngine = new RpgClientEngine(gameEngine, options);
-    return clientEngine;
+    const context2 = new common.InjectContext();
+    setInject(context2);
+    return context2.inject(RpgClientEngine, [options]);
   };
   const RMSpritesheet = (framesWidth, framesHeight, frameStand = 1) => {
     const frameY = (direction) => {
@@ -44159,6 +44255,27 @@ void main(void)
     }, []);
     return react.useSyncExternalStore(subscribe, () => currentPlayerRef.current);
   };
+  const useEventPropagator = () => {
+    const ref = react.useRef(null);
+    react.useEffect(() => {
+      if (ref.current) {
+        const element = ref.current;
+        const eventListeners = {};
+        const renderer = inject(RpgRenderer);
+        EVENTS_MAP.MouseEvent.forEach((eventType) => {
+          const listener = (event) => renderer.propagateEvent(event);
+          element.addEventListener(eventType, listener);
+          eventListeners[eventType] = listener;
+        });
+        return () => {
+          EVENTS_MAP.MouseEvent.forEach((eventType) => {
+            element.removeEventListener(eventType, eventListeners[eventType]);
+          });
+        };
+      }
+    }, [ref]);
+    return ref;
+  };
   class ReactGui {
     //private _tooltips: BehaviorSubject<any[]> = new BehaviorSubject([] as any)
     constructor(rootEl, parentGui) {
@@ -44222,6 +44339,7 @@ void main(void)
     ReactGui,
     RpgReactContext,
     useCurrentPlayer,
+    useEventPropagator,
     useObjects,
     useStore
   }, Symbol.toStringTag, { value: "Module" }));
@@ -44264,11 +44382,13 @@ void main(void)
   exports2.Animation = Animation$1;
   exports2.AnimationClass = Animation;
   exports2.Ease = Ease;
+  exports2.KeyboardControls = KeyboardControls;
   exports2.Presets = AnimationSpritesheet;
   exports2.RpgClientEngine = RpgClientEngine;
   exports2.RpgComponent = RpgComponent;
   exports2.RpgGlobalSound = howler.Howler;
   exports2.RpgGui = RpgGui;
+  exports2.RpgRenderer = RpgRenderer;
   exports2.RpgResource = RpgResource;
   exports2.RpgScene = Scene$1;
   exports2.RpgSceneMap = SceneMap;
@@ -44280,6 +44400,7 @@ void main(void)
   exports2.Timeline = Timeline;
   exports2.World = World;
   exports2.entryPoint = clientEntryPoint;
+  exports2.inject = inject;
   exports2.room = room;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });