From eb69ee3905a7829b58e66493fac7537a259ae6cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=93=D0=BB=D0=B0=D0=B2=D1=80=D0=B5=D0=B4=20=7C=20Glavred?=
 <glavred@gitjs.org>
Date: Thu, 24 Sep 2020 15:13:38 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=8F=20=D0=BE=D1=82=20=D0=93=D0=BB=D0=B0=D0=B2=D1=80?=
 =?UTF-8?q?=D0=B5=D0=B4=D0=B0=20=D0=93=D0=B8=D1=82=D0=96=D0=A1=20|=20Chang?=
 =?UTF-8?q?es=20of=20GitJS=20Glavred?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 интерфейс|ui.js           | 241 +++++++++++++++++++++++++----
 интерфейс|ui.череда |  16 +-
 2 files changed, 222 insertions(+), 35 deletions(-)

diff --git a/интерфейс|ui.js b/интерфейс|ui.js
index 55295b0..b162da5 100644
--- a/интерфейс|ui.js
+++ b/интерфейс|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(мир.главноеОкно);
 };
\ No newline at end of file
diff --git a/интерфейс|ui.череда b/интерфейс|ui.череда
index 788a03b..e82a85f 100644
--- a/интерфейс|ui.череда
+++ b/интерфейс|ui.череда
@@ -1,5 +1,19 @@
 пуск модулей маджонга
-    создать главное окно
+    создать окно приветствия
+    задать вид окна приветствия
+    подготовить анимацию окна приветствия
+    плавно показать окно приветствия
+завершили анимацию окна приветствия
+    вывести факт завершения анимации окна приветствия
+    окончательно скрыть окно приветствия после скрытия
+кнопка раскладки X
+    выбрать раскладку X
+кнопка раскладки 😀
+    выбрать раскладку успешную
+кнопка раскладки 😭
+    выбрать раскладку провальную
+выбрали раскладку
+    плавно скрыть окно приветствия
 победа
     создать окно победы
 поражение