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

интерфейс|ui.js

@@ -3,6 +3,213 @@
 // // // //
 
 
+ОкончательноСкрытьОкноПриветствияПослеСкрытия = мир =>
+{
+    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 структура = `
@@ -55,13 +262,6 @@
 }
 
     `;
-    мир.окноПоражения = добавитьОкно("окно-поражения", структура, вид);
-    $("#перезапустить-раскладку-решаемую").click(function() {
-        мир.уведомить("кнопка перезапуска с решаемой раскладкой");
-    });
-    $("#перезапустить-раскладку-нерешаемую").click(function() {
-        мир.уведомить("кнопка перезапуска с нерешаемой раскладкой");
-    });
 };
 
 
@@ -121,31 +321,4 @@
 
     `;
     мир.окноПобеды = добавитьОкно("окно-победы", структура, вид);
-    $("#перезапустить-раскладку-решаемую").click(function() {
-        мир.уведомить("кнопка перезапуска с решаемой раскладкой");
-    });
-    $("#перезапустить-раскладку-нерешаемую").click(function() {
-        мир.уведомить("кнопка перезапуска с нерешаемой раскладкой");
-    });
-};
-
-
-// // // //
-
-
-СоздатьГлавноеОкно = мир =>
-{
-    мир.главноеОкно = document.createElement("div");
-    мир.главноеОкно.id = "главное-окно"
-    мир.главноеОкно.style.cssText = `
-    
-position: fixed;
-left: 0;
-top: 0;
-right: 0;
-bottom: 0;
-pointer-events: all;
-
-    `;
-    document.body.appendChild(мир.главноеОкно);
 };

интерфейс|ui.череда

@@ -1,5 +1,19 @@
 пуск модулей маджонга
-    создать главное окно
+    создать окно приветствия
+    задать вид окна приветствия
+    подготовить анимацию окна приветствия
+    плавно показать окно приветствия
+завершили анимацию окна приветствия
+    вывести факт завершения анимации окна приветствия
+    окончательно скрыть окно приветствия после скрытия
+кнопка раскладки X
+    выбрать раскладку X
+кнопка раскладки 😀
+    выбрать раскладку успешную
+кнопка раскладки 😭
+    выбрать раскладку провальную
+выбрали раскладку
+    плавно скрыть окно приветствия
 победа
     создать окно победы
 поражение