@rpgjs/vue 5.0.0-alpha.24 → 5.0.0-alpha.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/vue",
-  "version": "5.0.0-alpha.24",
+  "version": "5.0.0-alpha.25",
   "description": "Vue.js integration for RPGJS - Allows rendering Vue components over the game canvas",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,8 +22,8 @@
     "vue": "^3.2.25"
   },
   "dependencies": {
-    "@rpgjs/client": "5.0.0-alpha.24",
-    "@rpgjs/common": "5.0.0-alpha.24",
+    "@rpgjs/client": "5.0.0-alpha.25",
+    "@rpgjs/common": "5.0.0-alpha.25",
     "rxjs": "^7.8.2"
   },
   "devDependencies": {

package/dist/VueGui.d.ts

@@ -1,33 +0,0 @@
-import { Context } from '@rpgjs/client';
-export declare const VueGuiToken = "VueGuiToken";
-interface VueGuiOptions {
-    /** The HTML element where Vue components will be mounted */
-    mountElement?: HTMLElement | string;
-    /** Custom CSS selector for the mount element */
-    selector?: string;
-    /** Whether to create a new div element if none is found */
-    createIfNotFound?: boolean;
-}
-export declare class VueGui {
-    private context;
-    private options;
-    private clientEngine;
-    private parentGui;
-    private app;
-    private vm;
-    private socket;
-    constructor(context: Context, options?: VueGuiOptions);
-    mount(): void;
-    private getMountElement;
-    private getInjectObject;
-    private createObjectsObservable;
-    private createCurrentPlayerObservable;
-    private createKeypressObservable;
-    private createSoundService;
-    private propagateEvent;
-    private tooltipPosition;
-    private tooltipFilter;
-    _setSceneReady(): void;
-    set gui(val: any);
-}
-export {};

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export * from './VueGui';
-export * from './provider';

package/dist/index.js

@@ -1,3 +0,0 @@
-export { VueGui, VueGuiToken } from './index2.js';
-export { provideVueGui } from './index3.js';
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/index2.js

@@ -1,375 +0,0 @@
-import { createApp, createElementBlock, openBlock, createElementVNode, Fragment, renderList, createBlock, createCommentVNode, resolveDynamicComponent, normalizeProps, mergeProps, normalizeStyle } from 'vue';
-import { isFunction } from '@rpgjs/common';
-import { inject, RpgClientEngine, RpgGui } from '@rpgjs/client';
-import { Observable } from 'rxjs';
-
-const VueGuiToken = "VueGuiToken";
-const _hoisted_1 = {
-  id: "tooltips",
-  style: { "position": "absolute", "top": "0", "left": "0" }
-};
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock(
-    "div",
-    {},
-    [
-      (openBlock(true), createElementBlock(
-        Fragment,
-        null,
-        renderList(_ctx.fixedGui, (ui) => {
-          return openBlock(), createElementBlock(
-            Fragment,
-            null,
-            [
-              ui.display ? (openBlock(), createBlock(
-                resolveDynamicComponent(ui.name),
-                normalizeProps(mergeProps({ key: 0, style: { pointerEvents: "auto" } }, ui.data)),
-                null,
-                16
-                /* FULL_PROPS */
-              )) : createCommentVNode("v-if", true)
-            ],
-            64
-            /* STABLE_FRAGMENT */
-          );
-        }),
-        256
-        /* UNKEYED_FRAGMENT */
-      )),
-      createElementVNode("div", _hoisted_1, [
-        (openBlock(true), createElementBlock(
-          Fragment,
-          null,
-          renderList(_ctx.attachedGui, (ui) => {
-            return openBlock(), createElementBlock(
-              Fragment,
-              null,
-              [
-                ui.display ? (openBlock(true), createElementBlock(
-                  Fragment,
-                  { key: 0 },
-                  renderList(_ctx.tooltipFilter(_ctx.tooltips, ui), (tooltip) => {
-                    return openBlock(), createElementBlock(
-                      "div",
-                      {
-                        style: normalizeStyle(_ctx.tooltipPosition(tooltip.position))
-                      },
-                      [
-                        (openBlock(), createBlock(
-                          resolveDynamicComponent(ui.name),
-                          mergeProps({ ...ui.data, spriteData: tooltip, style: { pointerEvents: "auto" } }, {
-                            ref_for: true,
-                            ref: ui.name
-                          }),
-                          null,
-                          16
-                          /* FULL_PROPS */
-                        ))
-                      ],
-                      4
-                      /* STYLE */
-                    );
-                  }),
-                  256
-                  /* UNKEYED_FRAGMENT */
-                )) : createCommentVNode("v-if", true)
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            );
-          }),
-          256
-          /* UNKEYED_FRAGMENT */
-        ))
-      ])
-    ],
-    32
-    /* HYDRATE_EVENTS */
-  );
-}
-class VueGui {
-  constructor(context, options = {}) {
-    this.context = context;
-    this.options = options;
-  }
-  mount() {
-    this.clientEngine = inject(RpgClientEngine);
-    this.parentGui = inject(RpgGui);
-    this.parentGui._setVueGuiInstance(this);
-    const mountElement = this.getMountElement();
-    if (!mountElement) {
-      throw new Error("No mount element found for VueGui. Please provide a valid element or selector.");
-    }
-    const guiVue = this.parentGui.extraGuis;
-    const obj = {
-      render,
-      data() {
-        return {
-          gui: {},
-          tooltips: []
-        };
-      },
-      provide: () => {
-        return this.getInjectObject();
-      },
-      computed: {
-        fixedGui() {
-          return Object.values(this.gui).filter((gui) => !gui.attachToSprite);
-        },
-        attachedGui() {
-          return Object.values(this.gui).filter((gui) => gui.attachToSprite);
-        }
-      },
-      methods: {
-        tooltipPosition: this.tooltipPosition.bind(this),
-        tooltipFilter: this.tooltipFilter.bind(this)
-      }
-    };
-    this.app = createApp(obj);
-    for (let ui of guiVue) {
-      this.app.component(ui.name, ui.component);
-    }
-    this.app.directive("propagate", {
-      mounted: (el, binding) => {
-        el.eventListeners = {};
-        const mouseEvents = ["click", "mousedown", "mouseup", "mousemove", "wheel"];
-        mouseEvents.forEach((eventType) => {
-          const callback = (ev) => {
-            this.propagateEvent(ev);
-          };
-          el.eventListeners[eventType] = callback;
-          el.addEventListener(eventType, callback);
-        });
-      },
-      unmounted(el, binding) {
-        const mouseEvents = ["click", "mousedown", "mouseup", "mousemove", "wheel"];
-        mouseEvents.forEach((eventType) => {
-          const callback = el.eventListeners[eventType];
-          if (callback) {
-            el.removeEventListener(eventType, callback);
-          }
-        });
-      }
-    });
-    this.vm = this.app.mount(mountElement);
-    this.parentGui._initializeVueComponents();
-  }
-  getMountElement() {
-    const { mountElement, selector, createIfNotFound = true } = this.options;
-    if (mountElement) {
-      if (typeof mountElement === "string") {
-        const element = document.querySelector(mountElement);
-        if (element) return element;
-      } else {
-        return mountElement;
-      }
-    }
-    if (selector) {
-      const element = document.querySelector(selector);
-      if (element) return element;
-    }
-    const defaultElement = document.querySelector("#vue-gui-overlay");
-    if (defaultElement) return defaultElement;
-    if (createIfNotFound) {
-      const newElement = document.createElement("div");
-      newElement.id = "vue-gui-overlay";
-      newElement.style.position = "absolute";
-      newElement.style.top = "0";
-      newElement.style.left = "0";
-      newElement.style.width = "100%";
-      newElement.style.height = "100%";
-      newElement.style.pointerEvents = "none";
-      const gameContainer = document.querySelector("#rpg");
-      if (gameContainer) {
-        gameContainer.appendChild(newElement);
-        return newElement;
-      }
-      document.body.appendChild(newElement);
-      return newElement;
-    }
-    throw new Error("Could not find or create mount element for VueGui");
-  }
-  getInjectObject() {
-    return {
-      // Legacy injections (for backward compatibility)
-      engine: this.clientEngine,
-      socket: this.clientEngine.socket,
-      gui: this.parentGui,
-      // Standard RPGJS Vue injections
-      rpgEngine: this.clientEngine,
-      rpgSocket: () => this.clientEngine.socket,
-      rpgGui: this.parentGui,
-      rpgScene: () => this.clientEngine.scene,
-      rpgResource: {
-        spritesheets: this.clientEngine.spritesheets,
-        sounds: this.clientEngine.sounds
-      },
-      rpgObjects: this.createObjectsObservable(),
-      rpgCurrentPlayer: this.createCurrentPlayerObservable(),
-      rpgGuiClose: (name, data) => {
-        this.parentGui.guiClose(name, data);
-      },
-      rpgGuiInteraction: (guiId, name, data = {}) => {
-        this.parentGui.guiInteraction(guiId, name, data);
-      },
-      rpgKeypress: this.createKeypressObservable(),
-      rpgSound: this.createSoundService()
-    };
-  }
-  createObjectsObservable() {
-    const scene = this.clientEngine.scene;
-    if (!scene) return null;
-    return new Observable((observer) => {
-      const subscription1 = scene.players.observable.subscribe((players) => {
-        const objects = {};
-        for (const [id, player] of Object.entries(players)) {
-          objects[id] = {
-            object: player,
-            paramsChanged: player
-            // For simplicity, could be enhanced to track actual changes
-          };
-        }
-        observer.next(objects);
-      });
-      const subscription2 = scene.events.observable.subscribe((events) => {
-        const objects = {};
-        for (const [id, event] of Object.entries(events)) {
-          objects[id] = {
-            object: event,
-            paramsChanged: event
-          };
-        }
-        observer.next(objects);
-      });
-      return () => {
-        subscription1.unsubscribe();
-        subscription2.unsubscribe();
-      };
-    });
-  }
-  createCurrentPlayerObservable() {
-    const scene = this.clientEngine.scene;
-    if (!scene) return null;
-    return new Observable((observer) => {
-      const subscription = scene.currentPlayer.observable.subscribe((player) => {
-        if (player) {
-          observer.next({
-            object: player,
-            paramsChanged: player
-          });
-        }
-      });
-      return () => subscription.unsubscribe();
-    });
-  }
-  createKeypressObservable() {
-    return new Observable((observer) => {
-      const keyHandler = (event) => {
-        const keyMap = this.clientEngine.globalConfig?.keyboardControls || {
-          up: "up",
-          down: "down",
-          left: "left",
-          right: "right",
-          action: "space",
-          escape: "escape"
-        };
-        const inputName = event.key.toLowerCase();
-        let control = null;
-        for (const [actionName, keyName] of Object.entries(keyMap)) {
-          if (keyName === inputName || keyName === event.code.toLowerCase()) {
-            control = {
-              actionName,
-              options: {}
-            };
-            break;
-          }
-        }
-        if (control) {
-          observer.next({
-            inputName,
-            control
-          });
-        }
-      };
-      document.addEventListener("keydown", keyHandler);
-      return () => {
-        document.removeEventListener("keydown", keyHandler);
-      };
-    });
-  }
-  createSoundService() {
-    return {
-      get: (id) => {
-        const sound = this.clientEngine.sounds.get(id);
-        return {
-          play: () => {
-            if (sound && sound.play) {
-              sound.play();
-            }
-          },
-          stop: () => {
-            if (sound && sound.stop) {
-              sound.stop();
-            }
-          },
-          pause: () => {
-            if (sound && sound.pause) {
-              sound.pause();
-            }
-          }
-        };
-      },
-      play: (id) => {
-        const sound = this.clientEngine.sounds.get(id);
-        if (sound && sound.play) {
-          sound.play();
-        }
-      }
-    };
-  }
-  propagateEvent(event) {
-    if (this.clientEngine.renderer) {
-      const canvas = document.querySelector("#rpg canvas");
-      if (canvas && canvas.getBoundingClientRect) {
-        const rect = canvas.getBoundingClientRect();
-        const mouseEvent = event;
-        const newEvent = new MouseEvent(event.type, {
-          bubbles: event.bubbles,
-          cancelable: event.cancelable,
-          clientX: mouseEvent.clientX - rect.left,
-          clientY: mouseEvent.clientY - rect.top,
-          button: mouseEvent.button,
-          buttons: mouseEvent.buttons
-        });
-        canvas.dispatchEvent(newEvent);
-      }
-    }
-  }
-  tooltipPosition(position) {
-    return {
-      left: position.x + "px",
-      top: position.y + "px",
-      position: "absolute"
-    };
-  }
-  tooltipFilter(tooltips, ui) {
-    return tooltips.filter((tooltip) => {
-      return true;
-    });
-  }
-  _setSceneReady() {
-    if (this.clientEngine.scene) {
-      this.vm.tooltips = [];
-    }
-  }
-  set gui(val) {
-    for (let key in val) {
-      if (isFunction(val[key].component)) continue;
-      this.vm.gui[key] = val[key];
-    }
-    this.vm.gui = Object.assign({}, this.vm.gui);
-  }
-}
-
-export { VueGui, VueGuiToken };
-//# sourceMappingURL=index2.js.map

package/dist/index2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index2.js","sources":["../src/VueGui.ts"],"sourcesContent":["import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveDynamicComponent as _resolveDynamicComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, createBlock as _createBlock, mergeProps as _mergeProps, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode } from \"vue\"\nimport { App, ComponentPublicInstance, createApp } from 'vue'\nimport { isFunction, RpgCommonPlayer } from '@rpgjs/common'\nimport { RpgClientEngine, RpgGui, inject, Context } from '@rpgjs/client'\nimport { Observable } from 'rxjs'\n\nexport const VueGuiToken = \"VueGuiToken\"\n\ninterface VueInstance extends ComponentPublicInstance {\n    gui: GuiList,\n    tooltips: RpgCommonPlayer[]\n}\n\ninterface GuiOptions {\n    data: any,\n    attachToSprite: boolean\n    display: boolean,\n    name: string\n}\n\ninterface GuiList {\n    [guiName: string]: GuiOptions\n}\n\ninterface VueGuiOptions {\n    /** The HTML element where Vue components will be mounted */\n    mountElement?: HTMLElement | string\n    /** Custom CSS selector for the mount element */\n    selector?: string\n    /** Whether to create a new div element if none is found */\n    createIfNotFound?: boolean\n}\n\nconst _hoisted_1 = {\n    id: \"tooltips\",\n    style: { \"position\": \"absolute\", \"top\": \"0\", \"left\": \"0\" }\n}\n\nfunction render(_ctx, _cache) {\n    return (_openBlock(), _createElementBlock(\"div\", {}, [\n        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.fixedGui, (ui: any) => {\n            return (_openBlock(), _createElementBlock(_Fragment, null, [\n                (ui.display)\n                    ? (_openBlock(), _createBlock(_resolveDynamicComponent(ui.name), _normalizeProps(_mergeProps({ key: 0, style: { pointerEvents: 'auto' } }, ui.data)), null, 16 /* FULL_PROPS */))\n                    : _createCommentVNode(\"v-if\", true)\n            ], 64 /* STABLE_FRAGMENT */))\n        }), 256 /* UNKEYED_FRAGMENT */)),\n        _createElementVNode(\"div\", _hoisted_1, [\n            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.attachedGui, (ui: any) => {\n                return (_openBlock(), _createElementBlock(_Fragment, null, [\n                    (ui.display)\n                        ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(_ctx.tooltipFilter(_ctx.tooltips, ui), (tooltip: any) => {\n                            return (_openBlock(), _createElementBlock(\"div\", {\n                                style: _normalizeStyle(_ctx.tooltipPosition(tooltip.position))\n                            }, [\n                                (_openBlock(), _createBlock(_resolveDynamicComponent(ui.name), _mergeProps({ ...ui.data, spriteData: tooltip, style: { pointerEvents: 'auto' } }, {\n                                    ref_for: true,\n                                    ref: ui.name\n                                }), null, 16 /* FULL_PROPS */))\n                            ], 4 /* STYLE */))\n                        }), 256 /* UNKEYED_FRAGMENT */))\n                        : _createCommentVNode(\"v-if\", true)\n                ], 64 /* STABLE_FRAGMENT */))\n            }), 256 /* UNKEYED_FRAGMENT */))\n        ])\n    ], 32 /* HYDRATE_EVENTS */))\n}\n\nexport class VueGui {\n    private clientEngine: RpgClientEngine\n    private parentGui: RpgGui\n    private app: App\n    private vm: VueInstance\n    private socket\n\n    constructor(private context: Context, private options: VueGuiOptions = {}) {\n       \n    }\n\n    mount() {\n        this.clientEngine = inject(RpgClientEngine)\n        this.parentGui = inject(RpgGui)\n        \n        // Establish connection with RpgGui for Vue component management\n        this.parentGui._setVueGuiInstance(this);\n        \n        // Get or create mount element\n        const mountElement = this.getMountElement()\n        if (!mountElement) {\n            throw new Error('No mount element found for VueGui. Please provide a valid element or selector.')\n        }\n\n        // Get all GUI components from the parent GUI service\n        const guiVue = this.parentGui.extraGuis\n\n        const obj = {\n            render,\n            data() {\n                return {\n                    gui: {},\n                    tooltips: []\n                }\n            },\n            provide: () => {\n                return this.getInjectObject()\n            },\n            computed: {\n                fixedGui() {\n                    return Object.values(this.gui).filter((gui: any) => !gui.attachToSprite)\n                },\n                attachedGui() {\n                    return Object.values(this.gui).filter((gui: any) => gui.attachToSprite)\n                }\n            },\n            methods: {\n                tooltipPosition: this.tooltipPosition.bind(this),\n                tooltipFilter: this.tooltipFilter.bind(this)\n            }\n        }\n\n        this.app = createApp(obj)\n\n        for (let ui of guiVue) {\n            this.app.component(ui.name, ui.component)\n        }\n\n        // Add propagate directive for event handling\n        this.app.directive('propagate', {\n            mounted: (el, binding) => {\n                el.eventListeners = {};\n                const mouseEvents = ['click', 'mousedown', 'mouseup', 'mousemove', 'wheel'];\n                mouseEvents.forEach(eventType => {\n                    const callback = (ev) => {\n                        // Propagate event to the game engine\n                        this.propagateEvent(ev);\n                    };\n                    el.eventListeners[eventType] = callback;\n                    el.addEventListener(eventType, callback);\n                });\n            },\n            unmounted(el, binding) {\n                const mouseEvents = ['click', 'mousedown', 'mouseup', 'mousemove', 'wheel'];\n                mouseEvents.forEach(eventType => {\n                    const callback = el.eventListeners[eventType];\n                    if (callback) {\n                        el.removeEventListener(eventType, callback);\n                    }\n                });\n            }\n        })\n\n        this.vm = this.app.mount(mountElement) as VueInstance\n        \n        // Initialize Vue components after mounting\n        this.parentGui._initializeVueComponents();\n    }\n\n    private getMountElement(): HTMLElement {\n        const { mountElement, selector, createIfNotFound = true } = this.options\n\n        // If mountElement is provided directly\n        if (mountElement) {\n            if (typeof mountElement === 'string') {\n                const element = document.querySelector(mountElement) as HTMLElement\n                if (element) return element\n            } else {\n                return mountElement\n            }\n        }\n\n        // If selector is provided\n        if (selector) {\n            const element = document.querySelector(selector) as HTMLElement\n            if (element) return element\n        }\n\n        // Default selector\n        const defaultElement = document.querySelector('#vue-gui-overlay') as HTMLElement\n        if (defaultElement) return defaultElement\n\n        // Create element if not found and createIfNotFound is true\n        if (createIfNotFound) {\n            const newElement = document.createElement('div')\n            newElement.id = 'vue-gui-overlay'\n            newElement.style.position = 'absolute'\n            newElement.style.top = '0'\n            newElement.style.left = '0'\n            newElement.style.width = '100%'\n            newElement.style.height = '100%'\n            newElement.style.pointerEvents = 'none' // Allow canvas events to pass through\n\n            // Try to add to game container\n            const gameContainer = document.querySelector('#rpg')\n            if (gameContainer) {\n                gameContainer.appendChild(newElement)\n                return newElement\n            }\n\n            // Fallback to body\n            document.body.appendChild(newElement)\n            return newElement\n        }\n\n        throw new Error('Could not find or create mount element for VueGui')\n    }\n\n    private getInjectObject() {\n        return {\n            // Legacy injections (for backward compatibility)\n            engine: this.clientEngine,\n            socket: this.clientEngine.socket,\n            gui: this.parentGui,\n\n            // Standard RPGJS Vue injections\n            rpgEngine: this.clientEngine,\n            rpgSocket: () => this.clientEngine.socket,\n            rpgGui: this.parentGui,\n            rpgScene: () => this.clientEngine.scene,\n            rpgResource: {\n                spritesheets: this.clientEngine.spritesheets,\n                sounds: this.clientEngine.sounds\n            },\n            rpgObjects: this.createObjectsObservable(),\n            rpgCurrentPlayer: this.createCurrentPlayerObservable(),\n            rpgGuiClose: (name: string, data?: any) => {\n                this.parentGui.guiClose(name, data)\n            },\n            rpgGuiInteraction: (guiId: string, name: string, data: any = {}) => {\n                this.parentGui.guiInteraction(guiId, name, data)\n            },\n            rpgKeypress: this.createKeypressObservable(),\n            rpgSound: this.createSoundService()\n        }\n    }\n\n    private createObjectsObservable() {\n        // Combine players and events into a single observable\n        const scene = this.clientEngine.scene\n        if (!scene) return null\n\n        // Create an observable that merges players and events\n        return new Observable((observer) => {\n            const subscription1 = scene.players.observable.subscribe((players) => {\n                const objects = {}\n                for (const [id, player] of Object.entries(players)) {\n                    objects[id] = {\n                        object: player,\n                        paramsChanged: player // For simplicity, could be enhanced to track actual changes\n                    }\n                }\n                observer.next(objects)\n            })\n\n            const subscription2 = scene.events.observable.subscribe((events) => {\n                const objects = {}\n                for (const [id, event] of Object.entries(events)) {\n                    objects[id] = {\n                        object: event,\n                        paramsChanged: event\n                    }\n                }\n                observer.next(objects)\n            })\n\n            return () => {\n                subscription1.unsubscribe()\n                subscription2.unsubscribe()\n            }\n        })\n    }\n\n    private createCurrentPlayerObservable() {\n        const scene = this.clientEngine.scene\n        if (!scene) return null\n\n        return new Observable((observer) => {\n            const subscription = scene.currentPlayer.observable.subscribe((player) => {\n                if (player) {\n                    observer.next({\n                        object: player,\n                        paramsChanged: player\n                    })\n                }\n            })\n\n            return () => subscription.unsubscribe()\n        })\n    }\n\n    private createKeypressObservable() {\n        return new Observable((observer) => {\n            const keyHandler = (event: KeyboardEvent) => {\n                // Map keyboard events to RPG controls\n                const keyMap = this.clientEngine.globalConfig?.keyboardControls || {\n                    up: 'up',\n                    down: 'down', \n                    left: 'left',\n                    right: 'right',\n                    action: 'space',\n                    escape: 'escape'\n                }\n\n                const inputName = event.key.toLowerCase()\n                let control: { actionName: string; options: any } | null = null\n\n                // Find matching control\n                for (const [actionName, keyName] of Object.entries(keyMap)) {\n                    if (keyName === inputName || keyName === event.code.toLowerCase()) {\n                        control = {\n                            actionName,\n                            options: {}\n                        }\n                        break\n                    }\n                }\n\n                if (control) {\n                    observer.next({\n                        inputName,\n                        control\n                    })\n                }\n            }\n\n            document.addEventListener('keydown', keyHandler)\n            \n            return () => {\n                document.removeEventListener('keydown', keyHandler)\n            }\n        })\n    }\n\n    private createSoundService() {\n        return {\n            get: (id: string) => {\n                const sound = this.clientEngine.sounds.get(id)\n                return {\n                    play: () => {\n                        if (sound && sound.play) {\n                            sound.play()\n                        }\n                    },\n                    stop: () => {\n                        if (sound && sound.stop) {\n                            sound.stop()\n                        }\n                    },\n                    pause: () => {\n                        if (sound && sound.pause) {\n                            sound.pause()\n                        }\n                    }\n                }\n            },\n            play: (id: string) => {\n                const sound = this.clientEngine.sounds.get(id)\n                if (sound && sound.play) {\n                    sound.play()\n                }\n            }\n        }\n    }\n\n    private propagateEvent(event: Event) {\n        // Propagate mouse events to the canvas/engine\n        // This allows interaction with the game through Vue components\n        if (this.clientEngine.renderer) {\n            // Find the actual canvas element in the DOM\n            const canvas = document.querySelector('#rpg canvas') as HTMLCanvasElement;\n            if (canvas && canvas.getBoundingClientRect) {\n                const rect = canvas.getBoundingClientRect();\n                const mouseEvent = event as MouseEvent\n                \n                // Create a new mouse event with adjusted coordinates\n                const newEvent = new MouseEvent(event.type, {\n                    bubbles: event.bubbles,\n                    cancelable: event.cancelable,\n                    clientX: mouseEvent.clientX - rect.left,\n                    clientY: mouseEvent.clientY - rect.top,\n                    button: mouseEvent.button,\n                    buttons: mouseEvent.buttons\n                });\n                canvas.dispatchEvent(newEvent);\n            }\n        }\n    }\n\n    private tooltipPosition(position: any) {\n        return {\n            left: position.x + 'px',\n            top: position.y + 'px',\n            position: 'absolute'\n        }\n    }\n\n    private tooltipFilter(tooltips: any[], ui: any) {\n        // Filter tooltips based on UI configuration\n        return tooltips.filter(tooltip => {\n            // Add filtering logic based on your requirements\n            return true;\n        });\n    }\n\n    _setSceneReady() {\n        // Handle scene ready state for tooltips and other dynamic content\n        if (this.clientEngine.scene) {\n            // Subscribe to object changes for tooltips\n            this.vm.tooltips = [];\n        }\n    }\n\n    set gui(val: any) {\n        for (let key in val) {\n            // Ignore function components (they should only be handled by CanvasEngine)\n            if (isFunction(val[key].component)) continue\n            this.vm.gui[key] = val[key]\n        }\n        this.vm.gui = Object.assign({}, this.vm.gui)\n    }\n}"],"names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_normalizeProps","_mergeProps","_createCommentVNode","_createElementVNode","_normalizeStyle"],"mappings":"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"}

package/dist/index3.js

@@ -1,32 +0,0 @@
-import { inject } from '@rpgjs/client';
-import { VueGuiToken, VueGui } from './index2.js';
-import { createModule } from '@rpgjs/common';
-
-function provideVueGui(options = {}) {
-  return createModule("VueGui", [
-    {
-      client: {
-        engine: {
-          onStart() {
-            const vueGui = inject(VueGuiToken);
-            vueGui.mount();
-          }
-        }
-      },
-      server: null
-    },
-    {
-      provide: VueGuiToken,
-      useFactory: (context) => {
-        if (context["side"] === "server") {
-          console.warn("VueGui is only available on client side");
-          return null;
-        }
-        return new VueGui(context, options);
-      }
-    }
-  ]);
-}
-
-export { provideVueGui };
-//# sourceMappingURL=index3.js.map

package/dist/index3.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index3.js","sources":["../src/provider.ts"],"sourcesContent":["import { Context, inject, RpgClient } from \"@rpgjs/client\"\nimport { VueGui, VueGuiToken } from \"./VueGui\"\nimport { createModule } from \"@rpgjs/common\"\n\ninterface VueGuiProviderOptions {\n    /** The HTML element where Vue components will be mounted */\n    mountElement?: HTMLElement | string\n    /** Custom CSS selector for the mount element */\n    selector?: string\n    /** Whether to create a new div element if none is found */\n    createIfNotFound?: boolean\n}\n\n/**\n * Creates a dependency injection configuration for Vue GUI overlay on the client side.\n * \n * This function allows you to render Vue.js components as overlays on top of the RPGJS game canvas.\n * It provides a seamless integration between Vue.js reactive components and the game engine,\n * allowing for rich user interfaces while maintaining game performance.\n * \n * The function sets up the necessary service providers for Vue GUI rendering, including:\n * - VueGuiToken: Provides the VueGui service with your custom mounting configuration\n * - Automatic component filtering: Separates Vue components from CanvasEngine components\n * - Event propagation: Ensures proper interaction between Vue components and game canvas\n * \n * **Design Concept:**\n * The function follows the provider pattern used throughout RPGJS, creating a modular way to inject\n * Vue GUI rendering capabilities into the client engine. It separates the concern of UI framework\n * (Vue.js) from game rendering (CanvasEngine), allowing developers to use modern web UI patterns\n * while leveraging the engine's performance.\n * \n * @param {VueGuiProviderOptions} options - Configuration options for Vue GUI mounting\n * @returns {Object} Dependency injection provider configuration\n * \n * @example\n * ```typescript\n * import { provideVueGui } from '@rpgjs/vue'\n * import { createModule } from '@rpgjs/common'\n * \n * // Basic usage with automatic element creation\n * export function provideVueUIModule() {\n *   return createModule(\"VueUI\", [\n *     provideVueGui({\n *       selector: '#vue-gui-container',\n *       createIfNotFound: true\n *     })\n *   ])\n * }\n * \n * // Advanced usage with custom mount element\n * export function provideCustomVueUI() {\n *   return createModule(\"CustomVueUI\", [\n *     provideVueGui({\n *       mountElement: document.getElementById('my-ui-overlay'),\n *       createIfNotFound: false\n *     })\n *   ])\n * }\n * \n * // Usage with CSS selector\n * export function provideModalVueUI() {\n *   return createModule(\"ModalVueUI\", [\n *     provideVueGui({\n *       selector: '.modal-overlay',\n *       createIfNotFound: true\n *     })\n *   ])\n * }\n * ```\n * \n * **Integration in your client:**\n * ```typescript\n * import { RpgClient } from '@rpgjs/client'\n * import { provideVueGui } from '@rpgjs/vue'\n * \n * @RpgClient({\n *   providers: [\n *     provideVueGui({\n *       selector: '#vue-gui-overlay'\n *     })\n *   ],\n *   gui: [\n *     // Vue components will be automatically handled by VueGui\n *     InventoryVueComponent,\n *     // CanvasEngine components continue to work normally\n *     DialogCanvasComponent\n *   ]\n * })\n * export class MyRpgClient {}\n * ```\n * \n * **Available injections in Vue components:**\n * - `engine`: RpgClientEngine instance for game interactions\n * - `socket`: WebSocket connection for server communication\n * - `gui`: RpgGui instance for GUI management\n * \n * **Event propagation:**\n * Use the `v-propagate` directive in Vue components to ensure mouse/keyboard events\n * are properly forwarded to the game canvas when needed.\n * \n * @since 5.0.0\n * @see {@link VueGuiProviderOptions} for configuration options\n * @see {@link VueGui} for the main service class\n */\n\nexport function provideVueGui(options: VueGuiProviderOptions = {}) {\n    return createModule('VueGui',[\n        {\n            client: {\n                engine: {\n                    onStart() {\n                        const vueGui = inject<VueGui>(VueGuiToken);\n                        vueGui.mount()\n                    }\n                }\n            } as RpgClient,\n            server: null\n        },\n        {\n            provide: VueGuiToken,\n            useFactory: (context: Context) => {\n                // Only create VueGui on client side\n                if (context['side'] === 'server') {\n                    console.warn('VueGui is only available on client side')\n                    return null\n                }\n                return new VueGui(context, options)\n            },\n        }\n    ])\n}"],"names":[],"mappings":";;;;AAyGO,SAAS,aAAA,CAAc,OAAA,GAAiC,EAAC,EAAG;AAC/D,EAAA,OAAO,aAAa,QAAA,EAAS;AAAA,IACzB;AAAA,MACI,MAAA,EAAQ;AAAA,QACJ,MAAA,EAAQ;AAAA,UACJ,OAAA,GAAU;AACN,YAAA,MAAM,MAAA,GAAS,OAAe,WAAW,CAAA;AACzC,YAAA,MAAA,CAAO,KAAA,EAAM;AAAA,UACjB;AAAA;AACJ,OACJ;AAAA,MACA,MAAA,EAAQ;AAAA,KACZ;AAAA,IACA;AAAA,MACI,OAAA,EAAS,WAAA;AAAA,MACT,UAAA,EAAY,CAAC,OAAA,KAAqB;AAE9B,QAAA,IAAI,OAAA,CAAQ,MAAM,CAAA,KAAM,QAAA,EAAU;AAC9B,UAAA,OAAA,CAAQ,KAAK,yCAAyC,CAAA;AACtD,UAAA,OAAO,IAAA;AAAA,QACX;AACA,QAAA,OAAO,IAAI,MAAA,CAAO,OAAA,EAAS,OAAO,CAAA;AAAA,MACtC;AAAA;AACJ,GACH,CAAA;AACL;;;;"}

package/dist/provider.d.ts

@@ -1,101 +0,0 @@
-interface VueGuiProviderOptions {
-    /** The HTML element where Vue components will be mounted */
-    mountElement?: HTMLElement | string;
-    /** Custom CSS selector for the mount element */
-    selector?: string;
-    /** Whether to create a new div element if none is found */
-    createIfNotFound?: boolean;
-}
-/**
- * Creates a dependency injection configuration for Vue GUI overlay on the client side.
- *
- * This function allows you to render Vue.js components as overlays on top of the RPGJS game canvas.
- * It provides a seamless integration between Vue.js reactive components and the game engine,
- * allowing for rich user interfaces while maintaining game performance.
- *
- * The function sets up the necessary service providers for Vue GUI rendering, including:
- * - VueGuiToken: Provides the VueGui service with your custom mounting configuration
- * - Automatic component filtering: Separates Vue components from CanvasEngine components
- * - Event propagation: Ensures proper interaction between Vue components and game canvas
- *
- * **Design Concept:**
- * The function follows the provider pattern used throughout RPGJS, creating a modular way to inject
- * Vue GUI rendering capabilities into the client engine. It separates the concern of UI framework
- * (Vue.js) from game rendering (CanvasEngine), allowing developers to use modern web UI patterns
- * while leveraging the engine's performance.
- *
- * @param {VueGuiProviderOptions} options - Configuration options for Vue GUI mounting
- * @returns {Object} Dependency injection provider configuration
- *
- * @example
- * ```typescript
- * import { provideVueGui } from '@rpgjs/vue'
- * import { createModule } from '@rpgjs/common'
- *
- * // Basic usage with automatic element creation
- * export function provideVueUIModule() {
- *   return createModule("VueUI", [
- *     provideVueGui({
- *       selector: '#vue-gui-container',
- *       createIfNotFound: true
- *     })
- *   ])
- * }
- *
- * // Advanced usage with custom mount element
- * export function provideCustomVueUI() {
- *   return createModule("CustomVueUI", [
- *     provideVueGui({
- *       mountElement: document.getElementById('my-ui-overlay'),
- *       createIfNotFound: false
- *     })
- *   ])
- * }
- *
- * // Usage with CSS selector
- * export function provideModalVueUI() {
- *   return createModule("ModalVueUI", [
- *     provideVueGui({
- *       selector: '.modal-overlay',
- *       createIfNotFound: true
- *     })
- *   ])
- * }
- * ```
- *
- * **Integration in your client:**
- * ```typescript
- * import { RpgClient } from '@rpgjs/client'
- * import { provideVueGui } from '@rpgjs/vue'
- *
- * @RpgClient({
- *   providers: [
- *     provideVueGui({
- *       selector: '#vue-gui-overlay'
- *     })
- *   ],
- *   gui: [
- *     // Vue components will be automatically handled by VueGui
- *     InventoryVueComponent,
- *     // CanvasEngine components continue to work normally
- *     DialogCanvasComponent
- *   ]
- * })
- * export class MyRpgClient {}
- * ```
- *
- * **Available injections in Vue components:**
- * - `engine`: RpgClientEngine instance for game interactions
- * - `socket`: WebSocket connection for server communication
- * - `gui`: RpgGui instance for GUI management
- *
- * **Event propagation:**
- * Use the `v-propagate` directive in Vue components to ensure mouse/keyboard events
- * are properly forwarded to the game canvas when needed.
- *
- * @since 5.0.0
- * @see {@link VueGuiProviderOptions} for configuration options
- * @see {@link VueGui} for the main service class
- */
-export declare function provideVueGui(options?: VueGuiProviderOptions): any[];
-export {};