react-simple-game-engine 0.2.91 → 0.2.93

package/lib/classes/scene.d.ts

@@ -82,7 +82,7 @@ export declare abstract class Scene<UIP = any> {
     })[]): Promise<import("p5").Image[]>;
     createSounds(...srcables: (string | {
         src: string;
-        volumn?: number;
+        volume?: number;
         type?: SoundType;
     })[]): Promise<Sound[]>;
     mapSprites(...srcs: string[]): Promise<void>;

package/lib/classes/scene.js

@@ -290,8 +290,8 @@ var Scene = /** @class */ (function () {
                         return [4 /*yield*/, createAssetSound(decor.src, decor.type)];
                     case 2:
                         sound = _b.sent();
-                        if (decor.volumn) {
-                            sound.volumn = decor.volumn;
+                        if (decor.volume) {
+                            sound.volume = decor.volume;
                         }
                         this[decor.propertyKey] = sound;
                         this.sounds.push(sound);
@@ -331,7 +331,7 @@ var Scene = /** @class */ (function () {
             srcables[_i] = arguments[_i];
         }
         return __awaiter(this, void 0, void 0, function () {
-            var sounds, _a, srcables_1, srcable, _b, volumn, src, _c, type, sound;
+            var sounds, _a, srcables_1, srcable, _b, volume, src, _c, type, sound;
             return __generator(this, function (_d) {
                 switch (_d.label) {
                     case 0:
@@ -342,13 +342,13 @@ var Scene = /** @class */ (function () {
                         if (!(_a < srcables_1.length)) return [3 /*break*/, 4];
                         srcable = srcables_1[_a];
                         _b = typeof srcable === "string"
-                            ? { src: srcable, volumn: undefined, type: undefined }
-                            : srcable, volumn = _b.volumn, src = _b.src, _c = _b.type, type = _c === void 0 ? SoundType.ONCE : _c;
+                            ? { src: srcable, volume: undefined, type: undefined }
+                            : srcable, volume = _b.volume, src = _b.src, _c = _b.type, type = _c === void 0 ? SoundType.ONCE : _c;
                         return [4 /*yield*/, createAssetSound(src, type)];
                     case 2:
                         sound = _d.sent();
-                        if (volumn) {
-                            sound.volumn = volumn;
+                        if (volume) {
+                            sound.volume = volume;
                         }
                         sounds.push(sound);
                         this.sounds.push(sound);
@@ -421,8 +421,8 @@ var Scene = /** @class */ (function () {
                         return [4 /*yield*/, createAssetSound(src, decor.type)];
                     case 2:
                         sound = _b.sent();
-                        if (decor.volumn) {
-                            sound.volumn = decor.volumn;
+                        if (decor.volume) {
+                            sound.volume = decor.volume;
                         }
                         this[decor.propertyKey] = sound;
                         this.sounds.push(sound);

package/lib/classes/sound.d.ts

@@ -5,8 +5,8 @@ export declare class Sound {
     static Management: SoundManagement;
     readonly native: HTMLAudioElement;
     constructor(type?: SoundType);
-    get volumn(): number;
-    set volumn(vol: number);
+    get volume(): number;
+    set volume(vol: number);
     get isStopped(): boolean;
     playNow(): Promise<void>;
     pause(): Promise<void>;

package/lib/classes/sound.js

@@ -43,7 +43,7 @@ var Sound = /** @class */ (function () {
         this.type = type;
         this.native = new Audio();
     }
-    Object.defineProperty(Sound.prototype, "volumn", {
+    Object.defineProperty(Sound.prototype, "volume", {
         get: function () {
             return this.native.volume;
         },

package/lib/decorators/sound-from.decor.d.ts

@@ -1,6 +1,6 @@
 import { SoundType } from "../export-enums";
 export declare function SoundFrom(srcable?: string | {
     src?: string;
-    volumn?: number;
+    volume?: number;
 }, type?: SoundType): (target: any, propertyKey: string) => void;
 //# sourceMappingURL=sound-from.decor.d.ts.map

package/lib/decorators/sound-from.decor.js

@@ -4,14 +4,14 @@ export function SoundFrom(srcable, type) {
     return function (target, propertyKey) {
         var _a = srcable
             ? typeof srcable === "string"
-                ? { src: srcable, volumn: undefined }
+                ? { src: srcable, volume: undefined }
                 : srcable
-            : { volumn: undefined, src: undefined }, volumn = _a.volumn, src = _a.src;
+            : { volume: undefined, src: undefined }, volume = _a.volume, src = _a.src;
         if (!target.soundsDecor) {
             target.soundsDecor = [];
         }
         target.soundsDecor.push({
-            volumn: volumn,
+            volume: volume,
             propertyKey: propertyKey,
             src: src,
             type: type,

package/lib/export-types.d.ts

@@ -42,7 +42,7 @@ export declare type SoundDecor = {
     propertyKey: string;
     src?: string;
     type: SoundType;
-    volumn?: number;
+    volume?: number;
 };
 export declare type SpriteDecor = {
     propertyKey: string;

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

@@ -1 +1 @@
-{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../src/ui-components/control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAgB,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEpE,oBAAY,YAAY,GAAG;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,SAAS,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,CAAC;IAEjD,QAAQ,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACvC,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,iBAAyB,EACzB,iBAAyB,EACzB,GAAG,EACH,IAAI,EACJ,KAAK,EACL,MAAM,EACN,QAAQ,EACR,WAAwB,EACxB,SAAwB,EACxB,QAAa,GACd,EAAE,YAAY,eA8Bd"}
+{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../src/ui-components/control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAgB,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGpE,oBAAY,YAAY,GAAG;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,SAAS,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,CAAC;IAEjD,QAAQ,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACvC,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,iBAAyB,EACzB,iBAAyB,EACzB,GAAG,EACH,IAAI,EACJ,KAAK,EACL,MAAM,EACN,QAAQ,EACR,WAAwB,EACxB,SAAwB,EACxB,QAAa,GACd,EAAE,YAAY,eA6Bd"}

package/lib/ui-components/control.js

@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useLongPress } from "../hooks/interact";
+import { getClassname } from "../utils";
 export function Control(_a) {
     var _b = _a.xAxisOriginCenter, xAxisOriginCenter = _b === void 0 ? false : _b, _c = _a.yAxisOriginCenter, yAxisOriginCenter = _c === void 0 ? false : _c, top = _a.top, left = _a.left, right = _a.right, bottom = _a.bottom, children = _a.children, _d = _a.orientation, orientation = _d === void 0 ? "vertical" : _d, _e = _a.alignment, alignment = _e === void 0 ? "flex-start" : _e, _f = _a.interact, interact = _f === void 0 ? {} : _f;
     var longPressProps = useLongPress(interact.onLongPress, interact.delay, interact.exts);
@@ -20,13 +21,11 @@ export function Control(_a) {
         var y = yAxisOriginCenter ? "".concat(top != null ? -50 : 50, "%") : 0;
         return "translate(".concat(x, ",").concat(y, ")");
     }, [left, top, xAxisOriginCenter, yAxisOriginCenter]);
-    return (_jsx("div", __assign({ style: {
-            position: "absolute",
+    return (_jsx("div", __assign({ className: getClassname("ui-control"), style: {
             top: top,
             left: left,
             right: right,
             bottom: bottom,
-            display: "inline-flex",
             flexDirection: orientation === "vertical" ? "column" : "row",
             alignItems: alignment,
             transform: transform,

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,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"}
+{"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;AAGjD,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,eAM1E"}

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

@@ -10,7 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassname } from "../utils";
 export function FloatContainer(_a) {
     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 })) })));
+    return (_jsx("div", __assign({ className: getClassname("float-container"), style: style }, { children: _jsx("div", __assign({ id: id }, { children: children })) })));
 }

package/lib/ui-components/game-bootstrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"game-bootstrap.d.ts","sourceRoot":"","sources":["../../src/ui-components/game-bootstrap.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAmB,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EAAe,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAErE,aAAK,cAAc,GAAG,sBAAsB,GAAG;IAC7C,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,eA4D3E"}
+{"version":3,"file":"game-bootstrap.d.ts","sourceRoot":"","sources":["../../src/ui-components/game-bootstrap.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAmB,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAG1E,OAAO,EAAe,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAErE,aAAK,cAAc,GAAG,sBAAsB,GAAG;IAC7C,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,eAsL3E"}

package/lib/ui-components/game-bootstrap.js

@@ -23,6 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { SceneManagement } from "../classes/scene-management";
+import { getClassname } from "../utils";
 import { Logger } from "./logger";
 import { SceneRunner } from "./scene-runner";
 export function GameBootstrap(_a) {
@@ -52,7 +53,9 @@ export function GameBootstrap(_a) {
             document.createElement("style");
         style.id = "game-container-style-wrap";
         document.head.appendChild(style);
-        style.appendChild(document.createTextNode("\n          .game-root, .game-root * {\n              box-sizing: border-box;\n              -webkit-touch-callout: none;\n              -webkit-tap-highlight-color: none;\n              -webkit-user-select: none;\n              -ms-user-select: none;\n              user-select: none;\n              text-size-adjust: none;\n          }\n    "));
+        var gameRootClass = getClassname("game-root");
+        var gameLoggerClass = getClassname("game-logger");
+        style.appendChild(document.createTextNode("\n          .".concat(getClassname("assets-fail-view"), "{\n            background-color: #f28181a1;\n            min-height: 100px;\n            padding: 10px;\n            color: #000;\n          }\n          \n          .").concat(getClassname("game-modal"), " {\n            position: fixed;\n            top: 0;\n            left: 0;\n          }\n\n          .").concat(getClassname("scene-modal-stack"), "{\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 0;\n            height: 0;\n            z-index: 2;\n          }\n          \n          .").concat(getClassname("modal-content-main"), "{\n            position: relative;\n            z-index: 1;\n            min-width: 200px;\n            min-height: 200px;\n          }\n\n          .").concat(getClassname("modal-content-closer"), "{\n            width: 100%;\n            height: 100%;\n            position: absolute;\n            z-index: 0;\n          }\n          .").concat(getClassname("modal-content-centered"), "{\n            width: 100%;\n            height: 100%;\n            position: relative;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n          }\n\n          .").concat(getClassname("modal-content-wrap"), "{\n            width: 100%;\n            height: 100%;\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n          }\n\n          .").concat(gameRootClass, ", .").concat(gameRootClass, " *,\n          .").concat(gameLoggerClass, ", .").concat(gameLoggerClass, " *\n          {\n              box-sizing: border-box;\n              -webkit-touch-callout: none;\n              -webkit-tap-highlight-color: none;\n              -webkit-user-select: none;\n              -ms-user-select: none;\n              user-select: none;\n              text-size-adjust: none;\n          }\n\n          .").concat(gameRootClass, " {\n            overflow: hidden;\n            position: relative;\n          }\n\n          .").concat(gameLoggerClass, " {\n            z-index: 4;\n            position: fixed;\n            top:0;\n            right:0;\n          }\n\n          .").concat(getClassname("message-stack"), " {\n              width: cacl(100vw - 40px);\n              max-width: 300px;\n              max-height: calc(50vh - 50px);\n              min-width: 200px;\n              min-height: 150px;\n              position: absolute;\n              top: 5px;\n              right: 5px;\n              padding: 5px;\n              background-color: #0000007b;\n              color: #fff;\n              font-size: 0.8rem;\n\n              display: flex;\n              flex-direction: column;\n          }\n\n          .").concat(getClassname("message-stack-heading"), "{\n            width: 100%;\n            display: flex;\n            justify-content: flex-end;\n          }\n\n          .").concat(getClassname("message-stack-content"), "{\n            flex: 1;\n            width: 100%;\n            overflow-x: hidden;\n            overflow-y: auto;\n          }\n\n\n          .").concat(getClassname("float-container"), " {\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n          }\n\n          .").concat(getClassname("float-container"), " > div {\n            position: relative;\n            width: 100%;\n            height: 100%;\n          }\n\n          .").concat(getClassname("ui-control"), " {\n            position: absolute,\n            display: inline-flex,\n          }\n    ")));
     }, []);
     return (_jsxs(_Fragment, { children: [_jsx(SceneRunner, __assign({ current: currentScene }, props), currentScene.sessionId), logPopup && _jsx(Logger, {})] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/ui-components/logger.tsx"],"names":[],"mappings":";AAIA,wBAAgB,MAAM,gCAoGrB"}
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/ui-components/logger.tsx"],"names":[],"mappings":";AAIA,wBAAgB,MAAM,gCAqErB"}

package/lib/ui-components/logger.js

@@ -21,16 +21,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import { toText } from "../utils";
+import { getClassname, toText } from "../utils";
 export function Logger() {
     var _a = useState([]), messages = _a[0], setMessages = _a[1];
     var refList = useRef(null);
     var container = useMemo(function () {
         var c = document.createElement("div");
-        c.style.zIndex = "4";
-        c.style.position = "fixed";
-        c.style.top = "0";
-        c.style.right = "0";
+        c.className = getClassname("game-logger");
         document.body.appendChild(c);
         return c;
     }, []);
@@ -90,24 +87,5 @@ export function Logger() {
             pushMessage(args);
         };
     }, [pushMessage]);
-    return ReactDOM.createPortal(messages.length ? (_jsxs("div", __assign({ style: {
-            width: "calc(50vw - 200px)",
-            height: "calc(50vh - 50px)",
-            minWidth: 200,
-            minHeight: 150,
-            position: "absolute",
-            top: 5,
-            right: 5,
-            padding: 5,
-            backgroundColor: "#0000007b",
-            color: "#fff",
-            fontSize: "0.8rem",
-            display: "flex",
-            flexDirection: "column",
-        } }, { children: [_jsx("div", __assign({ style: { width: "100%", display: "flex", justifyContent: "flex-end" } }, { children: _jsx("p", __assign({ onClick: function () { return setMessages([]); } }, { children: "X Clear" })) })), _jsx("div", __assign({ style: {
-                    flex: 1,
-                    width: "100%",
-                    overflowX: "hidden",
-                    overflowY: "auto",
-                }, ref: refList }, { children: messages.map(function (mss, i) { return (_jsxs("p", { children: ["- ", mss] }, i)); }) }))] }))) : null, container);
+    return ReactDOM.createPortal(messages.length ? (_jsxs("div", __assign({ className: getClassname("message-stack") }, { children: [_jsx("div", __assign({ className: getClassname("message-stack-heading") }, { children: _jsx("p", __assign({ onClick: function () { return setMessages([]); } }, { children: "X Clear" })) })), _jsx("div", __assign({ className: getClassname("message-stack-content"), ref: refList }, { children: messages.map(function (mss, i) { return (_jsxs("p", { children: ["- ", mss] }, i)); }) }))] }))) : null, container);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/ui-components/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,YAAY,EAKZ,aAAa,EAEd,MAAM,OAAO,CAAC;AAGf,aAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;IACtB,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,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,0GAuEhB,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/ui-components/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,YAAY,EAKZ,aAAa,EAEd,MAAM,OAAO,CAAC;AAIf,aAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;IACtB,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,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,0GAqEhB,CAAC"}

package/lib/ui-components/modal.js

@@ -12,15 +12,14 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useEffect, useState, useCallback, forwardRef, cloneElement, useImperativeHandle, useRef, memo, } from "react";
 import * as ReactDOM from "react-dom";
+import { getClassname } from "../utils";
 export var Modal = forwardRef(function (_a, ref) {
     var _b;
     var backgroundStyle = _a.backgroundStyle, 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 _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.className = getClassname("game-modal");
         return c;
     }, []);
     useEffect(function () {
@@ -73,25 +72,5 @@ var ModalWrap = memo(function (_a) {
             close: handleClose,
         }, content.props.children);
     }, [content]);
-    return (_jsx("div", __assign({ style: {
-            width: "100%",
-            height: "100%",
-            position: "fixed",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-        } }, { children: _jsxs("div", __assign({ style: {
-                width: "100%",
-                height: "100%",
-                position: "relative",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-            }, ref: refModal }, { children: [_jsx("div", { style: __assign({ width: "100%", height: "100%", position: "absolute", zIndex: 0 }, backgroundStyle), onClick: handleClose }), _jsx("main", __assign({ style: {
-                        position: "relative",
-                        zIndex: 1,
-                        minWidth: "200px",
-                        minHeight: "200px",
-                    } }, { children: el }))] })) })));
+    return (_jsx("div", __assign({ className: getClassname("modal-content-wrap") }, { children: _jsxs("div", __assign({ className: getClassname("modal-content-centered"), ref: refModal }, { children: [_jsx("div", { className: getClassname("modal-content-closer"), style: __assign({}, backgroundStyle), onClick: handleClose }), _jsx("main", __assign({ className: getClassname("modal-content-main") }, { children: el }))] })) })));
 });

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;AAKzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIrD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAG3E,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,oBAAoB,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;CACvD,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,eA+IlB"}
+{"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;AAKzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIrD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAG3E,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,oBAAoB,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;CACvD,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,eA+HlB"}

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

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState, } from "react";
 import { Scaler } from "../classes/scaler";
-import { useWindowSize } from "../utils";
+import { getClassname, useWindowSize } from "../utils";
 import { LayoutMode } from "../export-enums";
 import { ScalerContainer } from "./scaler-container";
 import { Sketch } from "./sketch";
@@ -60,11 +60,9 @@ export function SceneRunner(_a) {
         }
         return (AssetsLoader !== null && AssetsLoader !== void 0 ? AssetsLoader : _jsx("div", { children: "Assets loading..." }));
     }, [AssetsLoader]);
-    return (_jsxs("div", __assign({ className: "game-root", style: {
+    return (_jsxs("div", __assign({ className: getClassname("game-root"), style: {
             width: screenSize.width,
             height: screenSize.height,
-            overflow: "hidden",
-            position: "relative",
         } }, { children: [_jsx(FloatContainer, __assign({ style: {
                     zIndex: 0,
                     backgroundColor: "rgb(41,41,41)",
@@ -76,21 +74,9 @@ export function SceneRunner(_a) {
                         ? (function () {
                             var rendered = current.renderAssetsFail();
                             if (Array.isArray(rendered)) {
-                                return (_jsx("div", __assign({ style: {
-                                        backgroundColor: "#f28181a1",
-                                        minHeight: 100,
-                                        padding: 10,
-                                        color: "#000",
-                                    } }, { children: rendered.map(function (item, i) { return (_jsxs("p", { children: ["- ", item.type, ": ", item.detail] }, i)); }) })));
+                                return (_jsx("div", __assign({ className: getClassname("assets-fail-view") }, { children: rendered.map(function (item, i) { return (_jsxs("p", { children: ["- ", item.type, ": ", item.detail] }, i)); }) })));
                             }
                             return rendered;
                         })()
-                        : assetsLoader })) : (_jsx(_Fragment, { children: isBootDone ? (_jsxs(_Fragment, { children: [_jsx(current.UI, __assign({ scene: current }, current.getUIProps())), joystick && (_jsx(MovementControl, __assign({ scene: current }, (joystick === true ? {} : joystick)))), _jsx("div", { id: "scene-modal-stack", style: {
-                                    position: "absolute",
-                                    top: 0,
-                                    left: 0,
-                                    width: 0,
-                                    height: 0,
-                                    zIndex: 2,
-                                } })] })) : (_jsx("div", {})) })) }))] })));
+                        : assetsLoader })) : (_jsx(_Fragment, { children: isBootDone ? (_jsxs(_Fragment, { children: [_jsx(current.UI, __assign({ scene: current }, current.getUIProps())), joystick && (_jsx(MovementControl, __assign({ scene: current }, (joystick === true ? {} : joystick)))), _jsx("div", { className: getClassname("scene-modal-stack"), id: "scene-modal-stack" })] })) : (_jsx("div", {})) })) }))] })));
 }

package/lib/utils.d.ts

@@ -14,4 +14,5 @@ export declare function useWindowSize(): {
     height: number;
 };
 export declare function toText(obj: Record<string, any> | Record<string, any>[]): string | Record<string, any>;
+export declare function getClassname(cls: string): string;
 //# sourceMappingURL=utils.d.ts.map

package/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAiBxC,wBAAsB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAInE;AAED,wBAAsB,gBAAgB,CACpC,GAAG,EAAE,MAAM,EACX,IAAI,CAAC,EAAE,SAAS,GACf,OAAO,CAAC,KAAK,CAAC,CA6BhB;AAED,wBAAsB,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,oBAQxC;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAO5B;AAED,wBAAsB,QAAQ,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,EAC3C,KAAK,EAAE,CAAC,EAAE,EACV,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EACtE,KAAK,SAAI,GACR,OAAO,CAAC,CAAC,EAAE,CAAC,CAkBd;AAED,wBAAgB,aAAa;;;EAiB5B;AAED,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,gCAetE"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAiBxC,wBAAsB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAInE;AAED,wBAAsB,gBAAgB,CACpC,GAAG,EAAE,MAAM,EACX,IAAI,CAAC,EAAE,SAAS,GACf,OAAO,CAAC,KAAK,CAAC,CA6BhB;AAED,wBAAsB,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,oBAQxC;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAO5B;AAED,wBAAsB,QAAQ,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,EAC3C,KAAK,EAAE,CAAC,EAAE,EACV,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EACtE,KAAK,SAAI,GACR,OAAO,CAAC,CAAC,EAAE,CAAC,CAkBd;AAED,wBAAgB,aAAa;;;EAiB5B;AAED,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,gCAetE;AAID,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAEvC"}

package/lib/utils.js

@@ -190,3 +190,7 @@ export function toText(obj) {
         return obj;
     }
 }
+var ENGINE_CLASS_PREFIX = "spt-hc_rsgn_";
+export function getClassname(cls) {
+    return ENGINE_CLASS_PREFIX + cls;
+}

package/package.json

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