sideral/SideralObject/Game.js

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var SideralObject_1 = require("./../SideralObject");
var Module_1 = require("./../Module");
var index_1 = require("./../index");
var Tool_1 = require("./../Tool");
/**
 * The engine of the game
 * @class Game
 * @extends SideralObject
 */
var Game = (function (_super) {
    __extends(Game, _super);
    /* LIFECYCLE */
    /**
     * @constructor
     * @param props - Properties to set to the game
     * @param theme - Theme to set to the game
     */
    function Game(props, theme) {
        if (props === void 0) { props = {}; }
        if (theme === void 0) { theme = {}; }
        var _this = _super.call(this) || this;
        /**
         * Properties of the game
         */
        _this.props = {
            width: 10,
            height: 10,
            fullSize: false,
            backgroundColor: Tool_1.Color.transparent
        };
        /**
         * Dom container of the game
         */
        _this.container = document.getElementById("sideral");
        /**
         * Set all scenes into one container to display all
         */
        _this.renderContainer = new index_1.PIXI.Container();
        /**
         * The current frame per second of the game
         * @readonly
         */
        _this.fps = 60;
        /**
         * The current latency of the game (in ms)
         * @readonly
         */
        _this.latency = 0;
        /**
         * The factor of time to avoid framerate dependance
         * @readonly
         */
        _this.tick = 1;
        /**
         * The date of the current update in timestamp
         * @readonly
         */
        _this.currentUpdate = 0;
        /**
         * The date of the last update in timestamp
         * @readonly
         */
        _this.lastUpdate = 0;
        /**
         * Know if the game is currently running or not
         */
        _this.stopped = true;
        /**
         * Get the time to perform the "update" and "nextcycle" function
         */
        _this.timeToUpdate = 0;
        /**
         * Get the time to perform the render into the canvas
         */
        _this.timeToRender = 0;
        /**
         * Know if the game is loaded
         * @readonly
         */
        _this.loaded = false;
        /**
         * Object to add when Game is ready
         * @private
         */
        _this._addQueue = [];
        /**
         * Scenes to swap
         */
        _this._swapScenes = [];
        _this.setProps({
            backgroundColor: Tool_1.Color.black
        });
        _this.setProps(props);
        _this.signals.start = new SideralObject_1.Signal(_this);
        _this.context.game = _this;
        _this.context.theme = Object.assign({
            primaryColor: Tool_1.Color.cyan400,
            secondaryColor: Tool_1.Color.pinkA400
        }, theme || {});
        _this.setSceneLoading(new Module_1.SceneLoading());
        _this.connect(_this.signals.propChange, ["width", "height", "fullSize"], _this._resizeGame.bind(_this))
            .connect(_this.signals.propChange, "backgroundColor", _this._onBackgroundColorChange.bind(_this));
        return _this;
    }
    /**
     * @override
     */
    Game.prototype.kill = function () {
        _super.prototype.kill.call(this);
        this.removeRenderer();
        if (this._debounceResize) {
            window.removeEventListener("resize", this._debounceResize);
            this._debounceResize = null;
        }
    };
    /**
     * Update loop
     * @param performance - Performance returned by the navigator
     */
    Game.prototype.update = function (performance) {
        var _this = this;
        if (this.stopped) {
            return null;
        }
        performance = performance || window.performance.now();
        requestAnimationFrame(this.update.bind(this));
        // 100ms latency max
        this.currentUpdate = performance;
        this.latency = Tool_1.Util.limit(performance - this.lastUpdate, 8, 100);
        this.fps = Math.floor(1000 / this.latency);
        this.tick = 1000 / (this.fps * 1000);
        this.tick = this.tick < 0 ? 0 : this.tick;
        this.timeToUpdate = Tool_1.Util.measure(function () {
            _this.children.forEach(function (child) { return child.update(_this.tick); });
            _this.nextCycle();
        });
        this.timeToRender = Tool_1.Util.measure(function () {
            if (_this.renderer) {
                _this.renderer.render(_this.renderContainer);
            }
        });
        this.lastUpdate = window.performance.now();
    };
    /**
     * @override
     */
    Game.prototype.nextCycle = function () {
        var _this = this;
        _super.prototype.nextCycle.call(this);
        if (this.loaded) {
            var queue = this._addQueue.slice(0);
            this._addQueue = [];
            queue.forEach(function (q) { return _this._addScene(q.item, q.props); });
            this._swapScenes.forEach(function (swap) { return _this._swapScene(swap); });
            this._swapScenes = [];
            if (this._loadingScene) {
                this._loadingScene.kill();
                this._loadingScene = null;
            }
        }
    };
    /* METHODS */
    /**
     * Get the position of the mouse relative to the canvas
     * @returns The position x and y of the mouse
     */
    Game.prototype.getMousePosition = function () {
        return this.renderer ? __assign({}, this.renderer.plugins.interaction.mouse.global) : { x: 0, y: 0 };
    };
    /**
     * @override
     */
    Game.prototype.add = function (item, props) {
        if (props === void 0) { props = {}; }
        this._addQueue.push({ item: item, props: props });
        return item;
    };
    /**
     * Set a scene used for loading screen
     * @param loadingScene - Scene to run when the game is loading
     * @param props - Properties to pass to the loading Scene
     * @return The LoadingScene
     */
    Game.prototype.setSceneLoading = function (loadingScene, props) {
        if (props === void 0) { props = {}; }
        if (loadingScene && !(loadingScene instanceof Module_1.Scene)) {
            throw new Error("Game.setLoadingScene: The loadingScene must be an instance of Scene.");
        }
        if (this._loadingScene) {
            this._loadingScene.kill();
        }
        if (!loadingScene) {
            this._loadingScene = null;
            return null;
        }
        this._loadingScene = this._addScene(loadingScene, props);
        return this._loadingScene;
    };
    /**
     * Load assets
     * @param env - The environment to load
     * @param loadingScene - Scene to use for loading
     * @param onLoad - Callback to be called when assets is loaded
     */
    Game.prototype.loadAssets = function (env, loadingScene, onLoad) {
        var _this = this;
        Tool_1.Assets.load(env, function () {
            var done = function () {
                _this.loaded = true;
                _this.signals.start.dispatch();
                if (onLoad) {
                    onLoad();
                }
            };
            if (_this._loadingScene) {
                _this._loadingScene.onAssetsLoaded(done);
            }
            else {
                done();
            }
        }, function (progress) { return _this._loadingScene && _this._loadingScene.signals.progress.dispatch(progress); });
    };
    /**
     * Start the game loop
     * @acess public
     * @param width - width of the game
     * @param height - height of the game
     * @param container - container to attach the game
     * @param onLoad - Callback to be called when the game is loaded
     * @returns current instance
     */
    Game.prototype.start = function (width, height, container, onLoad) {
        this.setProps({
            width: width || this.props.width,
            height: height || this.props.height
        });
        if (!this.props.fullSize && (!this.props.width || !this.props.height)) {
            throw new Error("Engine.start: You must set 'width', 'height' and a 'container' container");
        }
        this.container = container || this.container;
        this._swapRenderer();
        this._resizeGame();
        this._onBackgroundColorChange();
        this.loadAssets(null, null, onLoad);
        this.update();
        return this;
    };
    /**
     * Stop the current game
     */
    Game.prototype.stop = function () {
        this.stopped = true;
        this.removeRenderer();
    };
    /**
     * resize the current canvas
     */
    Game.prototype.resize = function () {
        if (!this.renderer) {
            return null;
        }
        this.renderer.resize(this.props.width, this.props.height);
    };
    /**
     * Remove the PIXI Renderer
     * @param killCanvas - If true, the canvas DOM will be destroyed too
     */
    Game.prototype.removeRenderer = function (killCanvas) {
        if (killCanvas === void 0) { killCanvas = true; }
        if (!this.renderer) {
            return null;
        }
        this.renderer.destroy(killCanvas);
        this.renderer = null;
    };
    /**
     * Enable keyboard events
     * @param preventInputPropagation - If true, the event provided by the keyboard will not be propaged outside the Sideral engine
     * @returns The current instance of Keyboard
     */
    Game.prototype.enableKeyboard = function (preventInputPropagation) {
        this.keyboard = this.add(new SideralObject_1.Keyboard());
        this.keyboard.preventInputPropagation = preventInputPropagation;
        return this.keyboard;
    };
    /**
     * Disable keyboard events
     */
    Game.prototype.disableKeyboard = function () {
        if (this.keyboard) {
            this.keyboard.kill();
        }
        this.keyboard = null;
    };
    /**
     * Get all scenes from the current game
     * @returns Scenes
     */
    Game.prototype.getScenes = function () {
        return this.children.filter(function (child) { return child instanceof Module_1.Scene; }).filter(function (child) { return !child.killed; });
    };
    /**
     * Attach the game to a dom
     */
    Game.prototype.attach = function (container) {
        this.container = container || this.container;
        if (!this.container) {
            throw new Error("Game: before start your game, you must set a dom container.");
        }
        this.container.appendChild(this.renderer.view);
    };
    /**
     * Swap a scene to the next Scene
     * @param currentScene - The current scene to swap
     * @param nextScene - The next Scene to swap
     * @returns The next scene
     */
    Game.prototype.swapScene = function (currentScene, nextScene, color, duration, onComplete) {
        if (duration === void 0) { duration = 500; }
        if (currentScene && nextScene) {
            this._swapScenes.push({ currentScene: currentScene, nextScene: nextScene, color: color, duration: duration, onComplete: onComplete });
        }
        return nextScene;
    };
    /* PRIVATE */
    /**
     * Method for kill the first scene and add the second
     * @private
     */
    Game.prototype._swapScene = function (_a) {
        var _this = this;
        var currentScene = _a.currentScene, nextScene = _a.nextScene, color = _a.color, duration = _a.duration, onComplete = _a.onComplete;
        if (!color) {
            currentScene.kill();
            this._addScene(nextScene);
            if (onComplete) {
                onComplete(nextScene);
            }
        }
        else {
            currentScene.fade("out", color, duration, function () {
                currentScene.kill();
                _this._addScene(nextScene);
                nextScene.fade("in", color, duration, function () {
                    if (onComplete) {
                        onComplete(nextScene);
                    }
                });
            });
        }
    };
    /**
     * Add a new scene into the global PIXI Container. If the scene is not an instance of a scene,
     * this function will just call the "add" method.
     * @param scene - The scene to add
     * @private
     */
    Game.prototype._addScene = function (scene, props) {
        if (props === void 0) { props = {}; }
        _super.prototype.add.call(this, scene, props);
        if (scene instanceof Module_1.Scene) {
            this.renderContainer.addChild(scene.container);
        }
        return scene;
    };
    /**
     * When width or height attributes change
     * @private
     */
    Game.prototype._resizeGame = function () {
        var _this = this;
        if (!this.renderer) {
            return null;
        }
        if (this.props.fullSize) {
            this.setProps({
                width: this.renderer.view.parentElement.clientWidth,
                height: this.renderer.view.parentElement.clientHeight
            });
        }
        this.getScenes().filter(function (scene) { return scene.props.sizeAuto; }).forEach(function (scene) {
            scene.props.width = _this.props.width;
            scene.props.height = _this.props.height;
        });
        if (!this.props.fullSize && this._debounceResize) {
            window.removeEventListener("resize", this._debounceResize);
            this._debounceResize = null;
        }
        if (this.props.fullSize && !this._debounceResize) {
            window.addEventListener("resize", this._debounceResize = Tool_1.Util.debounce(this._resizeGame.bind(this), 250));
        }
        this.renderer.resize(this.props.width, this.props.height);
    };
    /**
     * When background attribute changes
     * @private
     */
    Game.prototype._onBackgroundColorChange = function () {
        var color = Tool_1.Util.colorToDecimal(this.props.backgroundColor), transparent = Boolean(isNaN(color));
        if (!transparent) {
            this.renderer.backgroundColor = color;
        }
        if (transparent !== this.renderer.transparent) {
            this._swapRenderer();
        }
    };
    Game.prototype._swapRenderer = function () {
        var transparent = !this.props.backgroundColor || this.props.backgroundColor === Tool_1.Color.transparent;
        var view = null;
        this.removeRenderer();
        this.renderer = index_1.PIXI.autoDetectRenderer(this.props.width, this.props.height, {
            autoResize: true,
            transparent: transparent,
            backgroundColor: transparent ? 0 : Tool_1.Util.colorToDecimal(this.props.backgroundColor),
            roundPixels: false,
            antialias: true
        });
        this.attach();
        this.stopped = false;
    };
    return Game;
}(SideralObject_1.SideralObject));
exports.Game = Game;
index_1.PIXI.utils.skipHello();