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

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

@@ -3,13 +3,156 @@
 // // // //
 
 
-ОкончательноСкрытьОкноПриветствияПослеСкрытия = мир =>
+ЗадатьПораженческоеСодержимоеОкнуОкончания = мир =>
 {
-    if (мир.путьАнимацииОкнаПриветствия != "скрытие")
+    $(`#${мир.окна.окончание.указатель}-содержимое`).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 = `
+
+#${мир.окна.окончание.указатель}
+{
+    opacity: 0;
+    animation: ${мир.окна.окончание.указатель}ПлавноПоказать 0.5s ease;
+    animation-fill-mode: forwards;
+}
+
+    `;
+    мир.окна.окончание.анимация.innerHTML = css;
+    мир.окна.окончание.элемент.style.display = "block";
+};
+
+
+// // // //
+
+
+ПодготовитьАнимациюОкнаОкончания = мир =>
+{
+    мир.окна.окончание.анимация = document.createElement("style");
+    document.head.appendChild(мир.окна.окончание.анимация);
+};
+
+
+// // // //
+
+
+ЗадатьВидИАнимациюОкнаОкончания = мир =>
+{
+    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;
+}
+
+@keyframes ${мир.окна.окончание.указатель}ПлавноСкрыть
+{
+    0%
     {
-        return;
+        opacity: 1;
     }
-    мир.окноПриветствия.style.display = "none";
+    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;
+    document.body.appendChild(окно);
+    окно.style.display = "none";
+    мир.окна.окончание.элемент = окно;
+};
+
+
+// // // //
+
+
+ОтключитьОкноПриветствия = мир =>
+{
+    мир.окна.приветствие.элемент.style.display = "none";
 };
 
 
@@ -46,42 +189,21 @@
 // // // //
 
 
-ВывестиФактЗавершенияАнимацииОкнаПриветствия = мир =>
-{
-    console.debug("завершили анимацию окна приветствия");
-};
-
-
-// // // //
-
-
 ПлавноСкрытьОкноПриветствия = мир =>
 {
-    const указатель = "окно-приветствия";
     const css = `
 
-#${указатель}
+#${мир.окна.приветствие.указатель}
 {
     opacity: 1;
-    animation: ${указатель}FadeOut 1s ease;
+    animation: ${мир.окна.приветствие.указатель}ПлавноСкрыть 0.5s ease;
     animation-fill-mode: forwards;
-    animation-delay: 0.2s;
-}
-@keyframes ${указатель}FadeOut
-{
-    0%
-    {
-        opacity: 1;
-    }
-    100%
-    {
-        opacity: 0;
-    }
+    animation-delay: 0.1s;
 }
 
     `;
-    мир.анимацияОкнаПриветствия.innerHTML = css;
-    мир.путьАнимацииОкнаПриветствия = "скрытие";
+    мир.окна.приветствие.анимация.innerHTML = css;
+    мир.окна.приветствие.показываем = false;
 };
 
 
@@ -90,16 +212,83 @@
 
 ПлавноПоказатьОкноПриветствия = мир =>
 {
-    const указатель = "окно-приветствия";
     const css = `
 
-#${указатель}
+#${мир.окна.приветствие.указатель}
 {
     opacity: 0;
-    animation: ${указатель}FadeIn 1s ease;
+    animation: ${мир.окна.приветствие.указатель}ПлавноПоказать 1s ease;
     animation-fill-mode: forwards;
 }
-@keyframes ${указатель}FadeIn
+
+    `;
+    мир.окна.приветствие.анимация.innerHTML = css;
+    мир.окна.приветствие.показываем = true;
+    мир.окна.приветствие.элемент.style.display = "block";
+};
+
+
+// // // //
+
+
+ПодготовитьАнимациюОкнаПриветствия = мир =>
+{
+    мир.окна.приветствие.анимация = document.createElement("style");
+    document.head.appendChild(мир.окна.приветствие.анимация);
+    мир.окна.приветствие.показываем = true;
+    мир.окна.приветствие.элемент.addEventListener(
+        "animationend",
+        function()
+        {
+            if (мир.окна.приветствие.показываем)
+            {
+                мир.уведомить("плавно показали окно приветствия");
+            }
+            else {
+                мир.уведомить("плавно скрыли окно приветствия");
+            }
+        }
+    );
+};
+
+
+// // // //
+
+
+ЗадатьВидИАнимациюОкнаПриветствия = мир =>
+{
+    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;
+}
+
+@keyframes ${мир.окна.приветствие.указатель}ПлавноСкрыть
+{
+    0%
+    {
+        opacity: 1;
+    }
+    100%
+    {
+        opacity: 0;
+    }
+}
+
+@keyframes ${мир.окна.приветствие.указатель}ПлавноПоказать
 {
     0%
     {
@@ -111,55 +300,6 @@
     }
 }
 
-    `;
-    мир.анимацияОкнаПриветствия.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;
@@ -172,36 +312,44 @@
 
 СоздатьОкноПриветствия = мир =>
 {
-    const указатель = "окно-приветствия";
+    мир.окна.приветствие = {
+        "указатель": "окно-приветствия",
+    };
     const html = `
 
-<div id="${указатель}-тело">
+<div id="${мир.окна.приветствие.указатель}-тело">
     <center>
-        <h1>Маджонг | 麻将 | Mahjong</h1>
+        <span>
+            <span class="uk-text-large">Маджонг</span>
+            ⚬ <span class="uk-text-large uk-text-bold">麻将</span> ⚬
+            <span class="uk-text-large">Mahjong</span>
+        </span>
         <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>
+            <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 = указатель;
+    окно.id = мир.окна.приветствие.указатель;
     окно.innerHTML = html;
     document.body.appendChild(окно);
-    мир.окноПриветствия = окно;
+    окно.style.display = "none";
+    мир.окна.приветствие.элемент = окно;
 
-    $(`#${указатель}-X`).click(function() {
+    $(`#${мир.окна.приветствие.указатель}-X`).click(function() {
         мир.уведомить("кнопка раскладки X");
     });
-    $(`#${указатель}-😀`).click(function() {
+    $(`#${мир.окна.приветствие.указатель}-😀`).click(function() {
         мир.уведомить("кнопка раскладки 😀");
     });
-    $(`#${указатель}-😭`).click(function() {
+    $(`#${мир.окна.приветствие.указатель}-😭`).click(function() {
         мир.уведомить("кнопка раскладки 😭");
     });
 };
@@ -210,115 +358,8 @@
 // // // //
 
 
-СоздатьОкноПоражения = мир =>
+СоздатьХранилищеОкон = мир =>
 {
-    var структура = `
-
-<div id="окно-поражения-тело">
-    <center>
-        <h1>Поражение</h1>
-        <hr class="uk-divider-icon">
-        <p uk-margin>
-            <p>Перезапустить игру с раскладкой:</p>
-            <button id="перезапустить-раскладку-решаемую" class="uk-button uk-button-default">Решаемой</button>
-            <button id="перезапустить-раскладку-нерешаемую" class="uk-button uk-button-default">Нерешаемой</button>
-        </p>
-    </center>
-</div>
-
-    `;
-    var вид = `
-
-#окно-поражение-тело
-{
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    pointer-events: all;
-}
-#окно-победы
-{
-    opacity: 0;
-    background-color: white;
-    animation: fadeInОкноПоражения 1s ease;
-    animation-fill-mode: forwards;
-    position: fixed;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-}
-@keyframes fadeInОкноПоражения
-{
-    0%
-    {
-        opacity: 0;
-    }
-    100%
-    {
-        opacity: 1;
-    }
-}
-
-    `;
+    мир.окна = {};
 };
 
-
-// // // //
-
-
-СоздатьОкноПобеды = мир =>
-{
-    var структура = `
-
-<div id="окно-победы-тело">
-    <center>
-        <h1>Победа</h1>
-        <hr class="uk-divider-icon">
-        <p uk-margin>
-            <p>Перезапустить игру с раскладкой:</p>
-            <button id="перезапустить-раскладку-решаемую" class="uk-button uk-button-default">Решаемой</button>
-            <button id="перезапустить-раскладку-нерешаемую" class="uk-button uk-button-default">Нерешаемой</button>
-        </p>
-    </center>
-</div>
-
-    `;
-    var вид = `
-
-#окно-победы-тело
-{
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    pointer-events: all;
-}
-#окно-победы
-{
-    opacity: 0;
-    background-color: white;
-    animation: fadeInОкноПобеды 1s ease;
-    animation-fill-mode: forwards;
-    position: fixed;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-}
-@keyframes fadeInОкноПобеды
-{
-    0%
-    {
-        opacity: 0;
-    }
-    100%
-    {
-        opacity: 1;
-    }
-}
-
-    `;
-    мир.окноПобеды = добавитьОкно("окно-победы", структура, вид);
-};