diff --git a/интерфейс/2019-09-19.js b/интерфейс/2019-09-19.js new file mode 100644 index 0000000..f034dbe --- /dev/null +++ b/интерфейс/2019-09-19.js @@ -0,0 +1,226 @@ +мж.создатьЭкран = function() +{ + var экран = document.createElement("div"); + экран.style.cssText = ` + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + pointer-events: none; + `; + return экран; +}; + +мж.показалиНазвание = new Уведомитель(); +мж.скрываемНазвание = new Уведомитель(); +мж.показатьНазвание = function() +{ + var html = ` +
+
+
+

Маджонг

+

открытая игра

+
+
+
+ `; + + var css = ` +#bg +{ + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: white; +} + +.begin-transparent +{ + opacity: 0; +} + +.center +{ + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} + + +.fade-in-1 +{ + animation: fadeIn 2.5s ease; + animation-delay: 0.5s; + animation-fill-mode: forwards; +} + +.fade-in-2 +{ + animation: fadeIn 1s ease; + animation-delay: 1.5s; + animation-fill-mode: forwards; +} + +@keyframes fadeIn +{ + from + { + opacity: 0; + } + to + { + opacity: 1; + } +} + +.fade-out-3 +{ + animation: fadeOut 1s ease; + animation-delay: 3s; + animation-fill-mode: forwards; +} + +@keyframes fadeOut +{ + from + { + opacity: 1; + } + to + { + opacity: 0; + } +} + + `; + + var заставка = мж.создатьЭкран(); + заставка.innerHTML = html; + мж.стиль.innerHTML += css; + document.body.appendChild(заставка); + + var фон = document.getElementById("bg"); + var колво = 0; + фон.addEventListener( + "animationend", + function() + { + ++колво; + if (колво == 2) + { + мж.скрываемНазвание.уведомить(); + } + else if (колво == 3) + { + мж.показалиНазвание.уведомить(); + document.body.removeChild(заставка); + } + } + ); +}; + +// Кнопки. + +мж.кнопкаРаскладкиНажата = new Уведомитель(); +мж.создатьКнопкуРаскладки = function() +{ + var html = ` +
+
+
+ Раскладка +
+ `; + var css = ` +#layout-button +{ + position: absolute; + left: 0.5em; + bottom: 0.5em; + border-radius: 50%; + text-align: center; + width: 4em; + height: 4em; + line-height: 4em; + pointer-events: all; + background-color: #444477; +} + +#layout-button-border +{ + position: absolute; + left: 0.5em; + bottom: 0.5em; + border-radius: 50%; + border: 0 solid #444477; + width: 4em; + height: 4em; + pointer-events: none; + background-color: #444477; +} + +#layout-button img +{ + vertical-align: middle; +} + +#layout-image +{ + height: 2em; +} + +.layout-button-show +{ + animation: layout-button-show-anim 0.5s ease forwards; +} +.layout-button-hide +{ + animation: layout-button-hide-anim 0.5s ease forwards; +} + +@keyframes layout-button-show-anim +{ + from + { + border-width: 0; + left: 0.5em; + bottom: 0.5em; + } + to + { + border-width: 300vh; + left: calc(0.5em - 300vh); + bottom: calc(0.5em - 300vh); + } +} +@keyframes layout-button-hide-anim +{ + from + { + border-width: 300vh; + left: calc(0.5em - 300vh); + bottom: calc(0.5em - 300vh); + } + to + { + border-width: 0; + left: 0.5em; + bottom: 0.5em; + } +} + `; + + мж.иф.innerHTML += html; + мж.стиль.innerHTML += css; + + var кнопка = document.getElementById("layout-button"); + мж.кнопки["раскладка"] = кнопка; + кнопка.onclick = function(){ + мж.кнопкаРаскладкиНажата.уведомить(); + }; +};