@rpgjs/client 4.0.2 → 4.0.4

package/lib/Gui/Gui.js

@@ -0,0 +1,497 @@
+import { Utils } from '@rpgjs/common';
+import { RpgSound } from '../Sound/RpgSound.js';
+import { RpgResource } from '../index.js';
+import { VueGui } from './Vue.js';
+import { map, combineLatest, filter } from 'rxjs';
+const { elementToPositionAbsolute } = Utils;
+const COMPONENT_LIBRARIES = [
+    VueGui
+];
+export class Gui {
+    constructor() {
+        this.gui = {};
+        this.currentScene = null;
+        this.librariesInstances = [];
+    }
+    async _initialize(clientEngine, guiEl) {
+        this.clientEngine = clientEngine;
+        this.renderer = clientEngine.renderer;
+        this.gameEngine = clientEngine.gameEngine;
+        const { gui } = this.renderer.options;
+        for (let ui of gui) {
+            let name = ui.name;
+            if (Utils.isFunction(ui)) {
+                name = Utils.camelToKebab(name);
+            }
+            this.gui[name] = {
+                data: ui.data,
+                attachToSprite: ui.rpgAttachToSprite,
+                display: false,
+                name: name,
+                isFunction: Utils.isFunction(ui),
+                gui: ui
+            };
+        }
+        if (this.clientEngine.envs?.['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.js').then(m => m.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, (e) => {
+                    this.renderer.canvas.dispatchEvent(new MouseEvent(type, e));
+                });
+            }
+        };
+        for (let componentClass of COMPONENT_LIBRARIES) {
+            const el = document.createElement('div');
+            elementToPositionAbsolute(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);
+        });
+    }
+    getInjectObject() {
+        const self = 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((objects) => objects[this.gameEngine.playerId]), 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) {
+                const guiId = name || this.$options?.name;
+                self.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(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) {
+        this.socket = socket;
+        this.socket.on('gui.open', ({ guiId, data }) => {
+            this.display(guiId, data);
+        });
+        this.socket.on('gui.tooltip', ({ players, display }) => {
+            for (let playerId of players) {
+                const sprite = this.renderer.getScene()?.getSprite(playerId);
+                if (sprite)
+                    sprite.guiDisplay = display;
+            }
+        });
+        this.socket.on('gui.exit', (guiId) => {
+            this.hide(guiId);
+        });
+    }
+    /** @internal */
+    _setGui(id, obj) {
+        const guiObj = this.get(id);
+        if (!guiObj) {
+            throw `The GUI named ${id} is non-existent. Please add the component in the gui property of the decorator @RpgClient`;
+        }
+        for (let key in obj) {
+            guiObj[key] = obj[key];
+        }
+        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(id) {
+        if (typeof id != 'string') {
+            id = id.name;
+        }
+        return this.gui[id];
+    }
+    /**
+     * Get all GUI. You retrieve GUI data and information whether it is displayed or not
+     *
+     * ```ts
+     * import { RpgGui } from '@rpgjs/client'
+     *
+     * const gui = RpgGui.getAll()
+     * console.log(gui) // { 'rpg-dialog': { data: {}, display: true } }
+     * ```
+     *
+     * @title Get all GUI
+     * @method RpgGui.getAll()
+     * @returns { { [guiName]: { data: any, display: boolean }  }}
+     * @memberof RpgGui
+     */
+    getAll() {
+        return this.gui;
+    }
+    /**
+     * Checks if the GUI exists RpgClient's gui array
+     *
+     * ```ts
+     * import { RpgGui } from '@rpgjs/client'
+     *
+     * RpgGui.exists('my-gui') // true
+     * ```
+     *
+     * @title GUI Exists ?
+     * @method RpgGui.exists(id)
+     * @param {string} id
+     * @returns {boolean}
+     * @memberof RpgGui
+     */
+    exists(id) {
+        return !!this.get(id);
+    }
+    /**
+     * Calls a GUI according to identifier. You can send retrievable data in the component
+     *
+     * ```ts
+     * import { RpgGui } from '@rpgjs/client'
+     *
+     * RpgGui.display('my-gui')
+     * ```
+     *
+     * @title Display GUI
+     * @method RpgGui.display(id,data)
+     * @param {string} id
+     * @param {object} [data]
+     * @returns {void}
+     * @memberof RpgGui
+     */
+    display(id, data = {}) {
+        this._setGui(id, {
+            display: true,
+            data
+        });
+    }
+    /**
+     * Hide a GUI according to its identifier
+     *
+     * ```ts
+     * import { RpgGui } from '@rpgjs/client'
+     *
+     * RpgGui.hide('my-gui')
+     * ```
+     *
+     * @title Hide GUI
+     * @method RpgGui.hide(id)
+     * @param {string} id
+     * @returns {void}
+     * @memberof RpgGui
+     */
+    hide(id) {
+        this._setGui(id, {
+            display: false
+        });
+    }
+    /** @internal */
+    clear() {
+        this.gui = {};
+    }
+    /** @internal */
+    tooltipPosition(position) {
+        const scene = this.renderer.getScene();
+        const viewport = 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() {
+        return combineLatest([
+            this.clientEngine.gameEngine.all,
+            this.currentScene?.objectsMoving
+        ]).pipe(map(([objects]) => {
+            return Object.values(objects).map((obj) => obj.object);
+        }));
+    }
+}
+export const RpgGui = new Gui();
+//# sourceMappingURL=Gui.js.map

package/lib/Gui/Gui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gui.js","sourceRoot":"","sources":["../../src/Gui/Gui.ts"],"names":[],"mappings":"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"}

package/lib/Gui/React.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { Gui } from './Gui.js';
+export { useStore } from '@nanostores/react';
+export declare const RpgReactContext: import("react").Context<any>;
+export declare const useObjects: () => any[];
+export declare const useCurrentPlayer: () => {};
+export declare class ReactGui {
+    private app;
+    private clientEngine;
+    private renderer;
+    private _gui;
+    constructor(rootEl: HTMLDivElement, parentGui: Gui);
+    set gui(val: any);
+}

package/lib/Gui/React.js

@@ -0,0 +1,89 @@
+import { createRoot } from 'react-dom/client';
+import { createElement, useState, createContext, useEffect, useContext, useSyncExternalStore, useRef } from 'react';
+import { BehaviorSubject, map, tap } from 'rxjs';
+export { useStore } from '@nanostores/react';
+export const RpgReactContext = createContext({});
+// TODO
+export const useObjects = () => {
+    const [objects, setObjects] = useState([]);
+    const { rpgObjects } = useContext(RpgReactContext);
+    useEffect(() => {
+        rpgObjects
+            .pipe(map((objects) => Object.values(objects).map((obj) => obj.object)))
+            .subscribe(setObjects);
+    }, []);
+    return objects;
+};
+// TODO
+export const useCurrentPlayer = () => {
+    const { rpgCurrentPlayer } = useContext(RpgReactContext);
+    const currentPlayerRef = useRef({});
+    let _onChanges;
+    const subscribe = (onChanges) => {
+        _onChanges = onChanges;
+        return () => {
+            _onChanges = null;
+        };
+    };
+    useEffect(() => {
+        const ob$ = rpgCurrentPlayer
+            .pipe(map((player) => player.object), tap((player) => currentPlayerRef.current = player));
+        const subscription = ob$.subscribe(() => {
+            _onChanges?.();
+        });
+        return () => subscription.unsubscribe();
+    }, []);
+    return useSyncExternalStore(subscribe, () => currentPlayerRef.current);
+};
+export class ReactGui {
+    //private _tooltips: BehaviorSubject<any[]> = new BehaviorSubject([] as any)
+    constructor(rootEl, parentGui) {
+        this._gui = new BehaviorSubject([]);
+        this.app = createRoot(rootEl);
+        this.clientEngine = parentGui.clientEngine;
+        this.renderer = this.clientEngine.renderer;
+        const GuiTooltip = (ui) => {
+            return () => {
+                const [_tooltip, setTooltip] = useState([]);
+                useEffect(() => {
+                    parentGui.listenTooltipObjects.subscribe(setTooltip);
+                    // force combineLatest to emit first value
+                    parentGui.currentScene?.objectsMoving.next({});
+                }, [parentGui.currentScene]);
+                return parentGui.tooltipFilter(_tooltip).map(sprite => createElement('div', {
+                    style: parentGui.tooltipPosition({ x: sprite.position.x, y: sprite.position.y }),
+                    key: sprite.id,
+                }, createElement(ui.gui, {
+                    spriteData: sprite,
+                    ...(ui.data || {}),
+                })));
+            };
+        };
+        const GuiWrapper = () => {
+            const [_gui, setGui] = useState([]);
+            useEffect(() => {
+                this._gui.subscribe(gui => setGui(gui));
+            }, []);
+            return createElement(RpgReactContext.Provider, {
+                value: parentGui.getInjectObject()
+            }, ..._gui.filter(ui => ui.display && !ui.attachToSprite).map(ui => createElement(ui.gui, {
+                key: ui.name,
+                ...(ui.data || {})
+            })), ..._gui.filter(ui => ui.display && ui.attachToSprite).map(ui => createElement('div', {
+                key: ui.name
+            }, createElement(GuiTooltip(ui)))));
+        };
+        this.app.render(createElement(GuiWrapper));
+    }
+    set gui(val) {
+        let array = [];
+        for (let key in val) {
+            // ignore vuejs component
+            if (!val[key].isFunction)
+                continue;
+            array.push(val[key]);
+        }
+        this._gui.next(array);
+    }
+}
+//# sourceMappingURL=React.js.map

package/lib/Gui/React.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"React.js","sourceRoot":"","sources":["../../src/Gui/React.ts"],"names":[],"mappings":"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"}

package/lib/Gui/Vue.d.ts

@@ -0,0 +1,13 @@
+import type { Gui } from './Gui.js';
+export declare class VueGui {
+    private parentGui;
+    private renderer;
+    private gameEngine;
+    private clientEngine;
+    private app;
+    private vm;
+    private socket;
+    constructor(rootEl: HTMLDivElement, parentGui: Gui);
+    _setSceneReady(): void;
+    set gui(val: any);
+}