@@ -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.череда |
@@ -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(окно); | |||
}; |
@@ -1,6 +0,0 @@ | |||
надо создать окно меню | |||
создать окно меню | |||
задать вид и анимацию окна меню | |||
подготовить анимацию окна меню | |||
кнопка меню | |||
плавно показать окно меню |
@@ -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 ПлавноеОтображениеИСкрытиеЭлемента(окно); | |||
}; |
@@ -1,7 +1,6 @@ | |||
надо создать окно окончания | |||
создать окно окончания | |||
задать вид и анимацию окна окончания | |||
подготовить анимацию окна окончания | |||
задать вид окна окончания | |||
победа | |||
задать победное содержимое окну окончания | |||
плавно показать окно окончания | |||
@@ -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.__отслеживатьЗавершениеАнимации(); | |||
}; |
@@ -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,9 +112,11 @@ | |||
var окно = document.createElement("div"); | |||
окно.id = мир.окна.приветствие.указатель; | |||
окно.innerHTML = html; | |||
document.body.appendChild(окно); | |||
окно.style.display = "none"; | |||
document.body.appendChild(окно); | |||
мир.окна.приветствие.элемент = окно; | |||
мир.окна.приветствие.плавно = new ПлавноеОтображениеИСкрытиеЭлемента(окно); | |||
$(`#${мир.окна.приветствие.указатель}-X`).click(function() { | |||
мир.уведомить("кнопка раскладки X"); | |||
@@ -1,7 +1,6 @@ | |||
надо создать окно приветствия | |||
создать окно приветствия | |||
задать вид и анимацию окна приветствия | |||
подготовить анимацию окна приветствия | |||
задать вид окна приветствия | |||
плавно показать окно приветствия | |||
кнопка раскладки X | |||
@@ -12,6 +11,4 @@ | |||
выбрать раскладку провальную | |||
выбрали раскладку | |||
плавно скрыть окно приветствия | |||
плавно скрыли окно приветствия | |||
отключить окно приветствия | |||
плавно скрыть окно приветствия |
@@ -6,7 +6,7 @@ | |||
СоздатьОкнаМаджонга = мир => | |||
{ | |||
мир.уведомить("надо создать окно управления"); | |||
мир.уведомить("надо создать окно меню"); | |||
мир.уведомить("надо создать окно раскладок"); | |||
мир.уведомить("надо создать окно приветствия"); | |||
мир.уведомить("надо создать окно окончания"); | |||
}; |
@@ -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() { | |||
мир.уведомить("кнопка скрыть раскладки"); | |||
}); | |||
}; |
@@ -0,0 +1,9 @@ | |||
надо создать окно раскладок | |||
создать окно раскладок | |||
задать вид окна раскладок | |||
кнопка показать раскладки | |||
плавно показать подложку | |||
плавно показать окно раскладок | |||
кнопка скрыть раскладки | |||
плавно скрыть подложку | |||
плавно скрыть окно раскладок |
@@ -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() { | |||
мир.уведомить("кнопка показать раскладки"); | |||
}); | |||
}; | |||
@@ -1,7 +1,8 @@ | |||
надо создать окно управления | |||
создать окно управления | |||
создать элементы управления масштабом | |||
создать кнопку меню | |||
создать кнопку раскладки | |||
создать подложку | |||
выбрали раскладку | |||
показать окно управления | |||
кнопка увеличения масштаба | |||