MYPOM/4.1/игра/280.Меню.js

function Меню(события, подсказки)
{
    this.создать = function()
    {
        события.подписать(this);
        this.установитьМеню();
    };

    this.обработатьСобытие = function(событие)
    {
        let мышь = "мышь/нажатие/";
        if (событие.startsWith(мышь))
        {
            let значения = событие.substring(мышь.length).split("/");
            let элемент = значения[2];
            let имя = подсказки.подсказкаДляЭлемента(элемент);
            if (имя)
            {
                this.отобразитьМеню(имя);
            }
        }
    };

    this.отобразитьМеню = function(имя)
    {
        let подсказка = подсказки.задано[имя];
        document.getElementById("меню-заголовок").innerHTML = подсказка.текст;
        UIkit.modal("#меню").show();
    };

    this.установитьМеню = function()
    {
        let html = `
<div id="меню" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <h2 id="меню-заголовок" class="uk-modal-title">Заголовок</h2>
        <div class="uk-child-width-1-4 uk-text-center" uk-grid>
            <div>
                <div class="uk-card uk-card-small uk-card-hover uk-card-default uk-card-body">👁️</div>
            </div>
            <div>
                <div class="uk-card uk-card-small uk-card-hover uk-card-default uk-card-body">🤚</div>
            </div>
            <div>
                <div class="uk-card uk-card-small uk-card-hover uk-card-default uk-card-body">🗣</div>
            </div>
            <div>
                <div class="uk-card uk-card-small uk-card-hover uk-card-default uk-card-body">🥾</div>
            </div>
        </div>
    </div>
</div>
        `;
        document.body.insertAdjacentHTML("beforeend", html);
    };

    // Конструктор.
    this.создать();
};