2048-board-renderer/dist/domElements/tile/newTileElement.js

2048 board renderer

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var baseTileElements_1 = __importDefault(require("./baseTileElements"));
var setTilePosition_1 = __importDefault(require("./setTilePosition"));
var newTileElement = function (tileData, boardMeta) {
    var _a = (0, baseTileElements_1.default)(tileData.position, boardMeta), tileContainer = _a.tileContainer, tileElement = _a.tileElement;
    var setTileValue = function (value) {
        tileElement.innerHTML = value.toString();
        tileElement.classList.forEach(function (className) {
            if (className.includes('value_')) {
                tileElement.classList.remove(className);
            }
        });
        tileElement.classList.add("value_".concat(value));
    };
    if (tileData.previousValue) {
        setTileValue(tileData.previousValue);
        setTimeout(function () {
            setTileValue(tileData.value);
        }, 100);
    }
    else {
        setTileValue(tileData.value);
    }
    if (!tileData.previousPosition) {
        tileElement.classList.add('new');
    }
    else {
        if (tileData.value !== tileData.previousValue) {
            tileElement.classList.add('merged_into');
        }
        if (tileData.position.row !== tileData.previousPosition.row ||
            tileData.position.col !== tileData.previousPosition.col) {
            (0, setTilePosition_1.default)(tileContainer, tileData.previousPosition, boardMeta);
            tileContainer.style.transition = 'top 200ms, left 200ms';
            setTimeout(function () { return (0, setTilePosition_1.default)(tileContainer, tileData.position, boardMeta); }, 0);
        }
    }
    tileContainer.style.zIndex = tileData.ghost ? '1' : '2';
    return tileContainer;
};
exports.default = newTileElement;