Merge pull request #379 from penguin-statistics/dev

Release v3.3.2

.eslintrc

@@ -15,7 +15,8 @@
     "vuetify/no-deprecated-classes": "error",
     "vuetify/grid-unknown-attributes": "error",
     "vuetify/no-legacy-grid": "error",
-    "vue/no-v-html": "off"
+    "vue/no-v-html": "off",
+    "vue/no-template-shadow": "off"
   },
   "parserOptions": {
     "parser": "babel-eslint"

babel.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   presets: [
-    ['@vue/app', {
+    ["@vue/cli-plugin-babel/preset", {
       useBuiltIns: "entry"
     }]
   ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "penguin-stats-frontend",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "private": true,
   "author": "Penguin Statistics Contributors <contributors@penguin-stats.io> (https://github.com/orgs/penguin-statistics/people)",
   "scripts": {
@@ -46,15 +46,15 @@
     "@intlify/vue-i18n-loader": "^1.0.0",
     "@kazupon/vue-i18n-loader": "^0.3.0",
     "@mdi/font": "4.9.95",
-    "@vue/cli-plugin-babel": "^3.9.0",
-    "@vue/cli-plugin-eslint": "^3.9.0",
+    "@vue/cli-plugin-babel": "~4.4.6",
+    "@vue/cli-plugin-eslint": "~4.4.6",
     "@vue/cli-service": "^4.4.6",
     "axios": "^0.19.0",
-    "babel-eslint": "^10.0.1",
+    "babel-eslint": "^10.1.0",
     "browserslist-ga-export": "^2.0.0",
     "cz-conventional-changelog": "3.0.2",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
     "eslint-plugin-vuetify": "^1.0.0-beta.5",
     "husky": "^4.2.5",
     "js-yaml-loader": "^1.2.2",
@@ -67,6 +67,8 @@
     "vue-template-compiler": "^2.6.10",
     "vuetify-loader": "^1.4.3",
     "webpack": "^4.42.1",
+    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack-cli": "^3.3.12",
     "workbox-webpack-plugin": "^5.1.2"
   },
   "postcss": {

public/index.html

@@ -72,14 +72,7 @@
 </main>
 <!--<script type="text/javascript">"use strict";navigator.serviceWorker.getRegistrations().then(function(registrations){for(let registration of registrations){registration.unregister()}});caches.keys().then(keys=>{keys.forEach(el => caches.delete(el))});</script>-->
 <script type="text/javascript">"use strict";function __reload(){navigator.serviceWorker.getRegistrations().then(function(registrations){for(let registration of registrations){registration.unregister()}});caches.keys().then(keys=>{caches.delete(keys.find(el=>~el.indexOf("workbox-precache")))});window.location.reload()}(function(){function processNode(node){var tagName=(node.tagName||'').toLowerCase();var nodeAttribute=tagName==='script'&&node.src?'src':tagName==='link'&&node.rel==='stylesheet'&&node.href?'href':null;if(nodeAttribute){node.onerror=function(e){console.error("failing to get assets.",e);if(!~e.target.src.indexOf(window.location.origin)){return;}document.querySelector(".load_failed").style.display="block";document.querySelector(".sk-chase").style.opacity=0;document.querySelector(".load_title").style.opacity=0}}}new MutationObserver(function(mutations){for(var i=0;i<mutations.length;++i){var mutation=mutations[i];var addedNodes=mutation.addedNodes;for(var j=0;j<addedNodes.length;++j){processNode(addedNodes[j])}}}).observe(document,{childList:true,attributes:true,characterData:false,subtree:true,attributeOldValue:false})}());</script>
-<script type="text/javascript">function _slicedToArray(a,c){return _arrayWithHoles(a)||_iterableToArrayLimit(a,c)||_unsupportedIterableToArray(a,c)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}
-function _unsupportedIterableToArray(a,c){if(a){if("string"===typeof a)return _arrayLikeToArray(a,c);var b=Object.prototype.toString.call(a).slice(8,-1);"Object"===b&&a.constructor&&(b=a.constructor.name);if("Map"===b||"Set"===b)return Array.from(a);if("Arguments"===b||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(b))return _arrayLikeToArray(a,c)}}function _arrayLikeToArray(a,c){if(null==c||c>a.length)c=a.length;for(var b=0,d=Array(c);b<c;b++)d[b]=a[b];return d}
-function _iterableToArrayLimit(a,c){if("undefined"!==typeof Symbol&&Symbol.iterator in Object(a)){var b=[],d=!0,e=!1,f=void 0;try{for(var g=a[Symbol.iterator](),h;!(d=(h=g.next()).done)&&(b.push(h.value),!c||b.length!==c);d=!0);}catch(k){e=!0,f=k}finally{try{if(!d&&null!=g["return"])g["return"]()}finally{if(e)throw f;}}return b}}function _arrayWithHoles(a){if(Array.isArray(a))return a}
-Object.entries||(Object.entries=function(a){for(var c=Object.keys(a),b=c.length,d=Array(b);b--;)d[b]=[c[b],a[c[b]]];return d});
-var _i18n={getFirstBrowserLanguageWithRegionCode:function(){var a=window.navigator,c=["language","browserLanguage","systemLanguage","userLanguage"],b,d=null;if(Array.isArray(a.languages))for(b=0;b<a.languages.length;b++){var e=a.languages[b];var f=e.length;!d&&f&&(d=e);if(e&&2<f)return e}for(b=0;b<c.length;b++)if(e=a[c[b]],null!=e&&(f=e.length,!d&&f&&(d=e),e&&2<f))return e;return d},getFirstBrowserLanguage:function(){var a=this.getFirstBrowserLanguageWithRegionCode().replace("_","-");if(!a)return"zh";
-    var c=a.split("-");return 1===c.length?a:2===c.length?c[0]:a},data:{en:{"load_title--text":"Loading","load_caption--text":"Initialization may take some time","load_copyright--text":"Penguin Statistics"},ja:{"load_title--text":"\u8aad\u307f\u8fbc\u307f\u4e2d...","load_caption--text":"\u521d\u3081\u3066\u306e\u8aad\u307f\u8fbc\u307f\u306f\u52d5\u4f5c\u304c\u9045\u304f\u306a\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059<br>\u5c11\u3005\u304a\u5f85\u3061\u4e0b\u3055\u3044","load_copyright--text":"\u30da\u30f3\u30ae\u30f3\u6025\u4fbf\u30c7\u30fc\u30bf\u7d71\u8a08\u51e6\u7406\u90e8\u9580"},
-    ko:{"load_title--text":"\ub85c\ub529\uc911...","load_caption--text":"\ucd08\uae30 \uc124\uc815\uc5d0 \uc2dc\uac04\uc774 \uc880 \uac78\ub9b4 \uc218 \uc788\uc73c\ub2c8, \uae30\ub2e4\ub824 \uc8fc\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4","load_copyright--text":"\ud3ad\uadc4 \ubb3c\ub958 \ub370\uc774\ud130 \ubd84\uc11d \ubd80\uc11c"}},fill:function(a,c){document.querySelector("#"+a).innerHTML=c},render:function(){document.querySelector("#load_copyright_year--text").textContent=(new Date).getFullYear().toString();
-    var a=this.getFirstBrowserLanguage();if(a in this.data&&"string"===typeof a&&2>=a.length){var c=0;for(a=Object.entries(this.data[a]);c<a.length;c++){var b=_slicedToArray(a[c],2);this.fill(b[0],b[1])}}}};try{_i18n.render()}catch(a){console.error(a)};</script>
+<script type="text/javascript">"use strict";function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i]}return arr2}function _iterableToArrayLimit(arr,i){if(typeof Symbol==="undefined"||!(Symbol.iterator in Object(arr)))return;var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break}}catch(err){_d=true;_e=err}finally{try{if(!_n&&_i["return"]!=null)_i["return"]()}finally{if(_d)throw _e;}}return _arr}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}if(!Object.entries)Object.entries=function(obj){var ownProps=Object.keys(obj),i=ownProps.length,resArray=new Array(i);while(i--){resArray[i]=[ownProps[i],obj[ownProps[i]]]}return resArray};var _i18n={languageWithRegion:function languageWithRegion(){var nav=window.navigator,browserLanguagePropertyKeys=['language','browserLanguage','systemLanguage','userLanguage'],i,language,len,shortLanguage=null;if(Array.isArray(nav.languages)){for(i=0;i<nav.languages.length;i++){language=nav.languages[i];len=language.length;if(!shortLanguage&&len){shortLanguage=language}if(language&&len>2){return language}}}for(i=0;i<browserLanguagePropertyKeys.length;i++){language=nav[browserLanguagePropertyKeys[i]];if(language==null){continue}len=language.length;if(!shortLanguage&&len){shortLanguage=language}if(language&&len>2){return language}}return shortLanguage},language:function language(){if(localStorage){var settings=localStorage.getItem("penguin-stats-settings");if(settings){try{var data=JSON.parse(settings);return data.settings.language}catch(e){}}}var language=this.languageWithRegion().replace("_","-");if(!language)return"en";var languages=language.split("-");if(languages.length===1){return language}else if(languages.length===2){return languages[0]}else{return language}},data:{"en":{"load_title--text":"Loading","load_caption--text":"Initialization may take some time","load_copyright--text":"Penguin Statistics"},"ja":{"load_title--text":"読み込み中...","load_caption--text":"初めての読み込みは動作が遅くなる可能性があります<br>少々お待ち下さい","load_copyright--text":"ペンギン急便データ統計処理部門"},"ko":{"load_title--text":"로딩중...","load_caption--text":"초기 설정에 시간이 좀 걸릴 수 있으니, 기다려 주시기 바랍니다","load_copyright--text":"펭귄 물류 데이터 분석 부서"}},fill:function fill(key,content){document.querySelector("#"+key).innerHTML=content},render:function render(){document.querySelector("#load_copyright_year--text").textContent=new Date().getFullYear().toString();var language=this.language();if(language in this.data&&typeof language==="string"&&language.length<=2){var messages=this.data[language];for(var _i=0,_Object$entries=Object.entries(messages);_i<_Object$entries.length;_i++){var _Object$entries$_i=_slicedToArray(_Object$entries[_i],2),key=_Object$entries$_i[0],value=_Object$entries$_i[1];this.fill(key,value)}}}};try{_i18n.render()}catch(e){console.error(e)}</script>
 <script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="2aa1bf4c-8c34-4028-9e1c-ca1f6c330779";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
 </body>
 </html>

src/assets/preloader-i18n-inline.js

@@ -12,7 +12,7 @@ if (!Object.entries)
   };
 
 let _i18n = {
-  getFirstBrowserLanguageWithRegionCode () {
+  languageWithRegion () {
     let nav = window.navigator,
       browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'],
       i,
@@ -50,9 +50,20 @@ let _i18n = {
 
     return shortLanguage;
   },
-  getFirstBrowserLanguage () {
-    const language = this.getFirstBrowserLanguageWithRegionCode().replace("_", "-");
-    if (!language) return "zh"; // use default
+  language () {
+    if (localStorage) {
+      const settings = localStorage.getItem("penguin-stats-settings")
+      if (settings) {
+        try {
+          const data = JSON.parse(settings);
+          return data.settings.language
+        } catch (e) {
+          // fallback
+        }
+      }
+    }
+    const language = this.languageWithRegion().replace("_", "-");
+    if (!language) return "en"; // use default
     const languages = language.split("-");
     if (languages.length === 1) {
       return language
@@ -85,7 +96,7 @@ let _i18n = {
   },
   render () {
     document.querySelector("#load_copyright_year--text").textContent = new Date().getFullYear().toString();
-    let language = this.getFirstBrowserLanguage();
+    let language = this.language();
     if (language in this.data && typeof language === "string" && language.length <= 2) {
       let messages = this.data[language];
       for (let [key, value] of Object.entries(messages)) {

src/components/drawer/Logo.vue

@@ -8,7 +8,7 @@
     }"
   >
     <v-img
-      :src="cdnResource('/logos/penguin_stats_logo.png')"
+      :src="cdnDeliver('/logos/penguin_stats_logo.png')"
       aspect-ratio="1"
       height="192px"
       contain

src/components/global/Footer.vue

@@ -45,7 +45,7 @@
           <v-img
             style="transform: translateY(.275em)"
             alt="公安网备案图标"
-            :src="cdnResource('/logos/gonganwang.png')"
+            :src="cdnDeliver('/logos/gonganwang.png')"
             class="d-inline-block"
             height="12"
             width="12"

src/components/global/Item.vue

@@ -1,42 +1,50 @@
 <template>
   <v-tooltip
-    v-if="!disableTooltip"
-    transition="slide-y-transition"
-    :open-delay="5"
-    :nudge-top="tooltipNudge"
+    v-if="!disableTooltipCalculated"
+    allow-overflow
+    offset-overflow
+    :open-delay="-1"
 
-    bottom
+    :right="right"
+    :bottom="bottom"
+    v-bind="tooltipOptions"
+    content-class="transparent backdrop-blur o-100 pa-0"
   >
-    <template v-slot:activator="{ on, attrs }">
+    <template v-slot:activator="{ on }">
       <span
-        v-bind="attrs"
+        class="d-flex align-center"
         v-on="on"
       >
         <ItemIcon
           :item="item"
           :ratio="ratio"
-          :class="{'sticky-left': sticky === 'left'}"
-          :disable-tooltip="disableTooltip"
+          :class="contentClass"
+          :disable-tooltip="disableTooltipCalculated"
+          v-on="on"
         />
       </span>
     </template>
-    <span class="force-lang-font">{{ name }}</span>
+    <!--    <span class="force-lang-font">{{ name }}</span>-->
+    <PreviewItemCard :item-id="item.itemId" />
   </v-tooltip>
   <ItemIcon
-    v-else-if="disableTooltip"
+    v-else-if="disableTooltipCalculated"
+
     :item="item"
     :ratio="ratio"
-    :class="{'sticky-left': sticky === 'left'}"
-    :disable-tooltip="disableTooltip"
+    :class="contentClass"
+    :disable-tooltip="disableTooltipCalculated"
   />
 </template>
 
 <script>
   import ItemIcon from "@/components/global/ItemIcon";
   import strings from "@/utils/strings";
+  import PreviewItemCard from "@/components/stats/PreviewItemCard";
+  import environment from "@/utils/environment";
   export default {
     name: "Item",
-    components: {ItemIcon},
+    components: {PreviewItemCard, ItemIcon},
     props: {
       item: {
         type: Object,
@@ -54,22 +62,28 @@
           return false;
         }
       },
-      disableLink: {
+      tooltipNudge: {
+        type: Number,
+        default () {
+          return 0
+        }
+      },
+      right: {
         type: Boolean,
-        default() {
-          return false;
+        default () {
+          return false
         }
       },
-      tooltipNudge: {
-        type: Number,
+      bottom: {
+        type: Boolean,
         default () {
-          return 10
+          return true
         }
       },
-      sticky: {
+      contentClass: {
         type: String,
         default () {
-          return "";
+          return ""
         }
       }
     },
@@ -81,15 +95,24 @@
     computed: {
       name() {
         return strings.translate(this.item, "name")
+      },
+      tooltipOptions () {
+        return {
+          [this.bottom ? 'nudgeTop' : 'nudgeLeft']: this.tooltipNudge,
+          [this.bottom ? 'nudgeBottom' : 'nudgeRight']: this.tooltipNudge,
+          transition: this.bottom ? "slide-y-transition" : "slide-x-transition"
+        }
+      },
+      disableTooltipCalculated () {
+        // always disable tooltip on touch screen
+        return environment.isTouchScreen || this.disableTooltip
       }
     },
   };
 </script>
 
 <style scoped>
   .sticky-left {
-    position: -webkit-sticky;
-    position: sticky;
-    left: 0;
+    position: absolute;
   }
 </style>

src/components/global/ItemIcon.vue

@@ -75,7 +75,7 @@ export default {
         height: `${this.ratio * this.originalIconSize}px`,
         width: `${this.ratio * this.originalIconSize}px`,
         backgroundSize: `${this.ratio * this.originalSpriteDimensions.x}px ${this.ratio * this.originalSpriteDimensions.y}px`,
-        backgroundImage: `url(${this.cdnResource('/sprite/sprite.202005140304.png')})`
+        backgroundImage: `url(${this.cdnDeliver('/sprite/sprite.202005140304.png')})`
       };
       if (this.item.spriteCoord) {
         style["backgroundPosition"] = this.transformCoordinate(this.item.spriteCoord)

src/components/global/ItemStepper.vue

@@ -37,7 +37,6 @@
             :item="item"
             :ratio="1"
             disable-link
-            tooltip-position="bottom"
             :tooltip-nudge="0"
           />
         </div>

src/components/global/RandomBackground.vue

@@ -72,7 +72,7 @@
     },
     methods: {
       getImageUrl (id) {
-        return this.cdnResource(`/backgrounds/${id}.${this.webpSupport ? 'webp' : 'optimized.png'}`)
+        return this.cdnDeliver(`/backgrounds/${id}.${this.webpSupport ? 'webp' : 'optimized.png'}`)
       },
       setBlur (flag) {
         Console.info("RandomBackground", "setting blur to", flag)
@@ -132,7 +132,7 @@
         if (this.isSpecialUrl(to)) {
           // yes we do have a special image for the CURRENT path. APPLY IT!
           const imageUrl = this.specialImageMap[to.params.stageId]
-          this.updateBackgroundByUrl(this.cdnResource(imageUrl))
+          this.updateBackgroundByUrl(this.cdnDeliver(imageUrl))
         } else if (this.isSpecialUrl(from)) {
           // we do not have a special image for the current path but we DO have a special image for the PREVIOUS path.
           // we need to restore the last background image

src/components/stats/Charts.vue

@@ -340,7 +340,7 @@ export default {
             style: {
               color: theme.text
             },
-            crosshairs: true,
+            crosshairs: [true, true]
           },
 
           credits: {

src/components/stats/DataTable.vue

@@ -239,10 +239,11 @@
                 <Item
                   :item="props.item.item"
                   :ratio="0.6"
-                  disable-tooltip
-                  disable-link
 
-                  class="item-icon"
+                  content-class="item-icon"
+                  right
+                  :bottom="false"
+                  :tooltip-nudge="-40"
                 />
                 <span
                   style="padding-left: 44px"
@@ -276,9 +277,14 @@
               >
                 <v-icon>{{ props.item.zone.icon }}</v-icon>
                 <span
-                  class="ml-2"
+                  class="d-flex flex-column ml-2"
                 >
-                  {{ strings.translate(props.item.stage, "code") }}
+                  <span class="overline">
+                    {{ getZoneName(props.item.stage) }}
+                  </span>
+                  <span>
+                    {{ strings.translate(props.item.stage, "code") }}
+                  </span>
                 </span>
                 <v-icon
                   x-small
@@ -395,6 +401,7 @@
   import Mirror from "@/mixins/Mirror";
   import TitledRow from "@/components/global/TitledRow";
   import existUtils from "@/utils/existUtils";
+  import validator from "@/utils/validator";
 
   export default {
     name: "DataTable",
@@ -564,7 +571,7 @@
             }
           }
         } else {
-          if (this.trends && props.item.stage.stageId in this.trends) {
+          if (this.trends && validator.have(this.trends, props.item.stage.stageId)) {
             return this.trends[props.item.stage.stageId]
           }
         }
@@ -617,6 +624,9 @@
       },
       invalidApCost (apCost) {
         return apCost === 99 || apCost === null
+      },
+      getZoneName (stage) {
+        return strings.translate(get.zones.byZoneId(stage.zoneId, false), "zoneName")
       }
     },
   }