227 lines
4.2 KiB
JavaScript
227 lines
4.2 KiB
JavaScript
мж.создатьЭкран = 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 = `
|
|
<div id="bg" class="fade-out-3">
|
|
<div class="center">
|
|
<center>
|
|
<h1 class="begin-transparent fade-in-1">Маджонг</h1>
|
|
<p class="nowrap begin-transparent fade-in-2">открытая игра</p>
|
|
</center>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
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 = `
|
|
<div id="layout-button-border">
|
|
</div>
|
|
<div id="layout-button">
|
|
<img id="layout-image" src="data:image/svg+xml;base64, ` + мж.иконкиКнопок["layout"] + `" alt="Раскладка" />
|
|
</div>
|
|
`;
|
|
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(){
|
|
мж.кнопкаРаскладкиНажата.уведомить();
|
|
};
|
|
};
|