Пользовательский интерфейс Маджонга | Mahjong user interface
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

169 lines
3.9KB

  1. // // // //
  2. ПлавноСкрытьПодложку = мир =>
  3. {
  4. мир.окна.подложка.плавно.скрыть();
  5. };
  6. // // // //
  7. ПлавноПоказатьПодложку = мир =>
  8. {
  9. мир.окна.подложка.плавно.отобразить();
  10. };
  11. // // // //
  12. СоздатьПодложку = мир =>
  13. {
  14. var окно = document.createElement("div");
  15. окно.id = "окно-подложка";
  16. document.body.appendChild(окно);
  17. окно.style = `
  18. position: fixed;
  19. left: 0;
  20. top: 0;
  21. right: 0;
  22. bottom: 0;
  23. background-color: white;
  24. opacity: 0.5;
  25. display: none;
  26. `;
  27. var настройки = {
  28. "прозрачность": 0.5,
  29. };
  30. мир.окна.подложка = {
  31. "указатель": "окно-подложка",
  32. "элемент": окно,
  33. "плавно": new ПлавноеОтображениеИСкрытиеЭлемента(окно, настройки),
  34. };
  35. };
  36. // // // //
  37. СоздатьКнопкуРаскладки = мир =>
  38. {
  39. var кнопка = document.createElement("div");
  40. кнопка.innerHTML = `
  41. <a id="показать-раскладки" uk-icon="icon: thumbnails; ratio: 2"></a>
  42. `;
  43. кнопка.style = `
  44. position: fixed;
  45. right: 0;
  46. bottom: 0;
  47. margin: 0.5em;
  48. `;
  49. мир.окна.управление.элемент.appendChild(кнопка);
  50. $(`#показать-раскладки`).click(function() {
  51. мир.уведомить("кнопка показать раскладки");
  52. });
  53. };
  54. // // // //
  55. СообщитьТекущееЗначениеМасштаба = мир =>
  56. {
  57. var масштаб = мир.масштаб * 100;
  58. var сообщение = `🔍 ${масштаб}%`;
  59. UIkit.notification({
  60. message: сообщение,
  61. timeout: 500
  62. });
  63. };
  64. // // // //
  65. УменьшитьМасштаб = мир =>
  66. {
  67. мир.масштаб -= 0.5;
  68. if (мир.масштаб < 1)
  69. {
  70. мир.масштаб = 1;
  71. }
  72. мир.уведомить("изменили масштаб");
  73. };
  74. // // // //
  75. УвеличитьМасштаб = мир =>
  76. {
  77. мир.масштаб += 0.5;
  78. мир.уведомить("изменили масштаб");
  79. };
  80. // // // //
  81. СоздатьЭлементыУправленияМасштабом = мир =>
  82. {
  83. var элементы = document.createElement("div");
  84. элементы.innerHTML = `
  85. <ul class="uk-iconnav uk-iconnav-vertical">
  86. <li><a id="увеличить-масштаб" uk-icon="icon: plus; ratio: 2"></a></li>
  87. <li><a id="уменьшить-масштаб" uk-icon="icon: minus; ratio: 2"></a></li>
  88. </ul>
  89. `;
  90. элементы.style = `
  91. position: fixed;
  92. right: 0;
  93. top: 50%;
  94. transform: translateX(-50%) translateY(-50%);
  95. `;
  96. мир.окна.управление.элемент.appendChild(элементы);
  97. $(`#увеличить-масштаб`).click(function() {
  98. мир.уведомить("кнопка увеличения масштаба");
  99. });
  100. $(`#уменьшить-масштаб`).click(function() {
  101. мир.уведомить("кнопка уменьшения масштаба");
  102. });
  103. };
  104. // // // //
  105. ПоказатьОкноУправления = мир =>
  106. {
  107. мир.окна.управление.элемент.style.display = "block";
  108. };
  109. // // // //
  110. СоздатьОкноУправления = мир =>
  111. {
  112. мир.окна.управление = {
  113. "указатель": "окно-управления",
  114. };
  115. var окно = document.createElement("div");
  116. окно.id = мир.окна.управление.указатель;
  117. document.body.appendChild(окно);
  118. окно.style = `
  119. position: absolute;
  120. left: 0;
  121. top: 0;
  122. right: 0;
  123. bottom: 0;
  124. `;
  125. окно.style.display = "none";
  126. мир.окна.управление.элемент = окно;
  127. };