Пользовательский интерфейс Маджонга | Mahjong user interface
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

209 lines
5.6KB

  1. // // // //
  2. ВыбратьРаскладкуПровальную = мир =>
  3. {
  4. мир.выбраннаяРаскладка = "😭";
  5. мир.уведомить("выбрали раскладку");
  6. };
  7. // // // //
  8. ВыбратьРаскладкуУспешную = мир =>
  9. {
  10. мир.выбраннаяРаскладка = "😀";
  11. мир.уведомить("выбрали раскладку");
  12. };
  13. // // // //
  14. ВыбратьРаскладкуX = мир =>
  15. {
  16. мир.выбраннаяРаскладка = "X";
  17. мир.уведомить("выбрали раскладку");
  18. };
  19. // // // //
  20. ОтключитьОкноПриветствия = мир =>
  21. {
  22. мир.окна.приветствие.элемент.style.display = "none";
  23. };
  24. // // // //
  25. ПлавноСкрытьОкноПриветствия = мир =>
  26. {
  27. const css = `
  28. #${мир.окна.приветствие.указатель}
  29. {
  30. opacity: 1;
  31. animation: ${мир.окна.приветствие.указатель}ПлавноСкрыть 0.5s ease;
  32. animation-fill-mode: forwards;
  33. animation-delay: 0.1s;
  34. }
  35. `;
  36. мир.окна.приветствие.анимация.innerHTML = css;
  37. мир.окна.приветствие.показываем = false;
  38. };
  39. // // // //
  40. ПлавноПоказатьОкноПриветствия = мир =>
  41. {
  42. const css = `
  43. #${мир.окна.приветствие.указатель}
  44. {
  45. opacity: 0;
  46. animation: ${мир.окна.приветствие.указатель}ПлавноПоказать 1s ease;
  47. animation-fill-mode: forwards;
  48. }
  49. `;
  50. мир.окна.приветствие.анимация.innerHTML = css;
  51. мир.окна.приветствие.показываем = true;
  52. мир.окна.приветствие.элемент.style.display = "block";
  53. };
  54. // // // //
  55. ПодготовитьАнимациюОкнаПриветствия = мир =>
  56. {
  57. мир.окна.приветствие.анимация = document.createElement("style");
  58. document.head.appendChild(мир.окна.приветствие.анимация);
  59. мир.окна.приветствие.показываем = true;
  60. мир.окна.приветствие.элемент.addEventListener(
  61. "animationend",
  62. function()
  63. {
  64. if (мир.окна.приветствие.показываем)
  65. {
  66. мир.уведомить("плавно показали окно приветствия");
  67. }
  68. else {
  69. мир.уведомить("плавно скрыли окно приветствия");
  70. }
  71. }
  72. );
  73. };
  74. // // // //
  75. ЗадатьВидИАнимациюОкнаПриветствия = мир =>
  76. {
  77. const css = `
  78. #${мир.окна.приветствие.указатель}-тело
  79. {
  80. position: absolute;
  81. left: 50%;
  82. top: 50%;
  83. transform: translateX(-50%) translateY(-50%);
  84. }
  85. #${мир.окна.приветствие.указатель}
  86. {
  87. background-color: white;
  88. position: fixed;
  89. left: 0;
  90. top: 0;
  91. right: 0;
  92. bottom: 0;
  93. }
  94. @keyframes ${мир.окна.приветствие.указатель}ПлавноСкрыть
  95. {
  96. 0%
  97. {
  98. opacity: 1;
  99. }
  100. 100%
  101. {
  102. opacity: 0;
  103. }
  104. }
  105. @keyframes ${мир.окна.приветствие.указатель}ПлавноПоказать
  106. {
  107. 0%
  108. {
  109. opacity: 0;
  110. }
  111. 100%
  112. {
  113. opacity: 1;
  114. }
  115. }
  116. `;
  117. var вид = document.createElement("style");
  118. вид.innerHTML = css;
  119. document.head.appendChild(вид);
  120. };
  121. // // // //
  122. СоздатьОкноПриветствия = мир =>
  123. {
  124. мир.окна.приветствие = {
  125. "указатель": "окно-приветствия",
  126. };
  127. const html = `
  128. <div id="${мир.окна.приветствие.указатель}-тело">
  129. <center>
  130. <p>
  131. <span class="uk-text-large">Маджонг</span>
  132. ⚬ <span class="uk-text-large uk-text-bold">麻将</span> ⚬
  133. <span class="uk-text-large">Mahjong</span>
  134. </p>
  135. <span>${мир.версия}</span>
  136. <hr class="uk-divider-icon">
  137. <p uk-margin>
  138. <p>Выберите раскладку: | 选择布局: | Select layout:</p>
  139. <button id="${мир.окна.приветствие.указатель}-X" class="uk-button uk-button-default">X</button>
  140. <button id="${мир.окна.приветствие.указатель}-😀" class="uk-button uk-button-default">😀</button>
  141. <button id="${мир.окна.приветствие.указатель}-😭" class="uk-button uk-button-default">😭</button>
  142. </p>
  143. </center>
  144. </div>
  145. `;
  146. var окно = document.createElement("div");
  147. окно.id = мир.окна.приветствие.указатель;
  148. окно.innerHTML = html;
  149. document.body.appendChild(окно);
  150. окно.style.display = "none";
  151. мир.окна.приветствие.элемент = окно;
  152. $(`#${мир.окна.приветствие.указатель}-X`).click(function() {
  153. мир.уведомить("кнопка раскладки X");
  154. });
  155. $(`#${мир.окна.приветствие.указатель}-😀`).click(function() {
  156. мир.уведомить("кнопка раскладки 😀");
  157. });
  158. $(`#${мир.окна.приветствие.указатель}-😭`).click(function() {
  159. мир.уведомить("кнопка раскладки 😭");
  160. });
  161. };