Изменения от Главреда ГитЖС | Changes of GitJS Glavred

0000

@@ -1,5 +1,16 @@
-Привет
+ПИМ | MUI
 1.0.0
+https://git.opengamestudio.org/mahjong/mahjong-ui
 
-/привет.череда
-x /привет.js
+x /окончание|ending.js
+/окончание|ending.череда
+/приветствие|welcome.js
+/приветствие|welcome.череда
+x /пуск|run.js
+/пуск|run.череда
+x /раскладки|layouts.js
+/раскладки|layouts.череда
+x /темы|themes.js
+/темы|themes.череда
+x /управление|controls.js
+/управление|controls.череда

окончание|ending.js

@@ -0,0 +1,101 @@
+
+
+// // // //
+
+
+ЗадатьПораженческоеСодержимоеОкнуОкончания = мир =>
+{
+    $(`#${мир.окна.окончание.указатель}-содержимое`).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 = `
+
+#${мир.окна.окончание.указатель}-тело
+{
+    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(вид);
+};
+
+
+// // // //
+
+
+СоздатьОкноОкончания = мир =>
+{
+    var окно = document.createElement("div");
+    окно.id = "окно-окончания";
+    окно.style.display = "none";
+    document.body.appendChild(окно);
+    
+    мир.окна.окончание = {
+        "указатель": окно.id,
+        "элемент": окно,
+        "плавно": new ПлавноОтобразитьСкрыть(окно),
+    };
+
+    окно.innerHTML = `
+<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>
+    `;
+};

окончание|ending.череда

@@ -0,0 +1,9 @@
+надо создать окно окончания
+    создать окно окончания
+    задать вид окна окончания
+победа
+    задать победное содержимое окну окончания
+    плавно показать окно окончания
+поражение
+    задать пораженческое содержимое окну окончания
+    плавно показать окно окончания

привет.js

@@ -1,5 +0,0 @@
-ПоприветствоватьМир = function()
-{
-    console.log("Привет, мир!");
-    document.body.innerHTML = "<h1>Привет, мир!</h1>";
-};

привет.череда

@@ -1,2 +0,0 @@
-пуск
-    поприветствовать мир

приветствие|welcome.js

@@ -0,0 +1,127 @@
+
+
+// // // //
+
+
+ВыбратьРаскладкуПровальную = мир =>
+{
+    мир.выбраннаяРаскладка = "😭";
+    мир.уведомить("выбрали раскладку");
+};
+
+
+// // // //
+
+
+ВыбратьРаскладкуУспешную = мир =>
+{
+    мир.выбраннаяРаскладка = "😀";
+    мир.уведомить("выбрали раскладку");
+};
+
+
+// // // //
+
+
+ВыбратьРаскладкуX = мир =>
+{
+    мир.выбраннаяРаскладка = "X_shaped";
+    мир.уведомить("выбрали раскладку");
+};
+
+
+// // // //
+
+
+ПлавноСкрытьОкноПриветствия = мир =>
+{
+    мир.окна.приветствие.плавно.скрыть();
+};
+
+
+// // // //
+
+
+ПлавноПоказатьОкноПриветствия = мир =>
+{
+    мир.окна.приветствие.плавно.отобразить();
+};
+
+
+// // // //
+
+
+ЗадатьВидОкнаПриветствия = мир =>
+{
+    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(вид);
+};
+
+
+// // // //
+
+
+СоздатьОкноПриветствия = мир =>
+{
+    var окно = document.createElement("div");
+    окно.id = "окно-приветствия";
+    окно.style.display = "none";
+    document.body.appendChild(окно);
+    
+    мир.окна.приветствие = {
+        "указатель": окно.id,
+        "элемент": окно,
+        "плавно": new ПлавноОтобразитьСкрыть(окно),
+    };
+    
+    окно.innerHTML = `
+<div id="${окно.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="${окно.id}-X" class="uk-button uk-button-default">X</button>
+            <button id="${окно.id}-😀" class="uk-button uk-button-default">😀</button>
+            <button id="${окно.id}-😭" class="uk-button uk-button-default">😭</button>
+        </p>
+    </center>
+</div>
+    `;
+
+    $(`#${мир.окна.приветствие.указатель}-X`).click(function() {
+        мир.уведомить("кнопка раскладки X");
+    });
+    $(`#${мир.окна.приветствие.указатель}-😀`).click(function() {
+        мир.уведомить("кнопка раскладки 😀");
+    });
+    $(`#${мир.окна.приветствие.указатель}-😭`).click(function() {
+        мир.уведомить("кнопка раскладки 😭");
+    });
+};

приветствие|welcome.череда

@@ -0,0 +1,14 @@
+надо создать окно приветствия
+    создать окно приветствия
+    задать вид окна приветствия
+    плавно показать окно приветствия
+
+кнопка раскладки X
+    выбрать раскладку X
+кнопка раскладки 😀
+    выбрать раскладку успешную
+кнопка раскладки 😭
+    выбрать раскладку провальную
+
+выбрали раскладку
+    плавно скрыть окно приветствия

пуск|run.js

@@ -0,0 +1,50 @@
+
+
+// // // //
+
+
+СоздатьОкнаМаджонга = мир =>
+{
+    мир.уведомить("надо создать окно управления");
+    мир.уведомить("надо создать окно раскладок");
+    мир.уведомить("надо создать окно тем");
+    мир.уведомить("надо создать окно окончания");
+};
+
+
+// // // //
+
+
+ЗадатьОбщиеСтили = мир =>
+{
+    var вид = document.createElement("style");
+    document.head.appendChild(вид);
+    вид.innerHTML = `
+
+.окно-с-отступами
+{
+    position: fixed;
+    left: 1em;
+    top: 1em;
+    bottom: 1em;
+    right: 1em;
+}
+
+.прокрутка
+{
+    overflow: auto;
+    height: 100%;
+}
+
+.ширина-по-содержимому
+{
+    display: inline-block;
+}
+
+.выбранный-элемент-таблицы
+{
+    background: #eeeeee;
+}
+
+    `;
+};

пуск|run.череда

@@ -0,0 +1,3 @@
+загрузили ресурсы сцены
+    задать общие стили
+    создать окна маджонга

раскладки|layouts.js

@@ -0,0 +1,152 @@
+
+
+// // // //
+
+
+ОтобразитьВыбраннуюРаскладкуВТаблице = мир =>
+{
+    var таблица = мир.окна.раскладки.таблица;
+    // Очистить выбор.
+    for (var номер in таблица.строки)
+    {
+        var элемент = таблица.элемент(номер);
+        элемент.removeClass("выбранный-элемент-таблицы");
+    }
+    // Задать выбор.
+    var элемент = таблица.элемент(мир.номерВыбраннойРаскладки);
+    элемент.addClass("выбранный-элемент-таблицы");
+};
+
+
+// // // //
+
+
+ЗадатьНомерВыбраннойРаскладкиЕслиНеЗадан = мир =>
+{
+    if (мир.номерВыбраннойРаскладки)
+    {
+        return;
+    }
+    // Нужно для случая отображения выбранной раскладки сразу после пуска.
+    const строки = мир.окна.раскладки.таблица.строки;
+    for (var номер in строки)
+    {
+        var название = строки[номер][1];
+        if (название == мир.выбраннаяРаскладка)
+        {
+            мир.номерВыбраннойРаскладки = номер;
+            return;
+        }
+    }
+}
+
+
+// // // //
+
+
+ОтслеживатьВыборРаскладки = мир =>
+{
+    const строки = мир.окна.раскладки.таблица.строки;
+    мир.окна.раскладки.таблица.выбор = (номер) =>
+    {
+        мир.выбраннаяРаскладка = строки[номер][1];
+        мир.номерВыбраннойРаскладки = номер;
+        мир.уведомить("выбрали раскладку");
+    };
+};
+
+
+// // // //
+
+
+ЗадатьСписокРаскладок = мир =>
+{
+    var раскладки = Object.keys(мир.реестрРаскладок).sort();
+    var список = [];
+    for (var номер in раскладки)
+    {
+        var число = Number(номер) + 1;
+        var название = раскладки[номер];
+        список.push([число, название]);
+    }
+    мир.окна.раскладки.таблица.задатьЗаголовки(["№", "Название ⚬ 标题 ⚬ Name"]);
+    мир.окна.раскладки.таблица.задатьСтроки(список);
+};
+
+
+// // // //
+
+
+ПлавноСкрытьОкноРаскладок = мир =>
+{
+    мир.окна.раскладки.плавно.скрыть();
+};
+
+
+// // // //
+
+
+ПлавноПоказатьОкноРаскладок = мир =>
+{
+    мир.окна.раскладки.плавно.отобразить();
+};
+
+
+// // // //
+
+
+ЗадатьВидОкнаРаскладок = мир =>
+{
+
+    var вид = document.createElement("style");
+    document.head.appendChild(вид);
+    вид.innerHTML = `
+
+#скрыть-раскладки
+{
+    position: fixed;
+    right: 0.5em;
+    bottom: 0.5em;
+}
+
+    `;
+};
+
+
+// // // //
+
+
+СоздатьОкноРаскладок = мир =>
+{
+    var окно = document.createElement("div");
+    окно.id = "окно-раскладки";
+    окно.style.display = "none";
+    окно.classList.add("окно-с-отступами");
+    document.body.appendChild(окно);
+
+    мир.окна.раскладки = {
+        "указатель": окно.id,
+        "элемент": окно,
+        "плавно": new ПлавноОтобразитьСкрыть(окно),
+        "список": `${окно.id}-список`,
+    };
+
+    окно.innerHTML = `
+<center>
+    <span class="uk-text-large">Раскладки</span>
+    ⚬ <span class="uk-text-large uk-text-bold">键盘布局</span> ⚬
+    <span class="uk-text-large">Layouts</span>
+</center>
+<div class="прокрутка ширина-по-содержимому">
+    <table id="${мир.окна.раскладки.список}" class="uk-table uk-table-divider"></table>
+</div>
+<a id="скрыть-раскладки" uk-icon="icon: close; ratio: 2"></a>
+
+    `;
+
+    мир.окна.раскладки.таблица = new Таблица(мир.окна.раскладки.список);
+
+    $("#скрыть-раскладки").click(function() {
+        мир.уведомить("кнопка скрыть раскладки");
+    });
+};

раскладки|layouts.череда

@@ -0,0 +1,14 @@
+надо создать окно раскладок
+    создать окно раскладок
+    задать вид окна раскладок
+    задать список раскладок
+    отслеживать выбор раскладки
+кнопка показать раскладки
+    плавно показать подложку
+    плавно показать окно раскладок
+кнопка скрыть раскладки
+    плавно скрыть подложку
+    плавно скрыть окно раскладок
+выбрали раскладку
+    задать номер выбранной раскладки если не задан
+    отобразить выбранную раскладку в таблице

темы|themes.js

@@ -0,0 +1,152 @@
+
+
+// // // //
+
+
+ОтобразитьВыбраннуюТемуВТаблице = мир =>
+{
+    var таблица = мир.окна.темы.таблица;
+    // Очистить выбор.
+    for (var номер in таблица.строки)
+    {
+        var элемент = таблица.элемент(номер);
+        элемент.removeClass("выбранный-элемент-таблицы");
+    }
+    // Задать выбор.
+    var элемент = таблица.элемент(мир.номерВыбраннойТемы);
+    элемент.addClass("выбранный-элемент-таблицы");
+};
+
+
+// // // //
+
+
+ЗадатьНомерВыбраннойТемыЕслиНеЗадан = мир =>
+{
+    if (мир.номерВыбраннойТемы)
+    {
+        return;
+    }
+    // Нужно для случая отображения выбранной темы сразу после пуска.
+    const строки = мир.окна.темы.таблица.строки;
+    for (var номер in строки)
+    {
+        var название = строки[номер][1];
+        if (название == мир.выбраннаяТема)
+        {
+            мир.номерВыбраннойТемы = номер;
+            return;
+        }
+    }
+}
+
+// // // //
+
+
+ОтслеживатьВыборТемы = мир =>
+{
+    const строки = мир.окна.темы.таблица.строки;
+    мир.окна.темы.таблица.выбор = (номер) =>
+    {
+        мир.выбраннаяТема = строки[номер][1];
+        мир.номерВыбраннойТемы = номер;
+        мир.уведомить("выбрали тему");
+    };
+};
+
+
+// // // //
+
+
+ЗадатьСписокТемФишек = мир =>
+{
+    var темы = Object.keys(мир.реестрТемФишек).sort();
+    var список = [];
+    for (var номер in темы)
+    {
+        var число = Number(номер) + 1;
+        var название = темы[номер];
+        список.push([число, название]);
+    }
+    мир.окна.темы.таблица.задатьЗаголовки(["№", "Название ⚬ 标题 ⚬ Name"]);
+    мир.окна.темы.таблица.задатьСтроки(список);
+};
+
+
+// // // //
+
+
+ПлавноСкрытьОкноТем = мир =>
+{
+    мир.окна.темы.плавно.скрыть();
+};
+
+
+// // // //
+
+
+ПлавноПоказатьОкноТем = мир =>
+{
+    мир.окна.темы.плавно.отобразить();
+};
+
+
+// // // //
+
+
+ЗадатьВидОкнаТем = мир =>
+{
+
+    var вид = document.createElement("style");
+    document.head.appendChild(вид);
+    вид.innerHTML = `
+
+#скрыть-темы
+{
+    position: fixed;
+    right: 0.5em;
+    top: 0.5em;
+}
+
+
+    `;
+};
+
+
+// // // //
+
+
+СоздатьОкноТем = мир =>
+{
+    var окно = document.createElement("div");
+    окно.id = "окно-темы";
+    окно.style.display = "none";
+    окно.classList.add("окно-с-отступами");
+    document.body.appendChild(окно);
+
+    мир.окна.темы = {
+        "указатель": окно.id,
+        "элемент": окно,
+        "плавно": new ПлавноОтобразитьСкрыть(окно),
+        "список": `${окно.id}-список`,
+    };
+
+    окно.innerHTML = `
+<center>
+    <span class="uk-text-large">Темы</span>
+    ⚬ <span class="uk-text-large uk-text-bold">主题</span> ⚬
+    <span class="uk-text-large">Themes</span>
+</center>
+<div class="прокрутка ширина-по-содержимому">
+    <table id="${мир.окна.темы.список}" class="uk-table uk-table-divider"></table>
+</div>
+<a id="скрыть-темы" uk-icon="icon: close; ratio: 2"></a>
+
+    `;
+
+    мир.окна.темы.таблица = new Таблица(мир.окна.темы.список);
+
+    $("#скрыть-темы").click(function() {
+        мир.уведомить("кнопка скрыть темы");
+    });
+};

темы|themes.череда

@@ -0,0 +1,14 @@
+надо создать окно тем
+    создать окно тем
+    задать вид окна тем
+    задать список тем фишек
+    отслеживать выбор темы
+кнопка показать темы
+    плавно показать подложку
+    плавно показать окно тем
+кнопка скрыть темы
+    плавно скрыть подложку
+    плавно скрыть окно тем
+выбрали тему
+    задать номер выбранной темы если не задан
+    отобразить выбранную тему в таблице

управление|controls.js

@@ -0,0 +1,201 @@
+
+
+// // // //
+
+
+ПлавноСкрытьПодложку = мир =>
+{
+    мир.окна.подложка.плавно.скрыть();
+};
+
+
+// // // //
+
+
+ПлавноПоказатьПодложку = мир =>
+{
+    мир.окна.подложка.плавно.отобразить();
+};
+
+// // // //
+
+
+СоздатьПодложку = мир =>
+{
+    var окно = document.createElement("div");
+    окно.id = "окно-подложка";
+    document.body.appendChild(окно);
+    окно.style = `
+position: fixed;
+left: 0;
+top: 0;
+right: 0;
+bottom: 0;
+background-color: white;
+opacity: 0.5;
+display: none;
+pointer-events: none;
+    `;
+
+    мир.окна.подложка = {
+        "указатель": "окно-подложка",
+        "элемент": окно,
+        "плавно": new ПлавноОтобразитьСкрыть(окно, {
+            "прозрачность": 0.5,
+        }),
+    };
+};
+
+
+// // // //
+
+
+СоздатьКнопкуТем = мир =>
+{
+    var кнопка = document.createElement("div");
+    кнопка.innerHTML = `
+<a id="показать-темы" uk-icon="icon: image; ratio: 2"></a>
+    `;
+    кнопка.style = `
+position: fixed;
+right: 0;
+top: 0;
+margin: 0.5em;
+    `;
+    мир.окна.управление.элемент.appendChild(кнопка);
+    
+    $(`#показать-темы`).click(function() {
+        мир.уведомить("кнопка показать темы");
+    });
+};
+
+
+// // // //
+
+
+СоздатьКнопкуРаскладки = мир =>
+{
+    var кнопка = document.createElement("div");
+    кнопка.innerHTML = `
+<a id="показать-раскладки" uk-icon="icon: thumbnails; ratio: 2"></a>
+    `;
+    кнопка.style = `
+position: fixed;
+right: 0;
+bottom: 0;
+margin: 0.5em;
+    `;
+    мир.окна.управление.элемент.appendChild(кнопка);
+    
+    $(`#показать-раскладки`).click(function() {
+        мир.уведомить("кнопка показать раскладки");
+    });
+};
+
+
+// // // //
+
+
+СообщитьТекущееЗначениеМасштаба = мир =>
+{
+    var масштаб = мир.масштаб * 100;
+    var сообщение = `🔍 ${масштаб}%`;
+    UIkit.notification({
+        message: сообщение,
+        timeout: 500
+    });
+};
+
+
+// // // //
+
+
+УменьшитьМасштаб = мир =>
+{
+    мир.масштаб -= 0.5;
+    if (мир.масштаб < 1)
+    {
+        мир.масштаб = 1;
+    }
+    мир.уведомить("изменили масштаб");
+};
+
+
+// // // //
+
+
+УвеличитьМасштаб = мир =>
+{
+    мир.масштаб += 0.5;
+    мир.уведомить("изменили масштаб");
+};
+
+
+// // // //
+
+
+СоздатьЭлементыУправленияМасштабом = мир =>
+{
+    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;
+    `;
+    //окно.style.display = "none";
+    мир.окна.управление = {
+        "указатель": окно.id,
+        "элемент": окно,
+        "плавно": new ПлавноОтобразитьСкрыть(окно),
+    };
+};

управление|controls.череда

@@ -0,0 +1,27 @@
+надо создать окно управления
+    создать окно управления
+    создать элементы управления масштабом
+    создать кнопку раскладки
+    создать кнопку тем
+    создать подложку
+
+кнопка увеличения масштаба
+    увеличить масштаб
+кнопка уменьшения масштаба
+    уменьшить масштаб
+изменили масштаб
+    сообщить текущее значение масштаба
+    
+кнопка показать раскладки
+    плавно скрыть окно управления
+    отключить отслеживание нажатий
+кнопка скрыть раскладки
+    плавно показать окно управления
+    включить отслеживание нажатий
+    
+кнопка показать темы
+    плавно скрыть окно управления
+    отключить отслеживание нажатий
+кнопка скрыть темы
+    плавно показать окно управления
+    включить отслеживание нажатий