mahjong/mahjong-ui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Изменения от Главреда ГитЖС | Changes of GitJS Glavred

Browse Source
This commit is contained in:
Главред | Glavred
2020-10-03 15:09:51 +03:00
parent f0e1336ab2
commit e92e3159e1
13 changed files with 263 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
0000
View File

@@ -2,13 +2,14 @@
1.0.0
https://git.opengamestudio.org/mahjong/mahjong-ui
x /меню|menu.js
/меню|menu.череда
x /окончание|ending.js
/окончание|ending.череда
x /плавное-отображение-скрытие|smooth-show-hide.js
x /приветствие|welcome.js
/приветствие|welcome.череда
x /пуск|run.js
/пуск|run.череда
x /раскладки|layouts.js
/раскладки|layouts.череда
x /управление|controls.js
/управление|controls.череда

120
меню|menu.js
View File

@@ -1,120 +0,0 @@
// // // //
ПлавноПоказатьОкноМеню = мир =>
{
const css = `
#${мир.окна.меню.указатель}
{
opacity: 0;
animation: ${мир.окна.меню.указатель}ПлавноПоказать 0.5s ease;
animation-fill-mode: forwards;
}
`;
мир.окна.меню.анимация.innerHTML = css;
мир.окна.меню.элемент.style.display = "block";
};
// // // //
ПодготовитьАнимациюОкнаМеню = мир =>
{
мир.окна.меню.анимация = document.createElement("style");
document.head.appendChild(мир.окна.меню.анимация);
};
// // // //
ЗадатьВидИАнимациюОкнаМеню = мир =>
{
/*
#${мир.окна.меню.указатель}-тело
{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
*/
const css = `
#${мир.окна.меню.указатель}
{
background-color: white;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
@keyframes ${мир.окна.меню.указатель}ПлавноСкрыть
{
0%
{
opacity: 1;
}
100%
{
opacity: 0;
}
}
@keyframes ${мир.окна.меню.указатель}ПлавноПоказать
{
0%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
`;
var вид = document.createElement("style");
вид.innerHTML = css;
document.head.appendChild(вид);
};
// // // //
СоздатьОкноМеню = мир =>
{
мир.окна.меню = {
"указатель": "окно-меню",
};
const html = `Меню`;
/*
<div id="${мир.окна.окончание.указатель}-тело">
<center>
<span id="${мир.окна.окончание.указатель}-содержимое">
</span>
<hr class="uk-divider-icon">
<p>
<a href="https://twitter.com/opengamestudio" target="_blank" class="uk-icon-button" uk-icon="twitter"></a>
</p>
</center>
</div>
`;
*/
var окно = document.createElement("div");
окно.id = мир.окна.меню.указатель;
окно.innerHTML = html;
окно.style.display = "none";
мир.окна.меню.элемент = окно;
мир.окна.управление.элемент.appendChild(окно);
};

6
меню|menu.череда
View File

@@ -1,6 +0,0 @@
надо создать окно меню
создать окно меню
задать вид и анимацию окна меню
подготовить анимацию окна меню
кнопка меню
плавно показать окно меню

53
окончание|ending.js
View File

@@ -35,35 +35,14 @@
ПлавноПоказатьОкноОкончания = мир =>
{
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 = `
@@ -84,30 +63,6 @@
bottom: 0;
}
@keyframes ${мир.окна.окончание.указатель}ПлавноСкрыть
{
0%
{
opacity: 1;
}
100%
{
opacity: 0;
}
}
@keyframes ${мир.окна.окончание.указатель}ПлавноПоказать
{
0%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
`;
var вид = document.createElement("style");
вид.innerHTML = css;
@@ -141,7 +96,9 @@
var окно = document.createElement("div");
окно.id = мир.окна.окончание.указатель;
окно.innerHTML = html;
document.body.appendChild(окно);
окно.style.display = "none";
document.body.appendChild(окно);
мир.окна.окончание.элемент = окно;
мир.окна.окончание.плавно = new ПлавноеОтображениеИСкрытиеЭлемента(окно);
};

3
окончание|ending.череда
View File

@@ -1,7 +1,6 @@
надо создать окно окончания
создать окно окончания
задать вид и анимацию окна окончания
подготовить анимацию окна окончания
задать вид окна окончания
победа
задать победное содержимое окну окончания
плавно показать окно окончания

103
плавное-отображение-скрытие|smooth-show-hide.js Normal file
View File

@@ -0,0 +1,103 @@
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.__отслеживатьЗавершениеАнимации();
};

91
приветствие|welcome.js
View File

@@ -33,30 +33,9 @@
// // // //
ОтключитьОкноПриветствия = мир =>
{
мир.окна.приветствие.элемент.style.display = "none";
};
// // // //
ПлавноСкрытьОкноПриветствия = мир =>
{
const css = `
#${мир.окна.приветствие.указатель}
{
opacity: 1;
animation: ${мир.окна.приветствие.указатель}ПлавноСкрыть 0.5s ease;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
`;
мир.окна.приветствие.анимация.innerHTML = css;
мир.окна.приветствие.показываем = false;
мир.окна.приветствие.плавно.скрыть();
};
@@ -65,50 +44,14 @@
ПлавноПоказатьОкноПриветствия = мир =>
{
const css = `
#${мир.окна.приветствие.указатель}
{
opacity: 0;
animation: ${мир.окна.приветствие.указатель}ПлавноПоказать 1s ease;
animation-fill-mode: forwards;
}
`;
мир.окна.приветствие.анимация.innerHTML = css;
мир.окна.приветствие.показываем = true;
мир.окна.приветствие.элемент.style.display = "block";
мир.окна.приветствие.плавно.отобразить();
};
// // // //
ПодготовитьАнимациюОкнаПриветствия = мир =>
{
мир.окна.приветствие.анимация = document.createElement("style");
document.head.appendChild(мир.окна.приветствие.анимация);
мир.окна.приветствие.показываем = true;
мир.окна.приветствие.элемент.addEventListener(
"animationend",
function()
{
if (мир.окна.приветствие.показываем)
{
мир.уведомить("плавно показали окно приветствия");
}
else {
мир.уведомить("плавно скрыли окно приветствия");
}
}
);
};
// // // //
ЗадатьВидИАнимациюОкнаПриветствия = мир =>
ЗадатьВидОкнаПриветствия = мир =>
{
const css = `
@@ -129,30 +72,6 @@
bottom: 0;
}
@keyframes ${мир.окна.приветствие.указатель}ПлавноСкрыть
{
0%
{
opacity: 1;
}
100%
{
opacity: 0;
}
}
@keyframes ${мир.окна.приветствие.указатель}ПлавноПоказать
{
0%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
`;
var вид = document.createElement("style");
вид.innerHTML = css;
@@ -193,10 +112,12 @@
var окно = document.createElement("div");
окно.id = мир.окна.приветствие.указатель;
окно.innerHTML = html;
document.body.appendChild(окно);
окно.style.display = "none";
document.body.appendChild(окно);
мир.окна.приветствие.элемент = окно;
мир.окна.приветствие.плавно = new ПлавноеОтображениеИСкрытиеЭлемента(окно);
$(`#${мир.окна.приветствие.указатель}-X`).click(function() {
мир.уведомить("кнопка раскладки X");
});

5
приветствие|welcome.череда
View File

@@ -1,7 +1,6 @@
надо создать окно приветствия
создать окно приветствия
задать вид и анимацию окна приветствия
подготовить анимацию окна приветствия
задать вид окна приветствия
плавно показать окно приветствия
кнопка раскладки X
@@ -13,5 +12,3 @@
выбрали раскладку
плавно скрыть окно приветствия
плавно скрыли окно приветствия
отключить окно приветствия

2
пуск|run.js
View File

@@ -6,7 +6,7 @@
СоздатьОкнаМаджонга = мир =>
{
мир.уведомить("надо создать окно управления");
мир.уведомить("надо создать окно меню");
мир.уведомить("надо создать окно раскладок");
мир.уведомить("надо создать окно приветствия");
мир.уведомить("надо создать окно окончания");
};

76
раскладки|layouts.js Normal file
View File

@@ -0,0 +1,76 @@
ПлавноСкрытьОкноРаскладок = мир =>
{
мир.окна.раскладки.плавно.скрыть();
};
// // // //
ПлавноПоказатьОкноРаскладок = мир =>
{
мир.окна.раскладки.плавно.отобразить();
};
// // // //
ЗадатьВидОкнаРаскладок = мир =>
{
var вид = document.createElement("style");
document.head.appendChild(вид);
вид.innerHTML = `
#${мир.окна.раскладки.указатель}
{
background-color: white;
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 50%;
}
#скрыть-раскладки
{
position: relative;
margin: 0.5em;
left: 0;
top: 0;
}
`;
};
// // // //
СоздатьОкноРаскладок = мир =>
{
var окно = document.createElement("div");
окно.id = "окно-раскладки";
окно.style.display = "none";
document.body.appendChild(окно);
var настройки = {
"прозрачность": 0.8,
};
мир.окна.раскладки = {
"указатель": окно.id,
"элемент": окно,
"плавно": new ПлавноеОтображениеИСкрытиеЭлемента(окно, настройки),
};
окно.innerHTML = `
<a id="скрыть-раскладки" uk-icon="icon: close; ratio: 2"></a>
<p>текст произвольный</p>
`;
$("#скрыть-раскладки").click(function() {
мир.уведомить("кнопка скрыть раскладки");
});
};

9
раскладки|layouts.череда Normal file
View File

@@ -0,0 +1,9 @@
надо создать окно раскладок
создать окно раскладок
задать вид окна раскладок
кнопка показать раскладки
плавно показать подложку
плавно показать окно раскладок
кнопка скрыть раскладки
плавно скрыть подложку
плавно скрыть окно раскладок

64
управление|controls.js
View File

@@ -3,22 +3,68 @@
// // // //
СоздатьКнопкуМеню = мир =>
ПлавноСкрытьПодложку = мир =>
{
var меню = document.createElement("div");
меню.innerHTML = `
<a id="открыть-меню" uk-icon="icon: menu; ratio: 2"></a>
`;
меню.style = `
мир.окна.подложка.плавно.скрыть();
};
// // // //
ПлавноПоказатьПодложку = мир =>
{
мир.окна.подложка.плавно.отобразить();
};
// // // //
СоздатьПодложку = мир =>
{
var окно = document.createElement("div");
окно.id = "окно-подложка";
document.body.appendChild(окно);
окно.style = `
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: white;
opacity: 0.5;
display: none;
`;
var настройки = {
"прозрачность": 0.5,
};
мир.окна.подложка = {
"указатель": "окно-подложка",
"элемент": окно,
"плавно": new ПлавноеОтображениеИСкрытиеЭлемента(окно, настройки),
};
};
// // // //
СоздатьКнопкуРаскладки = мир =>
{
var кнопка = document.createElement("div");
кнопка.innerHTML = `
<a id="показать-раскладки" uk-icon="icon: thumbnails; ratio: 2"></a>
`;
кнопка.style = `
position: fixed;
right: 0;
bottom: 0;
margin: 0.5em;
`;
мир.окна.управление.элемент.appendChild(меню);
мир.окна.управление.элемент.appendChild(кнопка);
$(`#открыть-меню`).click(function() {
мир.уведомить("кнопка меню");
$(`#показать-раскладки`).click(function() {
мир.уведомить("кнопка показать раскладки");
});
};

3
управление|controls.череда
View File

@@ -1,7 +1,8 @@
надо создать окно управления
создать окно управления
создать элементы управления масштабом
создать кнопку меню
создать кнопку раскладки
создать подложку
выбрали раскладку
показать окно управления
кнопка увеличения масштаба