@rpgjs/client 4.0.2 → 4.0.4

package/browser/rpg.client.umd.cjs

@@ -1,6 +1,6 @@
 (function(global2, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@rpgjs/common"), require("rxjs"), require("vue")) : typeof define === "function" && define.amd ? define(["exports", "@rpgjs/common", "rxjs", "vue"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.RpgClient = {}, global2.common, global2.rxjs, global2.Vue));
-})(this, function(exports2, common, rxjs, vue) {
+  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) {
   "use strict";
   class GameEngineClient extends common.RpgCommonGame {
     constructor() {
@@ -176,13 +176,11 @@
       GameEngineClient.toArray(params, "polygon");
       const isMe = () => id == this.playerId;
       let logic;
-      let propName = "_objects";
       const createObsForObject = (data) => {
         this._obsObjectsDeleteNotifier$[id] = new rxjs.Subject();
         this._obsObjects[id] = new rxjs.BehaviorSubject(data);
       };
       if (isShape) {
-        propName = "_shapes";
         logic = this.world.getShape(id);
         if (!logic) {
           logic = this.addShape(params);
@@ -240,6 +238,11 @@
         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,
         ...{
@@ -247,7 +250,6 @@
         }
       });
       this._obsObjects[id].next(newObject);
-      return newObject;
     }
   }
   const keyCodeTable = {
@@ -3726,7 +3728,7 @@ Deprecated since v${version2}`);
     return { r: e(r2.r, 0, 255), g: e(r2.g, 0, 255), b: e(r2.b, 0, 255), a: e(r2.a) };
   }, o$1 = function(r2) {
     return { r: n(r2.r), g: n(r2.g), b: n(r2.b), a: n(r2.a, 3) };
-  }, i$1 = /^#([0-9a-f]{3,8})$/i, s = function(r2) {
+  }, i$2 = /^#([0-9a-f]{3,8})$/i, s = function(r2) {
     var t2 = r2.toString(16);
     return t2.length < 2 ? "0" + t2 : t2;
   }, h = function(r2) {
@@ -3747,11 +3749,11 @@ Deprecated since v${version2}`);
   }, c$1 = function(r2) {
     return { h: (t2 = h(r2)).h, s: (u2 = (200 - (n2 = t2.s)) * (e2 = t2.v) / 100) > 0 && u2 < 200 ? n2 * e2 / 100 / (u2 <= 100 ? u2 : 200 - u2) * 100 : 0, l: u2 / 2, a: t2.a };
     var t2, n2, e2, u2;
-  }, l = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, p = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, v$1 = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, m$1 = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, y = { string: [[function(r2) {
-    var t2 = i$1.exec(r2);
+  }, l = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, p = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, v$1 = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, m$2 = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, y = { string: [[function(r2) {
+    var t2 = i$2.exec(r2);
     return t2 ? (r2 = t2[1]).length <= 4 ? { r: parseInt(r2[0] + r2[0], 16), g: parseInt(r2[1] + r2[1], 16), b: parseInt(r2[2] + r2[2], 16), a: 4 === r2.length ? n(parseInt(r2[3] + r2[3], 16) / 255, 2) : 1 } : 6 === r2.length || 8 === r2.length ? { r: parseInt(r2.substr(0, 2), 16), g: parseInt(r2.substr(2, 2), 16), b: parseInt(r2.substr(4, 2), 16), a: 8 === r2.length ? n(parseInt(r2.substr(6, 2), 16) / 255, 2) : 1 } : null : null;
   }, "hex"], [function(r2) {
-    var t2 = v$1.exec(r2) || m$1.exec(r2);
+    var t2 = v$1.exec(r2) || m$2.exec(r2);
     return t2 ? t2[2] !== t2[4] || t2[4] !== t2[6] ? null : a({ r: Number(t2[1]) / (t2[2] ? 100 / 255 : 1), g: Number(t2[3]) / (t2[4] ? 100 / 255 : 1), b: Number(t2[5]) / (t2[6] ? 100 / 255 : 1), a: void 0 === t2[7] ? 1 : Number(t2[7]) / (t2[8] ? 100 : 1) }) : null;
   }, "rgb"], [function(t2) {
     var n2 = l.exec(t2) || p.exec(t2);
@@ -27619,7 +27621,7 @@ ${e2}`);
       return t2.plugins.tilemap;
     }
   };
-  const m = {
+  const m$1 = {
     /** The default number of textures per tilemap in a tilemap composite. */
     TEXTURES_PER_TILEMAP: 16,
     /**
@@ -28019,7 +28021,7 @@ ${e2}`);
      *  will work equivalently.
      */
     constructor(t2) {
-      super(), this.tileAnim = null, this.lastModifiedTilemap = null, this.modificationMarker = 0, this.shadowColor = new Float32Array([0, 0, 0, 0.5]), this._globalMat = null, this.setBitmaps = this.tileset, this.tileset(t2), this.texturesPerTilemap = m.TEXTURES_PER_TILEMAP;
+      super(), this.tileAnim = null, this.lastModifiedTilemap = null, this.modificationMarker = 0, this.shadowColor = new Float32Array([0, 0, 0, 0.5]), this._globalMat = null, this.setBitmaps = this.tileset, this.tileset(t2), this.texturesPerTilemap = m$1.TEXTURES_PER_TILEMAP;
     }
     /**
      * This will preinitialize the tilesets of the layered tilemaps.
@@ -28038,7 +28040,7 @@ ${e2}`);
         );
       for (let a2 = i2; a2 < s2; a2++) {
         const u2 = new k$1(t2.slice(a2 * e2, (a2 + 1) * e2));
-        u2.compositeParent = true, u2.offsetX = m.TEXTILE_DIMEN, u2.offsetY = m.TEXTILE_DIMEN, this.addChild(u2);
+        u2.compositeParent = true, u2.offsetX = m$1.TEXTILE_DIMEN, u2.offsetY = m$1.TEXTILE_DIMEN, this.addChild(u2);
       }
       return this;
     }
@@ -28127,7 +28129,7 @@ ${e2}`);
               break;
             }
           }
-          a2 || (a2 = new k$1(t2.baseTexture), a2.compositeParent = true, a2.offsetX = m.TEXTILE_DIMEN, a2.offsetY = m.TEXTILE_DIMEN, this.addChild(a2));
+          a2 || (a2 = new k$1(t2.baseTexture), a2.compositeParent = true, a2.offsetX = m$1.TEXTILE_DIMEN, a2.offsetY = m$1.TEXTILE_DIMEN, this.addChild(a2));
         }
         a2.tile(
           t2,
@@ -28352,7 +28354,7 @@ void main(void)
   class st extends ObjectRenderer {
     /** @param renderer - The managing renderer */
     constructor(t2) {
-      super(t2), this.tileAnim = [0, 0], this.ibLen = 0, this.indexBuffer = null, this.textiles = [], this.shader = new Q$1(m.TEXTURES_PER_TILEMAP), this.indexBuffer = new Buffer$3(void 0, true, true), this.checkIndexBuffer(2e3), this.makeTextiles();
+      super(t2), this.tileAnim = [0, 0], this.ibLen = 0, this.indexBuffer = null, this.textiles = [], this.shader = new Q$1(m$1.TEXTURES_PER_TILEMAP), this.indexBuffer = new Buffer$3(void 0, true, true), this.checkIndexBuffer(2e3), this.makeTextiles();
     }
     /**
     * Binds the tile textures to the renderer, and updates the tilemap shader's `uSamplerSize` uniform.
@@ -28363,8 +28365,8 @@ void main(void)
     * @param textures - The tile textures being bound.
     */
     bindTileTextures(t2, e2) {
-      const i2 = e2.length, s2 = this.shader, a2 = m.TEXTURES_PER_TILEMAP, u2 = s2.uniforms.uSamplerSize;
-      if (!(i2 > m.TEXTILE_UNITS * a2)) {
+      const i2 = e2.length, s2 = this.shader, a2 = m$1.TEXTURES_PER_TILEMAP, u2 = s2.uniforms.uSamplerSize;
+      if (!(i2 > m$1.TEXTILE_UNITS * a2)) {
         for (let l2 = 0; l2 < e2.length; l2++) {
           const h2 = e2[l2];
           if (!h2 || !h2.valid)
@@ -28396,7 +28398,7 @@ void main(void)
       const i2 = t2 * 6;
       i2 <= this.ibLen || (this.ibLen = i2, this.indexBuffer.update(createIndicesForQuads(
         t2,
-        m.use32bitIndex ? new Uint32Array(t2 * 6) : void 0
+        m$1.use32bitIndex ? new Uint32Array(t2 * 6) : void 0
       )));
     }
     /** Makes textile resources and initializes {@link TileRenderer.textiles}. */
@@ -28408,7 +28410,7 @@ void main(void)
     type: ExtensionType.RendererPlugin,
     ref: st
   });
-  m.use32bitIndex = true;
+  m$1.use32bitIndex = true;
   class TileLayer extends CommonLayer {
     constructor(layer, tileSets, map2) {
       super(layer, map2);
@@ -36158,14 +36160,7 @@ void main(void)
   function render(_ctx, _cache) {
     return vue.openBlock(), vue.createElementBlock(
       "div",
-      {
-        onPointerdown: _cache[0] || (_cache[0] = ($event) => _ctx.propagate("pointerdown", $event)),
-        onPointermove: _cache[1] || (_cache[1] = ($event) => _ctx.propagate("pointermove", $event)),
-        onPointerleave: _cache[2] || (_cache[2] = ($event) => _ctx.propagate("pointerleave", $event)),
-        onPointerover: _cache[3] || (_cache[3] = ($event) => _ctx.propagate("pointerover", $event)),
-        onPointercancel: _cache[4] || (_cache[4] = ($event) => _ctx.propagate("pointercancel", $event)),
-        onPointerup: _cache[5] || (_cache[5] = ($event) => _ctx.propagate("pointerup", $event))
-      },
+      {},
       [(vue.openBlock(true), vue.createElementBlock(
         vue.Fragment,
         null,
@@ -36237,317 +36232,25 @@ void main(void)
       /* HYDRATE_EVENTS */
     );
   }
-  class Gui {
-    constructor() {
-      this.gui = {};
-    }
-    /** @internal */
-    _initalize(clientEngine) {
-      this.clientEngine = clientEngine;
-      this.renderer = clientEngine.renderer;
-      this.gameEngine = clientEngine.gameEngine;
-      const self2 = this;
+  class VueGui {
+    constructor(rootEl, parentGui) {
+      this.parentGui = parentGui;
+      this.clientEngine = parentGui.clientEngine;
+      this.renderer = this.clientEngine.renderer;
+      this.gameEngine = this.clientEngine.gameEngine;
       const {
         gui
-      } = this.renderer.options;
-      const selectorGui = this.renderer.guiEl;
+      } = parentGui;
       const obj = {
-        /* template: `
-             <div 
-                 @pointerdown="propagate('pointerdown', $event)"
-                 @pointermove="propagate('pointermove', $event)"
-                 @pointerleave="propagate('pointerleave', $event)"
-                 @pointerover="propagate('pointerover', $event)"
-                 @pointercancel="propagate('pointercancel', $event)"
-                 @pointerup="propagate('pointerup', $event)"
-             >
-                 <template v-for="ui in fixedGui">
-                     <component :is="ui.name" v-bind="ui.data" v-if="ui.display"></component>
-                 </template>
-                 <div id="tooltips" style="position: absolute; top: 0; left: 0;">
-                     <template v-for="ui in attachedGui">
-                         <template v-if="ui.display">
-                             <div v-for="tooltip of tooltipFilter(tooltips, ui)" :style="tooltipPosition(tooltip.position)">
-                                 <component :is="ui.name" v-bind="{ ...ui.data, spriteData: tooltip }" :ref="ui.name"></component>
-                             </div>
-                         </template>
-                     </template>
-                 </div>
-             </div>
-         `,*/
         render,
         data() {
           return {
-            gui,
+            gui: {},
             tooltips: []
           };
         },
         provide: () => {
-          return {
-            /** 
-             * Recovery of the current scene
-             * 
-             * ```js
-             * export default {
-             *      inject: ['rpgScene'],
-             *      mounted() {
-             *          const scene = this.rpgScene()
-             *          scene.stopInputs()
-             *      }
-             * }
-             * ``` 
-             * 
-             * @prop {Function returns RpgScene} [rpgScene]
-             * @memberof VueInject
-             * */
-            rpgScene: this.renderer.getScene.bind(this.renderer),
-            /** 
-            * Retrieve the main container of the game
-            * 
-            * ```js
-            * export default {
-            *      inject: ['rpgStage'],
-            *      mounted() {
-            *          const blur = new PIXI.BlurFilter()
-                       this.rpgStage.filters = [blur]
-            *      }
-            * }
-            * ``` 
-            * 
-            * @prop {PIXI.Container} [rpgStage]
-            * @memberof VueInject
-            * */
-            rpgStage: this.renderer.stage,
-            /** 
-             * Listen to all the objects present in the room (events and players)
-             * 
-             * ```js
-             * export default {
-             *      inject: ['rpgObjects'],
-             *      mounted() {
-             *          this.obs = this.rpgObjects.subscribe((objects) => {
-             *              for (let id in objects) {
-             *                  const obj = objects[id]
-             *                  console.log(obj.object, obj.paramsChanged)
-             *              }
-             *          })
-             *      },
-             *      unmounted() {
-             *          this.obs.unsubscribe()
-             *      }
-             * }
-             * ``` 
-             * 
-             * > remember to unsubscribe for memory leaks
-             * 
-             * It is an observable that returns an object: 
-             * 
-             * * the key is the object identifier
-             * * The value is an object comprising:
-             *      * `object`: The entire object
-             *      * `paramsChanged`: Only the representation of the properties that have been changed on this object
-             * 
-             * @prop {Observable<{ [objectId]: { object: object, paramsChanged: object } }>} [rpgObjects]
-             * @memberof VueInject
-             * */
-            rpgObjects: this.clientEngine.objects,
-            /** 
-             * Recovers and listens to the current player
-             * 
-             * ```js
-             * export default {
-             *      inject: ['rpgCurrentPlayer'],
-             *      mounted() {
-             *          this.obs = this.rpgCurrentPlayer.subscribe((obj) => {
-             *              console.log(obj.object, obj.paramsChanged)
-             *          })
-             *      },
-             *      unmounted() {
-             *          this.obs.unsubscribe()
-             *      }
-             * }
-             * ``` 
-             * 
-             * * `object`: The whole player
-             * * `paramsChanged`: Only the representation of the properties that have been changed on this player
-             * 
-             * @prop {Observable<{ object: object, paramsChanged: object }>} [rpgCurrentPlayer]
-             * @memberof VueInject
-             * */
-            rpgCurrentPlayer: this.clientEngine.objects.pipe(rxjs.map((objects) => objects[this.gameEngine.playerId])),
-            rpgGameEngine: this.gameEngine,
-            /** 
-             * Tell the server to close the GUI. 
-             * 
-             * It is a function with 2 parameters:
-             * * `name`: The name of the component
-             * * `data`: The data you want to pass to the server
-             * 
-             * ```js
-             * export default {
-             *      inject: ['rpgGuiClose'],
-             *      methods: {
-             *          close() {
-             *              this.rpgGuiClose('gui-name', {
-             *                  amount: 1000
-             *              })
-             *          }
-             *      }
-             * }
-             * ``` 
-             * 
-             * @prop {Function(name, data)} [rpgGuiClose]
-             * @memberof VueInject
-             * */
-            rpgGuiClose(name, data) {
-              const guiId = name || this.$options.name;
-              self2.socket.emit("gui.exit", {
-                guiId,
-                data
-              });
-            },
-            /** 
-             * Perform an interaction with the open GUI
-             * 
-             * It is a function with 2 parameters:
-             * * `guiId`: The name of the component/Gui
-             * * `name`: The name of the interaction (defined on the server side)
-             * * `data`: Data to be sent
-             * 
-             * ```js
-             * export default {
-             *      inject: ['rpgGuiInteraction'],
-             *      methods: {
-             *          changeGold() {
-             *              this.rpgGuiInteraction('gui-name', 'change-gold', {
-             *                  amount: 100
-             *              })
-             *          }
-             *      }
-             * }
-             * ``` 
-             * 
-             * @prop {Function(guiId, name, data = {})} [rpgGuiInteraction]
-             * @memberof VueInject
-             * */
-            rpgGuiInteraction: (guiId, name, data = {}) => {
-              this.socket.emit("gui.interaction", {
-                guiId,
-                name,
-                data
-              });
-            },
-            /** 
-             * Listen to the keys that are pressed on the keyboard
-             * 
-             * ```js
-             * export default {
-             *      inject: ['rpgKeypress'],
-             *      mounted() {
-             *          this.obs = this.rpgKeypress.subscribe(({ inputName, control }) => {
-             *              console.log(inputName) // "escape"
-             *              console.log(control.actionName) // "back"
-             *          })
-             *      },
-             *      unmounted() {
-             *          this.obs.unsubscribe()
-             *      }
-             * }
-             * ``` 
-             * 
-             * @prop {Observable<{ inputName: string, control: { actionName: string, options: any } }>} [rpgKeypress]
-             * @memberof VueInject
-             * */
-            rpgKeypress: this.clientEngine.keyChange.pipe(rxjs.map((name) => {
-              const control = this.clientEngine.controls.getControl(name);
-              return {
-                inputName: name,
-                control
-              };
-            })),
-            /** 
-             * Recovers the socket.
-             * 
-             * ```js
-             * export default {
-             *      inject: ['rpgSocket'],
-             *      mounted() {
-             *          const socket = this.rpgSocket()
-             *          socket.emit('foo', 'bar')
-             *      }
-             * }
-             * ``` 
-             * 
-             * @prop {Function returns RpgScene} [rpgSocket]
-             * @memberof VueInject
-             * */
-            rpgSocket: () => this.socket,
-            /** 
-             * The RpgGui object to control GUIs
-             * 
-             * ```js
-             * export default {
-             *      inject: ['rpgGui'],
-             *      mounted() {
-             *         const guis = this.rpgGui.getAll()
-             *      }
-             * }
-             * ``` 
-             * 
-             * @prop {RpgGui} [rpgGui]
-             * @memberof VueInject
-             * */
-            rpgGui: this,
-            /** 
-             * Equivalent to RpgSound
-             * 
-             * ```js
-             * export default {
-             *      inject: ['rpgSound'],
-             *      mounted() {
-             *         this.rpgSound.get('my-sound-id').play()
-             *      }
-             * }
-             * ``` 
-             * 
-             * @prop {RpgSound} [rpgSound]
-             * @memberof VueInject
-             * */
-            rpgSound: RpgSound,
-            /** 
-             * Find the game's image and sound library
-             * 
-             * ```js
-             * export default {
-             *      inject: ['rpgResource'],
-             *      mounted() {
-             *         const resourceImage = this.rpgResource.spritesheets.get('image_id')
-             *         const resourceSound = this.rpgResource.sounds.get('sound_id')
-             *      }
-             * }
-             * ``` 
-             * 
-             * @prop { { spritesheets: Map, sounds: Map } } [rpgResource]
-             * @memberof VueInject
-             * */
-            rpgResource: RpgResource,
-            /** 
-             * Get RpgClientEngine instance
-             * 
-             * ```js
-             * export default {
-             *      inject: ['rpgEngine'],
-             *      mounted() {
-             *         const vueInstance = this.rpgEngine.vueInstance
-             *      }
-             * }
-             * ``` 
-             * 
-             * @prop {RpgClientEngine} [rpgEngine]
-             * @memberof VueInject
-             * */
-            rpgEngine: this.clientEngine
-          };
+          return parentGui.getInjectObject();
         },
         computed: {
           fixedGui() {
@@ -36558,43 +36261,366 @@ void main(void)
           }
         },
         methods: {
-          propagate: (type, event) => {
-            this.renderer.canvas.dispatchEvent(new MouseEvent(type, event));
-          },
-          tooltipPosition: (position) => {
-            const scene = this.renderer.getScene();
-            const viewport = scene == null ? void 0 : scene.viewport;
-            if (viewport) {
-              const left = position.x - viewport.left;
-              const top = position.y - viewport.top;
-              return {
-                transform: `translate(${left}px,${top}px)`
-              };
-            }
-          },
-          tooltipFilter(sprites, ui) {
-            return sprites.filter((tooltip) => tooltip.guiDisplay);
-          }
+          tooltipPosition: parentGui.tooltipPosition.bind(parentGui),
+          tooltipFilter: parentGui.tooltipFilter.bind(parentGui)
+        },
+        mounted() {
         }
       };
       this.app = vue.createApp(obj);
+      const guiVue = Object.values(gui).filter((ui) => !common.Utils.isFunction(ui));
+      for (let ui of guiVue) {
+        this.app.component(ui.name, ui.gui);
+      }
+      this.vm = this.app.mount(rootEl);
+      this.renderer.app = this.app;
+      this.renderer.vm = this.vm;
+    }
+    _setSceneReady() {
+      var _a;
+      this.parentGui.listenTooltipObjects.subscribe((tooltips) => {
+        this.vm.tooltips = [...tooltips];
+      });
+      (_a = this.parentGui.currentScene) == null ? void 0 : _a.objectsMoving.next({});
+    }
+    set gui(val) {
+      for (let key in val) {
+        if (val[key].isFunction)
+          continue;
+        this.vm.gui[key] = val[key];
+      }
+      this.vm.gui = Object.assign({}, this.vm.gui);
+    }
+  }
+  const {
+    elementToPositionAbsolute: elementToPositionAbsolute$1
+  } = common.Utils;
+  const COMPONENT_LIBRARIES = [VueGui];
+  class Gui {
+    constructor() {
+      this.gui = {};
+      this.currentScene = null;
+      this.librariesInstances = [];
+    }
+    async _initialize(clientEngine, guiEl) {
+      var _a;
+      this.clientEngine = clientEngine;
+      this.renderer = clientEngine.renderer;
+      this.gameEngine = clientEngine.gameEngine;
+      const {
+        gui
+      } = this.renderer.options;
       for (let ui of gui) {
-        this.app.component(ui.name, ui);
-        this.gui[ui.name] = {
+        let name = ui.name;
+        if (common.Utils.isFunction(ui)) {
+          name = common.Utils.camelToKebab(name);
+        }
+        this.gui[name] = {
           data: ui.data,
           attachToSprite: ui.rpgAttachToSprite,
           display: false,
-          name: ui.name
+          name,
+          isFunction: common.Utils.isFunction(ui),
+          gui: ui
         };
       }
-      this.vm = this.app.mount(selectorGui);
-      this.vm.gui = this.gui;
-      this.renderer.app = this.app;
-      this.renderer.vm = this.vm;
+      if ((_a = this.clientEngine.envs) == null ? void 0 : _a["VITE_REACT"]) {
+        console.warn("[RPGJS] React GUI is experimental feature. So, its use may change over time. Not yet in production");
+        COMPONENT_LIBRARIES.push(await Promise.resolve().then(() => React).then((m2) => m2.ReactGui));
+      }
+      const propagateEvents = (el) => {
+        const events = ["click", "mousedown", "mouseup", "mousemove", "mouseenter", "mouseleave", "mouseover", "mouseout", "contextmenu", "pointerdown", "pointerup", "pointermove", "pointerenter", "pointerleave", "pointerover", "pointerout", "pointerupoutside", "pointercancel", "touchstart", "touchend", "touchmove", "touchcancel", "wheel", "keydown", "keyup", "keypress", "keydownoutside", "keyupoutside", "keypressoutside"];
+        for (let type of events) {
+          el.addEventListener(type, (e2) => {
+            this.renderer.canvas.dispatchEvent(new MouseEvent(type, e2));
+          });
+        }
+      };
+      for (let componentClass of COMPONENT_LIBRARIES) {
+        const el = document.createElement("div");
+        elementToPositionAbsolute$1(el);
+        el.style["pointer-events"] = "auto";
+        propagateEvents(el);
+        guiEl.appendChild(el);
+        this.librariesInstances.push(new componentClass(el, this));
+      }
+      guiEl.style["pointer-events"] = "none";
+    }
+    _setSceneReady(scene) {
+      this.currentScene = scene;
+      this.librariesInstances.forEach((instance) => {
+        if (instance._setSceneReady)
+          instance._setSceneReady(scene);
+      });
     }
-    /** @internal */
-    update(logicObjects) {
-      this.vm.tooltips = Object.values(logicObjects).map((object) => object.object);
+    getInjectObject() {
+      const self2 = this;
+      return {
+        /** 
+         * Recovery of the current scene
+         * 
+         * ```js
+         * export default {
+         *      inject: ['rpgScene'],
+         *      mounted() {
+         *          const scene = this.rpgScene()
+         *          scene.stopInputs()
+         *      }
+         * }
+         * ``` 
+         * 
+         * @prop {Function returns RpgScene} [rpgScene]
+         * @memberof VueInject
+         * */
+        rpgScene: this.renderer.getScene.bind(this.renderer),
+        /** 
+        * Retrieve the main container of the game
+        * 
+        * ```js
+        * export default {
+        *      inject: ['rpgStage'],
+        *      mounted() {
+        *          const blur = new PIXI.BlurFilter()
+                   this.rpgStage.filters = [blur]
+        *      }
+        * }
+        * ``` 
+        * 
+        * @prop {PIXI.Container} [rpgStage]
+        * @memberof VueInject
+        * */
+        rpgStage: this.renderer.stage,
+        /** 
+         * Listen to all the objects present in the room (events and players)
+         * 
+         * ```js
+         * export default {
+         *      inject: ['rpgObjects'],
+         *      mounted() {
+         *          this.obs = this.rpgObjects.subscribe((objects) => {
+         *              for (let id in objects) {
+         *                  const obj = objects[id]
+         *                  console.log(obj.object, obj.paramsChanged)
+         *              }
+         *          })
+         *      },
+         *      unmounted() {
+         *          this.obs.unsubscribe()
+         *      }
+         * }
+         * ``` 
+         * 
+         * > remember to unsubscribe for memory leaks
+         * 
+         * It is an observable that returns an object: 
+         * 
+         * * the key is the object identifier
+         * * The value is an object comprising:
+         *      * `object`: The entire object
+         *      * `paramsChanged`: Only the representation of the properties that have been changed on this object
+         * 
+         * @prop {Observable<{ [objectId]: { object: object, paramsChanged: object } }>} [rpgObjects]
+         * @memberof VueInject
+         * */
+        rpgObjects: this.clientEngine.objects,
+        /** 
+         * Recovers and listens to the current player
+         * 
+         * ```js
+         * export default {
+         *      inject: ['rpgCurrentPlayer'],
+         *      mounted() {
+         *          this.obs = this.rpgCurrentPlayer.subscribe((obj) => {
+         *              console.log(obj.object, obj.paramsChanged)
+         *          })
+         *      },
+         *      unmounted() {
+         *          this.obs.unsubscribe()
+         *      }
+         * }
+         * ``` 
+         * 
+         * * `object`: The whole player
+         * * `paramsChanged`: Only the representation of the properties that have been changed on this player
+         * 
+         * @prop {Observable<{ object: object, paramsChanged: object }>} [rpgCurrentPlayer]
+         * @memberof VueInject
+         * */
+        rpgCurrentPlayer: this.clientEngine.objects.pipe(rxjs.map((objects) => objects[this.gameEngine.playerId]), rxjs.filter((player) => !!player)),
+        rpgGameEngine: this.gameEngine,
+        /** 
+         * Tell the server to close the GUI. 
+         * 
+         * It is a function with 2 parameters:
+         * * `name`: The name of the component
+         * * `data`: The data you want to pass to the server
+         * 
+         * ```js
+         * export default {
+         *      inject: ['rpgGuiClose'],
+         *      methods: {
+         *          close() {
+         *              this.rpgGuiClose('gui-name', {
+         *                  amount: 1000
+         *              })
+         *          }
+         *      }
+         * }
+         * ``` 
+         * 
+         * @prop {Function(name, data)} [rpgGuiClose]
+         * @memberof VueInject
+         * */
+        rpgGuiClose(name, data) {
+          var _a;
+          const guiId = name || ((_a = this.$options) == null ? void 0 : _a.name);
+          self2.socket.emit("gui.exit", {
+            guiId,
+            data
+          });
+        },
+        /** 
+         * Perform an interaction with the open GUI
+         * 
+         * It is a function with 2 parameters:
+         * * `guiId`: The name of the component/Gui
+         * * `name`: The name of the interaction (defined on the server side)
+         * * `data`: Data to be sent
+         * 
+         * ```js
+         * export default {
+         *      inject: ['rpgGuiInteraction'],
+         *      methods: {
+         *          changeGold() {
+         *              this.rpgGuiInteraction('gui-name', 'change-gold', {
+         *                  amount: 100
+         *              })
+         *          }
+         *      }
+         * }
+         * ``` 
+         * 
+         * @prop {Function(guiId, name, data = {})} [rpgGuiInteraction]
+         * @memberof VueInject
+         * */
+        rpgGuiInteraction: (guiId, name, data = {}) => {
+          this.socket.emit("gui.interaction", {
+            guiId,
+            name,
+            data
+          });
+        },
+        /** 
+         * Listen to the keys that are pressed on the keyboard
+         * 
+         * ```js
+         * export default {
+         *      inject: ['rpgKeypress'],
+         *      mounted() {
+         *          this.obs = this.rpgKeypress.subscribe(({ inputName, control }) => {
+         *              console.log(inputName) // "escape"
+         *              console.log(control.actionName) // "back"
+         *          })
+         *      },
+         *      unmounted() {
+         *          this.obs.unsubscribe()
+         *      }
+         * }
+         * ``` 
+         * 
+         * @prop {Observable<{ inputName: string, control: { actionName: string, options: any } }>} [rpgKeypress]
+         * @memberof VueInject
+         * */
+        rpgKeypress: this.clientEngine.keyChange.pipe(rxjs.map((name) => {
+          const control = this.clientEngine.controls.getControl(name);
+          return {
+            inputName: name,
+            control
+          };
+        })),
+        /** 
+         * Recovers the socket.
+         * 
+         * ```js
+         * export default {
+         *      inject: ['rpgSocket'],
+         *      mounted() {
+         *          const socket = this.rpgSocket()
+         *          socket.emit('foo', 'bar')
+         *      }
+         * }
+         * ``` 
+         * 
+         * @prop {Function returns RpgScene} [rpgSocket]
+         * @memberof VueInject
+         * */
+        rpgSocket: () => this.socket,
+        /** 
+         * The RpgGui object to control GUIs
+         * 
+         * ```js
+         * export default {
+         *      inject: ['rpgGui'],
+         *      mounted() {
+         *         const guis = this.rpgGui.getAll()
+         *      }
+         * }
+         * ``` 
+         * 
+         * @prop {RpgGui} [rpgGui]
+         * @memberof VueInject
+         * */
+        rpgGui: this,
+        /** 
+         * Equivalent to RpgSound
+         * 
+         * ```js
+         * export default {
+         *      inject: ['rpgSound'],
+         *      mounted() {
+         *         this.rpgSound.get('my-sound-id').play()
+         *      }
+         * }
+         * ``` 
+         * 
+         * @prop {RpgSound} [rpgSound]
+         * @memberof VueInject
+         * */
+        rpgSound: RpgSound,
+        /** 
+         * Find the game's image and sound library
+         * 
+         * ```js
+         * export default {
+         *      inject: ['rpgResource'],
+         *      mounted() {
+         *         const resourceImage = this.rpgResource.spritesheets.get('image_id')
+         *         const resourceSound = this.rpgResource.sounds.get('sound_id')
+         *      }
+         * }
+         * ``` 
+         * 
+         * @prop { { spritesheets: Map, sounds: Map } } [rpgResource]
+         * @memberof VueInject
+         * */
+        rpgResource: RpgResource,
+        /** 
+         * Get RpgClientEngine instance
+         * 
+         * ```js
+         * export default {
+         *      inject: ['rpgEngine'],
+         *      mounted() {
+         *         const vueInstance = this.rpgEngine.vueInstance
+         *      }
+         * }
+         * ``` 
+         * 
+         * @prop {RpgClientEngine} [rpgEngine]
+         * @memberof VueInject
+         * */
+        rpgEngine: this.clientEngine
+      };
     }
     /** @internal */
     _setSocket(socket) {
@@ -36629,24 +36655,26 @@ void main(void)
       for (let key in obj) {
         guiObj[key] = obj[key];
       }
-      this.vm.gui = Object.assign({}, this.vm.gui);
+      this.librariesInstances.forEach((instance) => {
+        instance.gui = Object.assign({}, this.gui);
+      });
     }
     /**
-     * Get a GUI. You retrieve GUI data and information whether it is displayed or not
-     * 
-     * ```ts
-     * import { RpgGui } from '@rpgjs/client'
-     * 
-     * const gui = RpgGui.get('my-gui') 
-     * console.log(gui.display) // false
-     * ```
-     * 
-     * @title Get a GUI
-     * @method RpgGui.get(id)
-     * @param {string} id 
-     * @returns { { data: any, display: boolean } }
-     * @memberof RpgGui
-     */
+    * Get a GUI. You retrieve GUI data and information whether it is displayed or not
+    * 
+    * ```ts
+    * import { RpgGui } from '@rpgjs/client'
+    * 
+    * const gui = RpgGui.get('my-gui') 
+    * console.log(gui.display) // false
+    * ```
+    * 
+    * @title Get a GUI
+    * @method RpgGui.get(id)
+    * @param {string} id 
+    * @returns { { data: any, display: boolean } }
+    * @memberof RpgGui
+    */
     get(id) {
       if (typeof id != "string") {
         id = id.name;
@@ -36735,6 +36763,31 @@ void main(void)
     clear() {
       this.gui = {};
     }
+    /** @internal */
+    tooltipPosition(position) {
+      const scene = this.renderer.getScene();
+      const viewport = scene == null ? void 0 : scene.viewport;
+      if (viewport) {
+        const currentZoom = viewport.scale.x;
+        const left = (position.x - viewport.left) * currentZoom;
+        const top = (position.y - viewport.top) * currentZoom;
+        return {
+          transform: `translate(${left}px,${top}px)`
+        };
+      }
+      return {};
+    }
+    /** @internal */
+    tooltipFilter(sprites) {
+      return sprites.filter((tooltip) => tooltip.guiDisplay);
+    }
+    /** @internal */
+    get listenTooltipObjects() {
+      var _a;
+      return rxjs.combineLatest([this.clientEngine.gameEngine.all, (_a = this.currentScene) == null ? void 0 : _a.objectsMoving]).pipe(rxjs.map(([objects]) => {
+        return Object.values(objects).map((obj) => obj.object);
+      }));
+    }
   }
   const RpgGui = new Gui();
   let Scene$1 = class Scene {
@@ -36747,6 +36800,7 @@ void main(void)
         data: {},
         partial: {}
       });
+      this.objectsMoving = new rxjs.Subject();
       const {
         globalConfig
       } = this.game.clientEngine;
@@ -36756,6 +36810,7 @@ void main(void)
         ...globalConfig.inputs || {}
       };
       this.controls.setInputs(this.inputs || mergeInputs);
+      RpgGui._setSceneReady(this);
     }
     /**
      * Listen to all the synchronized values of the scene with the server
@@ -36814,6 +36869,7 @@ void main(void)
       };
       const renderObjects = this.objects;
       const sizeLogic = Object.values(logicObjects).length;
+      const objectMoving = {};
       for (let key in logicObjects) {
         const val = logicObjects[key].object;
         const valueChanged = logicObjects[key].paramsChanged;
@@ -36826,6 +36882,8 @@ void main(void)
             return;
           const ret = object.update(val, valueChanged, time, deltaRatio);
           this.triggerSpriteChanges(val, object, ret.moving);
+          if (ret.moving)
+            objectMoving[val.id] = val;
         }
       }
       if (sizeLogic < renderObjects.size) {
@@ -36839,7 +36897,9 @@ void main(void)
         animation.update(deltaRatio);
       }
       this.onDraw(time);
-      RpgGui.update(logicObjects);
+      if (Object.values(objectMoving).length) {
+        this.objectsMoving.next(objectMoving);
+      }
       common.RpgPlugin.emit(common.HookClient.SceneDraw, this);
     }
     /**
@@ -38151,7 +38211,14 @@ void main(void)
       return this.logic.guiDisplay;
     }
     set guiDisplay(val) {
+      var _a;
       this.logic.guiDisplay = val;
+      this.game.setObject((_a = this.logic) == null ? void 0 : _a.id, {
+        object: this.logic,
+        paramsChanged: {
+          guiDisplay: val
+        }
+      });
     }
     setPosition(smooth = true) {
       if (this.isShape) {
@@ -39192,6 +39259,9 @@ void main(void)
       this.clear().lineStyle(4, 16777215, 1).moveTo(40, 0).arc(0, 0, 40, 0, Math.PI * 2 * percent, false);
     }
   }
+  const {
+    elementToPositionAbsolute
+  } = common.Utils;
   class RpgRenderer {
     constructor(clientEngine) {
       this.clientEngine = clientEngine;
@@ -39275,8 +39345,9 @@ void main(void)
       this.canvasEl = this.selector.querySelector(this.options.selectorCanvas);
       if (!this.guiEl) {
         this.guiEl = document.createElement("div");
-        this.selector.appendChild(this.guiEl);
+        this.guiEl = this.selector.appendChild(this.guiEl);
       }
+      elementToPositionAbsolute(this.guiEl);
       if (!this.canvasEl) {
         this.selector.insertBefore(this.renderer.view, this.selector.firstChild);
         const [canvas] = document.querySelector(this.options.selector).children;
@@ -39289,7 +39360,7 @@ void main(void)
       this.fadeContainer.addChild(this.spinner);
       this.fadeContainer.visible = false;
       this.fadeContainer.alpha = 0;
-      RpgGui._initalize(this.clientEngine);
+      RpgGui._initialize(this.clientEngine, this.guiEl);
       this.resize();
     }
     /** @internal */
@@ -40162,8 +40233,8 @@ void main(void)
   };
   var writeUint8 = {};
   var constant$1 = writeUint8.uint8 = new Array(256);
-  for (var i = 0; i <= 255; i++) {
-    constant$1[i] = write0(i);
+  for (var i$1 = 0; i$1 <= 255; i$1++) {
+    constant$1[i$1] = write0(i$1);
   }
   function write0(type) {
     return function(encoder2) {
@@ -43987,6 +44058,131 @@ void main(void)
     spritesheets,
     sounds
   };
+  var createRoot;
+  var m = require$$0$1;
+  if ({}.NODE_ENV === "production") {
+    createRoot = m.createRoot;
+    m.hydrateRoot;
+  } else {
+    var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    createRoot = function(c2, o2) {
+      i.usingClientEntryPoint = true;
+      try {
+        return m.createRoot(c2, o2);
+      } finally {
+        i.usingClientEntryPoint = false;
+      }
+    };
+  }
+  function listenKeys(store, keys2, listener) {
+    let keysSet = /* @__PURE__ */ new Set([...keys2, void 0]);
+    return store.listen((value, changed) => {
+      if (keysSet.has(changed)) {
+        listener(value, changed);
+      }
+    });
+  }
+  function useStore(store, opts = {}) {
+    let subscribe = react.useCallback(
+      (onChange) => opts.keys ? listenKeys(store, opts.keys, onChange) : store.listen(onChange),
+      [opts.keys, store]
+    );
+    let get2 = store.get.bind(store);
+    return react.useSyncExternalStore(subscribe, get2, get2);
+  }
+  const RpgReactContext = react.createContext({});
+  const useObjects = () => {
+    const [objects, setObjects] = react.useState([]);
+    const {
+      rpgObjects
+    } = react.useContext(RpgReactContext);
+    react.useEffect(() => {
+      rpgObjects.pipe(rxjs.map((objects2) => Object.values(objects2).map((obj) => obj.object))).subscribe(setObjects);
+    }, []);
+    return objects;
+  };
+  const useCurrentPlayer = () => {
+    const {
+      rpgCurrentPlayer
+    } = react.useContext(RpgReactContext);
+    const currentPlayerRef = react.useRef({});
+    let _onChanges;
+    const subscribe = (onChanges) => {
+      _onChanges = onChanges;
+      return () => {
+        _onChanges = null;
+      };
+    };
+    react.useEffect(() => {
+      const ob$ = rpgCurrentPlayer.pipe(rxjs.map((player) => player.object), rxjs.tap((player) => currentPlayerRef.current = player));
+      const subscription = ob$.subscribe(() => {
+        _onChanges == null ? void 0 : _onChanges();
+      });
+      return () => subscription.unsubscribe();
+    }, []);
+    return react.useSyncExternalStore(subscribe, () => currentPlayerRef.current);
+  };
+  class ReactGui {
+    //private _tooltips: BehaviorSubject<any[]> = new BehaviorSubject([] as any)
+    constructor(rootEl, parentGui) {
+      this._gui = new rxjs.BehaviorSubject([]);
+      this.app = createRoot(rootEl);
+      this.clientEngine = parentGui.clientEngine;
+      this.renderer = this.clientEngine.renderer;
+      const GuiTooltip = (ui) => {
+        return () => {
+          const [_tooltip, setTooltip] = react.useState([]);
+          react.useEffect(() => {
+            var _a;
+            parentGui.listenTooltipObjects.subscribe(setTooltip);
+            (_a = parentGui.currentScene) == null ? void 0 : _a.objectsMoving.next({});
+          }, [parentGui.currentScene]);
+          return parentGui.tooltipFilter(_tooltip).map((sprite) => react.createElement("div", {
+            style: parentGui.tooltipPosition({
+              x: sprite.position.x,
+              y: sprite.position.y
+            }),
+            key: sprite.id
+          }, react.createElement(ui.gui, {
+            spriteData: sprite,
+            ...ui.data || {}
+          })));
+        };
+      };
+      const GuiWrapper = () => {
+        const [_gui, setGui] = react.useState([]);
+        react.useEffect(() => {
+          this._gui.subscribe((gui) => setGui(gui));
+        }, []);
+        return react.createElement(RpgReactContext.Provider, {
+          value: parentGui.getInjectObject()
+        }, ..._gui.filter((ui) => ui.display && !ui.attachToSprite).map((ui) => react.createElement(ui.gui, {
+          key: ui.name,
+          ...ui.data || {}
+        })), ..._gui.filter((ui) => ui.display && ui.attachToSprite).map((ui) => react.createElement("div", {
+          key: ui.name
+        }, react.createElement(GuiTooltip(ui)))));
+      };
+      this.app.render(react.createElement(GuiWrapper));
+    }
+    set gui(val) {
+      let array2 = [];
+      for (let key in val) {
+        if (!val[key].isFunction)
+          continue;
+        array2.push(val[key]);
+      }
+      this._gui.next(array2);
+    }
+  }
+  const React = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    ReactGui,
+    RpgReactContext,
+    useCurrentPlayer,
+    useObjects,
+    useStore
+  }, Symbol.toStringTag, { value: "Module" }));
   Object.defineProperty(exports2, "Control", {
     enumerable: true,
     get: () => common.Control
@@ -44040,6 +44236,8 @@ void main(void)
   exports2.Sound = Sound$1;
   exports2.Spritesheet = Spritesheet;
   exports2.Timeline = Timeline;
+  exports2.World = World;
   exports2.entryPoint = clientEntryPoint;
+  exports2.room = room;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });