react-simple-game-engine
Version:
[WIP] not able to use in currently. <!-- Document cumming soon... -->
64 lines (63 loc) • 7.57 kB
JavaScript
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);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
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) {
var logPopup = _a.logPopup, scenes = _a.scenes, props = __rest(_a, ["logPopup", "scenes"]);
var sceneManagement = useMemo(function () {
return new SceneManagement(scenes);
}, [scenes]);
var _b = useState(sceneManagement.currentScene), currentScene = _b[0], setCurrentScene = _b[1];
var _c = useState(currentScene.loadedAssets), setLoadedAssets = _c[1];
var _d = useState([]), setLoadAssetsError = _d[1];
useEffect(function () {
sceneManagement.onChangeScene(function (scene) {
setCurrentScene(scene);
setLoadedAssets(scene.loadedAssets);
});
}, [sceneManagement]);
useEffect(function () {
currentScene.onLoadAssetNotify(function (isLoaded, errors) {
setLoadedAssets(isLoaded);
if (errors) {
setLoadAssetsError(errors);
}
});
}, [currentScene]);
useEffect(function () {
var style = document.getElementById("game-container-style-wrap") ||
document.createElement("style");
style.id = "game-container-style-wrap";
document.head.appendChild(style);
var gameRootClass = getClassName("game-root");
var gameLoggerClass = getClassName("game-logger");
var uiControlClass = getClassName("ui-control");
var controlContainerClass = getClassName("control-container");
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: rgba(0,0,0,0);\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(uiControlClass, " {\n position: absolute;\n display: inline-flex;\n }\n \n .").concat(uiControlClass, "[data-set-top=\"true\"] {\n top: calc(var(--top) * 1px);\n }\n\n .").concat(controlContainerClass, " {\n width: 100%;\n position: relative;\n }\n\n .").concat(controlContainerClass, "[data-stack=\"true\"] .").concat(uiControlClass, " {\n position: relative;\n display: flex;\n \n }\n \n .").concat(controlContainerClass, "[data-stack=\"true\"] .").concat(uiControlClass, "[data-set-top=\"true\"] {\n top: unset;\n margin-top: calc(var(--top) * 1px);\n }\n\n .").concat(getClassName("scaler-container"), " {\n width: 100%;\n height: 100%;\n position: relative;\n top: 0;\n left: 0;\n }\n\n .").concat(getClassName("scaler-container"), " > div {\n transform-origin: left top;\n position: relative;\n top: 50%;\n left: 50%;\n }\n ")));
}, []);
return (_jsxs(_Fragment, { children: [_jsx(SceneRunner, __assign({ current: currentScene }, props), currentScene.sessionId), logPopup && _jsx(Logger, {})] }));
}