react-simple-game-engine 0.2.59 → 0.2.61

package/lib/ui-components/float-container.d.ts

@@ -1,8 +1,9 @@
 import { CSSProperties, ReactNode } from "react";
 declare type FloatContainerProps = {
     style?: CSSProperties;
-    children: ReactNode;
+    children?: ReactNode;
+    id?: string;
 };
-export declare function FloatContainer({ children, style }: FloatContainerProps): JSX.Element;
+export declare function FloatContainer({ children, style, id }: FloatContainerProps): JSX.Element;
 export {};
 //# sourceMappingURL=float-container.d.ts.map

package/lib/ui-components/float-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"float-container.d.ts","sourceRoot":"","sources":["../../src/ui-components/float-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,aAAK,mBAAmB,GAAG;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,mBAAmB,eAiBtE"}
+{"version":3,"file":"float-container.d.ts","sourceRoot":"","sources":["../../src/ui-components/float-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,aAAK,mBAAmB,GAAG;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,mBAAmB,eAoB1E"}

package/lib/ui-components/float-container.js

@@ -11,6 +11,6 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 export function FloatContainer(_a) {
-    var children = _a.children, style = _a.style;
-    return (_jsx("div", __assign({ style: __assign({ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, style) }, { children: _jsx("div", __assign({ style: { position: "relative", width: "100%", height: "100%" } }, { children: children })) })));
+    var children = _a.children, style = _a.style, id = _a.id;
+    return (_jsx("div", __assign({ style: __assign({ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, style) }, { children: _jsx("div", __assign({ id: id, style: { position: "relative", width: "100%", height: "100%" } }, { children: children })) })));
 }

package/lib/ui-components/modal.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement, ReactNode } from "react";
+declare type ModalProps = {
+    children?: ReactElement;
+    content: ReactNode;
+    defaultOpen?: boolean;
+    event?: string;
+    onClose?: () => void;
+};
+export declare type RefModalFunctions = {
+    open: () => void;
+    close: () => void;
+};
+export declare const Modal: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<RefModalFunctions>>;
+export {};
+//# sourceMappingURL=modal.d.ts.map

package/lib/ui-components/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/ui-components/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,YAAY,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAGf,aAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,KAAK,0GAwHhB,CAAC"}

package/lib/ui-components/modal.js

@@ -0,0 +1,89 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useEffect, useState, useCallback, forwardRef, cloneElement, useImperativeHandle, useRef, } from "react";
+import * as ReactDOM from "react-dom";
+export var Modal = forwardRef(function (_a, ref) {
+    var _b;
+    var trigger = _a.children, content = _a.content, _c = _a.defaultOpen, defaultOpen = _c === void 0 ? false : _c, onClose = _a.onClose, _d = _a.event, event = _d === void 0 ? "onClick" : _d;
+    var refModal = useRef(null);
+    var _e = useState(defaultOpen), isOpen = _e[0], setOpen = _e[1];
+    var container = useMemo(function () {
+        var c = document.createElement("div");
+        c.style.position = "fixed";
+        c.style.top = "0";
+        c.style.left = "0";
+        c.style.bottom = "0";
+        c.style.right = "0";
+        return c;
+    }, []);
+    useEffect(function () {
+        var stack = document.getElementById("scene-modal-stack");
+        stack.appendChild(container);
+        return function () {
+            stack.removeChild(container);
+        };
+    }, [container]);
+    var handleOpen = useCallback(function () {
+        setOpen(true);
+    }, []);
+    var handleClose = useCallback(function () {
+        setOpen(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose]);
+    useEffect(function () {
+        if (isOpen) {
+            var handleClickClose_1 = function () {
+                setTimeout(function () {
+                    handleClose();
+                }, 0);
+            };
+            var buttons_1 = refModal.current.querySelectorAll('[data-role="close"]');
+            for (var _i = 0, _a = Array.from(buttons_1); _i < _a.length; _i++) {
+                var btn = _a[_i];
+                btn.addEventListener("click", handleClickClose_1);
+            }
+            return function () {
+                for (var _i = 0, _a = Array.from(buttons_1); _i < _a.length; _i++) {
+                    var btn = _a[_i];
+                    btn.removeEventListener("click", handleClickClose_1);
+                }
+            };
+        }
+    }, [isOpen, handleClose]);
+    useImperativeHandle(ref, function () { return ({
+        open: handleOpen,
+        close: handleClose,
+    }); }, [handleOpen, handleClose]);
+    return (_jsxs(_Fragment, { children: [trigger
+                ? cloneElement(trigger, (_b = {},
+                    _b[event] = handleOpen,
+                    _b), trigger.props.children)
+                : null, ReactDOM.createPortal(isOpen ? (_jsxs("div", __assign({ style: {
+                    width: "100%",
+                    height: "100%",
+                    position: "relative",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, ref: refModal }, { children: [_jsx("div", { style: {
+                            width: "100%",
+                            height: "100%",
+                            position: "absolute",
+                            zIndex: 0,
+                        }, onClick: handleClose }), _jsx("main", __assign({ style: {
+                            position: "relative",
+                            zIndex: 1,
+                            minWidth: "200px",
+                            minHeight: "200px",
+                        } }, { children: content }))] }))) : null, container)] }));
+});

package/lib/ui-components/scene-runner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scene-runner.d.ts","sourceRoot":"","sources":["../../src/ui-components/scene-runner.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAEb,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAQzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,oBAAY,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;CAC/C,CAAC;AAEF,aAAK,gBAAgB,GAAG,sBAAsB,GAAG;IAC/C,OAAO,EAAE,KAAK,CAAC;CAChB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAiC,EAEjC,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,YAAY,EAAE,YAAY,EAC1B,QAAQ,GACT,EAAE,gBAAgB,eA2IlB"}
+{"version":3,"file":"scene-runner.d.ts","sourceRoot":"","sources":["../../src/ui-components/scene-runner.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAEb,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAQzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,oBAAY,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;CAC/C,CAAC;AAEF,aAAK,gBAAgB,GAAG,sBAAsB,GAAG;IAC/C,OAAO,EAAE,KAAK,CAAC;CAChB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAiC,EAEjC,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,YAAY,EAAE,YAAY,EAC1B,QAAQ,GACT,EAAE,gBAAgB,eAqJlB"}

package/lib/ui-components/scene-runner.js

@@ -93,5 +93,11 @@ export function SceneRunner(_a) {
                             }
                             return rendered;
                         })()
-                        : assetsLoader })) : (_jsx(_Fragment, { children: isBootDone ? (_jsxs(_Fragment, { children: [_jsx(current.UI, __assign({ scene: current }, current.getUIProps())), joystick && (_jsx(Control, __assign({ scene: current }, (joystick === true ? {} : joystick))))] })) : (_jsx("div", {})) })) }))] })));
+                        : assetsLoader })) : (_jsx(_Fragment, { children: isBootDone ? (_jsxs(_Fragment, { children: [_jsx(current.UI, __assign({ scene: current }, current.getUIProps())), _jsx("div", { id: "scene-modal-stack", style: {
+                                    position: "absolute",
+                                    top: 0,
+                                    left: 0,
+                                    width: 0,
+                                    height: 0,
+                                } }), joystick && (_jsx(Control, __assign({ scene: current }, (joystick === true ? {} : joystick))))] })) : (_jsx("div", {})) })) }))] })));
 }

package/lib/utilities.d.ts

@@ -1,3 +1,4 @@
 export * from "./classes/watcher";
 export * from "./classes/sound-watcher";
+export * from "./ui-components/modal";
 //# sourceMappingURL=utilities.d.ts.map

package/lib/utilities.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../src/utilities.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../src/utilities.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC"}

package/lib/utilities.js

@@ -1,2 +1,3 @@
 export * from "./classes/watcher";
 export * from "./classes/sound-watcher";
+export * from "./ui-components/modal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-game-engine",
-  "version": "0.2.59",
+  "version": "0.2.61",
   "description": "",
   "main": "lib/index.js",
   "types": "lib",