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

0000

@@ -4,7 +4,6 @@ https://git.opengamestudio.org/mahjong/mahjong-ui
 
 x /окончание|ending.js
 /окончание|ending.череда
-x /плавное-отображение-скрытие|smooth-show-hide.js
 x /приветствие|welcome.js
 /приветствие|welcome.череда
 x /пуск|run.js

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

@@ -75,11 +75,18 @@
 
 СоздатьОкноОкончания = мир =>
 {
+    var окно = document.createElement("div");
+    окно.id = "окно-окончания";
+    окно.style.display = "none";
+    document.body.appendChild(окно);
+    
     мир.окна.окончание = {
-        "указатель": "окно-окончания",
+        "указатель": окно.id,
+        "элемент": окно,
+        "плавно": new ПлавноОтобразитьСкрыть(окно),
     };
-    const html = `
 
+    окно.innerHTML = `
 <div id="${мир.окна.окончание.указатель}-тело">
     <center>
         <span id="${мир.окна.окончание.указатель}-содержимое">
@@ -90,15 +97,5 @@
         </p>
     </center>
 </div>
-
     `;
-
-    var окно = document.createElement("div");
-    окно.id = мир.окна.окончание.указатель;
-    окно.innerHTML = html;
-    окно.style.display = "none";
-    document.body.appendChild(окно);
-    мир.окна.окончание.элемент = окно;
-    
-    мир.окна.окончание.плавно = new ПлавноеОтображениеИСкрытиеЭлемента(окно);
 };

плавное-отображение-скрытие|smooth-show-hide.js

@@ -1,103 +0,0 @@
-function ПлавноеОтображениеИСкрытиеЭлемента(элемент, настройки)
-{
-
-    if (!настройки)
-    {
-        настройки = {
-            "прозрачность": 1,
-        };
-    }
-    
-    this.отобразить = () =>
-    {
-        this.показываем = true;
-        элемент.style.display = "block";
-        this.преобразования.innerHTML = `
-#${элемент.id}
-{
-    opacity: 0;
-    animation: ${элемент.id}ПлавноОтобразить 0.4s ease;
-    animation-fill-mode: forwards;
-}
-        `;
-    };
-    
-    this.скрыть = () =>
-    {
-        this.показываем = false;
-        this.преобразования.innerHTML = `
-#${элемент.id}
-{
-    opacity: ${настройки.прозрачность};
-    animation: ${элемент.id}ПлавноСкрыть 0.4s ease;
-    animation-fill-mode: forwards;
-}
-        `;
-    };
-    
-    this.__создатьКадры = () =>
-    {
-        this.кадры = document.createElement("style");
-        document.head.appendChild(this.кадры);
-        this.кадры.innerHTML = `
-@keyframes ${элемент.id}ПлавноОтобразить
-{
-    0%
-    {
-        opacity: 0;
-    }
-    100%
-    {
-        opacity: ${настройки.прозрачность};
-    }
-}
-@keyframes ${элемент.id}ПлавноСкрыть
-{
-    0%
-    {
-        opacity: ${настройки.прозрачность};
-    }
-    100%
-    {
-        opacity: 0;
-    }
-}
-        `;
-    };
-    
-    this.__создатьПреобразования = () =>
-    {
-        this.преобразования = document.createElement("style");
-        document.head.appendChild(this.преобразования);
-    };
-    
-    this.__отслеживатьЗавершениеАнимации = () =>
-    {
-        this.отклик = {};
-        this.показываем = true;
-        var тут = this;
-        элемент.addEventListener(
-            "animationend",
-            function()
-            {
-                if (тут.показываем && тут.отклик.отображение)
-                {
-                    тут.отклик.отображение();
-                }
-                else if (!тут.показываем)
-                {
-                    элемент.style.display = "none";
-                    if (тут.отклик.скрытие)
-                    {
-                        тут.отклик.скрытие();
-                    }
-                }
-            }
-        );
-    };
-    
-    // Конструктор.
-    this.__создатьКадры();
-    this.__создатьПреобразования();
-    this.__отслеживатьЗавершениеАнимации();
-};

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

@@ -84,12 +84,19 @@
 
 СоздатьОкноПриветствия = мир =>
 {
+    var окно = document.createElement("div");
+    окно.id = "окно-приветствия";
+    окно.style.display = "none";
+    document.body.appendChild(окно);
+    
     мир.окна.приветствие = {
-        "указатель": "окно-приветствия",
+        "указатель": окно.id,
+        "элемент": окно,
+        "плавно": new ПлавноОтобразитьСкрыть(окно),
     };
-    const html = `
+    
-
+    окно.innerHTML = `
-<div id="${мир.окна.приветствие.указатель}-тело">
+<div id="${окно.id}-тело">
     <center>
         <p>
             <span class="uk-text-large">Маджонг</span>
@@ -100,24 +107,14 @@
         <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="${окно.id}-X" class="uk-button uk-button-default">X</button>
-            <button id="${мир.окна.приветствие.указатель}-😀" class="uk-button uk-button-default">😀</button>
+            <button id="${окно.id}-😀" class="uk-button uk-button-default">😀</button>
-            <button id="${мир.окна.приветствие.указатель}-😭" class="uk-button uk-button-default">😭</button>
+            <button id="${окно.id}-😭" class="uk-button uk-button-default">😭</button>
         </p>
     </center>
 </div>
-
     `;
 
-    var окно = document.createElement("div");
-    окно.id = мир.окна.приветствие.указатель;
-    окно.innerHTML = html;
-    окно.style.display = "none";
-    document.body.appendChild(окно);
-    мир.окна.приветствие.элемент = окно;
-    
-    мир.окна.приветствие.плавно = new ПлавноеОтображениеИСкрытиеЭлемента(окно);
-
     $(`#${мир.окна.приветствие.указатель}-X`).click(function() {
         мир.уведомить("кнопка раскладки X");
     });

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

@@ -31,7 +31,7 @@
     left: 0;
     top: 0;
     bottom: 0;
-    width: 50%;
+    /*width: 50%;*/
 }
 
 #скрыть-раскладки
@@ -56,13 +56,12 @@
     окно.style.display = "none";
     document.body.appendChild(окно);
 
-    var настройки = {
-        "прозрачность": 0.8,
-    };
     мир.окна.раскладки = {
         "указатель": окно.id,
         "элемент": окно,
-        "плавно": new ПлавноеОтображениеИСкрытиеЭлемента(окно, настройки),
+        "плавно": new ПлавноОтобразитьСкрыть(окно, {
+            "прозрачность": 0.8,
+        }),
     };
 
     окно.innerHTML = `

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

@@ -36,13 +36,12 @@ opacity: 0.5;
 display: none;
     `;
 
-    var настройки = {
-        "прозрачность": 0.5,
-    };
     мир.окна.подложка = {
         "указатель": "окно-подложка",
         "элемент": окно,
-        "плавно": new ПлавноеОтображениеИСкрытиеЭлемента(окно, настройки),
+        "плавно": new ПлавноОтобразитьСкрыть(окно, {
+            "прозрачность": 0.5,
+        }),
     };
 };
 
@@ -139,23 +138,27 @@ transform: translateX(-50%) translateY(-50%);
 // // // //
 
 
-ПоказатьОкноУправления = мир =>
+ПлавноПоказатьОкноУправления = мир =>
 {
-    мир.окна.управление.элемент.style.display = "block";
+    мир.окна.управление.плавно.отобразить();
 };
 
 
 // // // //
 
 
+ПлавноСкрытьОкноУправления = мир =>
+{
+    мир.окна.управление.плавно.скрыть();
+}
+
+// // // //
+
+
 СоздатьОкноУправления = мир =>
 {
-    мир.окна.управление = {
-        "указатель": "окно-управления",
-    };
-
     var окно = document.createElement("div");
-    окно.id = мир.окна.управление.указатель;
+    окно.id = "окно-управления";
     document.body.appendChild(окно);
     окно.style = `
 position: absolute;
@@ -165,5 +168,9 @@ right: 0;
 bottom: 0;
     `;
     окно.style.display = "none";
-    мир.окна.управление.элемент = окно;
+    мир.окна.управление = {
+        "указатель": окно.id,
+        "элемент": окно,
+        "плавно": new ПлавноОтобразитьСкрыть(окно),
+    };
 };

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

@@ -3,11 +3,17 @@
     создать элементы управления масштабом
     создать кнопку раскладки
     создать подложку
-выбрали раскладку
+
-    показать окно управления
 кнопка увеличения масштаба
     увеличить масштаб
 кнопка уменьшения масштаба
     уменьшить масштаб
 изменили масштаб
-    сообщить текущее значение масштаба
+    сообщить текущее значение масштаба
+    
+выбрали раскладку
+    плавно показать окно управления
+кнопка показать раскладки
+    плавно скрыть окно управления
+кнопка скрыть раскладки
+    плавно показать окно управления