@rpgjs/client 4.0.2 → 4.0.4

package/browser/rpg.client.js

@@ -1,7 +1,7 @@
-import { RpgCommonGame, GameSide, RpgCommonPlayer, Direction as Direction$1, DefaultInput, Utils, RpgPlugin, HookClient, transitionColor, RpgShape, RpgCommonMap, Scheduler, PrebuiltGui, loadModules } from "@rpgjs/common";
+import { RpgCommonGame, GameSide, RpgCommonPlayer, RpgShape, Direction as Direction$1, DefaultInput, Utils, RpgPlugin, HookClient, transitionColor, RpgCommonMap, Scheduler, PrebuiltGui, loadModules } from "@rpgjs/common";
 import { Control, Direction, HookClient as HookClient2, HookServer, Input, PrebuiltGui as PrebuiltGui2, RpgModule, RpgPlugin as RpgPlugin2, RpgCommonPlayer as RpgCommonPlayer2 } from "@rpgjs/common";
-import { BehaviorSubject, combineLatest, map as map$6, Subject, takeUntil, filter as filter$1, tap, finalize, distinctUntilChanged, forkJoin, lastValueFrom } from "rxjs";
-import { openBlock, createElementBlock, Fragment, renderList, createBlock, resolveDynamicComponent, normalizeProps, mergeProps, createCommentVNode, createElementVNode, normalizeStyle, createApp } from "vue";
+import { BehaviorSubject, combineLatest, map as map$6, Subject, filter as filter$1, takeUntil, tap, finalize, distinctUntilChanged, forkJoin, lastValueFrom } from "rxjs";
+import { createApp, openBlock, createElementBlock, Fragment, renderList, createBlock, resolveDynamicComponent, normalizeProps, mergeProps, createCommentVNode, createElementVNode, normalizeStyle } from "vue";
 class GameEngineClient extends RpgCommonGame {
   constructor() {
     super(GameSide.Client);
@@ -176,13 +176,11 @@ class GameEngineClient extends RpgCommonGame {
     GameEngineClient.toArray(params, "polygon");
     const isMe = () => id == this.playerId;
     let logic;
-    let propName = "_objects";
     const createObsForObject = (data) => {
       this._obsObjectsDeleteNotifier$[id] = new Subject();
       this._obsObjects[id] = new BehaviorSubject(data);
     };
     if (isShape) {
-      propName = "_shapes";
       logic = this.world.getShape(id);
       if (!logic) {
         logic = this.addShape(params);
@@ -240,6 +238,11 @@ class GameEngineClient extends RpgCommonGame {
       object: logic,
       paramsChanged
     };
+    this.setObject(id, newObject);
+    return newObject;
+  }
+  setObject(id, newObject) {
+    const propName = newObject.object instanceof RpgShape ? "_shapes" : "_objects";
     this[propName].next({
       ...this[propName].value,
       ...{
@@ -247,7 +250,6 @@ class GameEngineClient extends RpgCommonGame {
       }
     });
     this._obsObjects[id].next(newObject);
-    return newObject;
   }
 }
 const keyCodeTable = {
@@ -36158,14 +36160,7 @@ const _hoisted_1 = {
 function render(_ctx, _cache) {
   return openBlock(), 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))
-    },
+    {},
     [(openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -36237,317 +36232,25 @@ function render(_ctx, _cache) {
     /* 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(map$6((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(map$6((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 @@ class Gui {
         }
       },
       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 = createApp(obj);
+    const guiVue = Object.values(gui).filter((ui) => !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
+} = 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 (Utils.isFunction(ui)) {
+        name = Utils.camelToKebab(name);
+      }
+      this.gui[name] = {
         data: ui.data,
         attachToSprite: ui.rpgAttachToSprite,
         display: false,
-        name: ui.name
+        name,
+        isFunction: 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 import("./React-ab9e74c2.js").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(map$6((objects) => objects[this.gameEngine.playerId]), filter$1((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(map$6((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 @@ class Gui {
     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 @@ class Gui {
   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 combineLatest([this.clientEngine.gameEngine.all, (_a = this.currentScene) == null ? void 0 : _a.objectsMoving]).pipe(map$6(([objects]) => {
+      return Object.values(objects).map((obj) => obj.object);
+    }));
+  }
 }
 const RpgGui = new Gui();
 let Scene$1 = class Scene {
@@ -36747,6 +36800,7 @@ let Scene$1 = class Scene {
       data: {},
       partial: {}
     });
+    this.objectsMoving = new Subject();
     const {
       globalConfig
     } = this.game.clientEngine;
@@ -36756,6 +36810,7 @@ let Scene$1 = class Scene {
       ...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 @@ let Scene$1 = class Scene {
     };
     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 @@ let Scene$1 = class Scene {
           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 @@ let Scene$1 = class Scene {
       animation.update(deltaRatio);
     }
     this.onDraw(time);
-    RpgGui.update(logicObjects);
+    if (Object.values(objectMoving).length) {
+      this.objectsMoving.next(objectMoving);
+    }
     RpgPlugin.emit(HookClient.SceneDraw, this);
   }
   /**
@@ -38151,7 +38211,14 @@ class RpgComponent extends Container {
     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 @@ class SpinnerGraphic extends Graphics {
     this.clear().lineStyle(4, 16777215, 1).moveTo(40, 0).arc(0, 0, 40, 0, Math.PI * 2 * percent, false);
   }
 }
+const {
+  elementToPositionAbsolute
+} = Utils;
 class RpgRenderer {
   constructor(clientEngine) {
     this.clientEngine = clientEngine;
@@ -39275,8 +39345,9 @@ class RpgRenderer {
     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 @@ class RpgRenderer {
     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 */
@@ -44015,5 +44086,7 @@ export {
   Sound$1 as Sound,
   Spritesheet,
   Timeline,
-  clientEntryPoint as entryPoint
+  World,
+  clientEntryPoint as entryPoint,
+  room
 };