mahjong-osnova-base/интерфейс|ui.js

// // // //


СоздатьЭлементыУправленияМасштабом = мир =>
{
    var элементы = document.createElement("div");
    элементы.innerHTML = `
<ul class="uk-iconnav uk-iconnav-vertical">
    <li><a id="увеличить-масштаб" uk-icon="icon: plus; ratio: 2"></a></li>
    <li><a id="уменьшить-масштаб" uk-icon="icon: minus; ratio: 2"></a></li>
</ul>
    `;
    элементы.style = `
position: fixed;
right: 0;
top: 50%;
transform: translateX(-50%) translateY(-50%);
    `;
    мир.окна.управление.элемент.appendChild(элементы);
    
    $(`#увеличить-масштаб`).click(function() {
        мир.уведомить("кнопка увеличения масштаба");
    });
    $(`#уменьшить-масштаб`).click(function() {
        мир.уведомить("кнопка уменьшения масштаба");
    });
};


// // // //


СоздатьОкноУправления = мир =>
{
    мир.окна.управление = {
        "указатель": "окно-управления",
    };

    var окно = document.createElement("div");
    окно.id = мир.окна.управление.указатель;
    document.body.appendChild(окно);
    окно.style = `
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
    `;
    мир.окна.управление.элемент = окно;
};


// // // //


ЗадатьПораженческоеСодержимоеОкнуОкончания = мир =>
{
    $(`#${мир.окна.окончание.указатель}-содержимое`).html(`

<span class="uk-text-large">Поражение</span>
⚬ <span class="uk-text-large uk-text-bold">失败</span> ⚬
<span class="uk-text-large">Defeat</span>

    `);
};


// // // //


ЗадатьПобедноеСодержимоеОкнуОкончания = мир =>
{
    $(`#${мир.окна.окончание.указатель}-содержимое`).html(`

<span class="uk-text-large">Победа</span>
⚬ <span class="uk-text-large uk-text-bold">胜利</span> ⚬
<span class="uk-text-large">Victory</span>

    `);
};


// // // //


ПлавноПоказатьОкноОкончания = мир =>
{
    const css = `

#${мир.окна.окончание.указатель}
{
    opacity: 0;
    animation: ${мир.окна.окончание.указатель}ПлавноПоказать 0.5s ease;
    animation-fill-mode: forwards;
}

    `;
    мир.окна.окончание.анимация.innerHTML = css;
    мир.окна.окончание.элемент.style.display = "block";
};


// // // //


ПодготовитьАнимациюОкнаОкончания = мир =>
{
    мир.окна.окончание.анимация = document.createElement("style");
    document.head.appendChild(мир.окна.окончание.анимация);
};


// // // //


ЗадатьВидИАнимациюОкнаОкончания = мир =>
{
    const css = `

#${мир.окна.окончание.указатель}-тело
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
#${мир.окна.окончание.указатель}
{
    background-color: white;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

@keyframes ${мир.окна.окончание.указатель}ПлавноСкрыть
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}

@keyframes ${мир.окна.окончание.указатель}ПлавноПоказать
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

    `;
    var вид = document.createElement("style");
    вид.innerHTML = css;
    document.head.appendChild(вид);
};


// // // //


СоздатьОкноОкончания = мир =>
{
    мир.окна.окончание = {
        "указатель": "окно-окончания",
    };
    const html = `

<div id="${мир.окна.окончание.указатель}-тело">
    <center>
        <span id="${мир.окна.окончание.указатель}-содержимое">
        </span>
        <hr class="uk-divider-icon">
        <p>
            <a href="https://twitter.com/opengamestudio" target="_blank" class="uk-icon-button" uk-icon="twitter"></a>
        </p>
    </center>
</div>

    `;

    var окно = document.createElement("div");
    окно.id = мир.окна.окончание.указатель;
    окно.innerHTML = html;
    document.body.appendChild(окно);
    окно.style.display = "none";
    мир.окна.окончание.элемент = окно;
};


// // // //


ОтключитьОкноПриветствия = мир =>
{
    мир.окна.приветствие.элемент.style.display = "none";
};


// // // //


ВыбратьРаскладкуПровальную = мир =>
{
    мир.выбраннаяРаскладка = "😭";
    мир.уведомить("выбрали раскладку");
};


// // // //


ВыбратьРаскладкуУспешную = мир =>
{
    мир.выбраннаяРаскладка = "😀";
    мир.уведомить("выбрали раскладку");
};


// // // //


ВыбратьРаскладкуX = мир =>
{
    мир.выбраннаяРаскладка = "X";
    мир.уведомить("выбрали раскладку");
};


// // // //


ПлавноСкрытьОкноПриветствия = мир =>
{
    const css = `

#${мир.окна.приветствие.указатель}
{
    opacity: 1;
    animation: ${мир.окна.приветствие.указатель}ПлавноСкрыть 0.5s ease;
    animation-fill-mode: forwards;
    animation-delay: 0.1s;
}

    `;
    мир.окна.приветствие.анимация.innerHTML = css;
    мир.окна.приветствие.показываем = false;
};


// // // //


ПлавноПоказатьОкноПриветствия = мир =>
{
    const css = `

#${мир.окна.приветствие.указатель}
{
    opacity: 0;
    animation: ${мир.окна.приветствие.указатель}ПлавноПоказать 1s ease;
    animation-fill-mode: forwards;
}

    `;
    мир.окна.приветствие.анимация.innerHTML = css;
    мир.окна.приветствие.показываем = true;
    мир.окна.приветствие.элемент.style.display = "block";
};


// // // //


ПодготовитьАнимациюОкнаПриветствия = мир =>
{
    мир.окна.приветствие.анимация = document.createElement("style");
    document.head.appendChild(мир.окна.приветствие.анимация);
    мир.окна.приветствие.показываем = true;
    мир.окна.приветствие.элемент.addEventListener(
        "animationend",
        function()
        {
            if (мир.окна.приветствие.показываем)
            {
                мир.уведомить("плавно показали окно приветствия");
            }
            else {
                мир.уведомить("плавно скрыли окно приветствия");
            }
        }
    );
};


// // // //


ЗадатьВидИАнимациюОкнаПриветствия = мир =>
{
    const css = `

#${мир.окна.приветствие.указатель}-тело
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
#${мир.окна.приветствие.указатель}
{
    background-color: white;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

@keyframes ${мир.окна.приветствие.указатель}ПлавноСкрыть
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}

@keyframes ${мир.окна.приветствие.указатель}ПлавноПоказать
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

    `;
    var вид = document.createElement("style");
    вид.innerHTML = css;
    document.head.appendChild(вид);
};


// // // //


СоздатьОкноПриветствия = мир =>
{
    мир.окна.приветствие = {
        "указатель": "окно-приветствия",
    };
    const html = `

<div id="${мир.окна.приветствие.указатель}-тело">
    <center>
        <p>
            <span class="uk-text-large">Маджонг</span>
            ⚬ <span class="uk-text-large uk-text-bold">麻将</span> ⚬
            <span class="uk-text-large">Mahjong</span>
        </p>
        <span>${мир.версия}</span>
        <hr class="uk-divider-icon">
        <p uk-margin>
            <p>Выберите раскладку: | 选择布局: | Select layout:</p>
            <button id="${мир.окна.приветствие.указатель}-X" class="uk-button uk-button-default">X</button>
            <button id="${мир.окна.приветствие.указатель}-😀" class="uk-button uk-button-default">😀</button>
            <button id="${мир.окна.приветствие.указатель}-😭" class="uk-button uk-button-default">😭</button>
        </p>
    </center>
</div>

    `;

    var окно = document.createElement("div");
    окно.id = мир.окна.приветствие.указатель;
    окно.innerHTML = html;
    document.body.appendChild(окно);
    окно.style.display = "none";
    мир.окна.приветствие.элемент = окно;

    $(`#${мир.окна.приветствие.указатель}-X`).click(function() {
        мир.уведомить("кнопка раскладки X");
    });
    $(`#${мир.окна.приветствие.указатель}-😀`).click(function() {
        мир.уведомить("кнопка раскладки 😀");
    });
    $(`#${мир.окна.приветствие.указатель}-😭`).click(function() {
        мир.уведомить("кнопка раскладки 😭");
    });
};


// // // //


СоздатьХранилищеОкон = мир =>
{
    мир.окна = {};
};