Пользовательский интерфейс Маджонга | 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.

127 lines
3.3KB

  1. // // // //
  2. ВыбратьРаскладкуПровальную = мир =>
  3. {
  4. мир.выбраннаяРаскладка = "😭";
  5. мир.уведомить("выбрали раскладку");
  6. };
  7. // // // //
  8. ВыбратьРаскладкуУспешную = мир =>
  9. {
  10. мир.выбраннаяРаскладка = "😀";
  11. мир.уведомить("выбрали раскладку");
  12. };
  13. // // // //
  14. ВыбратьРаскладкуX = мир =>
  15. {
  16. мир.выбраннаяРаскладка = "X_shaped";
  17. мир.уведомить("выбрали раскладку");
  18. };
  19. // // // //
  20. ПлавноСкрытьОкноПриветствия = мир =>
  21. {
  22. мир.окна.приветствие.плавно.скрыть();
  23. };
  24. // // // //
  25. ПлавноПоказатьОкноПриветствия = мир =>
  26. {
  27. мир.окна.приветствие.плавно.отобразить();
  28. };
  29. // // // //
  30. ЗадатьВидОкнаПриветствия = мир =>
  31. {
  32. const css = `
  33. #${мир.окна.приветствие.указатель}-тело
  34. {
  35. position: absolute;
  36. left: 50%;
  37. top: 50%;
  38. transform: translateX(-50%) translateY(-50%);
  39. }
  40. #${мир.окна.приветствие.указатель}
  41. {
  42. background-color: white;
  43. position: fixed;
  44. left: 0;
  45. top: 0;
  46. right: 0;
  47. bottom: 0;
  48. }
  49. `;
  50. var вид = document.createElement("style");
  51. вид.innerHTML = css;
  52. document.head.appendChild(вид);
  53. };
  54. // // // //
  55. СоздатьОкноПриветствия = мир =>
  56. {
  57. var окно = document.createElement("div");
  58. окно.id = "окно-приветствия";
  59. окно.style.display = "none";
  60. document.body.appendChild(окно);
  61. мир.окна.приветствие = {
  62. "указатель": окно.id,
  63. "элемент": окно,
  64. "плавно": new ПлавноОтобразитьСкрыть(окно),
  65. };
  66. окно.innerHTML = `
  67. <div id="${окно.id}-тело">
  68. <center>
  69. <p>
  70. <span class="uk-text-large">Маджонг</span>
  71. ⚬ <span class="uk-text-large uk-text-bold">麻将</span> ⚬
  72. <span class="uk-text-large">Mahjong</span>
  73. </p>
  74. <span>${мир.версия}</span>
  75. <hr class="uk-divider-icon">
  76. <p uk-margin>
  77. <p>Выберите раскладку: | 选择布局: | Select layout:</p>
  78. <button id="${окно.id}-X" class="uk-button uk-button-default">X</button>
  79. <button id="${окно.id}-😀" class="uk-button uk-button-default">😀</button>
  80. <button id="${окно.id}-😭" class="uk-button uk-button-default">😭</button>
  81. </p>
  82. </center>
  83. </div>
  84. `;
  85. $(`#${мир.окна.приветствие.указатель}-X`).click(function() {
  86. мир.уведомить("кнопка раскладки X");
  87. });
  88. $(`#${мир.окна.приветствие.указатель}-😀`).click(function() {
  89. мир.уведомить("кнопка раскладки 😀");
  90. });
  91. $(`#${мир.окна.приветствие.указатель}-😭`).click(function() {
  92. мир.уведомить("кнопка раскладки 😭");
  93. });
  94. };