@rpgjs/client 4.0.2 → 4.0.4

package/src/Gui/Vue.ts

@@ -0,0 +1,137 @@
+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"
+import { App, ComponentPublicInstance, createApp } from 'vue'
+import { RpgCommonPlayer, Utils } from '@rpgjs/common'
+import { RpgRenderer } from '../Renderer'
+import { GameEngineClient } from '../GameEngine'
+import { RpgClientEngine } from '../RpgClientEngine'
+import type { Gui } from './Gui'
+import { Scene } from '../Scene/Scene'
+
+interface VueInstance extends ComponentPublicInstance {
+    gui: GuiList,
+    tooltips: RpgCommonPlayer[]
+}
+
+interface GuiOptions {
+    data: any,
+    attachToSprite: boolean
+    display: boolean,
+    name: string
+}
+
+interface GuiList {
+    [guiName: string]: GuiOptions
+}
+
+interface VueInstance extends ComponentPublicInstance {
+    gui: GuiList,
+    tooltips: RpgCommonPlayer[]
+}
+
+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 }, 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 }, {
+                                    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 */))
+}
+
+
+export class VueGui {
+    private renderer: RpgRenderer
+    private gameEngine: GameEngineClient
+    private clientEngine: RpgClientEngine
+    private app: App
+    private vm: VueInstance
+    private socket
+
+    constructor(rootEl: HTMLDivElement, private parentGui: Gui) {
+        this.clientEngine = parentGui.clientEngine
+        this.renderer = this.clientEngine.renderer
+        this.gameEngine = this.clientEngine.gameEngine
+        const { gui } = parentGui
+        const self = this
+
+        const obj = {
+            render,
+            data() {
+                return {
+                    gui: {},
+                    tooltips: []
+                }
+            },
+            provide: () => {
+                return parentGui.getInjectObject()
+            },
+            computed: {
+                fixedGui() {
+                    return Object.values(this.gui).filter((gui: any) => !gui.attachToSprite)
+                },
+                attachedGui() {
+                    return Object.values(this.gui).filter((gui: any) => gui.attachToSprite)
+                }
+            },
+            methods: {
+                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) as VueInstance
+        this.renderer.app = this.app
+        this.renderer.vm = this.vm
+    }
+
+    _setSceneReady() {
+        this.parentGui.listenTooltipObjects.subscribe((tooltips) => {
+            this.vm.tooltips = [...tooltips]
+        })
+        this.parentGui.currentScene?.objectsMoving.next({})
+    }
+
+    set gui(val) {
+        for (let key in val) {
+            // ignore react component
+            if (val[key].isFunction) continue
+            this.vm.gui[key] = val[key]
+        }
+        this.vm.gui = Object.assign({}, this.vm.gui)
+    }
+}

package/src/Renderer.ts

@@ -1,8 +1,8 @@
-import { RpgPlugin, HookClient } from '@rpgjs/common'
+import { RpgPlugin, HookClient, Utils } from '@rpgjs/common'
 import { SceneMap } from './Scene/Map'
 import { Scene } from './Scene/Scene'
 import { Scene as PresetScene } from './Presets/Scene'
-import { RpgGui } from './RpgGui'
+import { RpgGui } from './Gui/Gui'
 import { RpgClientEngine } from './RpgClientEngine'
 import type { App, ComponentPublicInstance } from 'vue'
 import { TransitionScene } from './Effects/TransitionScene'
@@ -11,6 +11,8 @@ import { GameEngineClient } from './GameEngine'
 import { SpinnerGraphic } from './Effects/Spinner'
 import { autoDetectRenderer, Container, Graphics, ICanvas, IRenderer } from 'pixi.js'
 
+const { elementToPositionAbsolute } = Utils
+
 export enum TransitionMode {
     None,
     Fading
@@ -112,9 +114,11 @@ export class RpgRenderer {
 
         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 as HTMLCanvasElement, this.selector.firstChild)
             const [canvas] = document.querySelector(this.options.selector).children
@@ -131,7 +135,7 @@ export class RpgRenderer {
         this.fadeContainer.visible = false
         this.fadeContainer.alpha = 0
 
-        RpgGui._initalize(this.clientEngine)
+        RpgGui._initialize(this.clientEngine, this.guiEl)
 
         this.resize()
     }

package/src/RpgClientEngine.ts

@@ -5,7 +5,7 @@ import { _initSound, sounds } from './Sound/Sounds'
 import { World } from 'simple-room-client'
 import { BehaviorSubject, Observable, Subject, Subscription, lastValueFrom } from 'rxjs'
 import { ajax } from 'rxjs/ajax'
-import { RpgGui } from './RpgGui'
+import { RpgGui } from './Gui/Gui'
 import {
     RpgCommonPlayer,
     PrebuiltGui,

package/src/Scene/Scene.ts

@@ -2,12 +2,12 @@ import { RpgPlugin, HookClient, DefaultInput } from '@rpgjs/common'
 import { KeyboardControls } from '../KeyboardControls'
 import RpgSprite from '../Sprite/Character'
 import { Animation } from '../Effects/Animation'
-import { BehaviorSubject, Observable } from 'rxjs'
-import { RpgGui } from '../RpgGui'
+import { BehaviorSubject, Observable, Subject } from 'rxjs'
 import { GameEngineClient } from '../GameEngine'
 import { RpgComponent } from '../Components/Component'
 import { Controls } from '@rpgjs/types'
 import { Container } from 'pixi.js'
+import { RpgGui } from '../Gui/Gui'
 
 export type SceneObservableData = { 
     data: {
@@ -37,6 +37,32 @@ export abstract class Scene {
         partial: {}
     })
 
+    /**
+     * Listen to the movement of objects on stage
+     * 
+     * @prop {Observable<{ [key: string]: object }>} [objectsMoving]
+     * @readonly
+     * @memberof RpgScene
+     * @since v4.1.0
+     * 
+     * In <module>/scene-map.ts
+     * 
+     * ```ts
+     * import { RpgSceneMap } from '@rpgjs/client'
+     * 
+     * export default {
+     *      onAfterLoading(scene: RpgSceneMap) {
+     *         scene.objectsMoving.subscribe((objects) => {
+     *             console.log(objects)
+     *          })
+     *      }
+     * }
+     * ```
+     */
+    public readonly objectsMoving: Subject<{
+        [key: string]: any
+    }> = new Subject()
+
     constructor(public game: GameEngineClient) {
         const { globalConfig } = this.game.clientEngine
         this.controls = this.game.clientEngine.controls
@@ -45,6 +71,7 @@ export abstract class Scene {
             ...(globalConfig.inputs || {})
         }
         this.controls.setInputs(this.inputs || mergeInputs)
+        RpgGui._setSceneReady(this)
     }
 
     /**
@@ -106,8 +133,9 @@ export abstract class Scene {
         }
         const renderObjects = this.objects
         const sizeLogic = Object.values(logicObjects).length
+        const objectMoving = {}
         for (let key in logicObjects) {
-            const val: SceneSpriteLogic = logicObjects[key].object
+            const val: any = logicObjects[key].object
             const valueChanged = logicObjects[key].paramsChanged
             if (!renderObjects.has(key)) {
                 const sprite = this.addObject(val, key)
@@ -118,6 +146,7 @@ export abstract class Scene {
                 if (!object?.update) 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) {
@@ -131,7 +160,9 @@ export abstract 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)
     }
 

package/src/index.ts

@@ -13,9 +13,10 @@ export { Animation as AnimationClass } from './Effects/Animation'
 export type { ISpriteCharacter } from './Interfaces/Character'
 export { SceneData } from './Scene/SceneData'
 export { SceneMap as RpgSceneMap } from './Scene/Map'
-export { RpgGui } from './RpgGui';
+export { RpgGui } from './Gui/Gui';
 export { Timeline, Ease } from './Effects/Timeline';
 export { RpgComponent, RpgComponent as RpgSprite } from './Components/Component'
+export { World, room } from 'simple-room-client'
 
 import { spritesheets } from './Sprite/Spritesheets'
 import { sounds } from './Sound/Sounds'