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.

Topbar.vue 3.5KB

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