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

0000

@@ -2,6 +2,8 @@
 1.0.0
 https://git.opengamestudio.org/mahjong/mahjong-ui
 
+x /меню|menu.js
+/меню|menu.череда
 x /окончание|ending.js
 /окончание|ending.череда
 x /приветствие|welcome.js

меню|menu.js

@@ -0,0 +1,120 @@
+
+
+// // // //
+
+
+ПлавноПоказатьОкноМеню = мир =>
+{
+    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.череда

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

пуск|run.js

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

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

@@ -3,6 +3,29 @@
 // // // //
 
 
+СоздатьКнопкуМеню = мир =>
+{
+    var меню = document.createElement("div");
+    меню.innerHTML = `
+<a id="открыть-меню" uk-icon="icon: menu; ratio: 2"></a>
+    `;
+    меню.style = `
+position: fixed;
+left: 0;
+top: 0;
+margin: 0.5em;
+    `;
+    мир.окна.управление.элемент.appendChild(меню);
+    
+    $(`#открыть-меню`).click(function() {
+        мир.уведомить("кнопка меню");
+    });
+};
+
+
+// // // //
+
+
 СообщитьТекущееЗначениеМасштаба = мир =>
 {
     var масштаб = мир.масштаб * 100;

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

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