Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <template>
  2. <div class="titlebar">
  3. <!-- Logo -->
  4. <div class="titlebar__left">
  5. <div class="logo">
  6. <span>{{ $dream.name }}</span>
  7. <span class="ml-1">{{ $dream.version }}</span>
  8. </div>
  9. <div class="logo__greetings">
  10. <span v-if="!isBadTime">{{ greetings }}</span>
  11. <span v-else class="badtime"><img src="~/assets/images/games/sans.png"> i don't like what you are doing.</span>
  12. </div>
  13. </div>
  14. <!-- Drag -->
  15. <div class="titlebar__drag">
  16. <div class="titlebar__drag__region" />
  17. </div>
  18. <!-- Window Buttons -->
  19. <div class="titlebar__buttons">
  20. <button id="minimize"
  21. type="button"
  22. @click="minimize">
  23. <font-awesome-icon icon="minus" />
  24. </button>
  25. <button id="maximize"
  26. type="button"
  27. @click="maximize">
  28. <font-awesome-icon :icon="['far', 'square']" />
  29. </button>
  30. <button id="close"
  31. type="button"
  32. class="close"
  33. @click="close">
  34. <font-awesome-icon icon="times" />
  35. </button>
  36. </div>
  37. </div>
  38. </template>
  39. <script>
  40. import dayjs from 'dayjs'
  41. const { getCurrentWindow } = require('electron').remote
  42. const { api } = $provider.util
  43. export default {
  44. data: () => ({
  45. isBadTime: false,
  46. }),
  47. computed: {
  48. greetings() {
  49. const hours = dayjs().hour()
  50. if (hours >= 6 && hours <= 11) {
  51. return '☕ Good morning'
  52. }
  53. if (hours >= 12 && hours <= 19) {
  54. return '🌞 Good afternoon'
  55. }
  56. if (hours >= 0 && hours <= 5) {
  57. return '🐏 Sweet dreams'
  58. }
  59. return '🌛 Good night'
  60. },
  61. },
  62. mounted() {
  63. this.$router.afterEach((to) => {
  64. if (to.path === '/games/badtime') {
  65. this.$dream.name = 'BadDreamTime'
  66. this.isBadTime = true
  67. } else {
  68. this.$dream.name = process.env.npm_package_displayName
  69. this.isBadTime = false
  70. }
  71. })
  72. },
  73. methods: {
  74. minimize() {
  75. try {
  76. getCurrentWindow().minimize()
  77. } catch (error) {
  78. throw new Exception('There was a problem trying to minimize the window.', error)
  79. }
  80. },
  81. maximize() {
  82. try {
  83. getCurrentWindow().maximize()
  84. } catch (error) {
  85. throw new Exception('There was a problem trying to maximize the window.', error)
  86. }
  87. },
  88. close() {
  89. api.app.quit()
  90. },
  91. },
  92. }
  93. </script>
  94. <style lang="scss" scoped>
  95. @keyframes logoAnim {
  96. 0% {
  97. background-position: 0% 0%;
  98. }
  99. 50% {
  100. background-position: 100% 0%;
  101. }
  102. 100% {
  103. background-position: 0% 0%;
  104. }
  105. }
  106. .titlebar {
  107. @apply flex justify-end;
  108. @apply bg-black text-white;
  109. grid-area: title;
  110. height: 30px;
  111. z-index: 9999999;
  112. .topbar__badtime {
  113. @apply flex items-center justify-center;
  114. @apply lowercase font-bold text-sm;
  115. font-family: 'Comic Sans MS', serif;
  116. img {
  117. @apply mr-2;
  118. height: 18px;
  119. }
  120. }
  121. }
  122. .titlebar__left {
  123. @apply flex;
  124. }
  125. .logo {
  126. @apply flex justify-center items-center;
  127. @apply text-white text-sm font-bold px-6 select-none;
  128. animation-duration: 10s;
  129. animation-iteration-count: infinite;
  130. animation-name: logoAnim;
  131. animation-timing-function: ease-in-out;
  132. background: rgb(99, 66, 245);
  133. background: linear-gradient(40deg,
  134. rgba(99, 66, 245, 1) 0%,
  135. rgba(239, 125, 199, 1) 100%);
  136. background-position: 0% 0%;
  137. background-size: 200% 100%;
  138. }
  139. .logo__greetings {
  140. @apply flex justify-center items-center;
  141. @apply text-white text-sm font-light px-3 select-none;
  142. img {
  143. height: 20px;
  144. }
  145. .badtime {
  146. @apply flex items-center;
  147. img {
  148. @apply mr-1;
  149. }
  150. }
  151. }
  152. .titlebar__drag {
  153. @apply flex-1 relative;
  154. .titlebar__drag__region {
  155. @apply block absolute;
  156. top: 5px;
  157. left: 0;
  158. right: 0;
  159. bottom: 0;
  160. z-index: -1;
  161. -webkit-app-region: drag;
  162. }
  163. }
  164. .titlebar__buttons {
  165. @apply flex;
  166. button {
  167. @apply flex items-center justify-center outline-none;
  168. @apply text-xs;
  169. height: 30px;
  170. width: 50px;
  171. &:hover {
  172. @apply bg-dark-800;
  173. &.close {
  174. @apply bg-danger-500;
  175. }
  176. }
  177. }
  178. }
  179. </style>