Merge pull request #270 from RSamaium/v4.1.2

V4.1.2
RSamaium · Oct 30, 2023 · 5248f31 · 5248f31
2 parents ceeb9ab + 1439e0f
commit 5248f31
Show file tree

Hide file tree

Showing 14 changed files with 106 additions and 46 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -4,9 +4,13 @@ on:
   push:
     branches:
       - '*'
+    paths-ignore:
+      - 'docs/**'
   pull_request:
     branches:
       - '*'
+    paths-ignore:
+      - 'docs/**'
 
 jobs:
   tests:

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -193,6 +193,7 @@ const pluginMenu = [{
   collapsed: false,
   items: [
     { text: "Character Select", link: "/plugins/character-select" },
+    { text: "Inventory GUI Plugin", link: "/plugins/inventory-plugin" },
   ]
 }]
 

diff --git a/docs/gui/react.md b/docs/gui/react.md
@@ -49,12 +49,12 @@ export default function MyGUI({ foo }) {
   console.log(foo);
 
   useEffect(() => {
-    rpgCurrentPlayer.subscribe(({ object }) => {
+    const subscription = rpgCurrentPlayer.subscribe(({ object }) => {
       setHp(object.hp);
     });
 
     return () => {
-      rpgCurrentPlayer.unsubscribe();
+      subscription.unsubscribe();
     };
   }, []);
 

diff --git a/docs/plugins/inventory-plugin.md b/docs/plugins/inventory-plugin.md
@@ -0,0 +1,22 @@
+# Inventory GUI Plugin
+
+## Goal
+
+It's a plugin of RPG JS engine that gives possibility to manage inventory.
+
+![Watch the video](https://imgur.com/aO2oxml.png)
+
+## Installation
+
+`npx rpgjs add rpgjs-inventory`
+
+## Configuration instruction
+https://github.com/dominx99/rpgjs-plugins/tree/master/plugins/inventory
+
+## Plugin Discussion
+
+https://community.rpgjs.dev/d/219-inventory-plugin
+
+## Author
+
+[dominx99](https://community.rpgjs.dev/u/dominx99)
diff --git a/packages/client/src/Gui/Gui.ts b/packages/client/src/Gui/Gui.ts
@@ -62,29 +62,10 @@ export class Gui {
             COMPONENT_LIBRARIES.push(await import('./React').then(m => m.ReactGui))
         }
 
-        const propagateEvents = (el: HTMLElement) => {
-            const eventMap = {
-                MouseEvent: ['click', 'mousedown', 'mouseup', 'mousemove', 'mouseenter', 'mouseleave', 'mouseover', 'mouseout', 'contextmenu', 'wheel'],
-                KeyboardEvent: ['keydown', 'keyup', 'keypress', 'keydownoutside', 'keyupoutside', 'keypressoutside'],
-                PointerEvent: ['pointerdown', 'pointerup', 'pointermove', 'pointerover', 'pointerout', 'pointerenter', 'pointerleave', 'pointercancel'],
-                TouchEvent: ['touchstart', 'touchend', 'touchmove', 'touchcancel']
-            };
-
-            for (let [_Constructor, events] of Object.entries(eventMap)) {
-                for (let type of events) {
-                    el.addEventListener(type, (e) => {
-                        const _class = window[_Constructor] ?? MouseEvent
-                        this.renderer.canvas.dispatchEvent(new _class(type, e))
-                    });
-                }
-            }
-        }
-
         for (let componentClass of COMPONENT_LIBRARIES) {
             const el = document.createElement('div')
             elementToPositionAbsolute(el)
-            el.style['pointer-events'] = 'auto'
-            propagateEvents(el)
+            el.style['pointer-events'] = 'none'
             guiEl.appendChild(el)
             this.librariesInstances.push(new componentClass(el, this))
         }

diff --git a/packages/client/src/Gui/React.ts b/packages/client/src/Gui/React.ts
@@ -86,15 +86,19 @@ export class ReactGui {
             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, {
+                ..._gui.filter(ui => ui.display && !ui.attachToSprite).map(ui => createElement('div', {
                     key: ui.name,
-                    ...(ui.data || {})
-                })),
+                    style: { 'pointerEvents': 'auto' },
+                },
+                    createElement(ui.gui, ui.data || {})
+                )),
                 ..._gui.filter(ui => ui.display && ui.attachToSprite).map(ui => createElement('div', {
-                    key: ui.name
+                    key: ui.name,
+                    style: { 'pointerEvents': 'auto' },
                 }, createElement(GuiTooltip(ui)))),
             )
         }

diff --git a/packages/client/src/Gui/Vue.ts b/packages/client/src/Gui/Vue.ts
@@ -33,11 +33,11 @@ const _hoisted_1 = {
     style: { "position": "absolute", "top": "0", "left": "0" }
 }
 function render(_ctx, _cache) {
-    return (_openBlock(), _createElementBlock("div", {}, [
+    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 */))
+                    ? (_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 */)),
@@ -49,7 +49,7 @@ function render(_ctx, _cache) {
                             return (_openBlock(), _createElementBlock("div", {
                                 style: _normalizeStyle(_ctx.tooltipPosition(tooltip.position))
                             }, [
-                                (_openBlock(), _createBlock(_resolveDynamicComponent(ui.name), _mergeProps({ ...ui.data, spriteData: tooltip }, {
+                                (_openBlock(), _createBlock(_resolveDynamicComponent(ui.name), _mergeProps({ ...ui.data, spriteData: tooltip, style: { pointerEvents: 'auto' }  }, {
                                     ref_for: true,
                                     ref: ui.name
                                 }), null, 16 /* FULL_PROPS */))
@@ -76,7 +76,7 @@ export class VueGui {
         this.renderer = this.clientEngine.renderer
         this.gameEngine = this.clientEngine.gameEngine
         const { gui } = parentGui
-  
+
         const obj = {
             render,
             data() {
@@ -101,7 +101,7 @@ export class VueGui {
                 tooltipFilter: parentGui.tooltipFilter.bind(parentGui)
             },
             mounted() {
-               
+
             }
         }
 

diff --git a/packages/client/src/Renderer.ts b/packages/client/src/Renderer.ts
@@ -9,7 +9,7 @@ import { TransitionScene } from './Effects/TransitionScene'
 import { Subject, forkJoin } from 'rxjs'
 import { GameEngineClient } from './GameEngine'
 import { SpinnerGraphic } from './Effects/Spinner'
-import { autoDetectRenderer, Container, Graphics, ICanvas, IRenderer } from 'pixi.js'
+import { autoDetectRenderer, Container, EventBoundary, FederatedEvent, FederatedPointerEvent, Graphics, ICanvas, IRenderer } from 'pixi.js'
 
 const { elementToPositionAbsolute } = Utils
 
@@ -264,4 +264,46 @@ export class RpgRenderer {
         this.scene = null
         this.sceneContainer.removeChildren()
     }
+
+    /**
+     * @title Propagate mouse event to Viewport
+     * @method propagateEvent(ev)
+     * @stability 1
+     * @memberof RpgRenderer
+     * @returns {void}
+     */
+    propagateEvent(ev: MouseEvent) {
+        const boundary = new EventBoundary(this.stage);
+        const event = new FederatedPointerEvent(boundary)
+        event.global.set(ev.clientX, ev.clientY);
+        event.type = ev.type;
+        this.getScene<SceneMap>()?.viewport?.emit(event.type as any, event)
+    }
+
+    /***
+     * Propagate events from an HTMLElement to the canvas
+     * 
+     * @title Propagate events
+     * @method addPropagateEventsFrom(el)
+     * @stability 1
+     * @memberof RpgRenderer
+     * @returns {void}
+     */
+    addPropagateEventsFrom(el: HTMLElement) {
+        const eventMap = {
+            MouseEvent: ['click', 'mousedown', 'mouseup', 'mousemove', 'mouseenter', 'mouseleave', 'mouseover', 'mouseout', 'contextmenu', 'wheel'],
+            KeyboardEvent: ['keydown', 'keyup', 'keypress', 'keydownoutside', 'keyupoutside', 'keypressoutside'],
+            PointerEvent: ['pointerdown', 'pointerup', 'pointermove', 'pointerover', 'pointerout', 'pointerenter', 'pointerleave', 'pointercancel'],
+            TouchEvent: ['touchstart', 'touchend', 'touchmove', 'touchcancel']
+        };
+
+        for (let [_Constructor, events] of Object.entries(eventMap)) {
+            for (let type of events) {
+                el.addEventListener(type, (e) => {
+                    const _class = window[_Constructor] ?? MouseEvent
+                    this.canvas.dispatchEvent(new _class(type, e))
+                });
+            }
+        }
+    }
 }
diff --git a/packages/client/src/RpgClientEngine.ts b/packages/client/src/RpgClientEngine.ts
@@ -273,6 +273,12 @@ export class RpgClientEngine {
     }
 
     getResourceUrl(source: string): string {
+        // @ts-ignore
+        if (window.urlCache && window.urlCache[source]) {
+            // @ts-ignore
+            return window.urlCache[source]
+        }
+
         if (source.startsWith('data:')) {
             return source
         }

diff --git a/packages/client/src/Scene/Map.ts b/packages/client/src/Scene/Map.ts
@@ -130,7 +130,6 @@ export class SceneMap extends Scene {
         if (nbLoad > 0) {
             const assetsLoaded = await Assets.load(assets)
             for (let assetName in assetsLoaded) {
-                if (!assetsLoaded[assetName]) console.log(assetName, assetsLoaded[assetName])
                 const spritesheet = spritesheets.get(assetName)
                 if (spritesheet) spritesheet.resource = assetsLoaded[assetName]
             }
@@ -368,9 +367,6 @@ export class SceneMap extends Scene {
     on(eventName: keyof DisplayObjectEvents, cb: (position: { x: number, y: number }, ev?: any) => any) {
         if (!this.viewport) return
         this.viewport.eventMode = 'static'
-        if (eventName == 'click') {
-            eventName = 'pointerdown'
-        }
         this.viewport.on(eventName, (...args) => {
             const ev: FederatedPointerEvent = args[0] as any
             const pos = ev.getLocalPosition(this.viewport as Viewport)

diff --git a/packages/plugins/mobile-gui/src/controls/main.vue b/packages/plugins/mobile-gui/src/controls/main.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="controls">
+    <div class="controls" @click="propagate">
         <div class="d-pad" ref="dPad"></div>
         <div class="actions">
             <div class="action" @click="action"></div>
@@ -92,6 +92,9 @@ export default {
         },
         action() {
             this.rpgEngine.controls.applyControl(Control.Action)
+        },
+        propagate(evt) {
+            this.rpgEngine.renderer.propagateEvent(evt)
         }
     }
 }

diff --git a/packages/sample2/main/scene-map.ts b/packages/sample2/main/scene-map.ts
@@ -1,7 +1,11 @@
 import { RpgSceneMapHooks, RpgSceneMap, RpgGui } from '@rpgjs/client'
 
 const sceneMap: RpgSceneMapHooks = {
-
+    onAfterLoading(scene) {
+        scene.on('click', (scene) => {
+            console.log(scene)
+        })
+    },
 }
 
 export default sceneMap;
diff --git a/packages/server/src/RpgServer.ts b/packages/server/src/RpgServer.ts
@@ -220,6 +220,9 @@ export interface RpgServer {
      * server.module.emit('server.player.onAuth', player)
      * ```
      * 
+     * > When we issue a hook, it has to be in form:
+     * > `<side>.<property>.<function>`
+     * 
      * And listen to the hook:
      * 
      * ```ts

diff --git a/tests/unit-tests/specs/scene.spec.ts b/tests/unit-tests/specs/scene.spec.ts
@@ -4,9 +4,6 @@ import { RpgClientEngine, RpgModule, RpgClient, RpgSceneMap } from '@rpgjs/clien
 import { clear } from '@rpgjs/testing'
 import { beforeEach, test, afterEach, expect, describe, vi, afterAll } from 'vitest'
 
-let  client: RpgClientEngine, 
-player: RpgPlayer
-
 beforeEach(async () => {
     clear()
 })
@@ -38,15 +35,14 @@ describe('Hooks called', () => {
     })
 })
 
-// TODO: can't make this test work, because PIXI doesn't propagate the event (only for the test). 
 test('Scene Click', async () => {
     const onClick = vi.fn()
 
     @RpgModule<RpgClient>({
         scenes: {
             map: {
                 onAfterLoading(scene) {
-                    scene.on('pointerdown', onClick)
+                    expect(scene).toBeInstanceOf(RpgSceneMap)
                 }
             }
         }
@@ -57,7 +53,5 @@ test('Scene Click', async () => {
         client: RpgClientModule
     }])
 
-    const guiEl = document.getElementById('rpg')?.children[1].children[0]
-    guiEl?.dispatchEvent(new MouseEvent('pointerdown'))
-    //expect(onClick).toHaveBeenCalled()
+    client.renderer.propagateEvent(new MouseEvent('click'))
 })