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

0000

@@ -2,13 +2,14 @@
 1.0.0
 https://git.opengamestudio.org/mahjong/mahjong-ui
 
-x /меню|menu.js
-/меню|menu.череда
 x /окончание|ending.js
 /окончание|ending.череда
+x /плавное-отображение-скрытие|smooth-show-hide.js
 x /приветствие|welcome.js
 /приветствие|welcome.череда
 x /пуск|run.js
 /пуск|run.череда
+x /раскладки|layouts.js
+/раскладки|layouts.череда
 x /управление|controls.js
 /управление|controls.череда

меню|menu.js

@@ -1,120 +0,0 @@
-
-
-// // // //
-
-
-ПлавноПоказатьОкноМеню = мир =>
-{
-    const css = `
-
-#${мир.окна.меню.указатель}
-{
-    opacity: 0;
-    animation: ${мир.окна.меню.указатель}ПлавноПоказать 0.5s ease;
-    animation-fill-mode: forwards;
-}
-
-    `;
-    мир.окна.меню.анимация.innerHTML = css;
-    мир.окна.меню.элемент.style.display = "block";
-};
-
-
-// // // //
-
-
-ПодготовитьАнимациюОкнаМеню = мир =>
-{
-    мир.окна.меню.анимация = document.createElement("style");
-    document.head.appendChild(мир.окна.меню.анимация);
-};
-
-
-// // // //
-
-
-ЗадатьВидИАнимациюОкнаМеню = мир =>
-{
-    /*
-#${мир.окна.меню.указатель}-тело
-{
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-}
-    */
-    const css = `
-
-#${мир.окна.меню.указатель}
-{
-    background-color: white;
-    position: fixed;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-}
-
-@keyframes ${мир.окна.меню.указатель}ПлавноСкрыть
-{
-    0%
-    {
-        opacity: 1;
-    }
-    100%
-    {
-        opacity: 0;
-    }
-}
-
-@keyframes ${мир.окна.меню.указатель}ПлавноПоказать
-{
-    0%
-    {
-        opacity: 0;
-    }
-    100%
-    {
-        opacity: 1;
-    }
-}
-
-    `;
-    var вид = document.createElement("style");
-    вид.innerHTML = css;
-    document.head.appendChild(вид);
-};
-
-
-// // // //
-
-
-СоздатьОкноМеню = мир =>
-{
-    мир.окна.меню = {
-        "указатель": "окно-меню",
-    };
-    const html = `Меню`;
-/*
-<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>
-
-    `;
-    */
-
-    var окно = document.createElement("div");
-    окно.id = мир.окна.меню.указатель;
-    окно.innerHTML = html;
-    окно.style.display = "none";
-    мир.окна.меню.элемент = окно;
-    мир.окна.управление.элемент.appendChild(окно);
-};

меню|menu.череда

@@ -1,6 +0,0 @@
-надо создать окно меню
-    создать окно меню
-    задать вид и анимацию окна меню
-    подготовить анимацию окна меню
-кнопка меню
-    плавно показать окно меню

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

@@ -35,35 +35,14 @@
 
 ПлавноПоказатьОкноОкончания = мир =>
 {
-    const css = `
+    мир.окна.окончание.плавно.отобразить();
-
-#${мир.окна.окончание.указатель}
-{
-    opacity: 0;
-    animation: ${мир.окна.окончание.указатель}ПлавноПоказать 0.5s ease;
-    animation-fill-mode: forwards;
-}
-
-    `;
-    мир.окна.окончание.анимация.innerHTML = css;
-    мир.окна.окончание.элемент.style.display = "block";
 };
 
 
 // // // //
 
 
-ПодготовитьАнимациюОкнаОкончания = мир =>
+ЗадатьВидОкнаОкончания = мир =>
-{
-    мир.окна.окончание.анимация = document.createElement("style");
-    document.head.appendChild(мир.окна.окончание.анимация);
-};
-
-
-// // // //
-
-
-ЗадатьВидИАнимациюОкнаОкончания = мир =>
 {
     const css = `
 
@@ -84,30 +63,6 @@
     bottom: 0;
 }
 
-@keyframes ${мир.окна.окончание.указатель}ПлавноСкрыть
-{
-    0%
-    {
-        opacity: 1;
-    }
-    100%
-    {
-        opacity: 0;
-    }
-}
-
-@keyframes ${мир.окна.окончание.указатель}ПлавноПоказать
-{
-    0%
-    {
-        opacity: 0;
-    }
-    100%
-    {
-        opacity: 1;
-    }
-}
-
     `;
     var вид = document.createElement("style");
     вид.innerHTML = css;
@@ -141,7 +96,9 @@
     var окно = document.createElement("div");
     окно.id = мир.окна.окончание.указатель;
     окно.innerHTML = html;
-    document.body.appendChild(окно);
     окно.style.display = "none";
+    document.body.appendChild(окно);
     мир.окна.окончание.элемент = окно;
+    
+    мир.окна.окончание.плавно = new ПлавноеОтображениеИСкрытиеЭлемента(окно);
 };

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

@@ -1,7 +1,6 @@
 надо создать окно окончания
     создать окно окончания
-    задать вид и анимацию окна окончания
+    задать вид окна окончания
-    подготовить анимацию окна окончания
 победа
     задать победное содержимое окну окончания
     плавно показать окно окончания

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

@@ -0,0 +1,103 @@
+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

@@ -33,30 +33,9 @@
 // // // //
 
 
-ОтключитьОкноПриветствия = мир =>
-{
-    мир.окна.приветствие.элемент.style.display = "none";
-};
-
-
-// // // //
-
-
 ПлавноСкрытьОкноПриветствия = мир =>
 {
-    const css = `
+    мир.окна.приветствие.плавно.скрыть();
-
-#${мир.окна.приветствие.указатель}
-{
-    opacity: 1;
-    animation: ${мир.окна.приветствие.указатель}ПлавноСкрыть 0.5s ease;
-    animation-fill-mode: forwards;
-    animation-delay: 0.1s;
-}
-
-    `;
-    мир.окна.приветствие.анимация.innerHTML = css;
-    мир.окна.приветствие.показываем = false;
 };
 
 
@@ -65,50 +44,14 @@
 
 ПлавноПоказатьОкноПриветствия = мир =>
 {
-    const css = `
+    мир.окна.приветствие.плавно.отобразить();
-
-#${мир.окна.приветствие.указатель}
-{
-    opacity: 0;
-    animation: ${мир.окна.приветствие.указатель}ПлавноПоказать 1s ease;
-    animation-fill-mode: forwards;
-}
-
-    `;
-    мир.окна.приветствие.анимация.innerHTML = css;
-    мир.окна.приветствие.показываем = true;
-    мир.окна.приветствие.элемент.style.display = "block";
 };
 
 
 // // // //
 
 
-ПодготовитьАнимациюОкнаПриветствия = мир =>
+ЗадатьВидОкнаПриветствия = мир =>
-{
-    мир.окна.приветствие.анимация = document.createElement("style");
-    document.head.appendChild(мир.окна.приветствие.анимация);
-    мир.окна.приветствие.показываем = true;
-    мир.окна.приветствие.элемент.addEventListener(
-        "animationend",
-        function()
-        {
-            if (мир.окна.приветствие.показываем)
-            {
-                мир.уведомить("плавно показали окно приветствия");
-            }
-            else {
-                мир.уведомить("плавно скрыли окно приветствия");
-            }
-        }
-    );
-};
-
-
-// // // //
-
-
-ЗадатьВидИАнимациюОкнаПриветствия = мир =>
 {
     const css = `
 
@@ -129,30 +72,6 @@
     bottom: 0;
 }
 
-@keyframes ${мир.окна.приветствие.указатель}ПлавноСкрыть
-{
-    0%
-    {
-        opacity: 1;
-    }
-    100%
-    {
-        opacity: 0;
-    }
-}
-
-@keyframes ${мир.окна.приветствие.указатель}ПлавноПоказать
-{
-    0%
-    {
-        opacity: 0;
-    }
-    100%
-    {
-        opacity: 1;
-    }
-}
-
     `;
     var вид = document.createElement("style");
     вид.innerHTML = css;
@@ -193,10 +112,12 @@
     var окно = document.createElement("div");
     окно.id = мир.окна.приветствие.указатель;
     окно.innerHTML = html;
-    document.body.appendChild(окно);
     окно.style.display = "none";
+    document.body.appendChild(окно);
     мир.окна.приветствие.элемент = окно;
     
+    мир.окна.приветствие.плавно = new ПлавноеОтображениеИСкрытиеЭлемента(окно);
+
     $(`#${мир.окна.приветствие.указатель}-X`).click(function() {
         мир.уведомить("кнопка раскладки X");
     });

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

@@ -1,7 +1,6 @@
 надо создать окно приветствия
     создать окно приветствия
-    задать вид и анимацию окна приветствия
+    задать вид окна приветствия
-    подготовить анимацию окна приветствия
     плавно показать окно приветствия
 
 кнопка раскладки X
@@ -13,5 +12,3 @@
 
 выбрали раскладку
     плавно скрыть окно приветствия
-плавно скрыли окно приветствия
-    отключить окно приветствия

пуск|run.js

@@ -6,7 +6,7 @@
 СоздатьОкнаМаджонга = мир =>
 {
     мир.уведомить("надо создать окно управления");
-    мир.уведомить("надо создать окно меню");
+    мир.уведомить("надо создать окно раскладок");
     мир.уведомить("надо создать окно приветствия");
     мир.уведомить("надо создать окно окончания");
 };

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

@@ -0,0 +1,76 @@
+
+
+ПлавноСкрытьОкноРаскладок = мир =>
+{
+    мир.окна.раскладки.плавно.скрыть();
+};
+
+
+// // // //
+
+
+ПлавноПоказатьОкноРаскладок = мир =>
+{
+    мир.окна.раскладки.плавно.отобразить();
+};
+
+// // // //
+
+
+ЗадатьВидОкнаРаскладок = мир =>
+{
+
+    var вид = document.createElement("style");
+    document.head.appendChild(вид);
+    вид.innerHTML = `
+
+#${мир.окна.раскладки.указатель}
+{
+    background-color: white;
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 50%;
+}
+
+#скрыть-раскладки
+{
+    position: relative;
+    margin: 0.5em;
+    left: 0;
+    top: 0;
+}
+
+    `;
+};
+
+
+// // // //
+
+
+СоздатьОкноРаскладок = мир =>
+{
+    var окно = document.createElement("div");
+    окно.id = "окно-раскладки";
+    окно.style.display = "none";
+    document.body.appendChild(окно);
+
+    var настройки = {
+        "прозрачность": 0.8,
+    };
+    мир.окна.раскладки = {
+        "указатель": окно.id,
+        "элемент": окно,
+        "плавно": new ПлавноеОтображениеИСкрытиеЭлемента(окно, настройки),
+    };
+
+    окно.innerHTML = `
+<a id="скрыть-раскладки" uk-icon="icon: close; ratio: 2"></a>
+<p>текст произвольный</p>
+    `;
+
+    $("#скрыть-раскладки").click(function() {
+        мир.уведомить("кнопка скрыть раскладки");
+    });
+};

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

@@ -0,0 +1,9 @@
+надо создать окно раскладок
+    создать окно раскладок
+    задать вид окна раскладок
+кнопка показать раскладки
+    плавно показать подложку
+    плавно показать окно раскладок
+кнопка скрыть раскладки
+    плавно скрыть подложку
+    плавно скрыть окно раскладок

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

@@ -3,22 +3,68 @@
 // // // //
 
 
-СоздатьКнопкуМеню = мир =>
+ПлавноСкрытьПодложку = мир =>
 {
-    var меню = document.createElement("div");
+    мир.окна.подложка.плавно.скрыть();
-    меню.innerHTML = `
+};
-<a id="открыть-меню" uk-icon="icon: menu; ratio: 2"></a>
+
-    `;
+
-    меню.style = `
+// // // //
+
+
+ПлавноПоказатьПодложку = мир =>
+{
+    мир.окна.подложка.плавно.отобразить();
+};
+
+// // // //
+
+
+СоздатьПодложку = мир =>
+{
+    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;
+    `;
+
+    var настройки = {
+        "прозрачность": 0.5,
+    };
+    мир.окна.подложка = {
+        "указатель": "окно-подложка",
+        "элемент": окно,
+        "плавно": new ПлавноеОтображениеИСкрытиеЭлемента(окно, настройки),
+    };
+};
+
+// // // //
+
+
+СоздатьКнопкуРаскладки = мир =>
+{
+    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(меню);
+    мир.окна.управление.элемент.appendChild(кнопка);
     
-    $(`#открыть-меню`).click(function() {
+    $(`#показать-раскладки`).click(function() {
-        мир.уведомить("кнопка меню");
+        мир.уведомить("кнопка показать раскладки");
     });
 };
 

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

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