2048-board-renderer/dist/domElements/newGameContainer.js

2048 board renderer

"use strict";
var __values = (this && this.__values) || function(o) {
    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
    if (m) return m.call(o);
    if (o && typeof o.length === "number") return {
        next: function () {
            if (o && i >= o.length) o = void 0;
            return { value: o && o[i++], done: !o };
        }
    };
    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var createBackgroundTiles_1 = __importDefault(require("./createBackgroundTiles"));
var createStylesheet_1 = __importDefault(require("./createStylesheet"));
var newGameContainer = function (boardMeta) {
    var e_1, _a;
    var aspectRatio = boardMeta.rows / boardMeta.cols;
    var rootElement = document.createElement('div');
    rootElement.classList.add('game_container');
    var stylesheet = (0, createStylesheet_1.default)();
    rootElement.appendChild(stylesheet);
    var resizeHelper = document.createElement('div');
    resizeHelper.classList.add('resize_helper');
    rootElement.appendChild(resizeHelper);
    var resizeHeight = function () {
        resizeHelper.style.height = "".concat(rootElement.clientWidth * aspectRatio, "px");
        resizeHelper.style.fontSize = "".concat((rootElement.clientWidth / boardMeta.cols) * 0.5, "px");
    };
    resizeHeight();
    new ResizeObserver(function () { return resizeHeight(); }).observe(rootElement);
    try {
        for (var _b = __values((0, createBackgroundTiles_1.default)(boardMeta)), _c = _b.next(); !_c.done; _c = _b.next()) {
            var backgroundTileEl = _c.value;
            resizeHelper.appendChild(backgroundTileEl);
        }
    }
    catch (e_1_1) { e_1 = { error: e_1_1 }; }
    finally {
        try {
            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
        }
        finally { if (e_1) throw e_1.error; }
    }
    var tilesContainer = document.createElement('div');
    tilesContainer.classList.add('tiles_container');
    resizeHelper.appendChild(tilesContainer);
    var addTiles = function (tileEls) {
        var e_2, _a;
        try {
            for (var tileEls_1 = __values(tileEls), tileEls_1_1 = tileEls_1.next(); !tileEls_1_1.done; tileEls_1_1 = tileEls_1.next()) {
                var tileEl = tileEls_1_1.value;
                tilesContainer.appendChild(tileEl);
            }
        }
        catch (e_2_1) { e_2 = { error: e_2_1 }; }
        finally {
            try {
                if (tileEls_1_1 && !tileEls_1_1.done && (_a = tileEls_1.return)) _a.call(tileEls_1);
            }
            finally { if (e_2) throw e_2.error; }
        }
    };
    var clearTiles = function () {
        tilesContainer.innerHTML = '';
    };
    return { rootElement: rootElement, addTiles: addTiles, clearTiles: clearTiles };
};
exports.default = newGameContainer;