react-simple-game-engine/lib/ui-components/logger.js

[WIP] not able to use in currently. <!-- Document cumming soon... -->

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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useMemo, useRef, useState } from "react";
import ReactDOM from "react-dom";
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.className = getClassName("game-logger");
        document.body.appendChild(c);
        return c;
    }, []);
    var pushMessage = useCallback(function (args) {
        setMessages(function (prev) { return __spreadArray(__spreadArray([], prev, true), [
            args
                .map(function (arg) {
                return arg && typeof arg === "object"
                    ? toText(arg)
                    : arg === null
                        ? "null"
                        : arg === undefined
                            ? "undefined"
                            : arg;
            })
                .join(", "),
        ], false); });
        if (refList.current) {
            refList.current.scrollTop = refList.current.scrollHeight;
        }
    }, []);
    useMemo(function () {
        var originLog = console.log.bind(console);
        console.log = function () {
            var args = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                args[_i] = arguments[_i];
            }
            originLog.apply(void 0, args);
            pushMessage(args);
        };
        var originError = console.error.bind(console);
        console.error = function () {
            var args = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                args[_i] = arguments[_i];
            }
            originError.apply(void 0, args);
            pushMessage(args);
        };
        var originWarn = console.warn.bind(console);
        console.warn = function () {
            var args = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                args[_i] = arguments[_i];
            }
            originWarn.apply(void 0, args);
            pushMessage(args);
        };
        var originInfo = console.info.bind(console);
        console.info = function () {
            var args = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                args[_i] = arguments[_i];
            }
            originInfo.apply(void 0, args);
            pushMessage(args);
        };
    }, [pushMessage]);
    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);
}