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 = ` -
Выберите раскладку | 选择布局 | Select layout
- - - + + +-
Перезапустить игру с раскладкой:
- - - --
Перезапустить игру с раскладкой:
- - - -