diff --git a/интерфейс|ui.js b/интерфейс|ui.js index b162da5..35a4663 100644 --- a/интерфейс|ui.js +++ b/интерфейс|ui.js @@ -3,32 +3,165 @@ // // // // -ОкончательноСкрытьОкноПриветствияПослеСкрытия = мир => +ЗадатьПораженческоеСодержимоеОкнуОкончания = мир => { - if (мир.путьАнимацииОкнаПриветствия != "скрытие") + $(`#${мир.окна.окончание.указатель}-содержимое`).html(` + +Поражение +⚬ 失败 ⚬ +Defeat + + `); +}; + + +// // // // + + +ЗадатьПобедноеСодержимоеОкнуОкончания = мир => +{ + $(`#${мир.окна.окончание.указатель}-содержимое`).html(` + +Победа +⚬ 胜利 ⚬ +Victory + + `); +}; + + +// // // // + + +ПлавноПоказатьОкноОкончания = мир => +{ + 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% + { + opacity: 1; + } + 100% { - return; + opacity: 0; + } +} + +@keyframes ${мир.окна.окончание.указатель}ПлавноПоказать +{ + 0% + { + opacity: 0; + } + 100% + { + opacity: 1; } - мир.окноПриветствия.style.display = "none"; +} + + `; + var вид = document.createElement("style"); + вид.innerHTML = css; + document.head.appendChild(вид); }; // // // // -ВыбратьРаскладкуПровальную = мир => +СоздатьОкноОкончания = мир => { - мир.выбраннаяРаскладка = "😭"; - мир.уведомить("выбрали раскладку"); + мир.окна.окончание = { + "указатель": "окно-окончания", + }; + const html = ` + +
+
+ + +
+

+ +

+
+
+ + `; + + var окно = document.createElement("div"); + окно.id = мир.окна.окончание.указатель; + окно.innerHTML = html; + document.body.appendChild(окно); + окно.style.display = "none"; + мир.окна.окончание.элемент = окно; }; // // // // -ВыбратьРаскладкуУспешную = мир => +ОтключитьОкноПриветствия = мир => { - мир.выбраннаяРаскладка = "😀"; + мир.окна.приветствие.элемент.style.display = "none"; +}; + + +// // // // + + +ВыбратьРаскладкуПровальную = мир => +{ + мир.выбраннаяРаскладка = "😭"; мир.уведомить("выбрали раскладку"); }; @@ -36,9 +169,9 @@ // // // // -ВыбратьРаскладкуX = мир => +ВыбратьРаскладкуУспешную = мир => { - мир.выбраннаяРаскладка = "X"; + мир.выбраннаяРаскладка = "😀"; мир.уведомить("выбрали раскладку"); }; @@ -46,9 +179,10 @@ // // // // -ВывестиФактЗавершенияАнимацииОкнаПриветствия = мир => +ВыбратьРаскладкуX = мир => { - console.debug("завершили анимацию окна приветствия"); + мир.выбраннаяРаскладка = "X"; + мир.уведомить("выбрали раскладку"); }; @@ -57,31 +191,19 @@ ПлавноСкрытьОкноПриветствия = мир => { - 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,30 +212,19 @@ ПлавноПоказатьОкноПриветствия = мир => { - const указатель = "окно-приветствия"; const css = ` -#${указатель} +#${мир.окна.приветствие.указатель} { opacity: 0; - animation: ${указатель}FadeIn 1s ease; + animation: ${мир.окна.приветствие.указатель}ПлавноПоказать 1s ease; animation-fill-mode: forwards; } -@keyframes ${указатель}FadeIn -{ - 0% - { - opacity: 0; - } - 100% - { - opacity: 1; - } -} `; - мир.анимацияОкнаПриветствия.innerHTML = css; - мир.путьАнимацииОкнаПриветствия = "отображение"; + мир.окна.приветствие.анимация.innerHTML = css; + мир.окна.приветствие.показываем = true; + мир.окна.приветствие.элемент.style.display = "block"; }; @@ -122,14 +233,20 @@ ПодготовитьАнимациюОкнаПриветствия = мир => { - мир.анимацияОкнаПриветствия = document.createElement("style"); - document.head.appendChild(мир.анимацияОкнаПриветствия); - - мир.окноПриветствия.addEventListener( + мир.окна.приветствие.анимация = document.createElement("style"); + document.head.appendChild(мир.окна.приветствие.анимация); + мир.окна.приветствие.показываем = true; + мир.окна.приветствие.элемент.addEventListener( "animationend", function() { - мир.уведомить("завершили анимацию окна приветствия"); + if (мир.окна.приветствие.показываем) + { + мир.уведомить("плавно показали окно приветствия"); + } + else { + мир.уведомить("плавно скрыли окно приветствия"); + } } ); }; @@ -138,19 +255,18 @@ // // // // -ЗадатьВидОкнаПриветствия = мир => +ЗадатьВидИАнимациюОкнаПриветствия = мир => { - const указатель = "окно-приветствия"; const css = ` -#${указатель}-тело +#${мир.окна.приветствие.указатель}-тело { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } -#${указатель} +#${мир.окна.приветствие.указатель} { background-color: white; position: fixed; @@ -160,6 +276,30 @@ bottom: 0; } +@keyframes ${мир.окна.приветствие.указатель}ПлавноСкрыть +{ + 0% + { + opacity: 1; + } + 100% + { + opacity: 0; + } +} + +@keyframes ${мир.окна.приветствие.указатель}ПлавноПоказать +{ + 0% + { + opacity: 0; + } + 100% + { + opacity: 1; + } +} + `; var вид = document.createElement("style"); вид.innerHTML = css; @@ -172,36 +312,44 @@ СоздатьОкноПриветствия = мир => { - const указатель = "окно-приветствия"; + мир.окна.приветствие = { + "указатель": "окно-приветствия", + }; const html = ` -
+
-

Маджонг | 麻将 | Mahjong

+ + Маджонг + ⚬ 麻将 ⚬ + Mahjong +

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

- - - + + +

`; + 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 структура = ` - -
-
-

Поражение

-
-

-

Перезапустить игру с раскладкой:

- - -

-
-
- - `; - 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 структура = ` - -
-
-

Победа

-
-

-

Перезапустить игру с раскладкой:

- - -

-
-
- - `; - 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; - } -} - - `; - мир.окноПобеды = добавитьОкно("окно-победы", структура, вид); -}; \ No newline at end of file diff --git a/интерфейс|ui.череда b/интерфейс|ui.череда index e82a85f..93187ce 100644 --- a/интерфейс|ui.череда +++ b/интерфейс|ui.череда @@ -1,11 +1,12 @@ пуск модулей маджонга + создать хранилище окон создать окно приветствия - задать вид окна приветствия + задать вид и анимацию окна приветствия подготовить анимацию окна приветствия + создать окно окончания + задать вид и анимацию окна окончания + подготовить анимацию окна окончания плавно показать окно приветствия -завершили анимацию окна приветствия - вывести факт завершения анимации окна приветствия - окончательно скрыть окно приветствия после скрытия кнопка раскладки X выбрать раскладку X кнопка раскладки 😀 @@ -14,7 +15,11 @@ выбрать раскладку провальную выбрали раскладку плавно скрыть окно приветствия +плавно скрыли окно приветствия + отключить окно приветствия победа - создать окно победы + задать победное содержимое окну окончания + плавно показать окно окончания поражение - создать окно поражения \ No newline at end of file + задать пораженческое содержимое окну окончания + плавно показать окно окончания \ No newline at end of file diff --git a/пуск|run.js b/пуск|run.js index dc51778..986d33a 100644 --- a/пуск|run.js +++ b/пуск|run.js @@ -3,28 +3,6 @@ // // // // -ПерезапуститьСРешаемойРаскладкой = мир => -{ - задатьПараметрВСтрокеПоиска("🚧", "😀"); - document.location.reload(); - console.debug("Перезапустить РЕШ"); -}; - - -// // // // - - -ПерезапуститьСНерешаемойРаскладкой = мир => -{ - задатьПараметрВСтрокеПоиска("🚧", "😭"); - document.location.reload(); - console.debug("Перезапустить НЕРЕШ"); -}; - - -// // // // - - ЗапуститьМодулиМаджонга = мир => { мир.уведомить("пуск модулей маджонга"); @@ -36,7 +14,7 @@ ЗадатьЗаголовокБраузера = мир => { - document.title = "🀄 红龙"; + document.title = "🀄 麻将"; console.debug("задать заголовок"); }; diff --git a/пуск|run.череда b/пуск|run.череда index 05b6220..99ad3b5 100644 --- a/пуск|run.череда +++ b/пуск|run.череда @@ -1,7 +1,3 @@ пуск маджонга задать заголовок браузера - запустить модули маджонга -кнопка перезапуска с решаемой раскладкой - перезапустить с решаемой раскладкой -кнопка перезапуска с нерешаемой раскладкой - перезапустить с нерешаемой раскладкой \ No newline at end of file + запустить модули маджонга \ No newline at end of file diff --git a/функции|functions.js b/функции|functions.js index 2c3d5cf..7327f1f 100644 --- a/функции|functions.js +++ b/функции|functions.js @@ -1,4 +1,5 @@ + // // // // @@ -14,40 +15,3 @@ return окно; }; - -// // // // - - -задатьПараметрВСтрокеПоиска = (ключПараметра, значениеПараметра) => -{ - var строкаПоиска = decodeURI(window.location.search); - var текущийАдрес = decodeURI(window.location.href); - - // Заменить параметр. - if (строкаПоиска.includes(`${ключПараметра}=`)) - { - var части = строкаПоиска.split(/[\?&]/); - for (var номер in части) - { - var часть = части[номер]; - if (часть.startsWith(`${ключПараметра}=`)) - { - var значение = часть.split("=")[1]; - var адрес = текущийАдрес.replace(значение, значениеПараметра); - history.pushState(null, "", адрес); - break; - } - } - } - // Добавить параметр. - else - { - var префикс = "?"; - if (строкаПоиска.startsWith("?")) - { - префикс = "&"; - } - var адрес = текущийАдрес + префикс + `${ключПараметра}=` + значениеПараметра; - history.pushState(null, "", адрес); - } -}; \ No newline at end of file