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

// // // //


ОкончательноСкрытьОкноПриветствияПослеСкрытия = мир =>
{
    if (мир.путьАнимацииОкнаПриветствия != "скрытие")
    {
        return;
    }
    мир.окноПриветствия.style.display = "none";
};


// // // //


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


// // // //


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


// // // //


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


// // // //


ВывестиФактЗавершенияАнимацииОкнаПриветствия = мир =>
{
    console.debug("завершили анимацию окна приветствия");
};


// // // //


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

#${указатель}
{
    opacity: 1;
    animation: ${указатель}FadeOut 1s ease;
    animation-fill-mode: forwards;
    animation-delay: 0.2s;
}
@keyframes ${указатель}FadeOut
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}

    `;
    мир.анимацияОкнаПриветствия.innerHTML = css;
    мир.путьАнимацииОкнаПриветствия = "скрытие";
};


// // // //


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

#${указатель}
{
    opacity: 0;
    animation: ${указатель}FadeIn 1s ease;
    animation-fill-mode: forwards;
}
@keyframes ${указатель}FadeIn
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

    `;
    мир.анимацияОкнаПриветствия.innerHTML = css;
    мир.путьАнимацииОкнаПриветствия = "отображение";
};


// // // //


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


// // // //


ЗадатьВидОкнаПриветствия = мир =>
{
    const указатель = "окно-приветствия";
    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;
}

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


// // // //


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

<div id="${указатель}-тело">
    <center>
        <h1>Маджонг | 麻将 | Mahjong</h1>
        <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(окно);
    мир.окноПриветствия = окно;

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


// // // //


СоздатьОкноПоражения = мир =>
{
    var структура = `

<div id="окно-поражения-тело">
    <center>
        <h1>Поражение</h1>
        <hr class="uk-divider-icon">
        <p uk-margin>
            <p>Перезапустить игру с раскладкой:</p>
            <button id="перезапустить-раскладку-решаемую" class="uk-button uk-button-default">Решаемой</button>
            <button id="перезапустить-раскладку-нерешаемую" class="uk-button uk-button-default">Нерешаемой</button>
        </p>
    </center>
</div>

    `;
    var вид = `

#окно-поражение-тело
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    pointer-events: all;
}
#окно-победы
{
    opacity: 0;
    background-color: white;
    animation: fadeInОкноПоражения 1s ease;
    animation-fill-mode: forwards;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
@keyframes fadeInОкноПоражения
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

    `;
};


// // // //


СоздатьОкноПобеды = мир =>
{
    var структура = `

<div id="окно-победы-тело">
    <center>
        <h1>Победа</h1>
        <hr class="uk-divider-icon">
        <p uk-margin>
            <p>Перезапустить игру с раскладкой:</p>
            <button id="перезапустить-раскладку-решаемую" class="uk-button uk-button-default">Решаемой</button>
            <button id="перезапустить-раскладку-нерешаемую" class="uk-button uk-button-default">Нерешаемой</button>
        </p>
    </center>
</div>

    `;
    var вид = `

#окно-победы-тело
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    pointer-events: all;
}
#окно-победы
{
    opacity: 0;
    background-color: white;
    animation: fadeInОкноПобеды 1s ease;
    animation-fill-mode: forwards;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
@keyframes fadeInОкноПобеды
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

    `;
    мир.окноПобеды = добавитьОкно("окно-победы", структура, вид);
};