@rpgjs/client 4.0.3 → 4.0.4

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.0.4 (2023-10-13)
+
+**Note:** Version bump only for package @rpgjs/client
+
+
+
+
+
 ## 4.0.3 (2023-10-10)
 
 **Note:** Version bump only for package @rpgjs/client

package/browser/React-ab9e74c2.js

@@ -0,0 +1,127 @@
+import require$$0 from "react-dom";
+import { useCallback, useSyncExternalStore, createContext, useState, useContext, useEffect, useRef, createElement } from "react";
+import { map, tap, BehaviorSubject } from "rxjs";
+var createRoot;
+var m = require$$0;
+if ({}.NODE_ENV === "production") {
+  createRoot = m.createRoot;
+  m.hydrateRoot;
+} else {
+  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  createRoot = function(c, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m.createRoot(c, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+}
+function listenKeys(store, keys, listener) {
+  let keysSet = /* @__PURE__ */ new Set([...keys, void 0]);
+  return store.listen((value, changed) => {
+    if (keysSet.has(changed)) {
+      listener(value, changed);
+    }
+  });
+}
+function useStore(store, opts = {}) {
+  let subscribe = useCallback(
+    (onChange) => opts.keys ? listenKeys(store, opts.keys, onChange) : store.listen(onChange),
+    [opts.keys, store]
+  );
+  let get = store.get.bind(store);
+  return useSyncExternalStore(subscribe, get, get);
+}
+const RpgReactContext = createContext({});
+const useObjects = () => {
+  const [objects, setObjects] = useState([]);
+  const {
+    rpgObjects
+  } = useContext(RpgReactContext);
+  useEffect(() => {
+    rpgObjects.pipe(map((objects2) => Object.values(objects2).map((obj) => obj.object))).subscribe(setObjects);
+  }, []);
+  return objects;
+};
+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 == null ? void 0 : _onChanges();
+    });
+    return () => subscription.unsubscribe();
+  }, []);
+  return useSyncExternalStore(subscribe, () => currentPlayerRef.current);
+};
+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(() => {
+          var _a;
+          parentGui.listenTooltipObjects.subscribe(setTooltip);
+          (_a = parentGui.currentScene) == null ? void 0 : _a.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) {
+      if (!val[key].isFunction)
+        continue;
+      array.push(val[key]);
+    }
+    this._gui.next(array);
+  }
+}
+export {
+  ReactGui,
+  RpgReactContext,
+  useCurrentPlayer,
+  useObjects,
+  useStore
+};

package/browser/manifest.json

@@ -1,6 +1,6 @@
 {
   "src/Gui/React.ts": {
-    "file": "React-e57feed9.js",
+    "file": "React-ab9e74c2.js",
     "isDynamicEntry": true,
     "src": "src/Gui/React.ts"
   },

package/browser/rpg.client.js

@@ -36326,7 +36326,7 @@ class Gui {
     }
     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-e57feed9.js").then((m2) => m2.ReactGui));
+      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"];