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

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

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

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

    this.улавливатьВыбор = function()
    {
        var тут = this;
        let глаз = document.getElementById("меню-кнопка-глаз");
        глаз.addEventListener(
            "click",
            function() {
                события.уведомить(`меню/глаз/${тут.активнаяПодсказка}`);
            }
        );

        let рука = document.getElementById("меню-кнопка-рука");
        рука.addEventListener(
            "click",
            function() {
                события.уведомить(`меню/рука/${тут.активнаяПодсказка}`);
            }
        );

        let рот = document.getElementById("меню-кнопка-рот");
        рот.addEventListener(
            "click",
            function() {
                события.уведомить(`меню/рот/${тут.активнаяПодсказка}`);
            }
        );

        let нога = document.getElementById("меню-кнопка-нога");
        нога.addEventListener(
            "click",
            function() {
                события.уведомить(`меню/нога/${тут.активнаяПодсказка}`);
            }
        );
    };

    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 id="меню-кнопка-глаз" class="uk-card uk-card-small uk-card-hover uk-card-default uk-card-body">👁️</div>
            </div>
            <div>
                <div id="меню-кнопка-рука" class="uk-card uk-card-small uk-card-hover uk-card-default uk-card-body">🤚</div>
            </div>
            <div>
                <div id="меню-кнопка-рот" class="uk-card uk-card-small uk-card-hover uk-card-default uk-card-body">🗣</div>
            </div>
            <div>
                <div id="меню-кнопка-нога" 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.создать();
};