From e35d252b521c3854a36a5d9bea90602a97b08c34 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?= Date: Mon, 5 Oct 2020 15:18:55 +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 --- 0000 | 1 - окончание|ending.js | 21 ++-- ...ние-скрытие|smooth-show-hide.js | 103 ------------------ приветствие|welcome.js | 31 +++--- раскладки|layouts.js | 9 +- управление|controls.js | 31 ++++-- управление|controls.череда | 12 +- 7 files changed, 55 insertions(+), 153 deletions(-) delete mode 100644 плавное-отображение-скрытие|smooth-show-hide.js diff --git a/0000 b/0000 index d2eb2a1..5f9eae2 100644 --- a/0000 +++ b/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 diff --git a/окончание|ending.js b/окончание|ending.js index 1acfae9..f5a9678 100644 --- a/окончание|ending.js +++ b/окончание|ending.js @@ -75,11 +75,18 @@ СоздатьОкноОкончания = мир => { + var окно = document.createElement("div"); + окно.id = "окно-окончания"; + окно.style.display = "none"; + document.body.appendChild(окно); + мир.окна.окончание = { - "указатель": "окно-окончания", + "указатель": окно.id, + "элемент": окно, + "плавно": new ПлавноОтобразитьСкрыть(окно), }; - const html = ` + окно.innerHTML = `
@@ -90,15 +97,5 @@

- `; - - var окно = document.createElement("div"); - окно.id = мир.окна.окончание.указатель; - окно.innerHTML = html; - окно.style.display = "none"; - document.body.appendChild(окно); - мир.окна.окончание.элемент = окно; - - мир.окна.окончание.плавно = new ПлавноеОтображениеИСкрытиеЭлемента(окно); }; \ No newline at end of file diff --git a/плавное-отображение-скрытие|smooth-show-hide.js b/плавное-отображение-скрытие|smooth-show-hide.js deleted file mode 100644 index e79f7b1..0000000 --- a/плавное-отображение-скрытие|smooth-show-hide.js +++ /dev/null @@ -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.__отслеживатьЗавершениеАнимации(); -}; \ No newline at end of file diff --git a/приветствие|welcome.js b/приветствие|welcome.js index 1bce5f5..c535dc6 100644 --- a/приветствие|welcome.js +++ b/приветствие|welcome.js @@ -84,12 +84,19 @@ СоздатьОкноПриветствия = мир => { + var окно = document.createElement("div"); + окно.id = "окно-приветствия"; + окно.style.display = "none"; + document.body.appendChild(окно); + мир.окна.приветствие = { - "указатель": "окно-приветствия", + "указатель": окно.id, + "элемент": окно, + "плавно": new ПлавноОтобразитьСкрыть(окно), }; - const html = ` - -
+ + окно.innerHTML = ` +

Маджонг @@ -100,24 +107,14 @@

Выберите раскладку: | 选择布局: | Select layout:

- - - + + +

- `; - var окно = document.createElement("div"); - окно.id = мир.окна.приветствие.указатель; - окно.innerHTML = html; - окно.style.display = "none"; - document.body.appendChild(окно); - мир.окна.приветствие.элемент = окно; - - мир.окна.приветствие.плавно = new ПлавноеОтображениеИСкрытиеЭлемента(окно); - $(`#${мир.окна.приветствие.указатель}-X`).click(function() { мир.уведомить("кнопка раскладки X"); }); diff --git a/раскладки|layouts.js b/раскладки|layouts.js index 4f029e0..6e925ac 100644 --- a/раскладки|layouts.js +++ b/раскладки|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 = ` diff --git a/управление|controls.js b/управление|controls.js index f4b3bf5..9920c39 100644 --- a/управление|controls.js +++ b/управление|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 ПлавноОтобразитьСкрыть(окно), + }; }; \ No newline at end of file diff --git a/управление|controls.череда b/управление|controls.череда index 938054b..8c37d3c 100644 --- a/управление|controls.череда +++ b/управление|controls.череда @@ -3,11 +3,17 @@ создать элементы управления масштабом создать кнопку раскладки создать подложку -выбрали раскладку - показать окно управления + кнопка увеличения масштаба увеличить масштаб кнопка уменьшения масштаба уменьшить масштаб изменили масштаб - сообщить текущее значение масштаба \ No newline at end of file + сообщить текущее значение масштаба + +выбрали раскладку + плавно показать окно управления +кнопка показать раскладки + плавно скрыть окно управления +кнопка скрыть раскладки + плавно показать окно управления \ No newline at end of file