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

2048 board renderer

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var createStylesheet = function () {
    var element = document.createElement('div');
    element.innerHTML = "\n<style>\n  @keyframes tile_spawned {\n    0% {\n      transform: scale(0);\n    }\n    33% {\n      transform: scale(0.1);\n    }\n    66% {\n      transform: scale(1.15);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  \n  @keyframes merged_into {\n    0% {\n      transform: scale(1);\n    }\n    33% {\n      transform: scale(1);\n    }\n    66% {\n      transform: scale(1.15);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  \n  .game_container {\n    background-color: #bbac9f;\n    border-radius: 3%;\n    box-shadow: 0 0 10px #ccc;\n    padding: 1.8%;\n  }\n  \n  .resize_helper {\n    position: relative;\n    width: 100%;\n  }\n  \n  .tiles_container {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n  \n  .tile_container {\n    position: absolute;\n    box-sizing: border-box;\n    padding: 1.8%;\n  }\n  \n  .tile {\n    background: #000;\n    color: #fff4cc;\n    height: 100%;\n    width: 100%;\n    border-radius: 10%;\n  \n    display: flex;\n    align-items: center;\n    justify-content: center;\n  \n    font-weight: bold;\n    font-family: 'Brush Script MT', cursive;\n  }\n  \n  .tile.new {\n    animation: tile_spawned 300ms ease-in-out;\n  }\n  .tile.merged_into {\n    animation: merged_into 300ms ease-in-out;\n  }\n  \n  .tile.value_2 {\n    background: #eee4da;\n    color: #504a43;\n  }\n  \n  .tile.value_4 {\n    background: #eee1c9;\n    color: #504a43;\n  }\n  \n  .tile.value_8 {\n    background: #f3b27a;\n  }\n  \n  .tile.value_16 {\n    background: #f69664;\n  }\n  \n  .tile.value_32 {\n    background: #f77c5f;\n  }\n  \n  .tile.value_64 {\n    background: #f75f3b;\n  }\n  \n  .tile.value_128 {\n    background: #edd073;\n    font-size: 90%;\n  }\n  \n  .tile.value_256 {\n    background: #edcc62;\n    font-size: 90%;\n  }\n  \n  .tile.value_512 {\n    background: #edc950;\n    font-size: 90%;\n  }\n  \n  .tile.value_1024 {\n    background: #edc53f;\n    font-size: 80%;\n  }\n  \n  .tile.value_2048 {\n    background: #edc22e;\n    font-size: 80%;\n  }\n</style>\n  ";
    return element.lastElementChild;
};
exports.default = createStylesheet;