Merge pull request #391 from penguin-statistics/release-3.3.4

Release 3.3.4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "penguin-stats-frontend",
-  "version": "3.3.2",
+  "version": "3.3.4",
   "private": true,
   "author": "Penguin Statistics Contributors <contributors@penguin-stats.io> (https://github.com/orgs/penguin-statistics/people)",
   "scripts": {

src/components/global/Item.vue

@@ -104,8 +104,8 @@
         }
       },
       disableTooltipCalculated () {
-        // always disable tooltip on touch screen
-        return environment.isTouchScreen || this.disableTooltip
+        // always disable tooltip on environment that cannot support hover
+        return !environment.canHover || this.disableTooltip
       }
     },
   };

src/components/global/PreloaderCard.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-card class="d-flex fill-height">
+    <v-row
+      align="center"
+      justify="center"
+    >
+      <v-col
+        cols="12"
+        class="px-6 py-12 text-center"
+      >
+        <PreloaderInline class="mx-auto mb-6" />
+
+        <h1 class="overline">
+          {{ overline }}
+        </h1>
+        <h1 class="title">
+          {{ title }}
+        </h1>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script>
+import PreloaderInline from "@/components/global/PreloaderInline";
+
+export default {
+  name: "PreloaderCard",
+  components: {PreloaderInline},
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    overline: {
+      type: String,
+      required: true
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/global/PreloaderInline.vue

@@ -0,0 +1,145 @@
+<template>
+  <div
+    :style="size.image"
+    class="animated-preloader-wrapper"
+  >
+    <transition
+      mode="in-out"
+      appear
+      duration="125"
+      name="fade-transition"
+    >
+      <div
+        v-if="ready"
+        key="preloader"
+        class="animated-preloader mx-auto"
+
+        :style="{...size.image, backgroundImage: `url(${url})`}"
+      />
+      <div
+        v-else
+        key="circular"
+        class="d-flex fill-height align-center justify-center v-image__placeholder"
+        style="z-index: 0"
+      >
+        <v-progress-circular
+          indeterminate
+          :size="size.pending"
+          :width="4"
+        />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import randomUtils from "@/utils/randomUtils";
+import CDN from "@/mixins/CDN";
+import service from "@/utils/service";
+import Console from "@/utils/Console";
+
+export default {
+  name: "PreloaderInline",
+  mixins: [CDN],
+  props: {
+    small: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      preloaders: [
+        "croissant", "exusiai", "sora", "texas"
+      ],
+      ready: false,
+      url: ''
+    }
+  },
+  computed: {
+    currentPreloaderIndex () {
+      return randomUtils.randomInt(this.preloaders.length - 1)
+    },
+    currentSrc() {
+      return this.cdnDeliver(`/images/preloaders/${this.preloaders[this.currentPreloaderIndex]}.png`)
+    },
+    size () {
+      if (this.small) {
+        return {
+          image: {
+            "--size": "64px"
+          },
+          pending: 32
+        }
+      } else {
+        return {
+          image: {
+            "--size": "160px"
+          },
+          pending: 48
+        }
+      }
+    }
+  },
+  watch: {
+    url (_, oldValue) {
+      this.revoke(oldValue)
+    }
+  },
+  beforeDestroy() {
+    this.revoke(this.url)
+  },
+  created() {
+    this.update()
+  },
+  methods: {
+    revoke(url) {
+      if (url !== '') {
+        URL.revokeObjectURL(url)
+        Console.debug("Preloader", "revoked blob with URL", url)
+      }
+    },
+    update() {
+      this.ready = false
+      service.get(this.currentSrc, {
+        withCredentials: false,
+        responseType: "blob"
+      })
+        .then(({data}) => {
+          this.ready = true
+          this.url = URL.createObjectURL(data)
+        })
+        .catch((err) => {
+          Console.error("Preloader", "failed to update preloader image:", err)
+          // we could do nothing here :(
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.animated-preloader {
+  height: var(--size);
+  width: var(--size);
+  animation: preloader infinite;
+  animation-duration: 270ms;
+  animation-timing-function: steps(3, end);
+  background-size: var(--size);
+  background-repeat: no-repeat;
+  z-index: 1;
+}
+@keyframes preloader {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 0 calc(-3 * var(--size));
+  }
+}
+.animated-preloader-wrapper {
+  position: relative;
+  height: var(--size);
+  width: var(--size);
+}
+</style>

src/components/global/RandomBackground.vue

@@ -12,6 +12,7 @@
   import CDN from "@/mixins/CDN";
   import {mapGetters} from "vuex";
   import randomUtils from "@/utils/randomUtils";
+  import service from "@/utils/service";
 
   export default {
     name: "RandomBackground",
@@ -40,7 +41,6 @@
         timer: null,
         webpSupport: null,
         blurred: false,
-        // TODO: Update image map.
         // [key] is a special "stageId" to display a special "background image"
         // [value] represents a "background image url" on such route
         specialImageMap: {
@@ -104,14 +104,12 @@
       async updateBackgroundByUrl(url) {
         const background = this.$refs.background;
         this.lastLoading = true;
-        window.fetch(url, {
-          cache: "force-cache"
+        service.get(url, {
+          withCredentials: false,
+          responseType: "blob"
         })
-          .then((response) => {
-            return response.blob();
-          })
-          .then((blob) => {
-            const dataUrl = URL.createObjectURL(blob);
+          .then(({data}) => {
+            const dataUrl = URL.createObjectURL(data);
             background.style.backgroundImage = `url(${dataUrl})`;
             // Console.log(`created ${dataUrl} | revoking ${this.lastUrl}`)
             !this.lastUrl && URL.revokeObjectURL(this.lastUrl);

src/components/planner/PlannerIO.vue

@@ -182,8 +182,6 @@
           return snackbar.launch("error", 5000, `planner.import.${unmarshalled.exception}`)
         }
 
-        this.$emit('reset')
-
         let importedCounter = 0;
 
         const currentItems = this.$store.getters["planner/config"].items

src/components/planner/PlannerResult.vue

@@ -38,7 +38,7 @@
             </v-list-item-icon>
             <v-list-item-content>
               <v-list-item-title class="monospace">
-                {{ parseTimes(result.gold) || thousandSeparator }}
+                {{ parseTimes(result.gold) | thousandSeparator }}
               </v-list-item-title>
               <v-list-item-subtitle>
                 {{ $t('planner.calculation.lmb') }}

src/components/stats/PreviewItemCard.vue

@@ -84,56 +84,57 @@
 </template>
 
 <script>
-  import get from '@/utils/getters'
-  import ItemIcon from "@/components/global/ItemIcon";
-  import existUtils from "@/utils/existUtils";
-  import strings from "@/utils/strings";
+import get from '@/utils/getters'
+import ItemIcon from "@/components/global/ItemIcon";
+import existUtils from "@/utils/existUtils";
+import strings from "@/utils/strings";
+import config from "@/config"
 
-  const pagination = 5;
+const pagination = config.previewCard.item.pagination;
 
-  export default {
-    name: "PreviewItemCard",
-    components: {ItemIcon},
-    props: {
-      itemId: {
-        type: String,
-        required: true
-      },
+export default {
+  name: "PreviewItemCard",
+  components: {ItemIcon},
+  props: {
+    itemId: {
+      type: String,
+      required: true
     },
-    computed: {
-      item() {
-        const item = get.items.byItemId(this.itemId)
-        return {
-          ...item,
-          name: strings.translate(item, "name")
-        }
-      },
-      stats () {
-        const data = get.statistics.byItemId(this.itemId)
+  },
+  computed: {
+    item() {
+      const item = get.items.byItemId(this.itemId)
+      return {
+        ...item,
+        name: strings.translate(item, "name")
+      }
+    },
+    stats () {
+      const data = get.statistics.byItemId(this.itemId)
           // filter out stages that have too less samples
           .filter(el => el.times > 100)
           // only open stages
           .filter(el => existUtils.existence(el.stage, true))
 
           .sort((a, b) => b.percentage - a.percentage)
 
-        return {
-          data: data
+      return {
+        data: data
             .slice(0, pagination)
             .map(el => {
               return {
                 ...el,
                 stageCode: strings.translate(el.stage, "code")
               }
             }),
-          more: data.length > pagination
-        }
-      },
-      highlight () {
-        return this.$route.params.stageId
+        more: data.length > pagination
       }
     },
-  }
+    highlight () {
+      return this.$route.params.stageId
+    }
+  },
+}
 </script>
 
 <style scoped>

src/components/toolbar/AccountManager.vue

@@ -221,7 +221,6 @@
   import ForgotAccount from "@/components/toolbar/ForgotAccount";
   import TooltipBtn from "@/components/global/TooltipBtn";
   import config from "@/config"
-  import environment from "@/utils/environment";
 
   export default {
     name: "AccountManager",
@@ -244,11 +243,6 @@
         error: ""
       }
     },
-    computed: {
-      mobile() {
-        return environment.isTouchScreen
-      }
-    },
     created () {
       const userId = Cookies.get(config.authorization.userId.cookieKey);
       if (userId) this.$store.dispatch("auth/login", {userId, prompted: false});