From ba46ace4b7b8a72b78873dda6f0d6f7832988484 Mon Sep 17 00:00:00 2001
From: Blealtan Cao <blealtan@outlook.com>
Date: Fri, 14 Feb 2020 22:40:14 +0800
Subject: [PATCH 01/45] Rough in-site Planner UI design done.

Signed-off-by: Blealtan Cao <blealtan@outlook.com>
---
 src/router.js         |  14 +--
 src/views/Planner.vue | 218 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 222 insertions(+), 10 deletions(-)
 create mode 100644 src/views/Planner.vue

diff --git a/src/router.js b/src/router.js
index 543b0763..95a842fb 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,6 +3,7 @@ import Router from 'vue-router'
 
 import Home from './views/Home'
 import Report from './views/Report'
+import Planner from './views/Planner'
 
 import StatsLayout from './layouts/StatsLayout'
 import StatsByStage from './views/Stats/Stage'
@@ -111,19 +112,12 @@ const router = new Router({
     ]
   },
   {
-    path: '/_redirect/planner',
+    path: '/planner',
     name: 'Planner',
+    component: Planner,
     meta: {
-      ga: {
-        category: 'redirect',
-        action: 'links',
-        label: 'ArkPlanner',
-        value: 1
-      },
-      link: "https://planner.penguin-stats.io",
       icon: 'mdi-floor-plan',
-      i18n: 'menu.planner',
-      externalRedirect: true
+      i18n: 'menu.planner'
     }
   },
   {
diff --git a/src/views/Planner.vue b/src/views/Planner.vue
new file mode 100644
index 00000000..e62f0400
--- /dev/null
+++ b/src/views/Planner.vue
@@ -0,0 +1,218 @@
+<template>
+  <v-container
+    fluid
+  >
+    <v-row
+      no-gutters
+      class="px-2"
+      align="center"
+      justify="center"
+    >
+      <v-col cols="3">
+        <v-switch label="Consider by-products" />
+      </v-col>
+      <v-col cols="3">
+        <v-switch label="Require large amount of EXP" />
+      </v-col>
+      <v-col cols="3">
+        <v-switch label="Require large amount of LMB" />
+      </v-col>
+    </v-row>
+    <v-row
+      no-gutters
+      class="px-2 pb-2 mb-6"
+      align="center"
+      justify="center"
+    >
+      <v-col cols="3">
+        <v-dialog
+          v-model="import_export_dialog"
+          width="500"
+        >
+          <template v-slot:activator="{ on }">
+            <v-btn
+              color="green"
+              v-on="on"
+            >
+              Import/Export
+            </v-btn>
+          </template>
+          <v-card>
+            <v-card-title class="headline">
+              Import/Export
+            </v-card-title>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                color="primary"
+                text
+              >
+                Import
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-col>
+      <v-col cols="3">
+        <v-dialog
+          v-model="fund_dress_dialog"
+          width="500"
+        >
+          <template v-slot:activator="{ on }">
+            <v-btn
+              color="yellow darken-3"
+              v-on="on"
+            >
+              众筹站长女装
+            </v-btn>
+          </template>
+          <v-card>
+            <v-card-title class="headline">
+              众筹站长女装
+            </v-card-title>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                color="primary"
+                text
+                @click="fund_dress_dialog = false"
+              >
+                OK
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-col>
+      <v-col cols="3">
+        <v-btn color="red">
+          Calculate
+        </v-btn>
+      </v-col>
+    </v-row>
+    <v-divider />
+    <v-row
+      class="pt-2"
+      dense
+    >
+      <v-col
+        v-for="item in materialItems"
+        :key="item.itemId"
+        lg="1"
+      >
+        <v-card
+          class="pa-1 ma-0"
+        >
+          <v-container class="px-0 py-2 ma-0">
+            <v-row
+              align="center"
+              justify="center"
+              no-gutters
+            >
+              <Item
+                :item="item"
+                :ratio="1"
+                disable-link
+                tooltip-position="bottom"
+              />
+            </v-row>
+          </v-container>
+          <v-divider />
+          <v-container class="px-0 pb-0 pt-3 ma-0">
+            <v-row
+              align="center"
+              justify="center"
+              no-gutters
+            >
+              <v-col>
+                <v-text-field
+                  hide-details="true"
+                  dense
+                  label="已有"
+                  @click:prepend="{}"
+                  @click:append-outer="{}"
+                  v-on="on"
+                >
+                  <template v-slot:prepend>
+                    <v-btn
+                      text
+                      icon
+                      x-small
+                    >
+                      <v-icon>mdi-minus</v-icon>
+                    </v-btn>
+                  </template>
+                  <template v-slot:append-outer>
+                    <v-btn
+                      text
+                      icon
+                      x-small
+                    >
+                      <v-icon>mdi-plus</v-icon>
+                    </v-btn>
+                  </template>
+                </v-text-field>
+              </v-col>
+            </v-row>
+            <v-row
+              align="center"
+              justify="center"
+              no-gutters
+            >
+              <v-col>
+                <v-text-field
+                  hide-details="true"
+                  dense
+                  label="需求"
+                  @click:prepend="{}"
+                  @click:append-outer="{}"
+                  v-on="on"
+                >
+                  <template v-slot:prepend>
+                    <v-btn
+                      text
+                      icon
+                      x-small
+                    >
+                      <v-icon>mdi-minus</v-icon>
+                    </v-btn>
+                  </template>
+                  <template v-slot:append-outer>
+                    <v-btn
+                      text
+                      icon
+                      x-small
+                    >
+                      <v-icon>mdi-plus</v-icon>
+                    </v-btn>
+                  </template>
+                </v-text-field>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import get from "@/utils/getters";
+import Item from "@/components/global/Item";
+
+export default {
+  name: "Planner",
+  components: { Item },
+  data: () => ({
+    fund_dress_dialog: false,
+    import_export_dialog: false,
+  }),
+  computed: {
+    materialItems() {
+      return get.items.all().filter(item => item.itemType === "MATERIAL" && item.itemId.length === 5);
+    },
+  }
+};
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file

From 67ea03100fec173dfcafec7ee1b6c7c23805e130 Mon Sep 17 00:00:00 2001
From: Blealtan Cao <blealtan@outlook.com>
Date: Sat, 15 Feb 2020 14:40:20 +0800
Subject: [PATCH 02/45] Data binding and Import/Export dialog done.

Signed-off-by: Blealtan Cao <blealtan@outlook.com>
---
 src/views/Planner.vue | 181 +++++++++++++++++++++++++++++++-----------
 1 file changed, 134 insertions(+), 47 deletions(-)

diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index e62f0400..18fd9b78 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -4,30 +4,30 @@
   >
     <v-row
       no-gutters
-      class="px-2"
+      class="px-2 mx-10"
       align="center"
       justify="center"
     >
-      <v-col cols="3">
+      <v-col>
         <v-switch label="Consider by-products" />
       </v-col>
-      <v-col cols="3">
+      <v-col>
         <v-switch label="Require large amount of EXP" />
       </v-col>
-      <v-col cols="3">
+      <v-col>
         <v-switch label="Require large amount of LMB" />
       </v-col>
     </v-row>
     <v-row
       no-gutters
-      class="px-2 pb-2 mb-6"
+      class="px-2 pb-2 mb-6 mx-10"
       align="center"
       justify="center"
     >
-      <v-col cols="3">
+      <v-col>
         <v-dialog
-          v-model="import_export_dialog"
-          width="500"
+          v-model="importExportDialog"
+          width="800"
         >
           <template v-slot:activator="{ on }">
             <v-btn
@@ -38,24 +38,63 @@
             </v-btn>
           </template>
           <v-card>
-            <v-card-title class="headline">
-              Import/Export
-            </v-card-title>
-            <v-card-actions>
-              <v-spacer />
-              <v-btn
-                color="primary"
-                text
-              >
-                Import
-              </v-btn>
-            </v-card-actions>
+            <v-tabs
+              v-model="importExportDialogTab"
+              background-color="green"
+              color="white"
+            >
+              <v-tab>Import</v-tab>
+              <v-tab>Export</v-tab>
+            </v-tabs>
+            <v-tabs-items v-model="importExportDialogTab">
+              <v-tab-item>
+                <v-card flat>
+                  <v-container class="pa-4">
+                    <v-textarea
+                      v-model="importJson"
+                      dense
+                      hide-details
+                      outlined
+                    />
+                  </v-container>
+                  <v-divider />
+                  <v-card-actions>
+                    <v-spacer />
+                    <v-btn
+                      color="green"
+                      text
+                      @click="importToItemsData"
+                    >
+                      Import
+                    </v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-tab-item>
+              <v-tab-item>
+                <v-card flat>
+                  <v-card-text class="white--text">
+                    {{ exportJson }}
+                  </v-card-text>
+                  <v-divider />
+                  <v-card-actions>
+                    <v-spacer />
+                    <v-btn
+                      color="green"
+                      text
+                      @click="Navigator.clipboard.writeText(exportJson)"
+                    >
+                      Copy
+                    </v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-tab-item>
+            </v-tabs-items>
           </v-card>
         </v-dialog>
       </v-col>
-      <v-col cols="3">
+      <v-col>
         <v-dialog
-          v-model="fund_dress_dialog"
+          v-model="fundDressDialog"
           width="500"
         >
           <template v-slot:activator="{ on }">
@@ -75,7 +114,7 @@
               <v-btn
                 color="primary"
                 text
-                @click="fund_dress_dialog = false"
+                @click="fundDressDialog = false"
               >
                 OK
               </v-btn>
@@ -83,7 +122,7 @@
           </v-card>
         </v-dialog>
       </v-col>
-      <v-col cols="3">
+      <v-col>
         <v-btn color="red">
           Calculate
         </v-btn>
@@ -95,9 +134,12 @@
       dense
     >
       <v-col
-        v-for="item in materialItems"
-        :key="item.itemId"
+        v-for="itemData in itemsData"
+        :key="itemData.id"
         lg="1"
+        md="2"
+        sm="3"
+        cols="4"
       >
         <v-card
           class="pa-1 ma-0"
@@ -109,7 +151,7 @@
               no-gutters
             >
               <Item
-                :item="item"
+                :item="itemIdMap.get(itemData.id)"
                 :ratio="1"
                 disable-link
                 tooltip-position="bottom"
@@ -117,7 +159,7 @@
             </v-row>
           </v-container>
           <v-divider />
-          <v-container class="px-0 pb-0 pt-3 ma-0">
+          <v-container class="px-0 pt-0 pb-1 ma-0">
             <v-row
               align="center"
               justify="center"
@@ -125,18 +167,18 @@
             >
               <v-col>
                 <v-text-field
-                  hide-details="true"
-                  dense
+                  v-model.number="itemData.have"
+                  hide-details
                   label="已有"
                   @click:prepend="{}"
                   @click:append-outer="{}"
-                  v-on="on"
                 >
                   <template v-slot:prepend>
                     <v-btn
                       text
                       icon
                       x-small
+                      @click="itemData.have = decrement(itemData.have)"
                     >
                       <v-icon>mdi-minus</v-icon>
                     </v-btn>
@@ -146,6 +188,7 @@
                       text
                       icon
                       x-small
+                      @click="itemData.have = increment(itemData.have)"
                     >
                       <v-icon>mdi-plus</v-icon>
                     </v-btn>
@@ -160,8 +203,8 @@
             >
               <v-col>
                 <v-text-field
-                  hide-details="true"
-                  dense
+                  v-model.number="itemData.need"
+                  hide-details
                   label="需求"
                   @click:prepend="{}"
                   @click:append-outer="{}"
@@ -172,6 +215,7 @@
                       text
                       icon
                       x-small
+                      @click="itemData.need = decrement(itemData.need)"
                     >
                       <v-icon>mdi-minus</v-icon>
                     </v-btn>
@@ -181,6 +225,7 @@
                       text
                       icon
                       x-small
+                      @click="itemData.need = increment(itemData.need)"
                     >
                       <v-icon>mdi-plus</v-icon>
                     </v-btn>
@@ -196,22 +241,64 @@
 </template>
 
 <script>
-import get from "@/utils/getters";
-import Item from "@/components/global/Item";
+  import get from "@/utils/getters";
+  import Item from "@/components/global/Item";
 
-export default {
-  name: "Planner",
-  components: { Item },
-  data: () => ({
-    fund_dress_dialog: false,
-    import_export_dialog: false,
-  }),
-  computed: {
-    materialItems() {
-      return get.items.all().filter(item => item.itemType === "MATERIAL" && item.itemId.length === 5);
+  export default {
+    name: "Planner",
+    components: {Item},
+    data: () => {
+      let items = get.items.all().filter(item => item.itemType === "MATERIAL" && item.itemId.length === 5);
+      return {
+        fundDressDialog: false,
+        importExportDialog: false,
+        importExportDialogTab: null,
+        importJson: "",
+        items: items,
+        itemIdMap: new Map(items.map(item => [item.itemId, item])),
+        itemsData: items.map(item => ({
+          id: item.itemId,
+          need: 0,
+          have: 0,
+        }))
+      }
+    },
+    computed: {
+      exportJson() {
+        return JSON.stringify(this.itemsData);
+      }
     },
-  }
-};
+    methods: {
+      decrement(orig) {
+        if (orig > 0)
+          return orig - 1;
+        return 0;
+      },
+      increment(orig) {
+        return orig + 1;
+      },
+      importToItemsData() {
+        let imported = JSON.parse(this.importJson);
+        if (imported.length !== this.itemsData.length)
+          return;
+        let importedAsMap = new Map();
+        for (const itemData of imported)
+          if (!(itemData.hasOwnProperty("id") && this.itemIdMap.has(itemData.id) &&
+            itemData.hasOwnProperty("need") && Number.isInteger(itemData.need) && itemData.need >= 0 &&
+            itemData.hasOwnProperty("have") && Number.isInteger(itemData.have) && itemData.have >= 0))
+            return;
+          else
+            importedAsMap.set(itemData.id, [itemData.need, itemData.have]);
+        let newItemsData = [];
+        for (const item of this.items) {
+          let importedItem = importedAsMap.get(item.itemId);
+          newItemsData.push({id: item.itemId, need: importedItem[0], have: importedItem[1]});
+        }
+        this.itemsData = newItemsData;
+        this.importExportDialog = false;
+      }
+    }
+  };
 </script>
 
 <style scoped>

From 0da21ff314d6ed33b06eaee40d5073bfb9c70bb4 Mon Sep 17 00:00:00 2001
From: Blealtan Cao <blealtan@outlook.com>
Date: Sat, 15 Feb 2020 15:17:44 +0800
Subject: [PATCH 03/45] Use clipboard-polyfill instead.

Replace previously using Navigator.clipboard with clipboard polyfill.

Signed-off-by: Blealtan Cao <blealtan@outlook.com>
---
 package.json          | 1 +
 src/views/Planner.vue | 7 ++++++-
 yarn.lock             | 5 +++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1da17ea5..76c7080e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@sentry/browser": "^5.6.2",
     "@sentry/integrations": "^5.6.1",
     "aos": "^2.3.4",
+    "clipboard-polyfill": "^2.8.6",
     "core-js": "^2.6.5",
     "dayjs": "^1.8.15",
     "idb": "^4.0.4",
diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index 18fd9b78..7b0e1a2f 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -81,7 +81,7 @@
                     <v-btn
                       color="green"
                       text
-                      @click="Navigator.clipboard.writeText(exportJson)"
+                      @click="copyExportJson"
                     >
                       Copy
                     </v-btn>
@@ -244,6 +244,8 @@
   import get from "@/utils/getters";
   import Item from "@/components/global/Item";
 
+  import * as clipboard from "clipboard-polyfill";
+
   export default {
     name: "Planner",
     components: {Item},
@@ -296,6 +298,9 @@
         }
         this.itemsData = newItemsData;
         this.importExportDialog = false;
+      },
+      copyExportJson() {
+        clipboard.writeText(this.exportJson);
       }
     }
   };
diff --git a/yarn.lock b/yarn.lock
index e20a12a6..912cad17 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2651,6 +2651,11 @@ cli-width@^2.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
   integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
 
+clipboard-polyfill@^2.8.6:
+  version "2.8.6"
+  resolved "https://registry.yarnpkg.com/clipboard-polyfill/-/clipboard-polyfill-2.8.6.tgz#19d27283f11f2933bb18737263b98b8c95b5a0f7"
+  integrity sha512-kz/1ov+PXsBpGnW9XJH3dLWdYj12FpXqO89Dngm/GRPoI36E/tnYs6N0YPTEhxM9WHAlFiN5eoyIVuv5nzKXvg==
+
 clipboardy@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.1.0.tgz#0123a0c8fac92f256dc56335e0bb8be97a4909a5"

From 0bb5f7750d0dde62898628db2eee4d362f4e6e3f Mon Sep 17 00:00:00 2001
From: Blealtan Cao <blealtan@outlook.com>
Date: Sat, 15 Feb 2020 15:53:40 +0800
Subject: [PATCH 04/45] Add 1/8 column width for lg screens.

Signed-off-by: Blealtan Cao <blealtan@outlook.com>
---
 src/views/Planner.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index 7b0e1a2f..48438e6c 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -136,9 +136,10 @@
       <v-col
         v-for="itemData in itemsData"
         :key="itemData.id"
-        lg="1"
+        xl="1"
         md="2"
         sm="3"
+        class="col-lg-1-8"
         cols="4"
       >
         <v-card
@@ -307,4 +308,12 @@
 </script>
 
 <style scoped>
+  @media (min-width: 1264px) and (max-width: 1903px) {
+    .col-lg-1-8 {
+      -webkit-box-flex: 0;
+      -ms-flex: 0 0 12.5%;
+      flex: 0 0 12.5%;
+      max-width: 12.5%
+    }
+  }
 </style>
\ No newline at end of file

From 67e5f26264b1147575e5fd45e9141f7bf480c19d Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Thu, 27 Feb 2020 11:57:54 -0500
Subject: [PATCH 05/45] feat(pwa): improved pwa experience on iOS devices,
 specifically iPhone X series

---
 public/index.html |  5 ++---
 src/App.vue       | 12 ++++++------
 src/main.js       |  2 ++
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/public/index.html b/public/index.html
index 43de3f8e..4a0ca152 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
   <link rel="icon" href="/favicon.ico">
   <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
@@ -16,7 +16,7 @@
   <title>企鹅物流数据统计</title>
   <link rel="preconnect" href="https://penguin-stats.s3.ap-southeast-1.amazonaws.com">
   <style>#app, body, html {
-    height: 100%;
+    height: 100vh;
     margin: 0;
     padding: 0
   }
@@ -393,7 +393,6 @@
 <script>"serviceWorker" in navigator && window.addEventListener("load", function () {
   navigator.serviceWorker.register("/service-worker.js")
 });</script>
-<!-- built files will be auto injected -->
 </body>
 </html>
 
diff --git a/src/App.vue b/src/App.vue
index 97df1dad..8c46420c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -169,6 +169,7 @@
       app
       dark
       color="blue darken-3"
+      style="min-height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top)"
     >
       <v-app-bar-nav-icon
         @click.stop="drawer = !drawer"
@@ -199,7 +200,7 @@
       <AccountManager />
     </v-app-bar>
     <RandomBackground />
-    <v-content>
+    <v-content style="padding-top: calc(env(safe-area-inset-top) + 56px) !important;">
       <transition
         name="slide-fade"
         mode="out-in"
@@ -476,18 +477,17 @@ export default {
   }
 
   .drawer-logo {
-    height: 256px;
-    padding: 32px;
+    height: calc(256px + env(safe-area-inset-top));
+    padding: calc(32px + env(safe-area-inset-top)) 32px 32px 32px;
     overflow: hidden;
     transition: all .5s cubic-bezier(0.19, 1, 0.22, 1);
   }
 
   .drawer-logo:hover {
-    height: 304px;
-    padding: 32px;
+    height: calc(304px + env(safe-area-inset-top));
   }
   .drawer-logo--two-line:hover {
-    height: 336px;
+    height: calc(336px + env(safe-area-inset-top));
   }
   .drawer-logo > .description {
     margin-top: 16px;
diff --git a/src/main.js b/src/main.js
index b4d99447..343f7871 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,6 +16,8 @@ import * as Integrations from '@sentry/integrations';
 
 const production = process.env.NODE_ENV === 'production';
 
+Vue.config.performance = true;
+
 if (production) {
   Sentry.init({
     dsn: 'https://aebfbfbe08de42f7a9f291f5ae9ebf97@sentry.imgal.vin/2',

From f3181d332e97ecc27606d07ee9ff2a116d5bf609 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Thu, 27 Feb 2020 19:05:49 -0500
Subject: [PATCH 06/45] improvement(layout): optimized layout of statistics
 page

make it consistent across the whole site
---
 browserslist-stats.json                       | 347 ++++++++++++++++++
 package.json                                  |   7 +-
 src/App.vue                                   |   6 +-
 src/components/stats/DataSourceToggle.vue     |   5 +
 src/components/stats/DataTable.vue            |  27 +-
 .../toolbar/NetworkStateIndicator.vue         |   2 +-
 src/layouts/StatsLayout.vue                   |   2 +-
 src/store/modules/ajax.js                     |   1 +
 src/views/About/Intro.vue                     |   2 +-
 src/views/Stats/Item.vue                      |   8 +-
 src/views/Stats/Stage.vue                     |   6 +-
 yarn.lock                                     | 345 ++++++++++++++++-
 12 files changed, 727 insertions(+), 31 deletions(-)
 create mode 100644 browserslist-stats.json

diff --git a/browserslist-stats.json b/browserslist-stats.json
new file mode 100644
index 00000000..c38d85d9
--- /dev/null
+++ b/browserslist-stats.json
@@ -0,0 +1,347 @@
+{
+  "ie": {
+    "6": 0,
+    "7": 0.0007920927465565852,
+    "8": 0.001653667312986555,
+    "9": 0.00033351273539224645,
+    "10": 0.0003752018273162772,
+    "11": 0.14289631075160292,
+    "5.5": 0
+  },
+  "edge": {
+    "12": 0.000041689091924030806,
+    "13": 0.0019454909564547707,
+    "14": 0.043829131976131044,
+    "15": 0.02262328055077405,
+    "16": 0.06435406156672888,
+    "17": 0.661856023385913,
+    "18": 2.3937876582778483,
+    "79": 0.00787923837364182,
+    "80": 0.056933403204251394
+  },
+  "firefox": {
+    "2": 0,
+    "3": 0,
+    "4": 0,
+    "5": 0,
+    "6": 0,
+    "7": 0,
+    "8": 0,
+    "9": 0,
+    "10": 0,
+    "11": 0,
+    "12": 0,
+    "13": 0,
+    "14": 0,
+    "15": 0,
+    "16": 0,
+    "17": 0,
+    "18": 0,
+    "19": 0,
+    "20": 0,
+    "21": 0,
+    "22": 0,
+    "23": 0,
+    "24": 0,
+    "25": 0,
+    "26": 0,
+    "27": 0,
+    "28": 0,
+    "29": 0,
+    "30": 0,
+    "31": 0,
+    "32": 0.00025013455154418484,
+    "33": 0.002681998247112648,
+    "34": 0,
+    "35": 0,
+    "36": 0,
+    "37": 0,
+    "38": 0.0008198854745059391,
+    "39": 0.0005419581950124005,
+    "40": 0.00016675636769612322,
+    "41": 0,
+    "42": 0,
+    "43": 0.0007504036546325544,
+    "44": 0.0003752018273162772,
+    "45": 0.00016675636769612322,
+    "46": 0.0008615745664299699,
+    "47": 0.0002918236434682156,
+    "48": 0.0022373145999229865,
+    "49": 0.007309487450680068,
+    "50": 0.0012367763937462472,
+    "51": 0,
+    "52": 0.02402681331221642,
+    "53": 0.0011533982098981856,
+    "54": 0.00016675636769612322,
+    "55": 0.00025013455154418484,
+    "56": 0.02034427685892703,
+    "57": 0.0006670254707844929,
+    "58": 0.0009449527502780314,
+    "59": 0.0004585800111643388,
+    "60": 0.009741351146248531,
+    "61": 0.013840778518778225,
+    "62": 0.006600772887971543,
+    "63": 0.002112247324150894,
+    "64": 0.010477858436906408,
+    "65": 0.0213865041570278,
+    "66": 0.042564562854435446,
+    "67": 0.09410617683651219,
+    "68": 0.5248934600514972,
+    "69": 0.466014565890791,
+    "70": 0.26379467733129225,
+    "71": 0.4447809217374846,
+    "72": 0.9282910098723939,
+    "73": 0.3224790223963529,
+    "74": 0.0048359346631875735,
+    "75": 0.0007365072906578775,
+    "3.5": 0,
+    "3.6": 0
+  },
+  "chrome": {
+    "4": 0,
+    "5": 0,
+    "6": 0,
+    "7": 0,
+    "8": 0,
+    "9": 0,
+    "10": 0,
+    "11": 0.011436707551159116,
+    "12": 0,
+    "13": 0,
+    "14": 0,
+    "15": 0,
+    "16": 0,
+    "17": 0.0019454909564547707,
+    "18": 0,
+    "19": 0,
+    "20": 0,
+    "21": 0.00025013455154418484,
+    "22": 0,
+    "23": 0,
+    "24": 0,
+    "25": 0,
+    "26": 0,
+    "27": 0,
+    "28": 0.00008337818384806161,
+    "29": 0,
+    "30": 0.0012367763937462472,
+    "31": 0.002598620063264587,
+    "32": 0.000041689091924030806,
+    "33": 0,
+    "34": 0,
+    "35": 0.00020844545962015403,
+    "36": 0.005655820137693513,
+    "37": 0.001278465485670278,
+    "38": 0.0024735527874924943,
+    "39": 0.021511571432799893,
+    "40": 0.05279228673979767,
+    "41": 0.0004585800111643388,
+    "42": 0.00226510732787234,
+    "43": 0.0006670254707844929,
+    "44": 0.00020844545962015403,
+    "45": 0.01028330934126093,
+    "46": 0.0002918236434682156,
+    "47": 0.02292900055821694,
+    "48": 0.11638204828791933,
+    "49": 0.22535733457733584,
+    "50": 0.013145960320044382,
+    "51": 0.004307872832149849,
+    "52": 0.00041689091924030806,
+    "53": 0.05393178858572118,
+    "54": 0.014118705798271763,
+    "55": 0.664913223460342,
+    "56": 0.04210598284327111,
+    "57": 0.41975357021909143,
+    "58": 0.983209440300317,
+    "59": 0.018343200446573553,
+    "60": 0.018732298637864506,
+    "61": 0.44630952177469907,
+    "62": 0.13493369419411302,
+    "63": 5.703429080670755,
+    "64": 0.0517500594416969,
+    "65": 1.5191088206197583,
+    "66": 0.13375250325626548,
+    "67": 0.11950873018222163,
+    "68": 0.2192985198843767,
+    "69": 3.01442706611487,
+    "70": 4.109488340047362,
+    "71": 0.46181786397043856,
+    "72": 0.411513026382108,
+    "73": 0.7344645251536,
+    "74": 1.2208928497231915,
+    "75": 3.2911314655786366,
+    "76": 3.8960262930323495,
+    "77": 2.9883713836623507,
+    "78": 2.6049984943289632,
+    "79": 10.671198548886087,
+    "80": 2.5007618681549117,
+    "81": 0.040049320975018926,
+    "82": 0.0031544746222516643,
+    "83": 0
+  },
+  "safari": {
+    "4": 0,
+    "5": 0,
+    "6": 0,
+    "7": 0.0019454909564547707,
+    "8": 0,
+    "9": 0.0005002691030883697,
+    "10": 0.00025013455154418484,
+    "11": 0.035560795411198276,
+    "12": 0.032239564421250484,
+    "13": 1.1123344543530151,
+    "3.1": 0,
+    "3.2": 0,
+    "5.1": 0,
+    "6.1": 0,
+    "7.1": 0,
+    "9.1": 0.00330733462597311,
+    "10.1": 0.011033712995893487,
+    "11.1": 0.04152233555633468,
+    "12.1": 0.18842079913264456,
+    "TP": 0
+  },
+  "opera": {
+    "9": 0,
+    "11": 0,
+    "12": 0,
+    "15": 0,
+    "16": 0,
+    "17": 0,
+    "18": 0,
+    "19": 0,
+    "20": 0,
+    "21": 0,
+    "22": 0,
+    "23": 0,
+    "24": 0,
+    "25": 0,
+    "26": 0,
+    "27": 0,
+    "28": 0,
+    "29": 0,
+    "30": 0,
+    "31": 0,
+    "32": 0,
+    "33": 0,
+    "34": 0,
+    "35": 0,
+    "36": 0,
+    "37": 0,
+    "38": 0,
+    "39": 0,
+    "40": 0,
+    "41": 0,
+    "42": 0,
+    "43": 0,
+    "44": 0,
+    "45": 0,
+    "46": 0.0040855310085550186,
+    "47": 0,
+    "48": 0.00008337818384806161,
+    "49": 0.0017370454968346168,
+    "50": 0,
+    "51": 0,
+    "52": 0,
+    "53": 0.000625336378860462,
+    "54": 0.0002918236434682156,
+    "55": 0,
+    "56": 0,
+    "57": 0,
+    "58": 0.00025013455154418484,
+    "60": 0.0070176638072118516,
+    "62": 0.05136096125040594,
+    "63": 0.04145285373646129,
+    "64": 0.018051376803105337,
+    "65": 0.08386455658717529,
+    "66": 0.06169985604756559,
+    "9.5-9.6": 0,
+    "10.0-10.1": 0,
+    "10.5": 0,
+    "10.6": 0,
+    "11.1": 0,
+    "11.5": 0,
+    "11.6": 0,
+    "12.1": 0.12234358843305573
+  },
+  "ios_saf": {
+    "8": 0.00012506727577209242,
+    "3.2": 0.00016675636769612322,
+    "4.0-4.1": 0.5105385160656559,
+    "4.2-4.3": 0.04840103572379976,
+    "5.0-5.1": 0.035463520863375536,
+    "6.0-6.1": 0.022748347826546143,
+    "7.0-7.1": 0.0013201545775943088,
+    "8.1-8.4": 0.002126143688125571,
+    "9.0-9.2": 0.018885158641585954,
+    "9.3": 0.020872338689964753,
+    "10.0-10.2": 0.06531291068098159,
+    "10.3": 0.10186034793438192,
+    "11.0-11.2": 0.26033448270159765,
+    "11.3-11.4": 0.41896147747253487,
+    "12.0-12.1": 1.1564137208806904,
+    "12.2-12.4": 5.242389413082899,
+    "13.0-13.1": 1.5734713964886946,
+    "13.2": 0.3941008823218378,
+    "13.3": 3.5753399015887295
+  },
+  "op_mini": {
+    "all": 0
+  },
+  "android": {
+    "3": 0,
+    "4": 0.00025013455154418484,
+    "80": 6.6285795122848725,
+    "2.1": 0,
+    "2.2": 0,
+    "2.3": 0,
+    "4.1": 0,
+    "4.2-4.3": 0,
+    "4.4": 0.0007920927465565852,
+    "4.4.3-4.4.4": 0
+  },
+  "bb": {
+    "7": 0,
+    "10": 0
+  },
+  "op_mob": {
+    "10": 0.011533982098981856,
+    "11": 0.011533982098981856,
+    "12": 0.011533982098981856,
+    "46": 0.011533982098981856,
+    "11.1": 0.011533982098981856,
+    "11.5": 0.011533982098981856,
+    "12.1": 0.011533982098981856
+  },
+  "and_chr": {
+    "80": 18.81086867977733
+  },
+  "and_ff": {
+    "68": 0.22967910377346035
+  },
+  "ie_mob": {
+    "10": 0,
+    "11": 0
+  },
+  "and_uc": {
+    "12.12": 2.5861828175072508
+  },
+  "samsung": {
+    "4": 0,
+    "5.0-5.4": 0,
+    "6.2-6.4": 0,
+    "7.2-7.4": 0,
+    "8.2": 0,
+    "9.2": 0,
+    "10.1": 0
+  },
+  "and_qq": {
+    "1.2": 0
+  },
+  "baidu": {
+    "7.12": 0
+  },
+  "kaios": {
+    "2.5": 0
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 79855838..17f28b64 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@vue/cli-service": "^3.9.0",
     "axios": "^0.19.0",
     "babel-eslint": "^10.0.1",
+    "browserslist-ga-export": "^2.0.0",
     "cz-conventional-changelog": "3.0.2",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
@@ -53,8 +54,10 @@
     }
   },
   "browserslist": [
-    "> 1%",
-    "last 2 versions"
+    "> 0.1% in my stats",
+    "> 1% in CN",
+    "last 5 versions",
+    "defaults"
   ],
   "config": {
     "commitizen": {
diff --git a/src/App.vue b/src/App.vue
index 8c46420c..9c079985 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -353,8 +353,8 @@ export default {
         return this.dark
       },
       set (value) {
+        this.$vuetify.theme.dark = value;
         this.$store.commit('settings/switchDark', value)
-        this.$vuetify.theme.dark = value
       }
     },
     localizationMapper: {
@@ -562,4 +562,8 @@ export default {
     padding-bottom: calc(max(env(safe-area-inset-bottom), 8px)) !important;
   }
 
+  .v-stepper__items, .v-stepper__wrapper {
+    overflow: initial !important;
+  }
+
 </style>
diff --git a/src/components/stats/DataSourceToggle.vue b/src/components/stats/DataSourceToggle.vue
index a6553732..38d48cae 100644
--- a/src/components/stats/DataSourceToggle.vue
+++ b/src/components/stats/DataSourceToggle.vue
@@ -76,6 +76,8 @@
     </v-dialog>
     <v-btn-toggle
       v-model="dataSource"
+      active-class="font-weight-bold"
+      mandatory
       borderless
       class="data-source-switch"
     >
@@ -141,6 +143,9 @@ export default {
     afterLogin() {
       this.dialog = false;
       this.dataSource = "personal";
+    },
+    alert(a) {
+      alert(a)
     }
   }
 };
diff --git a/src/components/stats/DataTable.vue b/src/components/stats/DataTable.vue
index 2be95dae..e657a66d 100644
--- a/src/components/stats/DataTable.vue
+++ b/src/components/stats/DataTable.vue
@@ -18,25 +18,30 @@
       v-if="$vuetify.breakpoint.xsOnly"
       align="center"
       justify="center"
-      class="pt-1"
+      class="mt-1 mb-3"
     >
       <span
-
         class="caption grey--text"
       >
         <v-icon
           small
           color="grey"
-          class="scroll-chevron-left"
-        >mdi-chevron-double-left</v-icon>
+          class="scroll-chevron-left mr-1"
+        >
+          mdi-chevron-double-left
+        </v-icon>
 
-        <span class="scroll-keyword">{{ $t('scroll') }}</span>
+        <span
+          class="scroll-keyword"
+        >{{ $t('scroll') }}</span>
 
         <v-icon
           small
           color="grey"
-          class="scroll-chevron-right"
-        >mdi-chevron-double-right</v-icon>
+          class="scroll-chevron-right ml-1"
+        >
+          mdi-chevron-double-right
+        </v-icon>
       </span>
     </v-row>
     <v-data-table
@@ -53,8 +58,9 @@
       :calculate-widths="true"
       hide-default-footer
       :mobile-breakpoint="1"
+      :loading="matrixPending"
 
-      :class="{'elevation-0 transparentTable stat-table container--fluid pa-2': true, 'pt-0': $vuetify.breakpoint.xsOnly}"
+      :class="{'elevation-0 transparentTable stat-table container--fluid px-2': true, 'pt-0': $vuetify.breakpoint.xsOnly}"
     >
       <!--    <template v-slot:item.stage="{ item }">-->
       <!--      <v-row-->
@@ -216,6 +222,7 @@
   import strings from "@/utils/strings";
   import get from "@/utils/getters";
   import Item from "@/components/global/Item";
+  import {mapGetters} from "vuex";
 
   export default {
     name: "DataTable",
@@ -246,6 +253,7 @@
       }
     },
     computed: {
+      ...mapGetters('ajax', ['matrixPending']),
       headers() {
         const headers = [
           {
@@ -393,6 +401,7 @@
   }
 
   .scroll-chevron-left {
+    margin-top: -3px;
     animation: scroll-left 3.5s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
 
@@ -401,6 +410,7 @@
   }
 
   .scroll-chevron-right {
+    margin-top: -3px;
     animation: scroll-right 3.5s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
 
@@ -448,5 +458,6 @@
 
   .item-icon {
     position: absolute;
+    z-index: 4
   }
 </style>
\ No newline at end of file
diff --git a/src/components/toolbar/NetworkStateIndicator.vue b/src/components/toolbar/NetworkStateIndicator.vue
index a162692d..23e7d9e8 100644
--- a/src/components/toolbar/NetworkStateIndicator.vue
+++ b/src/components/toolbar/NetworkStateIndicator.vue
@@ -160,6 +160,6 @@
     bottom: 0;
     padding: 4px 8px;
     border-radius: 4px 0 0 4px !important;
-    margin-bottom: calc(max(env(safe-area-inset-bottom) - 4px, 4px)) !important;
+    margin-bottom: calc(max(env(safe-area-inset-bottom), 8px)) !important;
   }
 </style>
\ No newline at end of file
diff --git a/src/layouts/StatsLayout.vue b/src/layouts/StatsLayout.vue
index 0b5f7310..efb53089 100644
--- a/src/layouts/StatsLayout.vue
+++ b/src/layouts/StatsLayout.vue
@@ -4,7 +4,7 @@
     fluid
   >
     <v-row align="center">
-      <v-col>
+      <v-col class="pa-0">
         <transition
           name="slide-fade"
           mode="out-in"
diff --git a/src/store/modules/ajax.js b/src/store/modules/ajax.js
index f83494f8..c534b19a 100644
--- a/src/store/modules/ajax.js
+++ b/src/store/modules/ajax.js
@@ -47,5 +47,6 @@ export default {
     errors: state => {
       return state.states.filter(value => !!value.error)
     },
+    matrixPending: state => state.states.some(value => value.pending && value.id.includes("Matrix"))
   }
 };
\ No newline at end of file
diff --git a/src/views/About/Intro.vue b/src/views/About/Intro.vue
index 4f3f8b3c..d30b45d1 100644
--- a/src/views/About/Intro.vue
+++ b/src/views/About/Intro.vue
@@ -34,7 +34,7 @@
 <template>
   <v-card 
     elevation="5" 
-    class="bkop-light px-6 py-1"
+    class="bkop-light pa-2 pa-sm-4 pa-md-6 pa-lg-6 pa-xl-8 pt-0 py-1"
   >
     <v-row
       align="center"
diff --git a/src/views/Stats/Item.vue b/src/views/Stats/Item.vue
index 4be812fb..ee4a45c4 100644
--- a/src/views/Stats/Item.vue
+++ b/src/views/Stats/Item.vue
@@ -139,14 +139,14 @@
 
       <v-stepper-content
         :step="2"
-        class="pa-0 mt-6 elevation-4"
+        class="pa-0 mt-2 elevation-4"
       >
         <v-card class="bkop-light pt-2">
           <v-card-title class="pb-0">
             <v-row
               align="center"
               justify="center"
-              class="px-6 pb-2"
+              class="px-3 px-sm-4 px-md-6 px-lg-6 px-xl-8 pt-0 pb-4"
             >
               <Item
                 v-if="selected.item"
@@ -156,7 +156,7 @@
                 disable-tooltip
                 disable-link
               />
-              <h1 class="title pl-2 pt-2 no-wrap--text">
+              <h1 class="title pl-2 pt-1 no-wrap--text">
                 {{ $t('result.title', {item: selectedItemName}) }}
               </h1>
               <v-spacer />
@@ -168,7 +168,7 @@
             :items="itemStagesStats"
             type="item"
 
-            class="px-6 pb-6"
+            class="px-3 px-sm-4 px-md-6 px-lg-6 px-xl-8 pt-0 pb-6"
           />
         </v-card>
       </v-stepper-content>
diff --git a/src/views/Stats/Stage.vue b/src/views/Stats/Stage.vue
index 2e0e57db..25ff7bc9 100644
--- a/src/views/Stats/Stage.vue
+++ b/src/views/Stats/Stage.vue
@@ -39,9 +39,9 @@
         <v-row
           align="center"
           justify="center"
-          class="px-6 pb-2"
+          class="px-3 px-sm-4 px-md-6 px-lg-6 px-xl-8 pt-0 pb-4"
         >
-          <h1 class="title pl-2 pt-2 no-wrap--text">
+          <h1 class="title pl-2 pt-1 no-wrap--text">
             {{ $t('stats.title', {stage: stage.code}) }}
           </h1>
           <v-spacer /> 
@@ -53,7 +53,7 @@
         :items="stats"
         type="stage"
 
-        class="px-6 pb-6"
+        class="px-3 px-sm-4 px-md-6 px-lg-6 px-xl-8 pt-0 pb-6"
       />
     </v-card>
   </NewStageSelector>
diff --git a/yarn.lock b/yarn.lock
index aaa184ca..3bfd66c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1409,6 +1409,13 @@ a-big-triangle@^1.0.3:
     gl-vao "^1.2.0"
     weak-map "^1.0.5"
 
+abort-controller@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
+  integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
+  dependencies:
+    event-target-shim "^5.0.0"
+
 abs-svg-path@^0.1.1, abs-svg-path@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/abs-svg-path/-/abs-svg-path-0.1.1.tgz#df601c8e8d2ba10d4a76d625e236a9a39c2723bf"
@@ -1478,6 +1485,13 @@ affine-hull@^1.0.0:
   dependencies:
     robust-orientation "^1.1.3"
 
+agent-base@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
+  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
+  dependencies:
+    es6-promisify "^5.0.0"
+
 ajv-errors@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
@@ -1925,7 +1939,7 @@ barycentric@^1.0.1:
   dependencies:
     robust-linear-solve "^1.0.0"
 
-base64-js@^1.0.2:
+base64-js@^1.0.2, base64-js@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
   integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
@@ -1984,6 +1998,11 @@ big.js@^5.2.2:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
+bignumber.js@^7.0.0:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-7.2.1.tgz#80c048759d826800807c4bfd521e50edbba57a5f"
+  integrity sha512-S4XzBk5sMB+Rcb/LNcpzXr57VRTxgAvaAEDAl1AwRx27j00hT84O6OkteE7u8UB3NuaaygCRrEpqox4uDOrbdQ==
+
 binary-extensions@^1.0.0:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
@@ -2189,6 +2208,28 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
+browserslist-ga-export@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/browserslist-ga-export/-/browserslist-ga-export-2.0.0.tgz#a75aff2d517789cf14f0947d5e4f2eae04ab0d9d"
+  integrity sha512-Rk3EgbjiAvHlvqDhgUhVwSLHgMRhJfFXKIj12udPXWqtX4LLQL/kuXbpwLC1VMF+eGxg/FzrhXP/JVEXfA8ewA==
+  dependencies:
+    browserslist-ga "0.0.12"
+    csvtojson "^1.1.12"
+    yargs "^11.0.0"
+
+browserslist-ga@0.0.12:
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/browserslist-ga/-/browserslist-ga-0.0.12.tgz#d60767a050062253611c42e8e1dfb96476a2e4d5"
+  integrity sha512-NvGunMmgOIz1Jnf4eUE4Mzt+PQlLrbXKO/GD5xLx2gA8U7GHlFJ2F8KyrnSQFQ6tlnKuJ5ILLOp090Z2boy2kQ==
+  dependencies:
+    caniuse-lite "^1.0.30001016"
+    googleapis "^39.1.0"
+    inquirer "^5.2.0"
+    inquirer-datepicker-prompt "^0.4.2"
+    map-to-chrome "0.0.3"
+    opener "^1.5.1"
+    portfinder "^1.0.25"
+
 browserslist@^4.0.0, browserslist@^4.3.4, browserslist@^4.5.4, browserslist@^4.8.0:
   version "4.8.3"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.3.tgz#65802fcd77177c878e015f0e3189f2c4f627ba44"
@@ -2219,6 +2260,11 @@ bubleify@^1.1.0, bubleify@^1.2.0:
   dependencies:
     buble "^0.19.3"
 
+buffer-equal-constant-time@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
+  integrity sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk=
+
 buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
@@ -2383,6 +2429,11 @@ camelcase@^1.0.2:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
   integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=
 
+camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+  integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
+
 camelcase@^5.0.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
@@ -2403,6 +2454,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001012, caniuse-lite@^1.0.30001017:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001019.tgz#857e3fccaad2b2feb3f1f6d8a8f62d747ea648e1"
   integrity sha512-6ljkLtF1KM5fQ+5ZN0wuyVvvebJxgJPTmScOMaFuQN2QuOzvRJnWSKfzQskQU5IOU4Gap3zasYPIinzwUjoj/g==
 
+caniuse-lite@^1.0.30001016:
+  version "1.0.30001030"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001030.tgz#78076c4c6d67d3e41d6eb9399853fb27fe6e44ee"
+  integrity sha512-QGK0W4Ft/Ac+zTjEiRJfwDNATvS3fodDczBXrH42784kcfqcDKpEPfN08N0HQjrAp8He/Jw8QiSS9QRn7XAbUw==
+
 canvas-fit@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/canvas-fit/-/canvas-fit-1.5.0.tgz#ae13be66ade42f5be0e487e345fce30a5e5b5e5f"
@@ -3418,6 +3474,14 @@ csso@^4.0.2:
   dependencies:
     css-tree "1.0.0-alpha.37"
 
+csvtojson@^1.1.12:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/csvtojson/-/csvtojson-1.1.12.tgz#3872eef9588080f74c222ffe53cfdd416f9bb7d5"
+  integrity sha512-gJg1II2uXh8H6XP7L1YzX/6H8rrUbSTiEg4SaI6/pHOcnZovwAR3Rmm9TizSsGQBBXl1pb/JJPlaImV2YIuMrg==
+  dependencies:
+    lodash "^4.17.3"
+    strip-bom "^2.0.0"
+
 cubic-hermite@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cubic-hermite/-/cubic-hermite-1.0.0.tgz#84e3b2f272b31454e8393b99bb6aed45168c14e5"
@@ -3571,6 +3635,16 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dateformat@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
+  integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
+
+datejs@^1.0.0-rc3:
+  version "1.0.0-rc3"
+  resolved "https://registry.yarnpkg.com/datejs/-/datejs-1.0.0-rc3.tgz#bffa1efedefeb41fdd8a242af55afa01fb58de57"
+  integrity sha1-v/oe/t7+tB/diiQq9Vr6AftY3lc=
+
 dayjs@^1.8.15:
   version "1.8.19"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.8.19.tgz#5117dc390d8f8e586d53891dbff3fa308f51abfe"
@@ -3609,7 +3683,7 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
-decamelize@^1.0.0, decamelize@^1.2.0:
+decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@@ -3972,6 +4046,13 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+ecdsa-sig-formatter@1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz#ae0f0fa2d85045ef14a817daa3ce9acd0489e5bf"
+  integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==
+  dependencies:
+    safe-buffer "^5.0.1"
+
 edges-to-adjacency-list@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/edges-to-adjacency-list/-/edges-to-adjacency-list-1.0.0.tgz#c146d2e084addfba74a51293c6e0199a49f757f1"
@@ -4135,6 +4216,18 @@ es6-promise@^3.0.2:
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
   integrity sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=
 
+es6-promise@^4.0.3:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
+
+es6-promisify@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
+  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
+  dependencies:
+    es6-promise "^4.0.3"
+
 es6-symbol@^3.1.1, es6-symbol@~3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
@@ -4448,6 +4541,11 @@ event-pubsub@4.3.0:
   resolved "https://registry.yarnpkg.com/event-pubsub/-/event-pubsub-4.3.0.tgz#f68d816bc29f1ec02c539dc58c8dd40ce72cb36e"
   integrity sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==
 
+event-target-shim@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
+  integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
+
 eventemitter3@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
@@ -4598,12 +4696,12 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@~3.0.2:
+extend@^3.0.2, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
-external-editor@^2.0.4:
+external-editor@^2.0.4, external-editor@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
   integrity sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==
@@ -4699,6 +4797,11 @@ fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fast-text-encoding@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-text-encoding/-/fast-text-encoding-1.0.0.tgz#3e5ce8293409cfaa7177a71b9ca84e1b1e6f25ef"
+  integrity sha512-R9bHCvweUxxwkDwhjav5vxpFvdPGlVngtqmx4pIZfSUhM/Q4NiIUHB456BAf+Q1Nwu3HEZYONtu+Rya+af4jiQ==
+
 fastparse@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
@@ -5094,6 +5197,24 @@ gamma@^0.1.0:
   resolved "https://registry.yarnpkg.com/gamma/-/gamma-0.1.0.tgz#3315643403bf27906ca80ab37c36ece9440ef330"
   integrity sha1-MxVkNAO/J5BsqAqzfDbs6UQO8zA=
 
+gaxios@^1.0.2, gaxios@^1.0.4, gaxios@^1.2.1, gaxios@^1.2.2:
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/gaxios/-/gaxios-1.8.4.tgz#e08c34fe93c0a9b67a52b7b9e7a64e6435f9a339"
+  integrity sha512-BoENMnu1Gav18HcpV9IleMPZ9exM+AvUjrAOV4Mzs/vfz2Lu/ABv451iEXByKiMPn2M140uul1txXCg83sAENw==
+  dependencies:
+    abort-controller "^3.0.0"
+    extend "^3.0.2"
+    https-proxy-agent "^2.2.1"
+    node-fetch "^2.3.0"
+
+gcp-metadata@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gcp-metadata/-/gcp-metadata-1.0.0.tgz#5212440229fa099fc2f7c2a5cdcb95575e9b2ca6"
+  integrity sha512-Q6HrgfrCQeEircnNP3rCcEgiDv7eF9+1B+1MMgpE190+/+0mjQR8PxeOaRgxZWmdDAF9EIryHB9g1moPiw1SbQ==
+  dependencies:
+    gaxios "^1.0.2"
+    json-bigint "^0.3.0"
+
 geojson-vt@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-3.2.1.tgz#f8adb614d2c1d3f6ee7c4265cad4bbf3ad60c8b7"
@@ -5813,6 +5934,49 @@ glslify@^7.0.0:
     through2 "^2.0.1"
     xtend "^4.0.0"
 
+google-auth-library@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/google-auth-library/-/google-auth-library-3.1.2.tgz#ff2f88cd5cd2118a57bd3d5ad3c093c8837fc350"
+  integrity sha512-cDQMzTotwyWMrg5jRO7q0A4TL/3GWBgO7I7q5xGKNiiFf9SmGY/OJ1YsLMgI2MVHHsEGyrqYnbnmV1AE+Z6DnQ==
+  dependencies:
+    base64-js "^1.3.0"
+    fast-text-encoding "^1.0.0"
+    gaxios "^1.2.1"
+    gcp-metadata "^1.0.0"
+    gtoken "^2.3.2"
+    https-proxy-agent "^2.2.1"
+    jws "^3.1.5"
+    lru-cache "^5.0.0"
+    semver "^5.5.0"
+
+google-p12-pem@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/google-p12-pem/-/google-p12-pem-1.0.4.tgz#b77fb833a2eb9f7f3c689e2e54f095276f777605"
+  integrity sha512-SwLAUJqUfTB2iS+wFfSS/G9p7bt4eWcc2LyfvmUXe7cWp6p3mpxDo6LLI29MXdU6wvPcQ/up298X7GMC5ylAlA==
+  dependencies:
+    node-forge "^0.8.0"
+    pify "^4.0.0"
+
+googleapis-common@^0.7.0:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/googleapis-common/-/googleapis-common-0.7.2.tgz#a694f55d979cb7c2eac21a0e0439af12f9b418ba"
+  integrity sha512-9DEJIiO4nS7nw0VE1YVkEfXEj8x8MxsuB+yZIpOBULFSN9OIKcUU8UuKgSZFU4lJmRioMfngktrbkMwWJcUhQg==
+  dependencies:
+    gaxios "^1.2.2"
+    google-auth-library "^3.0.0"
+    pify "^4.0.0"
+    qs "^6.5.2"
+    url-template "^2.0.8"
+    uuid "^3.2.1"
+
+googleapis@^39.1.0:
+  version "39.2.0"
+  resolved "https://registry.yarnpkg.com/googleapis/-/googleapis-39.2.0.tgz#5c81f721e9da2e80cb0b25821ed60d3bc200c3da"
+  integrity sha512-66X8TG1B33zAt177sG1CoKoYHPP/B66tEpnnSANGCqotMuY5gqSQO8G/0gqHZR2jRgc5CHSSNOJCnpI0SuDxMQ==
+  dependencies:
+    google-auth-library "^3.0.0"
+    googleapis-common "^0.7.0"
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
@@ -5823,6 +5987,17 @@ grid-index@^1.1.0:
   resolved "https://registry.yarnpkg.com/grid-index/-/grid-index-1.1.0.tgz#97f8221edec1026c8377b86446a7c71e79522ea7"
   integrity sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==
 
+gtoken@^2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/gtoken/-/gtoken-2.3.3.tgz#8a7fe155c5ce0c4b71c886cfb282a9060d94a641"
+  integrity sha512-EaB49bu/TCoNeQjhCYKI/CurooBKkGxIqFHsWABW0b25fobBYVTMe84A8EBVVZhl8emiUdNypil9huMOTmyAnw==
+  dependencies:
+    gaxios "^1.0.4"
+    google-p12-pem "^1.0.0"
+    jws "^3.1.5"
+    mime "^2.2.0"
+    pify "^4.0.0"
+
 gzip-size@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
@@ -6156,6 +6331,14 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
+https-proxy-agent@^2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
+  integrity sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==
+  dependencies:
+    agent-base "^4.3.0"
+    debug "^3.1.0"
+
 human-signals@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
@@ -6298,6 +6481,19 @@ ini@^1.3.4:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
   integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
 
+inquirer-datepicker-prompt@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/inquirer-datepicker-prompt/-/inquirer-datepicker-prompt-0.4.2.tgz#d4419daccf7fdd099751ecb82210560a1437f67c"
+  integrity sha1-1EGdrM9/3QmXUey4IhBWChQ39nw=
+  dependencies:
+    chalk "^2.1.0"
+    cli-cursor "^2.1.0"
+    dateformat "^3.0.2"
+    datejs "^1.0.0-rc3"
+    inquirer "^3.3.0"
+    lodash "^4.17.4"
+    util "^0.10.3"
+
 inquirer@6.5.0:
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.0.tgz#2303317efc9a4ea7ec2e2df6f86569b734accf42"
@@ -6317,7 +6513,7 @@ inquirer@6.5.0:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-inquirer@^3.0.6:
+inquirer@^3.0.6, inquirer@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
   integrity sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==
@@ -6337,6 +6533,25 @@ inquirer@^3.0.6:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
+inquirer@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-5.2.0.tgz#db350c2b73daca77ff1243962e9f22f099685726"
+  integrity sha512-E9BmnJbAKLPGonz0HeWHtbKf+EeSP93paWO3ZYoUpq/aowXvYGjjCSuashhXPpzbArIjBbji39THkxTz9ZeEUQ==
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^2.1.0"
+    figures "^2.0.0"
+    lodash "^4.3.0"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rxjs "^5.5.2"
+    string-width "^2.1.0"
+    strip-ansi "^4.0.0"
+    through "^2.3.6"
+
 inquirer@^6.2.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.2.tgz#ad50942375d036d327ff528c08bd5fab089928ca"
@@ -6746,7 +6961,7 @@ is-typedarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
-is-utf8@^0.2.1:
+is-utf8@^0.2.0, is-utf8@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
@@ -6874,6 +7089,13 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
 
+json-bigint@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/json-bigint/-/json-bigint-0.3.0.tgz#0ccd912c4b8270d05f056fbd13814b53d3825b1e"
+  integrity sha1-DM2RLEuCcNBfBW+9E4FLU9OCWx4=
+  dependencies:
+    bignumber.js "^7.0.0"
+
 json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -6957,6 +7179,23 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jwa@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.4.1.tgz#743c32985cb9e98655530d53641b66c8645b039a"
+  integrity sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==
+  dependencies:
+    buffer-equal-constant-time "1.0.1"
+    ecdsa-sig-formatter "1.0.11"
+    safe-buffer "^5.0.1"
+
+jws@^3.1.5:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/jws/-/jws-3.2.2.tgz#001099f3639468c9414000e99995fa52fb478304"
+  integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
+  dependencies:
+    jwa "^1.4.1"
+    safe-buffer "^5.0.1"
+
 kdbush@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-3.0.0.tgz#f8484794d47004cc2d85ed3a79353dbe0abc2bf0"
@@ -7213,7 +7452,7 @@ lru-cache@^4.0.1, lru-cache@^4.1.1, lru-cache@^4.1.2:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
-lru-cache@^5.1.1:
+lru-cache@^5.0.0, lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
   integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
@@ -7266,6 +7505,11 @@ map-limit@0.0.1:
   dependencies:
     once "~1.3.0"
 
+map-to-chrome@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/map-to-chrome/-/map-to-chrome-0.0.3.tgz#0d576973897fc05d4e8c854e84ac5ab25bb7aa31"
+  integrity sha512-MZ2E6C1KeM+2qgMk+/7zb6J8oPBTPNZK+M7DpyYnM9CIoYnvEQDUA+FbLB5j773vzrZEevmfcx94Z9IzyD6InA==
+
 map-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
@@ -7470,7 +7714,7 @@ mime@1.6.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^2.0.3, mime@^2.4.4:
+mime@^2.0.3, mime@^2.2.0, mime@^2.4.4:
   version "2.4.4"
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
   integrity sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==
@@ -7821,11 +8065,21 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+node-fetch@^2.3.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
+  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
+
 node-forge@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
   integrity sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==
 
+node-forge@^0.8.0:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.8.5.tgz#57906f07614dc72762c84cef442f427c0e1b86ee"
+  integrity sha512-vFMQIWt+J/7FLNyKouZ9TazT74PRV3wgv9UT4cRjC8BffxFbKXkgIWR42URCPSnHm/QDz6BOlb2Q0U4+VQT67Q==
+
 node-ipc@^9.1.1:
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/node-ipc/-/node-ipc-9.1.1.tgz#4e245ed6938e65100e595ebc5dc34b16e8dd5d69"
@@ -8190,7 +8444,7 @@ os-homedir@^2.0.0:
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-2.0.0.tgz#a0c76bb001a8392a503cbd46e7e650b3423a923c"
   integrity sha512-saRNz0DSC5C/I++gFIaJTXoFJMRwiP5zHar5vV3xQ2TkgEw6hDCcU5F272JjUylpiVgBrZNQHnfjkLabTfb92Q==
 
-os-locale@^3.0.0:
+os-locale@^3.0.0, os-locale@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
   integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
@@ -8518,7 +8772,7 @@ pify@^3.0.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
-pify@^4.0.1:
+pify@^4.0.0, pify@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
@@ -9222,6 +9476,11 @@ qs@6.7.0:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
+qs@^6.5.2:
+  version "6.9.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.1.tgz#20082c65cb78223635ab1a9eaca8875a29bf8ec9"
+  integrity sha512-Cxm7/SS/y/Z3MHWSxXb8lIFqgqBowP5JMlTUFyJN88y0SGQhVmZnqFK/PeuMX9LzUyWsqqhNxIyg0jlzq946yA==
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -9957,6 +10216,13 @@ rx-lite@*, rx-lite@^4.0.8:
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
   integrity sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=
 
+rxjs@^5.5.2:
+  version "5.5.12"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.12.tgz#6fa61b8a77c3d793dbaf270bee2f43f652d741cc"
+  integrity sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==
+  dependencies:
+    symbol-observable "1.0.1"
+
 rxjs@^6.4.0:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.4.tgz#e0777fe0d184cec7872df147f303572d414e211c"
@@ -10791,6 +11057,13 @@ strip-bom@4.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
   integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
 
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  integrity sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=
+  dependencies:
+    is-utf8 "^0.2.0"
+
 strip-comments@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d"
@@ -10958,6 +11231,11 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+symbol-observable@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
+  integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=
+
 table@4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
@@ -11516,6 +11794,11 @@ url-parse@^1.4.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+url-template@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/url-template/-/url-template-2.0.8.tgz#fc565a3cccbff7730c775f5641f9555791439f21"
+  integrity sha1-/FZaPMy/93MMd19WQflVV5FDnyE=
+
 url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
@@ -11549,6 +11832,13 @@ util@0.10.3:
   dependencies:
     inherits "2.0.1"
 
+util@^0.10.3:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
+  dependencies:
+    inherits "2.0.3"
+
 util@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
@@ -11610,6 +11900,11 @@ uuid@^3.0.1, uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
   integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==
 
+uuid@^3.2.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
+
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -12316,6 +12611,11 @@ xtend@~2.1.1:
   dependencies:
     object-keys "~0.4.0"
 
+y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+  integrity sha1-bRX7qITAhnnA136I53WegR4H+kE=
+
 "y18n@^3.2.1 || ^4.0.0", y18n@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
@@ -12355,6 +12655,13 @@ yargs-parser@^16.1.0:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
+  integrity sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=
+  dependencies:
+    camelcase "^4.1.0"
+
 yargs@12.0.5:
   version "12.0.5"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
@@ -12373,6 +12680,24 @@ yargs@12.0.5:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^11.1.1"
 
+yargs@^11.0.0:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.1.1.tgz#5052efe3446a4df5ed669c995886cc0f13702766"
+  integrity sha512-PRU7gJrJaXv3q3yQZ/+/X6KBswZiaQ+zOmdprZcouPYtQgvNU35i+68M4b1ZHLZtYFT5QObFLV+ZkmJYcwKdiw==
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.1.1"
+    find-up "^2.1.0"
+    get-caller-file "^1.0.1"
+    os-locale "^3.1.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^9.0.2"
+
 yargs@^13.2.2:
   version "13.3.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"

From 00e1d0503e02024c2024dcb65ec29c48c1707f3b Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Thu, 27 Feb 2020 19:28:46 -0500
Subject: [PATCH 07/45] improvement(layout): improved padding design and added
 zonename

---
 src/views/Stats/Item.vue  |  2 +-
 src/views/Stats/Stage.vue | 23 +++++++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/views/Stats/Item.vue b/src/views/Stats/Item.vue
index ee4a45c4..98635ebe 100644
--- a/src/views/Stats/Item.vue
+++ b/src/views/Stats/Item.vue
@@ -146,7 +146,7 @@
             <v-row
               align="center"
               justify="center"
-              class="px-3 px-sm-4 px-md-6 px-lg-6 px-xl-8 pt-0 pb-4"
+              class="px-4 px-sm-4 px-md-6 px-lg-6 px-xl-8 pt-0 pb-4"
             >
               <Item
                 v-if="selected.item"
diff --git a/src/views/Stats/Stage.vue b/src/views/Stats/Stage.vue
index 25ff7bc9..58a6dab6 100644
--- a/src/views/Stats/Stage.vue
+++ b/src/views/Stats/Stage.vue
@@ -35,16 +35,22 @@
     @select="select"
   >
     <v-card class="bkop-light pt-2">
-      <v-card-title class="pb-0">
+      <v-card-title class="pb-0 mx-1">
         <v-row
           align="center"
           justify="center"
-          class="px-3 px-sm-4 px-md-6 px-lg-6 px-xl-8 pt-0 pb-4"
+          class="px-4 px-sm-4 px-md-6 px-lg-6 px-xl-8 pt-0 pb-4"
         >
-          <h1 class="title pl-2 pt-1 no-wrap--text">
+          <h2
+            class="overline d-block"
+            style="width: 100%"
+          >
+            {{ strings.translate(zone, "zoneName") }}
+          </h2>
+          <h1 class="title pt-1 no-wrap--text">
             {{ $t('stats.title', {stage: stage.code}) }}
           </h1>
-          <v-spacer /> 
+          <v-spacer />
           <DataSourceToggle />
         </v-row>
       </v-card-title>
@@ -64,6 +70,7 @@
   import DataTable from "@/components/stats/DataTable";
   import get from "@/utils/getters";
   import DataSourceToggle from "@/components/stats/DataSourceToggle";
+  import strings from "@/utils/strings";
 
 export default {
   name: "StatsByStage",
@@ -90,6 +97,14 @@ export default {
       const got = get.stages.byStageId(this.selected.stage);
       if (!got) return { code: "" };
       return got
+    },
+    zone () {
+      const got = get.zones.byZoneId(this.selected.zone);
+      if (!got) return {};
+      return got
+    },
+    strings () {
+      return strings
     }
   },
   methods: {

From 5994fd6052678fa34291aabc37ffaa9a0a773120 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Thu, 27 Feb 2020 19:33:37 -0500
Subject: [PATCH 08/45] fix(datasourcetoggle): lol

---
 src/components/stats/DataSourceToggle.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/stats/DataSourceToggle.vue b/src/components/stats/DataSourceToggle.vue
index 38d48cae..a53a79ea 100644
--- a/src/components/stats/DataSourceToggle.vue
+++ b/src/components/stats/DataSourceToggle.vue
@@ -143,9 +143,6 @@ export default {
     afterLogin() {
       this.dialog = false;
       this.dataSource = "personal";
-    },
-    alert(a) {
-      alert(a)
     }
   }
 };

From fa4d0dd4fdbcc6dd018946e1c7c316e52be7e65e Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Fri, 28 Feb 2020 12:45:32 -0500
Subject: [PATCH 09/45] improvement(layout): improved multiple layouts across
 the app

---
 package.json                       |  1 +
 src/App.vue                        |  4 ---
 src/components/global/ItemIcon.vue | 13 ++++-----
 src/main.js                        |  8 ------
 src/views/About/Changelog.vue      |  1 -
 src/views/About/Links.vue          |  1 -
 src/views/Home.vue                 | 42 ++++++++++++++++++------------
 src/views/Stats/Item.vue           |  2 +-
 yarn.lock                          |  5 ++++
 9 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/package.json b/package.json
index 17f28b64..85f16683 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@sentry/browser": "^5.6.2",
     "@sentry/integrations": "^5.6.1",
+    "animejs": "^3.1.0",
     "aos": "^2.3.4",
     "core-js": "^2.6.5",
     "dayjs": "^1.8.15",
diff --git a/src/App.vue b/src/App.vue
index 9c079985..e862bbe5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -472,10 +472,6 @@ export default {
     opacity: 0;
   }
 
-  .theme--dark, .theme--light {
-    transition: all .3s cubic-bezier(.25,.8,.5,1) !important;
-  }
-
   .drawer-logo {
     height: calc(256px + env(safe-area-inset-top));
     padding: calc(32px + env(safe-area-inset-top)) 32px 32px 32px;
diff --git a/src/components/global/ItemIcon.vue b/src/components/global/ItemIcon.vue
index 53e26e9d..9e2543ee 100644
--- a/src/components/global/ItemIcon.vue
+++ b/src/components/global/ItemIcon.vue
@@ -1,7 +1,6 @@
 <template>
   <figure
     v-if="item.itemId !== 'furni' && item.spriteCoord"
-    ref="icon"
     :class="{'item-icon--sprite': true, 'item-icon--sprite--disable-hover-effect': disableTooltip}"
     :alt="`item(${item.itemId})`"
     :style="style"
@@ -9,8 +8,7 @@
   <v-icon
     v-else-if="item.itemId === 'furni'"
     :class="furniturePadding"
-    class="deep-orange"
-    style="border-radius: 50%;"
+    class="deep-orange item-icon--special"
     :size="30 * ratio"
   >
     mdi-lamp
@@ -18,8 +16,7 @@
   <v-icon
     v-else-if="item.itemId !== 'furni' && !item.spriteCoord"
     :class="furniturePadding"
-    class="blue"
-    style="border-radius: 50%;"
+    class="blue item-icon--special"
     :size="30 * ratio"
   >
     mdi-treasure-chest
@@ -91,7 +88,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 .item-icon--sprite {
   background-image: url("https://penguin-stats.s3.ap-southeast-1.amazonaws.com/item_sprite.png");
   background-repeat: no-repeat;
@@ -110,4 +107,8 @@ export default {
 .item-icon--sprite--disable-hover-effect {
   transform: none !important;
 }
+
+  .item-icon--special {
+    border-radius: 50%;
+  }
 </style>
diff --git a/src/main.js b/src/main.js
index 343f7871..e0d2fe03 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,6 @@ import router from './router'
 import store from './store'
 import i18n from './i18n'
 import VueAnalytics from "vue-analytics"
-import AOS from 'aos'
 import 'aos/dist/aos.css'
 import I18n from "@/i18n"
 import config from "@/config"
@@ -65,12 +64,5 @@ new Vue({
   router,
   store,
   i18n,
-  created() {
-    AOS.init({
-      delay: 100,
-      duration: 700,
-      easing: 'ease-in-out-sine'
-    })
-  },
   render: h => h(App),
 }).$mount('#app');
\ No newline at end of file
diff --git a/src/views/About/Changelog.vue b/src/views/About/Changelog.vue
index b3297729..11082096 100644
--- a/src/views/About/Changelog.vue
+++ b/src/views/About/Changelog.vue
@@ -11,7 +11,6 @@
     >
       <v-card
         class="bkop-light"
-        data-aos="fade"
         elevation="5"
       >
         <v-card-title class="title">
diff --git a/src/views/About/Links.vue b/src/views/About/Links.vue
index 32604a92..1c29be42 100644
--- a/src/views/About/Links.vue
+++ b/src/views/About/Links.vue
@@ -94,7 +94,6 @@
       md="4"
     >
       <v-card
-        data-aos="fade"
         class="link-card bkop-light elevation-0"
       >
         <v-card-title
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c5794fd0..d238bf39 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -4,15 +4,15 @@
       dense
     >
       <v-col cols="12">
-        <Intro data-aos="fade" />
+        <Intro
+          class="card-translate-up"
+        />
       </v-col>
       <v-col
         cols="12"
       >
         <Bulletin
-          data-aos="fade"
-          data-aos-offset="50"
-          class="animation-blink"
+          class="animation-blink card-translate-up"
         />
       </v-col>
       <!--      <v-flex-->
@@ -20,7 +20,7 @@
       <!--        sm6-->
       <!--      >-->
       <!--        <Contact-->
-      <!--          data-aos="fade"-->
+      <!--          -->
       <!--        />-->
       <!--      </v-flex>-->
       <v-col
@@ -28,13 +28,10 @@
         md="6"
       >
         <Contribute
-          data-aos="fade"
-          data-aos-offset="50"
+          class="card-translate-up"
         />
         <Contact
-          class="mt-2"
-          data-aos="fade"
-          data-aos-offset="50"
+          class="mt-2 card-translate-up"
         />
       </v-col>
       <v-col
@@ -42,8 +39,7 @@
         md="6"
       >
         <Donate
-          data-aos="fade"
-          data-aos-offset="50"
+          class="card-translate-up"
         />
       </v-col>
     </v-row>
@@ -56,10 +52,22 @@ import Donate from "@/views/About/Donate";
 import Intro from "@/views/About/Intro";
 import Bulletin from "@/views/About/Bulletin";
 import Contact from "@/views/About/Contact";
+import anime from 'animejs/lib/anime.es.js';
+
 export default {
   name: "Home",
   components: { Contribute, Donate, Intro, Bulletin, Contact },
   data: () => ({}),
+  mounted () {
+    window.ANIME = anime({
+      targets: 'div.card-translate-up',
+      translateY: [36, 0],
+      opacity: [0, 1],
+      duration: 400,
+      delay: (el, i) => i * 125 + 300,
+      easings: "easeOutQuad"
+    })
+  },
   methods: {
     goToPage(name) {
       this.$router.push({ name: name })
@@ -78,7 +86,7 @@ export default {
 }
 
 .animation-blink:hover{
-  animation-play-state: paused;
+  animation-play-state: paused !important;
 }
 
 .theme--light .animation-blink {
@@ -106,22 +114,22 @@ export default {
 @keyframes light-blink {
   from {
     text-shadow: 0 0 0 rgba(0, 0, 0, .2);
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
   }
   to {
     text-shadow: 0 0 5px rgba(0, 0, 0, .2);
-    box-shadow: 0 0 0 3px rgba(0, 0, 0, .5), 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);;
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, .5), 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
   }
 }
 
 @keyframes dark-blink {
   from {
     text-shadow: 0 0 0 rgba(255, 255, 255, .3);
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);;
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
   }
   to {
     text-shadow: 0 0 5px rgba(255, 255, 255, .3);
-    box-shadow: 0 0 0 3px rgba(255, 255, 255, .5), 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);;
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, .5), 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Stats/Item.vue b/src/views/Stats/Item.vue
index 98635ebe..28054a25 100644
--- a/src/views/Stats/Item.vue
+++ b/src/views/Stats/Item.vue
@@ -99,7 +99,7 @@
       <v-stepper-content
         v-if="categorizedItems"
         :step="1"
-        class="bkop-light mt-6 elevation-4"
+        class="bkop-light mt-2 elevation-4"
         style="border-radius: 4px"
       >
         <v-row
diff --git a/yarn.lock b/yarn.lock
index 3bfd66c0..80598244 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1567,6 +1567,11 @@ amdefine@>=0.0.4:
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
   integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
 
+animejs@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/animejs/-/animejs-3.1.0.tgz#748a90fc1d4bef3efed64508af9a6a82babf5c47"
+  integrity sha512-BjnCroPPQPEAngT0M89pz9TBcOGgOFLnVoq3+jV2upl4rn60k57/AXvESTnuILsNgOEjGuhMEOMp7IlQzk40kA==
+
 ansi-colors@^3.0.0:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"

From 7065562529110414c57351d14faf23f466f1f727 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Fri, 28 Feb 2020 14:27:42 -0500
Subject: [PATCH 10/45] improvement(animation): improved home animation

---
 src/components/global/RandomBackground.vue |  2 +-
 src/views/About/Contact.vue                | 26 ++++++++------
 src/views/About/Contribute.vue             |  1 +
 src/views/About/Donate.vue                 | 19 ++++------
 src/views/About/Intro.vue                  |  4 +--
 src/views/Home.vue                         | 41 ++++++++++++++--------
 6 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/src/components/global/RandomBackground.vue b/src/components/global/RandomBackground.vue
index 83b7e028..5afeaeec 100644
--- a/src/components/global/RandomBackground.vue
+++ b/src/components/global/RandomBackground.vue
@@ -143,7 +143,7 @@
     right: 5vw;
     margin: 2em 0;
     height: 50vh;
-    width: 100vw;
+    width: 90vw;
     background-size: contain;
     background-position: bottom right;
     opacity: .75;
diff --git a/src/views/About/Contact.vue b/src/views/About/Contact.vue
index acdfa2d5..9f920815 100644
--- a/src/views/About/Contact.vue
+++ b/src/views/About/Contact.vue
@@ -57,10 +57,13 @@
         class="mx-2 my-1"
         color="secondary"
         text-color="white"
-        @click="$router.push({name: 'AboutMembers'})"
+        :to="{name: 'AboutMembers'}"
+        target="_blank"
       >
         {{ $t('contact.contributor') }}
-        <v-icon right>
+        <v-icon
+          right
+        >
           mdi-account-multiple
         </v-icon>
       </v-chip>
@@ -68,10 +71,13 @@
         class="mx-2 my-1"
         color="secondary"
         text-color="white"
-        @click="goToHref('https://github.com/penguin-statistics/frontend-v2/issues')"
+        href="https://github.com/penguin-statistics/frontend-v2/issues"
+        target="_blank"
       >
         {{ $t('contact.github') }}
-        <v-icon right>
+        <v-icon
+          right
+        >
           mdi-github-circle
         </v-icon>
       </v-chip>
@@ -79,11 +85,14 @@
         class="mx-2 my-1"
         color="secondary"
         text-color="white"
-        @click="goToHref('https://bbs.nga.cn/read.php?tid=17340880')"
+        href="https://bbs.nga.cn/read.php?tid=17340880"
+        target="_blank"
       >
         {{ $t('contact.nga') }}
-        <v-icon right>
-          mdi-share
+        <v-icon
+          right
+        >
+          mdi-forum
         </v-icon>
       </v-chip>
     </v-row>
@@ -153,9 +162,6 @@
 export default {
   name: 'Contact',
   methods: {
-    goToHref(href) {
-      window.open(href)
-    }
   }
 }
 </script>
diff --git a/src/views/About/Contribute.vue b/src/views/About/Contribute.vue
index 679be0dc..7fc06d8b 100644
--- a/src/views/About/Contribute.vue
+++ b/src/views/About/Contribute.vue
@@ -39,6 +39,7 @@
   <v-card
     elevation="5"
     class="bkop-light pa-6"
+    style="height: 100%"
   >
     <h1 class="headline">
       {{ $t('menu.about.contribute') }}
diff --git a/src/views/About/Donate.vue b/src/views/About/Donate.vue
index e0614963..34346b46 100644
--- a/src/views/About/Donate.vue
+++ b/src/views/About/Donate.vue
@@ -106,6 +106,7 @@
             :alt="$t('donate.methods.alipay')"
             max-height="128px"
             contain
+            aspect-ratio="1"
           />
 
           <v-row
@@ -126,7 +127,8 @@
               text
               outlined
               class="my-0 d-block"
-              @click="redirectAlipay"
+              :href="qr.alipay"
+              target="_blank"
             >
               {{ $t('donate.redirectToApp', {app: $t('donate.methods.alipay')}) }}
             </v-btn>
@@ -144,6 +146,7 @@
             :alt="$t('donate.methods.wechatPay')"
             max-height="128px"
             contain
+            aspect-ratio="1"
           />
 
           <v-row
@@ -166,7 +169,8 @@
       <v-btn
         rounded
         color="primary"
-        @click="redirectPayPal"
+        :href="qr.paypal"
+        target="_blank"
       >
         <v-icon left>
           mdi-paypal
@@ -187,17 +191,6 @@ export default {
         paypal: "https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=T9LRK3VEL645J&item_name=Penguin+Statistics+Donation&currency_code=USD&source=url"
       }
     }
-  },
-  methods: {
-    redirectAlipay() {
-      window.location = this.qr.alipay
-    },
-    redirectWechatPay() {
-      window.location = this.qr.wechatPay
-    },
-    redirectPayPal() {
-      window.open(this.qr.paypal)
-    }
   }
 };
 </script>
diff --git a/src/views/About/Intro.vue b/src/views/About/Intro.vue
index d30b45d1..d845af6c 100644
--- a/src/views/About/Intro.vue
+++ b/src/views/About/Intro.vue
@@ -33,8 +33,8 @@
 
 <template>
   <v-card 
-    elevation="5" 
-    class="bkop-light pa-2 pa-sm-4 pa-md-6 pa-lg-6 pa-xl-8 pt-0 py-1"
+    elevation="0"
+    class="transparent pt-0 py-1"
   >
     <v-row
       align="center"
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d238bf39..4d425511 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-container>
+  <v-container class="fill-height justify-center">
     <v-row
-      dense
+      :dense="$vuetify.breakpoint.mdAndDown"
     >
       <v-col cols="12">
         <Intro
@@ -26,22 +26,24 @@
       <v-col
         cols="12"
         md="6"
+        class="align-self-stretch"
       >
         <Contribute
-          class="card-translate-up"
-        />
-        <Contact
-          class="mt-2 card-translate-up"
+          class="card-translate-up align-self-stretch"
         />
       </v-col>
       <v-col
         cols="12"
         md="6"
+        class="align-self-stretch"
       >
         <Donate
           class="card-translate-up"
         />
       </v-col>
+      <v-col cols="12">
+        <Contact class="card-translate-up" />
+      </v-col>
     </v-row>
   </v-container>
 </template>
@@ -59,14 +61,25 @@ export default {
   components: { Contribute, Donate, Intro, Bulletin, Contact },
   data: () => ({}),
   mounted () {
-    window.ANIME = anime({
-      targets: 'div.card-translate-up',
-      translateY: [36, 0],
-      opacity: [0, 1],
-      duration: 400,
-      delay: (el, i) => i * 125 + 300,
-      easings: "easeOutQuad"
-    })
+    setTimeout(() => {
+      anime({
+        targets: '.card-translate-up',
+        translateY: [48, 0],
+        opacity: [0, 1],
+        duration: 425 * (Math.sqrt(document.body.clientWidth / 375)),
+        delay: (el, i) => i * 175,
+        easing: "easeOutExpo"
+      })
+      anime({
+        targets: ['.card-translate-up h1', '.card-translate-up h2', '.card-translate-up p', '.card-translate-up span'],
+        translateY: [16, 0],
+        opacity: [0, 1],
+        duration: 425 * (Math.sqrt(document.body.clientWidth / 375)),
+        delay: (el, i) => i * 75,
+        easing: "easeOutExpo"
+      })
+    }, 0)
+
   },
   methods: {
     goToPage(name) {

From c1fd774893b781d7651cc55cfceea732560a580e Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Fri, 28 Feb 2020 19:43:09 -0500
Subject: [PATCH 11/45] improvement(animations): improved animations

---
 src/components/stats/StageSelector.vue |  1 +
 src/views/Home.vue                     | 21 +++++++++++++++------
 src/views/Stats/Stage.vue              | 25 +++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/components/stats/StageSelector.vue b/src/components/stats/StageSelector.vue
index 8ac3d138..152155e3 100644
--- a/src/components/stats/StageSelector.vue
+++ b/src/components/stats/StageSelector.vue
@@ -159,6 +159,7 @@
             <div
               v-for="category in categories"
               :key="category.id"
+              class="stage-selector--stage"
             >
               <v-subheader>
                 <v-icon class="mr-2">
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 4d425511..fb5d9074 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -66,18 +66,27 @@ export default {
         targets: '.card-translate-up',
         translateY: [48, 0],
         opacity: [0, 1],
-        duration: 425 * (Math.sqrt(document.body.clientWidth / 375)),
+        duration: 775,
         delay: (el, i) => i * 175,
-        easing: "easeOutExpo"
+        easing: "easeOutQuint"
       })
       anime({
-        targets: ['.card-translate-up h1', '.card-translate-up h2', '.card-translate-up p', '.card-translate-up span'],
-        translateY: [16, 0],
+        targets: ['.card-translate-up h1', '.card-translate-up h2'],
+        translateY: [48, 0],
         opacity: [0, 1],
-        duration: 425 * (Math.sqrt(document.body.clientWidth / 375)),
+        duration: 775,
         delay: (el, i) => i * 75,
-        easing: "easeOutExpo"
+        easing: "easeOutQuint"
       })
+      anime({
+        targets: ['.card-translate-up p', '.card-translate-up span'],
+        translateY: [48, 0],
+        opacity: [0, 1],
+        duration: 775,
+        delay: (el, i) => i * 75,
+        easing: "easeOutQuint"
+      })
+
     }, 0)
 
   },
diff --git a/src/views/Stats/Stage.vue b/src/views/Stats/Stage.vue
index 58a6dab6..7bbc1fb6 100644
--- a/src/views/Stats/Stage.vue
+++ b/src/views/Stats/Stage.vue
@@ -71,6 +71,7 @@
   import get from "@/utils/getters";
   import DataSourceToggle from "@/components/stats/DataSourceToggle";
   import strings from "@/utils/strings";
+  import anime from "animejs";
 
 export default {
   name: "StatsByStage",
@@ -106,6 +107,26 @@ export default {
     strings () {
       return strings
     }
+  },
+  mounted () {
+    anime({
+      targets: '.stage-selector--stage',
+      translateY: [48, 0],
+      opacity: [0, 1],
+      duration: 425,
+      delay: (el, i) => i * 225,
+      easing: "easeOutQuint"
+    })
+    // anime({
+    //   targets: '.v-expansion-panel span',
+    //   translateY: [48, 0],
+    //   opacity: [0, 1],
+    //   duration: 525,
+    //   delay: (el, i) => i * 0,
+    //   easing: "easeOutQuint"
+    // })
+
+
   },
   methods: {
     select({zone, stage}) {
@@ -124,4 +145,8 @@ export default {
 .v-table {
   background: transparent !important;
 }
+  /*.v-expansion-panel {*/
+  /*  transform: translateY(48px);*/
+  /*  opacity: 0;*/
+  /*}*/
 </style>

From acd58861db6716e6ec4f92106029563824e93afb Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Fri, 28 Feb 2020 21:13:07 -0500
Subject: [PATCH 12/45] improvement(animation): improved animations for about
 pages

---
 public/index.html                      |  7 +++++-
 src/App.vue                            | 14 ++++++++++-
 src/components/stats/StageSelector.vue |  1 -
 src/layouts/AboutLayout.vue            |  2 +-
 src/views/About/Changelog.vue          |  3 ++-
 src/views/About/Members.vue            | 32 ++++++++++++++++++++------
 src/views/Home.vue                     | 19 ++-------------
 src/views/Stats/Stage.vue              | 20 ----------------
 8 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/public/index.html b/public/index.html
index 4a0ca152..8863e91b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -18,7 +18,12 @@
   <style>#app, body, html {
     height: 100vh;
     margin: 0;
-    padding: 0
+    padding: 0;
+    transition: background .3s cubic-bezier(.25,.8,.5,1) !important;
+  }
+
+  body {
+    background: #303030
   }
 
   #loader-wrapper {
diff --git a/src/App.vue b/src/App.vue
index e862bbe5..876a0ea0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -187,7 +187,15 @@
             <v-img
               :src="randomizedLogo"
               class="randomizedLogo"
-            />
+            >
+              <template v-slot:placeholder>
+                <v-img
+                  :src="require('@/assets/logo.png')"
+                  aspect-ratio="1"
+                  height="32px"
+                />
+              </template>
+            </v-img>
           </v-avatar>
         </transition>
         <span class="title">
@@ -472,6 +480,10 @@ export default {
     opacity: 0;
   }
 
+  .v-navigation-drawer {
+    transition: all .3s cubic-bezier(.25,.8,.5,1) !important;
+  }
+
   .drawer-logo {
     height: calc(256px + env(safe-area-inset-top));
     padding: calc(32px + env(safe-area-inset-top)) 32px 32px 32px;
diff --git a/src/components/stats/StageSelector.vue b/src/components/stats/StageSelector.vue
index 152155e3..8ac3d138 100644
--- a/src/components/stats/StageSelector.vue
+++ b/src/components/stats/StageSelector.vue
@@ -159,7 +159,6 @@
             <div
               v-for="category in categories"
               :key="category.id"
-              class="stage-selector--stage"
             >
               <v-subheader>
                 <v-icon class="mr-2">
diff --git a/src/layouts/AboutLayout.vue b/src/layouts/AboutLayout.vue
index 79bd3210..c86ddc82 100644
--- a/src/layouts/AboutLayout.vue
+++ b/src/layouts/AboutLayout.vue
@@ -3,7 +3,7 @@
     class="fill-height justify-center"
   >
     <v-row align="center">
-      <v-col>
+      <v-col class="pa-0">
         <transition
           name="slide-fade"
           mode="out-in"
diff --git a/src/views/About/Changelog.vue b/src/views/About/Changelog.vue
index 11082096..c3b6bb9e 100644
--- a/src/views/About/Changelog.vue
+++ b/src/views/About/Changelog.vue
@@ -1,11 +1,12 @@
 <template>
   <v-timeline
-    :dense="$vuetify.breakpoint.smAndDown"
+    dense
     align-top
   >
     <v-timeline-item
       v-for="(log, dateKey) in logs"
       :key="dateKey"
+      right
       icon="mdi-book-variant"
       fill-dot
     >
diff --git a/src/views/About/Members.vue b/src/views/About/Members.vue
index 3ab9ab5e..598403ad 100644
--- a/src/views/About/Members.vue
+++ b/src/views/About/Members.vue
@@ -129,7 +129,7 @@
       <v-list
         v-for="[key, value] in Object.entries(profiles)"
         :key="key"
-        class="bkop-light mb-1"
+        class="bkop-light mb-4 members--list"
         two-line
       >
         <v-subheader :key="key">
@@ -139,7 +139,7 @@
         <v-list-item
           v-for="profile in value"
           :key="profile.name"
-          class="grow px-4"
+          class="grow px-4 members--list-item"
         >
           <v-list-item-avatar>
             <v-img
@@ -170,7 +170,8 @@
                 <template v-slot:activator="{ on }">
                   <v-btn
                     icon
-                    @click="openTab(url)"
+                    :href="url"
+                    target="_blank"
                     v-on="on"
                   >
                     <v-icon>
@@ -189,6 +190,8 @@
 </template>
 
 <script>
+  import anime from "animejs";
+
   const r = {
     frontend: "frontend",
     backend: "backend",
@@ -203,7 +206,7 @@
       ja: "localization_ja",
       ko: "localization_ko",
     }
-  }
+  };
   export default {
     name: 'Members',
     data () {
@@ -411,10 +414,25 @@
         ]
       }
     },
+    mounted () {
+      anime({
+        targets: '.members--list-item',
+        translateY: [48, 0],
+        opacity: [0, 1],
+        duration: 425,
+        delay: (el, i) => i * 50,
+        easing: "easeOutQuint"
+      })
+      anime({
+        targets: '.members--list',
+        translateY: [48, 0],
+        opacity: [0, 1],
+        duration: 425,
+        delay: (el, i) => i * 175,
+        easing: "easeOutQuint"
+      })
+    },
     methods: {
-      openTab (url) {
-        window.open(url)
-      },
       getSocial (id) {
         return this.socials.find(v => v.id === id)
       },
diff --git a/src/views/Home.vue b/src/views/Home.vue
index fb5d9074..4c19a4b1 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -69,32 +69,17 @@ export default {
         duration: 775,
         delay: (el, i) => i * 175,
         easing: "easeOutQuint"
-      })
+      });
       anime({
-        targets: ['.card-translate-up h1', '.card-translate-up h2'],
+        targets: ['.card-translate-up h1', '.card-translate-up h2', '.card-translate-up p', '.card-translate-up span'],
         translateY: [48, 0],
         opacity: [0, 1],
         duration: 775,
         delay: (el, i) => i * 75,
         easing: "easeOutQuint"
       })
-      anime({
-        targets: ['.card-translate-up p', '.card-translate-up span'],
-        translateY: [48, 0],
-        opacity: [0, 1],
-        duration: 775,
-        delay: (el, i) => i * 75,
-        easing: "easeOutQuint"
-      })
-
     }, 0)
-
   },
-  methods: {
-    goToPage(name) {
-      this.$router.push({ name: name })
-    }
-  }
 };
 </script>
 
diff --git a/src/views/Stats/Stage.vue b/src/views/Stats/Stage.vue
index 7bbc1fb6..8954d21f 100644
--- a/src/views/Stats/Stage.vue
+++ b/src/views/Stats/Stage.vue
@@ -107,26 +107,6 @@ export default {
     strings () {
       return strings
     }
-  },
-  mounted () {
-    anime({
-      targets: '.stage-selector--stage',
-      translateY: [48, 0],
-      opacity: [0, 1],
-      duration: 425,
-      delay: (el, i) => i * 225,
-      easing: "easeOutQuint"
-    })
-    // anime({
-    //   targets: '.v-expansion-panel span',
-    //   translateY: [48, 0],
-    //   opacity: [0, 1],
-    //   duration: 525,
-    //   delay: (el, i) => i * 0,
-    //   easing: "easeOutQuint"
-    // })
-
-
   },
   methods: {
     select({zone, stage}) {

From e19cf33a5f57438ac7af6906b4e1f9280d7a72cc Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Fri, 28 Feb 2020 21:27:28 -0500
Subject: [PATCH 13/45] improvement(logo): fixed logo display

---
 src/App.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 876a0ea0..d7cde83a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -193,6 +193,7 @@
                   :src="require('@/assets/logo.png')"
                   aspect-ratio="1"
                   height="32px"
+                  contain
                 />
               </template>
             </v-img>
@@ -384,7 +385,7 @@ export default {
     this.$store.dispatch("data/fetch", false)
   },
   created () {
-    this.randomizeLogo();
+    // this.randomizeLogo();
     this.onDarkChange(this.dark);
 
     if (this.language) {

From f68e16063c3ed2eeb42a350ced8a644b37ec17ff Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Fri, 28 Feb 2020 21:31:50 -0500
Subject: [PATCH 14/45] =?UTF-8?q?style(eslint):=20[=E2=97=8B=EF=BD=A5?=
 =?UTF-8?q?=EF=BD=80=D0=94=C2=B4=EF=BD=A5=20=E2=97=8B]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Stats/Stage.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/Stats/Stage.vue b/src/views/Stats/Stage.vue
index 8954d21f..c2e84c8b 100644
--- a/src/views/Stats/Stage.vue
+++ b/src/views/Stats/Stage.vue
@@ -71,7 +71,6 @@
   import get from "@/utils/getters";
   import DataSourceToggle from "@/components/stats/DataSourceToggle";
   import strings from "@/utils/strings";
-  import anime from "animejs";
 
 export default {
   name: "StatsByStage",

From 9b4dffc6ad256c6db36d7e17dbc7e768dbbd5059 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Fri, 28 Feb 2020 21:53:22 -0500
Subject: [PATCH 15/45] improvement(animation): improved animation for
 changelog and links

---
 src/views/About/Changelog.vue | 15 +++++++++++-
 src/views/About/Links.vue     | 14 +++++++++++-
 src/views/About/Members.vue   | 43 ++++++++++++++++-------------------
 3 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/src/views/About/Changelog.vue b/src/views/About/Changelog.vue
index c3b6bb9e..416cd29f 100644
--- a/src/views/About/Changelog.vue
+++ b/src/views/About/Changelog.vue
@@ -8,6 +8,7 @@
       :key="dateKey"
       right
       icon="mdi-book-variant"
+      class="changelog--item"
       fill-dot
     >
       <v-card
@@ -31,6 +32,8 @@
 </template>
 
 <script>
+import anime from "animejs";
+
 export default {
   name: 'Changelog',
   data() {
@@ -74,7 +77,17 @@ export default {
         ]
       }
     }
-  }
+  },
+  mounted () {
+    anime({
+      targets: '.changelog--item',
+      translateY: [48, 0],
+      opacity: [0, 1],
+      duration: 425,
+      delay: (el, i) => i * 50,
+      easing: "easeOutQuint"
+    });
+  },
 }
 </script>
 
diff --git a/src/views/About/Links.vue b/src/views/About/Links.vue
index 1c29be42..d469b700 100644
--- a/src/views/About/Links.vue
+++ b/src/views/About/Links.vue
@@ -159,6 +159,8 @@
 </template>
 
 <script>
+import anime from "animejs";
+
 export default {
   name: "Links",
   data() {
@@ -300,12 +302,22 @@ export default {
       ]
     };
   },
+  mounted () {
+    anime({
+      targets: '.link-card',
+      translateY: [48, 0],
+      opacity: [0, 1],
+      duration: 425,
+      delay: (el, i) => i * 50,
+      easing: "easeOutQuint"
+    });
+  },
   methods: {
     goToHref(link) {
       this.$ga.event('redirect', 'links', link.title, 1)
       window.open(link.url);
     }
-  }
+  },
 };
 </script>
 
diff --git a/src/views/About/Members.vue b/src/views/About/Members.vue
index 598403ad..966c9220 100644
--- a/src/views/About/Members.vue
+++ b/src/views/About/Members.vue
@@ -131,6 +131,7 @@
         :key="key"
         class="bkop-light mb-4 members--list"
         two-line
+        elevation="5"
       >
         <v-subheader :key="key">
           {{ $t('categories.' + key) }}
@@ -162,25 +163,19 @@
               align="center"
               justify="end"
             >
-              <v-tooltip
+              <v-btn
                 v-for="[id, url] in Object.entries(profile.socials)"
                 :key="`${profile.name}-${id}`"
-                bottom
+                icon
+                :href="url"
+                target="_blank"
+                :title="$t(`socials.${id}`)"
+                v-on="on"
               >
-                <template v-slot:activator="{ on }">
-                  <v-btn
-                    icon
-                    :href="url"
-                    target="_blank"
-                    v-on="on"
-                  >
-                    <v-icon>
-                      {{ getSocial(id).icon }}
-                    </v-icon>
-                  </v-btn>
-                </template>
-                <span>{{ $t(`socials.${id}`) }}</span>
-              </v-tooltip>
+                <v-icon>
+                  {{ getSocial(id).icon }}
+                </v-icon>
+              </v-btn>
             </v-row>
           </v-list-item-action>
         </v-list-item>
@@ -423,14 +418,14 @@
         delay: (el, i) => i * 50,
         easing: "easeOutQuint"
       })
-      anime({
-        targets: '.members--list',
-        translateY: [48, 0],
-        opacity: [0, 1],
-        duration: 425,
-        delay: (el, i) => i * 175,
-        easing: "easeOutQuint"
-      })
+      // anime({
+      //   targets: '.members--list',
+      //   translateY: [48, 0],
+      //   opacity: [0, 1],
+      //   duration: 425,
+      //   delay: (el, i) => i * 175,
+      //   easing: "easeOutQuint"
+      // })
     },
     methods: {
       getSocial (id) {

From bec2f42d470a4778fc8ec0e3241fe1d9487bb038 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sat, 29 Feb 2020 18:04:54 -0500
Subject: [PATCH 16/45] improvement(report): improved report view and URL,
 upgraded deps, remove redundancy code

---
 package.json                           | 12 ++---
 public/index.html                      |  6 +--
 public/manifest.json                   |  2 +-
 src/App.vue                            |  8 +--
 src/components/global/Item.vue         |  9 +++-
 src/components/global/ItemIcon.vue     |  2 +-
 src/components/global/ItemStepper.vue  |  1 +
 src/components/stats/DataTable.vue     |  3 ++
 src/components/stats/StageSelector.vue | 68 +++++++++++++++++---------
 src/models/items.js                    | 27 ----------
 src/views/Home.vue                     | 12 ++---
 src/views/NotFound.vue                 |  9 +---
 src/views/Report.vue                   | 46 +++++++++++------
 src/views/Stats/Item.vue               |  4 +-
 src/views/Stats/Stage.vue              | 14 ++++--
 yarn.lock                              | 65 +++++++++++++-----------
 16 files changed, 159 insertions(+), 129 deletions(-)

diff --git a/package.json b/package.json
index 85f16683..080646da 100644
--- a/package.json
+++ b/package.json
@@ -15,16 +15,16 @@
     "animejs": "^3.1.0",
     "aos": "^2.3.4",
     "core-js": "^2.6.5",
-    "dayjs": "^1.8.15",
+    "dayjs": "^1.8.21",
     "js-cookie": "^2.2.1",
     "plotly.js": "^1.49.2",
     "vue": "^2.6.10",
-    "vue-analytics": "^5.17.0",
+    "vue-analytics": "^5.22.1",
     "vue-i18n": "^8.0.0",
     "vue-router": "^3.0.3",
-    "vuetify": "^2.2.4",
+    "vuetify": "^2.2.15",
     "vuex": "^3.0.1",
-    "vuex-persistedstate": "^2.5.4"
+    "vuex-persistedstate": "^2.7.1"
   },
   "devDependencies": {
     "@kazupon/vue-i18n-loader": "^0.3.0",
@@ -44,8 +44,8 @@
     "sass-loader": "^8.0.2",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
-    "vue-cli-plugin-i18n": "^0.6.0",
-    "vue-cli-plugin-vuetify": "^2.0.3",
+    "vue-cli-plugin-i18n": "^0.6.1",
+    "vue-cli-plugin-vuetify": "^2.0.5",
     "vue-template-compiler": "^2.6.10",
     "vuetify-loader": "^1.4.3"
   },
diff --git a/public/index.html b/public/index.html
index 8863e91b..4f42d05c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,7 @@
   <link rel="manifest" href="/manifest.json">
   <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#905f6b">
   <meta name="msapplication-TileColor" content="#905f6b">
-  <meta name="theme-color" content="#303030">
+  <meta name="theme-color" content="#121212">
   <title>企鹅物流数据统计</title>
   <link rel="preconnect" href="https://penguin-stats.s3.ap-southeast-1.amazonaws.com">
   <style>#app, body, html {
@@ -23,7 +23,7 @@
   }
 
   body {
-    background: #303030
+    background: #121212
   }
 
   #loader-wrapper {
@@ -33,7 +33,7 @@
     width: 100%;
     height: 100%;
     z-index: 999999;
-    background: #303030;
+    background: #121212;
     background: linear-gradient(to top right, #294266 30%, #00608c);
   }
 
diff --git a/public/manifest.json b/public/manifest.json
index 525cc30a..a1e3f51c 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -16,5 +16,5 @@
     "start_url": "/?utm_source=pwa",
     "display": "standalone",
     "theme_color": "#2D66BA",
-    "background_color": "#303030"
+    "background_color": "#121212"
 }
diff --git a/src/App.vue b/src/App.vue
index d7cde83a..298d53cc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -412,9 +412,9 @@ export default {
     },
     onDarkChange (newValue) {
       if (newValue) {
-        document.body.style.backgroundColor = "#303030"
+        document.body.style.backgroundColor = "#121212"
       } else {
-        document.body.style.backgroundColor = "#fafafa"
+        document.body.style.backgroundColor = "#ffffff"
       }
     },
 
@@ -520,7 +520,7 @@ export default {
   }
 
   .theme--dark .bkop-light {
-    background: rgba(66, 66, 66, .85) !important;
+    background: rgba(46, 46, 46, .85) !important;
   }
 
   .theme--light .bkop-medium {
@@ -528,7 +528,7 @@ export default {
   }
 
   .theme--dark .bkop-medium {
-    background: rgba(66, 66, 66, .9) !important;
+    background: rgba(46, 46, 46, .9) !important;
   }
 
   .cursor-pointer {
diff --git a/src/components/global/Item.vue b/src/components/global/Item.vue
index ce1c301b..a4db4fff 100644
--- a/src/components/global/Item.vue
+++ b/src/components/global/Item.vue
@@ -1,8 +1,9 @@
 <template>
   <v-tooltip
     v-if="!disableTooltip"
+    transition="slide-y-transition"
     :open-delay="40"
-    :nudge-top="10"
+    :nudge-top="tooltipNudge"
 
     v-bind="calculatedTooltipPosition"
   >
@@ -62,6 +63,12 @@
           return "bottom";
         }
       },
+      tooltipNudge: {
+        type: Number,
+        default () {
+          return 10
+        }
+      },
       sticky: {
         type: String,
         default () {
diff --git a/src/components/global/ItemIcon.vue b/src/components/global/ItemIcon.vue
index 9e2543ee..742f668f 100644
--- a/src/components/global/ItemIcon.vue
+++ b/src/components/global/ItemIcon.vue
@@ -88,7 +88,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .item-icon--sprite {
   background-image: url("https://penguin-stats.s3.ap-southeast-1.amazonaws.com/item_sprite.png");
   background-repeat: no-repeat;
diff --git a/src/components/global/ItemStepper.vue b/src/components/global/ItemStepper.vue
index 816d45f4..56c94f96 100644
--- a/src/components/global/ItemStepper.vue
+++ b/src/components/global/ItemStepper.vue
@@ -37,6 +37,7 @@
             :ratio="1"
             disable-link
             tooltip-position="bottom"
+            :tooltip-nudge="0"
           />
         </div>
       </v-badge>
diff --git a/src/components/stats/DataTable.vue b/src/components/stats/DataTable.vue
index e657a66d..63f79e72 100644
--- a/src/components/stats/DataTable.vue
+++ b/src/components/stats/DataTable.vue
@@ -460,4 +460,7 @@
     position: absolute;
     z-index: 4
   }
+  .item-icon.item-icon--special {
+    position: absolute !important;
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/stats/StageSelector.vue b/src/components/stats/StageSelector.vue
index 8ac3d138..01df289d 100644
--- a/src/components/stats/StageSelector.vue
+++ b/src/components/stats/StageSelector.vue
@@ -107,10 +107,10 @@
   <v-stepper
     v-model="step"
     :alt-labels="!small"
-    class="px-2 transparent elevation-0 full-width"
+    class="pa-3 transparent elevation-0 full-width"
   >
     <v-stepper-header
-      class="bkop-light elevation-6"
+      class="bkop-light elevation-4"
       style="border-radius: 4px"
     >
       <v-stepper-step
@@ -219,7 +219,7 @@
                       :key="stage.stageId"
                       :stage="stage"
 
-                      @click.native="selectStage(zone.zoneId, stage.stageId)"
+                      @click.native="selectStage(zone.zoneId, stage.stageId, stage.code)"
                     />
                   </v-expansion-panel-content>
                 </v-expansion-panel>
@@ -232,6 +232,12 @@
         :step="2"
         class="pa-0 pt-2"
       >
+        <span
+          v-if="$vuetify.breakpoint.mdAndUp"
+          class="stage-id--background font-weight-black display-4 px-12 py-6"
+        >
+          {{ selectedStage.code || "" }}
+        </span>
         <slot />
       </v-stepper-content>
     </v-stepper-items>
@@ -312,28 +318,29 @@
         return this.$vuetify.breakpoint.xsOnly
       },
       categorizedZones() {
-        const categories = ["ACTIVITY_OPEN", "MAINLINE", "WEEKLY"];
-        !this.hideClosed ? categories.push("ACTIVITY_CLOSED") : null;
-        let result = [];
-        for (let category of categories) {
-          let filter = null;
-          let zones = get.zones.byType(category.startsWith("ACTIVITY") ? "ACTIVITY" : category);
-          if (category === "ACTIVITY_OPEN") {
-            filter = zone => !zone.isOutdated;
-          } else if (category === "ACTIVITY_CLOSED") {
-            filter = zone => zone.isOutdated;
-          }
-          if (filter) {
-            zones = zones.filter(filter);
-          }
-          if (zones && zones.length) {
-            result.push({
-              id: category,
-              zones: zones
-            })
+        const categoriesSet = [["ACTIVITY_OPEN", "MAINLINE"], ["WEEKLY"]];
+        if (!this.hideClosed) categoriesSet[1].push("ACTIVITY_CLOSED");
+        let result = [[], []];
+        for (let [index, categories] of categoriesSet.entries()) {
+          for (let category of categories) {
+            let filter = null;
+            let zones = get.zones.byType(category.startsWith("ACTIVITY") ? "ACTIVITY" : category);
+            if (category === "ACTIVITY_OPEN") {
+              filter = zone => !zone.isOutdated;
+            } else if (category === "ACTIVITY_CLOSED") {
+              filter = zone => zone.isOutdated;
+            }
+            if (filter) {
+              zones = zones.filter(filter);
+            }
+            if (zones && zones.length) {
+              result[index].push({
+                id: category,
+                zones: zones
+              })
+            }
           }
         }
-        result = [result.slice(0, -1), result.slice(-1)]
         return result;
       },
       selectedStage() {
@@ -388,4 +395,19 @@
   .full-width {
     width: 100%;
   }
+
+.stage-id--background {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  color: rgba(255, 255, 255, .075);
+  user-select: none;
+  z-index: 1;
+  letter-spacing: -.10em !important;
+  word-break: break-all;
+  overflow: hidden;
+}
+  .theme--light .stage-id--background {
+    color: rgba(0, 0, 0, .075);
+  }
 </style>
\ No newline at end of file
diff --git a/src/models/items.js b/src/models/items.js
index 4c10346f..3ad75d8f 100644
--- a/src/models/items.js
+++ b/src/models/items.js
@@ -6,33 +6,6 @@ const items = new ObjectManager({
   api: '/items?i18n=true',
   transform: [
     (object) => {
-      const META_MAP = {
-        CARD_EXP: {
-          name: "作战记录",
-          icon: "mdi-card-bulleted",
-          color: "light-blue"
-        },
-        MATERIAL: {
-          name: "材料",
-          icon: "mdi-cube-outline",
-          color: "lime"
-        },
-        FURN: {
-          name: "家具",
-          icon: "mdi-lamp",
-          color: "blue-grey"
-        },
-        ACTIVITY_ITEM: {
-          name: "活动道具",
-          icon: "mdi-treasure-chest",
-          color: "blue"
-        }
-      };
-
-      object.forEach(el => {
-        el.meta = META_MAP[el.itemType]
-      });
-
       object.sort((a, b) => a.sortId - b.sortId)
 
       return object
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 4c19a4b1..11abaa46 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -99,8 +99,8 @@ export default {
 .theme--light .animation-blink {
   background: repeating-linear-gradient(
       -45deg,
-      rgba(240, 240, 240, 0.95),
-      rgba(240, 240, 240, 0.95) 45px,
+      rgba(240, 240, 240, 0.98),
+      rgba(240, 240, 240, 0.98) 45px,
       rgba(255, 255, 255, 0.9) 45px,
       rgba(255, 255, 255, 0.9) 90px
   ) !important;
@@ -110,10 +110,10 @@ export default {
 .theme--dark .animation-blink {
   background: repeating-linear-gradient(
       -45deg,
-      rgba(81, 81, 81, 0.95),
-      rgba(81, 81, 81, 0.95) 45px,
-      rgba(66, 66, 66, 0.9) 45px,
-      rgba(66, 66, 66, 0.9) 90px
+      rgba(61, 61, 61, 0.98),
+      rgba(61, 61, 61, 0.98) 45px,
+      rgba(46, 46, 46, 0.9) 45px,
+      rgba(46, 46, 46, 0.9) 90px
   ) !important;
   animation: dark-blink 3s infinite alternate ease-in-out;
 }
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index f1f19b2b..2e226a91 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -4,7 +4,7 @@
     class="fill-height"
     fluid
     style="cursor: pointer; padding: 0;"
-    @click="redirect"
+    @click="$router.push({name: 'home'})"
   >
     <v-row
       align="center"
@@ -72,12 +72,7 @@ export default {
     small() {
       return this.$vuetify.breakpoint.smAndDown;
     }
-  },
-  methods: {
-    redirect() {
-      this.$router.push({name: "home"})
-    }
-  },
+  }
 };
 </script>
 
diff --git a/src/views/Report.vue b/src/views/Report.vue
index ec4744c4..0b821624 100644
--- a/src/views/Report.vue
+++ b/src/views/Report.vue
@@ -121,7 +121,7 @@
     fluid
   >
     <v-snackbar
-      v-model="showSubmittedSnackbar"
+      v-model="submitted"
       color="success"
       :timeout="0"
       bottom
@@ -185,12 +185,26 @@
       </v-btn>
     </v-snackbar>
 
-    <NewStageSelector
+    <StageSelector
       :name="$t('report.name')"
+      :router-names="routerNames"
+
       hide-closed
       @select="select"
     >
-      <v-card class="pa-2">
+      <v-card class="bkop-light pa-2">
+        <div class="ma-4">
+          <h2
+            class="overline d-block"
+            style="width: 100%"
+          >
+            {{ strings.translate(selectedZone, "zoneName") }}
+          </h2>
+          <h1 class="title pt-1 no-wrap--text">
+            {{ selectedStage.code }}
+          </h1>
+        </div>
+
         <v-alert
           color="orange darken-3"
           border="left"
@@ -238,7 +252,7 @@
           <span
             v-for="item in stage.drops"
             :key="item.itemId"
-            class="py-1 px-2 d-inline-block"
+            class="py-1 px-1 d-inline-block"
           >
             <!--                  <h5 class="title mb-4">-->
             <!--                    {{ item.name }}-->
@@ -284,7 +298,7 @@
           </v-row>
         </v-col>
       </v-card>
-    </NewStageSelector>
+    </StageSelector>
 
     <v-dialog
       v-model="dialogs.first.enabled"
@@ -464,11 +478,11 @@ import ItemStepper from "@/components/global/ItemStepper";
 import Vue from "vue";
 import Cookies from 'js-cookie';
 import strings from "@/utils/strings";
-import NewStageSelector from "@/components/stats/StageSelector";
+import StageSelector from "@/components/stats/StageSelector";
 
 export default {
   name: "Report",
-  components: { NewStageSelector, ItemStepper, Item },
+  components: { StageSelector, ItemStepper, Item },
   data: () => ({
     snackbar: false,
     submitting: false,
@@ -501,9 +515,17 @@ export default {
     strings() {
       return strings
     },
+    selectedZone () {
+      if (!this.selected.zone) return [];
+      return get.zones.byZoneId(this.selected.zone);
+    },
+    selectedStage () {
+      if (!this.selected.stage) return [];
+      return get.stages.byStageId(this.selected.stage);
+    },
     stageItems() {
       if (!this.selected.stage) return [];
-      let stages = get.stages.byStageId(this.selected.stage);
+      let stages = this.selectedStage;
       let items = [];
       const categories = [{
         i18n: "normal",
@@ -637,9 +659,6 @@ export default {
     },
     slashStripClasses() {
       return { 'slash-strip--warning': this.validation.rate <= 2, 'slash-strip--danger': this.validation.rate > 2 }
-    },
-    showSubmittedSnackbar() {
-      return this.submitted
     }
   },
   methods: {
@@ -647,12 +666,9 @@ export default {
       this.$router.push({ name: name })
     },
     select({ zone, stage }) {
+      this.reset();
       this.selected.zone = zone;
       this.selected.stage = stage;
-
-      if (!zone && !stage) {
-        this.reset();
-      }
     },
     getItem(itemId) {
       return get.items.byItemId(itemId)
diff --git a/src/views/Stats/Item.vue b/src/views/Stats/Item.vue
index 28054a25..82146b75 100644
--- a/src/views/Stats/Item.vue
+++ b/src/views/Stats/Item.vue
@@ -67,10 +67,10 @@
   <v-stepper
     v-model="step"
     :alt-labels="!$vuetify.breakpoint.xsOnly"
-    class="px-2 transparent elevation-0 full-width"
+    class="pa-3 transparent elevation-0 full-width"
   >
     <v-stepper-header
-      class="bkop-light elevation-6"
+      class="bkop-light elevation-4"
       style="border-radius: 4px"
     >
       <v-stepper-step
diff --git a/src/views/Stats/Stage.vue b/src/views/Stats/Stage.vue
index c2e84c8b..13fd664c 100644
--- a/src/views/Stats/Stage.vue
+++ b/src/views/Stats/Stage.vue
@@ -28,7 +28,7 @@
 </i18n>
 
 <template>
-  <NewStageSelector
+  <StageSelector
     :name="$t('stats.name')"
     :router-names="routerNames"
 
@@ -51,6 +51,12 @@
             {{ $t('stats.title', {stage: stage.code}) }}
           </h1>
           <v-spacer />
+          <v-btn
+            outlined
+            :to="{name: 'ReportByZone_Selected', params: {zoneId: selected.zone, stageId: selected.stage}}"
+          >
+            Report
+          </v-btn>
           <DataSourceToggle />
         </v-row>
       </v-card-title>
@@ -62,11 +68,11 @@
         class="px-3 px-sm-4 px-md-6 px-lg-6 px-xl-8 pt-0 pb-6"
       />
     </v-card>
-  </NewStageSelector>
+  </StageSelector>
 </template>
 
 <script>
-  import NewStageSelector from "@/components/stats/StageSelector";
+  import StageSelector from "@/components/stats/StageSelector";
   import DataTable from "@/components/stats/DataTable";
   import get from "@/utils/getters";
   import DataSourceToggle from "@/components/stats/DataSourceToggle";
@@ -74,7 +80,7 @@
 
 export default {
   name: "StatsByStage",
-  components: {DataSourceToggle, DataTable, NewStageSelector},
+  components: {DataSourceToggle, DataTable, StageSelector},
   data: () => ({
     expanded: {},
     selected: {
diff --git a/yarn.lock b/yarn.lock
index 80598244..0fa9b16e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3650,10 +3650,10 @@ datejs@^1.0.0-rc3:
   resolved "https://registry.yarnpkg.com/datejs/-/datejs-1.0.0-rc3.tgz#bffa1efedefeb41fdd8a242af55afa01fb58de57"
   integrity sha1-v/oe/t7+tB/diiQq9Vr6AftY3lc=
 
-dayjs@^1.8.15:
-  version "1.8.19"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.8.19.tgz#5117dc390d8f8e586d53891dbff3fa308f51abfe"
-  integrity sha512-7kqOoj3oQSmqbvtvGFLU5iYqies+SqUiEGNT0UtUPPxcPYgY1BrkXR0Cq2R9HYSimBXN+xHkEN4Hi399W+Ovlg==
+dayjs@^1.8.21:
+  version "1.8.21"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.8.21.tgz#98299185b72b9b679f31c7ed987b63923c961552"
+  integrity sha512-1kbWK0hziklUHkGgiKr7xm59KwAg/K3Tp7H/8X+f58DnNCwY3pKYjOCJpIlVs125FRBukGVZdKZojC073D0IeQ==
 
 de-indent@^1.0.2:
   version "1.0.2"
@@ -10324,6 +10324,11 @@ semver@^6.0.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^7.1.2:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.1.3.tgz#e4345ce73071c53f336445cfc19efb1c311df2a6"
+  integrity sha512-ekM0zfiA9SCBlsKa2X1hxyxiI4L3B6EbVJkkdgQXnSEEaHlGdvyodMruTiulSRWMMB4NeIuYNMC9rTKTz97GxA==
+
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -12035,15 +12040,15 @@ vt-pbf@^3.1.1:
     "@mapbox/vector-tile" "^1.3.1"
     pbf "^3.0.5"
 
-vue-analytics@^5.17.0:
-  version "5.21.1"
-  resolved "https://registry.yarnpkg.com/vue-analytics/-/vue-analytics-5.21.1.tgz#a430a99aa64076328021e13cea006a8e6dfec416"
-  integrity sha512-xh9uhZ6M/LEdqUpD7V4r92cGMcW3oL+DrSRdsWiiE8MBcag7Ix1Vki45p3mu7vsH+S4qUFnOWok4uj+o3QiWHQ==
+vue-analytics@^5.22.1:
+  version "5.22.1"
+  resolved "https://registry.yarnpkg.com/vue-analytics/-/vue-analytics-5.22.1.tgz#9d6b32da56daee1b9dfb23a267b50349a03f710f"
+  integrity sha512-HPKQMN7gfcUqS5SxoO0VxqLRRSPkG1H1FqglsHccz6BatBatNtm/Vyy8brApktZxNCfnAkrSVDpxg3/FNDeOgQ==
 
-vue-cli-plugin-i18n@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-0.6.0.tgz#8b15a5e817b6f55a05e411a565f7f3c5bb86c16b"
-  integrity sha512-tNF35Xjq5SnwN8VwbwIZaVKjYTRKU/Hg8tnx6ZrznI5OcFeYNXkmmazAyKTOFrxPHXxqspDOUqx/ougVLU04Lg==
+vue-cli-plugin-i18n@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-0.6.1.tgz#5b22fbaec6166ef2a34c8044d98ef5c8729e2e43"
+  integrity sha512-/2T/T47x8Aj3xLfrNYe5L1pzw+TnoDdKahcQflsPPjkXCuDss4rRVXVH0zzI3gpx2B1s9WW+yMYsg0JUlxgGEw==
   dependencies:
     debug "^3.1.0"
     deepmerge "^2.1.1"
@@ -12052,13 +12057,14 @@ vue-cli-plugin-i18n@^0.6.0:
     rimraf "^2.6.3"
     vue "^2.5.16"
     vue-i18n "^8.0.0"
-    vue-i18n-extract "^0.4.13"
+    vue-i18n-extract "^1.0.2"
 
-vue-cli-plugin-vuetify@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.3.tgz#a4bd1e7b92abadbd9cb64629fef8b139c9d3337b"
-  integrity sha512-bBQYE5lT5+gbR3Hvyy3/wMLHm+2yxKz+czgz3YK6T5Ykfva4ecK6OQZs0/XebT+YOPoy60qVEk9HYUvG8UFsTQ==
+vue-cli-plugin-vuetify@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.5.tgz#09ba78928653fc7e3801ea37e5120f957413dda4"
+  integrity sha512-jtxcidjLT5f1H9QLYKLFjo/ZG42ud4pI9bK3WNO5DXyhiMDMTwSZ7b3NcJVRH7tKYbv5/ty0VPdDGlf4w22AMA==
   dependencies:
+    semver "^7.1.2"
     shelljs "^0.8.3"
 
 vue-eslint-parser@^2.0.3:
@@ -12090,16 +12096,17 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
-vue-i18n-extract@^0.4.13:
-  version "0.4.14"
-  resolved "https://registry.yarnpkg.com/vue-i18n-extract/-/vue-i18n-extract-0.4.14.tgz#ed48137944b562fec67bca41a9dcaaee93909738"
-  integrity sha512-gfbhyOU+zo8/dg1kHudBGHTJx9cvS7bsO2G/3mvSjzb3jCIu/HSbBT/EFaJMbo3y82zODq9+ehZZyVj5UH2qNA==
+vue-i18n-extract@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/vue-i18n-extract/-/vue-i18n-extract-1.0.3.tgz#ed889343eddd6be0e3866f8d35f679283ae112ff"
+  integrity sha512-7lmLv6+MmiUh8oIZiFTucNNms2yEAEOZwPz6tH4eZ9F7N2jeu2uC1bExvfIq45CawC2hHy2gITNxYG6rzASUhw==
   dependencies:
     cli-table3 "^0.5.1"
     dot-object "^1.7.1"
     esm "^3.2.13"
     glob "^7.1.3"
     is-valid-glob "^1.0.0"
+    js-yaml "^3.13.1"
     yargs "^13.2.2"
 
 vue-i18n@^8.0.0:
@@ -12156,15 +12163,15 @@ vuetify-loader@^1.4.3:
   dependencies:
     loader-utils "^1.2.0"
 
-vuetify@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.2.4.tgz#3f82cb1694a306aac7c88bda815ad812df555bf9"
-  integrity sha512-jhSdCeatWgHrY4Bb2FTi1sFfGDrVHLmkvI7pkG9FEF9TmZ+Qq7Ts85XAft9ucwU8ybB5nDmN6s+oeHJgvL+4tA==
+vuetify@^2.2.15:
+  version "2.2.15"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.2.15.tgz#03466acb6b9afcba056abef3a6278d396cae18ff"
+  integrity sha512-okz+Q7YfCkLLJsxdldlYWUHcbRX/G+fo/0zSS3rXU+Ir76sxZzIOkSsqox1exFWQJn1PqA0itiHR0QTWygv8VA==
 
-vuex-persistedstate@^2.5.4:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/vuex-persistedstate/-/vuex-persistedstate-2.7.0.tgz#f60aae4e1163bf293696a625526dbffaa42e429e"
-  integrity sha512-mpko65DUMBY4mF4sSGsgrqjE7fwO373LFZeuNrC55glRuBBAK4dkgzjr4j4Bij7WtMoKuo2t2w0NGenjauISaQ==
+vuex-persistedstate@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/vuex-persistedstate/-/vuex-persistedstate-2.7.1.tgz#25ced829ea5789a2ed7d71a1ba057eb01a5235ad"
+  integrity sha512-Ktvp6Bt6ApYj35MuxTClu+9Lpukcgl3Z/0o4PU12+Z4jU6lyOMzos0k6zGT5xrukAkGM1VV3EYNwz1TnHPhgFA==
   dependencies:
     deepmerge "^4.2.2"
     shvl "^2.0.0"

From 89b3c87c2cb291683f8e7095c319e96a9d3428fc Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sat, 29 Feb 2020 18:19:56 -0500
Subject: [PATCH 17/45] fix(members): fix v-on not defined

---
 src/App.vue                 | 2 ++
 src/views/About/Members.vue | 1 -
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 298d53cc..e14b7027 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -118,6 +118,8 @@
               bottom
               left
               open-on-hover
+              :close-on-content-click="false"
+              :close-on-click="false"
               transition="slide-y-transition"
             >
               <template v-slot:activator="{ on }">
diff --git a/src/views/About/Members.vue b/src/views/About/Members.vue
index 966c9220..0d430df0 100644
--- a/src/views/About/Members.vue
+++ b/src/views/About/Members.vue
@@ -170,7 +170,6 @@
                 :href="url"
                 target="_blank"
                 :title="$t(`socials.${id}`)"
-                v-on="on"
               >
                 <v-icon>
                   {{ getSocial(id).icon }}

From af0225c12135284072489bf90d62dad405e4a0be Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sat, 29 Feb 2020 21:37:10 -0500
Subject: [PATCH 18/45] improvement(report): added redirection between
 statistics and report

---
 src/App.vue                 |  6 +--
 src/locales/en.json         |  4 +-
 src/main.js                 |  8 ++++
 src/models/items.js         |  5 ++-
 src/views/About/Contact.vue |  5 +--
 src/views/About/Donate.vue  | 12 +++---
 src/views/About/Members.vue |  4 +-
 src/views/Report.vue        | 84 ++++++++++++++++++++++++++++++++-----
 src/views/Stats/Item.vue    | 24 +++++------
 src/views/Stats/Stage.vue   | 15 ++++++-
 10 files changed, 124 insertions(+), 43 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e14b7027..619d3820 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -118,8 +118,6 @@
               bottom
               left
               open-on-hover
-              :close-on-content-click="false"
-              :close-on-click="false"
               transition="slide-y-transition"
             >
               <template v-slot:activator="{ on }">
@@ -472,10 +470,10 @@ export default {
 
 <style>
   .slide-fade-enter-active {
-    transition: all .225s cubic-bezier(0.165, 0.84, 0.44, 1);
+    transition: all .175s cubic-bezier(0.165, 0.84, 0.44, 1);
   }
   .slide-fade-leave-active {
-    transition: all .125s cubic-bezier(0.165, 0.84, 0.44, 1);
+    transition: all .075s cubic-bezier(0.165, 0.84, 0.44, 1);
   }
   .slide-fade-enter, .slide-fade-leave-to
     /* .slide-fade-leave-active for below version 2.1.8 */ {
diff --git a/src/locales/en.json b/src/locales/en.json
index a5c8b18b..24fcc58c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -9,8 +9,8 @@
     "report": "Drop Report",
     "stats": {
       "_name": "Statistics",
-      "stage": "by stage",
-      "item": "by item"
+      "stage": "By stage",
+      "item": "By item"
     },
     "about": {
       "_name": "About Penguin Statistics",
diff --git a/src/main.js b/src/main.js
index e0d2fe03..54cd3d15 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,6 +29,14 @@ if (production) {
     // More info at: https://docs.sentry.io/platforms/javascript/vue/
     logErrors: false,
     release: 'frontend-v2@' + (config.version || 'unknown'),
+    beforeSend(event, hint) {
+      if (!(event.exception.values
+        && event.exception.values[0]
+        && event.exception.values[0].type
+        && event.exception.values[0].type === "NavigationDuplicated")) {
+        return event, hint;
+      }
+    }
   });
 }
 
diff --git a/src/models/items.js b/src/models/items.js
index 3ad75d8f..8edcf6e5 100644
--- a/src/models/items.js
+++ b/src/models/items.js
@@ -6,9 +6,10 @@ const items = new ObjectManager({
   api: '/items?i18n=true',
   transform: [
     (object) => {
-      object.sort((a, b) => a.sortId - b.sortId)
+      let filtered = object.filter(el => !el.hide);
+      filtered = filtered.sort((a, b) => a.sortId - b.sortId);
 
-      return object
+      return filtered
     },
   ],
   ttl: 1000 * 60 * 60, // 1 hours
diff --git a/src/views/About/Contact.vue b/src/views/About/Contact.vue
index 9f920815..376a8b5e 100644
--- a/src/views/About/Contact.vue
+++ b/src/views/About/Contact.vue
@@ -7,7 +7,7 @@
         "contributor": "团队成员页面",
         "contact_1": "页面内的各种联系方式",
         "github": "Github Issues",
-        "nga": "NGA讨论帖"
+        "nga": "NGA 讨论帖"
       }
     },
     "en": {
@@ -26,7 +26,7 @@
         "contact_2": "ご質問、ご要望などございましたら、管理人さんにお気軽にお問い合わせください。（日本語でもOKです）",
         "contributor": "制作協力者ページ",
         "github": "Github Issues",
-        "nga": "NGAスレッド"
+        "nga": "NGA スレッド"
       }
     },
     "ko": {
@@ -58,7 +58,6 @@
         color="secondary"
         text-color="white"
         :to="{name: 'AboutMembers'}"
-        target="_blank"
       >
         {{ $t('contact.contributor') }}
         <v-icon
diff --git a/src/views/About/Donate.vue b/src/views/About/Donate.vue
index 34346b46..924ce288 100644
--- a/src/views/About/Donate.vue
+++ b/src/views/About/Donate.vue
@@ -7,11 +7,11 @@
         "donate_2": "服务器费用",
         "donate_3": "pocky、阿噗噜派也可",
         "donate_4": "，我们将不胜感激!",
-        "redirectToApp": "打开“{app}” APP 捐助",
+        "redirectToApp": "打开 “{app}” APP 捐助",
         "methods": {
           "alipay": "支付宝",
           "wechatPay": "微信支付",
-          "paypal": "使用PayPal捐助"
+          "paypal": "使用 PayPal 捐助"
         }
       }
     },
@@ -37,11 +37,11 @@
         "donate_2": "運営費用",
         "donate_3": "ポッキーやアップルパイでも可",
         "donate_4": "を寄付頂けると非常にありがたいです。",
-        "redirectToApp": "{app}アプリで寄付します",
+        "redirectToApp": "{app} アプリで寄付します",
         "methods": {
           "alipay": "Alipay",
           "wechatPay": "WeChat Pay",
-          "paypal": "PayPalで寄付"
+          "paypal": "PayPal で寄付"
         }
       }
     },
@@ -52,11 +52,11 @@
         "donate_2": "서버비",
         "donate_3": "빼빼로나 애플파이도 환영합니다!",
         "donate_4": "를 기부해 줄 수 있다면, 우리는 매우 감사할 것입니다!",
-        "redirectToApp": "{app}로 기부하기",
+        "redirectToApp": "{app} 로 기부하기",
         "methods": {
           "alipay": "Alipay",
           "wechatPay": "WeChat Pay",
-          "paypal": "PayPal로 기부하기"
+          "paypal": "PayPal 로 기부하기"
         }
       }
     }
diff --git a/src/views/About/Members.vue b/src/views/About/Members.vue
index 0d430df0..9d024d79 100644
--- a/src/views/About/Members.vue
+++ b/src/views/About/Members.vue
@@ -413,8 +413,8 @@
         targets: '.members--list-item',
         translateY: [48, 0],
         opacity: [0, 1],
-        duration: 425,
-        delay: (el, i) => i * 50,
+        duration: 775,
+        delay: (el, i) => i * 75,
         easing: "easeOutQuint"
       })
       // anime({
diff --git a/src/views/Report.vue b/src/views/Report.vue
index 0b821624..81b4a8af 100644
--- a/src/views/Report.vue
+++ b/src/views/Report.vue
@@ -16,7 +16,8 @@
         "undo": "撤销",
         "undoSuccess": "撤销成功",
         "unable": "无法提交：",
-        "clear": "清空"
+        "clear": "清空",
+        "expired": "此活动关卡已过期，汇报已关闭"
       },
       "rules": {
         "rule_1": "这是单次作战的提交，请注意核对数目；",
@@ -44,7 +45,8 @@
         "undo": "Recall",
         "undoSuccess": "Successfully recalled submission",
         "clear": "Clear",
-        "unable": "Failed to submit: "
+        "unable": "Failed to submit: ",
+        "expired": "This activity has ended, thus the report function of this stage has been closed."
       },
       "rules": {
         "rule_1": "This is only intended for reporting a single combat, please double-check your inputting.",
@@ -193,17 +195,55 @@
       @select="select"
     >
       <v-card class="bkop-light pa-2">
-        <div class="ma-4">
-          <h2
-            class="overline d-block"
-            style="width: 100%"
+        <v-overlay
+          :opacity="0.75"
+          absolute
+          :value="invalidPath"
+          :class="{'slash-strip--warning-transparent': invalidPath}"
+        >
+          <v-row
+            align="center"
+            justify="center"
+            class="fill-height text-center mx-3"
           >
-            {{ strings.translate(selectedZone, "zoneName") }}
-          </h2>
-          <h1 class="title pt-1 no-wrap--text">
+            <v-icon
+              large
+              class="d-block mb-3"
+              style="width: 100%"
+            >
+              mdi-cancel
+            </v-icon>
+            <span class="title">
+              {{ $t('report.expired') }}
+            </span>
+          </v-row>
+        </v-overlay>
+
+        <v-row
+          class="ma-4"
+          align="start"
+        >
+          <h1 class="title no-wrap--text">
+            <span class="overline">{{ strings.translate(selectedZone, "zoneName") }}</span>
             {{ selectedStage.code }}
           </h1>
-        </div>
+          <v-spacer />
+          <v-btn
+            depressed
+            color="primary"
+            small
+            class="mx-2"
+            :to="{name: 'StatsByStage_Selected', params: {zoneId: selected.zone, stageId: selected.stage}}"
+          >
+            <v-icon
+              left
+              small
+            >
+              mdi-chart-pie
+            </v-icon>
+            {{ $t('menu.stats._name') }}
+          </v-btn>
+        </v-row>
 
         <v-alert
           color="orange darken-3"
@@ -484,6 +524,7 @@ export default {
   name: "Report",
   components: { StageSelector, ItemStepper, Item },
   data: () => ({
+    invalidPath: false,
     snackbar: false,
     submitting: false,
     undoing: false,
@@ -661,7 +702,19 @@ export default {
       return { 'slash-strip--warning': this.validation.rate <= 2, 'slash-strip--danger': this.validation.rate > 2 }
     }
   },
+  created () {
+    this.validateZone(this.$route.params.zoneId)
+  },
   methods: {
+    validateZone (zoneId) {
+      if (zoneId) {
+        const got = get.zones.byZoneId(zoneId);
+        if (got.isOutdated) {
+          return this.invalidPath = true;
+        }
+      }
+      return this.invalidPath = false;
+    },
     goToPage(name) {
       this.$router.push({ name: name })
     },
@@ -669,6 +722,7 @@ export default {
       this.reset();
       this.selected.zone = zone;
       this.selected.stage = stage;
+      this.validateZone(zone);
     },
     getItem(itemId) {
       return get.items.byItemId(itemId)
@@ -802,6 +856,16 @@ export default {
   );
 }
 
+.slash-strip--warning-transparent {
+  background: repeating-linear-gradient(
+      -45deg,
+      rgba(237, 144, 53, 0.5),
+      rgba(237, 144, 53, 0.5) 45px,
+      rgba(0, 0, 0, 0.5) 45px,
+      rgba(0, 0, 0, 0.5) 90px
+  );
+}
+
 .slash-strip--danger {
   background: repeating-linear-gradient(
     -45deg,
diff --git a/src/views/Stats/Item.vue b/src/views/Stats/Item.vue
index 82146b75..254eefcf 100644
--- a/src/views/Stats/Item.vue
+++ b/src/views/Stats/Item.vue
@@ -310,18 +310,18 @@ export default {
       (this.step += 1);
   },
   methods: {
-    getStageItemTrendInterval(stageId) {
-      let trend = this.getStageItemTrend(stageId);
-      return trend && trend.interval;
-    },
-    getStageItemTrendStartTime(stageId) {
-      let trend = this.getStageItemTrend(stageId);
-      return trend && trend.startTime;
-    },
-    getStageItemTrendResults(stageId) {
-      let trend = this.getStageItemTrend(stageId);
-      return trend && trend.results;
-    },
+    // getStageItemTrendInterval(stageId) {
+    //   let trend = this.getStageItemTrend(stageId);
+    //   return trend && trend.interval;
+    // },
+    // getStageItemTrendStartTime(stageId) {
+    //   let trend = this.getStageItemTrend(stageId);
+    //   return trend && trend.startTime;
+    // },
+    // getStageItemTrendResults(stageId) {
+    //   let trend = this.getStageItemTrend(stageId);
+    //   return trend && trend.results;
+    // },
     getStageItemTrend(stageId) {
       return this.currentItemTrends && this.currentItemTrends[stageId];
     },
diff --git a/src/views/Stats/Stage.vue b/src/views/Stats/Stage.vue
index 13fd664c..c6a9f802 100644
--- a/src/views/Stats/Stage.vue
+++ b/src/views/Stats/Stage.vue
@@ -52,10 +52,21 @@
           </h1>
           <v-spacer />
           <v-btn
-            outlined
+            v-if="!zone.isOutdated"
+            depressed
+            color="primary"
+            small
+            class="mx-2"
+            style="transform: translateY(2px);"
             :to="{name: 'ReportByZone_Selected', params: {zoneId: selected.zone, stageId: selected.stage}}"
           >
-            Report
+            <v-icon
+              left
+              small
+            >
+              mdi-upload
+            </v-icon>
+            {{ $t('menu.report') }}
           </v-btn>
           <DataSourceToggle />
         </v-row>

From 909bd3edb9efab566bd902dbf4e0ba4d700c51ee Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sat, 29 Feb 2020 22:06:31 -0500
Subject: [PATCH 19/45] improvement(links): improved link page design

---
 src/components/stats/StageSelector.vue | 6 ++++--
 src/views/About/Links.vue              | 2 ++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/stats/StageSelector.vue b/src/components/stats/StageSelector.vue
index 01df289d..c792d026 100644
--- a/src/components/stats/StageSelector.vue
+++ b/src/components/stats/StageSelector.vue
@@ -161,7 +161,9 @@
               :key="category.id"
             >
               <v-subheader>
-                <v-icon class="mr-2">
+                <v-icon
+                  class="mr-2"
+                >
                   {{ category.zones[0].icon }}
                 </v-icon>
                 <span>
@@ -233,7 +235,7 @@
         class="pa-0 pt-2"
       >
         <span
-          v-if="$vuetify.breakpoint.mdAndUp"
+          v-if="$vuetify.breakpoint.smAndUp"
           class="stage-id--background font-weight-black display-4 px-12 py-6"
         >
           {{ selectedStage.code || "" }}
diff --git a/src/views/About/Links.vue b/src/views/About/Links.vue
index d469b700..2f2f1581 100644
--- a/src/views/About/Links.vue
+++ b/src/views/About/Links.vue
@@ -128,6 +128,7 @@
             {{ $t(`links.tags.${feature.name}`) }}
           </v-chip>
         </v-card-title>
+
         <div
           v-if="link.url"
           class="px-4 pt-2 pb-4"
@@ -146,6 +147,7 @@
               <v-icon
                 left
                 small
+                style="transform: rotate(-45deg)"
               >
                 mdi-link
               </v-icon>

From a4a5447237706dbdb74df70b113c987cf11d218f Mon Sep 17 00:00:00 2001
From: AlvISsReimu <alvissreimu@gmail.com>
Date: Sun, 1 Mar 2020 17:15:00 +0900
Subject: [PATCH 20/45] fix(i18n): fix some translations

---
 public/index.html                         |  6 +++---
 src/assets/preloader_i18n.js              |  6 +++---
 src/components/stats/DataSourceToggle.vue |  8 ++++----
 src/components/stats/DataTable.vue        |  5 ++++-
 src/components/stats/StageSelector.vue    | 10 +++++-----
 src/components/toolbar/AccountManager.vue | 18 +++++++++---------
 src/locales/en.json                       |  2 +-
 src/locales/ja.json                       | 10 +++++-----
 src/locales/ko.json                       | 12 ++++++------
 src/views/About/Bulletin.vue              | 14 ++++++++++----
 src/views/About/Intro.vue                 |  2 +-
 src/views/About/Members.vue               |  4 ++--
 src/views/Report.vue                      |  2 +-
 13 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/public/index.html b/public/index.html
index 43de3f8e..59f2f015 100644
--- a/public/index.html
+++ b/public/index.html
@@ -354,12 +354,12 @@
       },
       "ja": {
         "load_title--text": "読み込み中...",
-        "load_caption--text": "読み込みが初めて遅くなる場合があります<br>しばらくお待ちください",
+        "load_caption--text": "初めての読み込みは動作が遅くなる可能性があります<br>少々お待ち下さい",
         "load_copyright--text": "ペンギン急便データ統計処理部門"
       },
       "ko": {
-        "load_title--text": "로딩...",
-        "load_caption--text": "처음으로 로딩이 느려질 수 있으므로 잠시 기다려주십시오",
+        "load_title--text": "로딩중...",
+        "load_caption--text": "초기 설정에 시간이 좀 걸릴 수 있으니, 기다려 주시기 바랍니다",
         "load_copyright--text": "펭귄 물류 데이터 분석 부서"
       }
     },
diff --git a/src/assets/preloader_i18n.js b/src/assets/preloader_i18n.js
index 62a487e8..1e022373 100644
--- a/src/assets/preloader_i18n.js
+++ b/src/assets/preloader_i18n.js
@@ -60,12 +60,12 @@ let _i18n = {
     },
     "ja": {
       "load_title--text": "読み込み中...",
-      "load_caption--text": "読み込みが初めて遅くなる場合があります<br>しばらくお待ちください",
+      "load_caption--text": "初めての読み込みは動作が遅くなる可能性があります<br>少々お待ち下さい",
       "load_copyright--text": "ペンギン急便データ統計処理部門"
     },
     "ko": {
-      "load_title--text": "로딩...",
-      "load_caption--text": "처음으로 로딩이 느려질 수 있으므로 잠시 기다려주십시오",
+      "load_title--text": "로딩중...",
+      "load_caption--text": "초기 설정에 시간이 좀 걸릴 수 있으니, 기다려 주시기 바랍니다",
       "load_copyright--text": "펭귄 물류 데이터 분석 부서"
     },
   },
diff --git a/src/components/stats/DataSourceToggle.vue b/src/components/stats/DataSourceToggle.vue
index a6553732..818b8d03 100644
--- a/src/components/stats/DataSourceToggle.vue
+++ b/src/components/stats/DataSourceToggle.vue
@@ -26,10 +26,10 @@
     },
     "ko": {
       "dataSourceToggle": {
-        "title": "Login Required",
-        "loginNotice": "Please log in before viewing personal drop data.",
-        "all": "All",
-        "personal": "Personal"
+        "title": "로그인 필요",
+        "loginNotice": "개인 보고서를 보려면 로그인하여 주십시오.",
+        "all": "전체",
+        "personal": "개인"
       }
     }
   }
diff --git a/src/components/stats/DataTable.vue b/src/components/stats/DataTable.vue
index 2be95dae..49ec07a4 100644
--- a/src/components/stats/DataTable.vue
+++ b/src/components/stats/DataTable.vue
@@ -7,7 +7,10 @@
       "scroll": "Scroll to view details"
     },
     "ja": {
-      "scroll": "Scroll to view details"
+      "scroll": "左右にスクロールでデータを表示"
+    },
+    "ko": {
+      "scroll": "스크롤로 세부 사항을 볼 수 있습니다"
     }
   }
 </i18n>
diff --git a/src/components/stats/StageSelector.vue b/src/components/stats/StageSelector.vue
index 8ac3d138..2e19b182 100644
--- a/src/components/stats/StageSelector.vue
+++ b/src/components/stats/StageSelector.vue
@@ -76,14 +76,14 @@
       }
     },
     "ko": {
-      "opensAt": "Opens at: {0} - {1}",
+      "opensAt": "이벤트 기간: {0} - {1}",
       "zone": {
         "name": "에피소드",
         "types": {
-          "MAINLINE": "메인",
+          "MAINLINE": "메인 스토리",
           "WEEKLY": "물자 비축",
-          "ACTIVITY_OPEN": "Event (Opening)",
-          "ACTIVITY_CLOSED": "Event (Closed)"
+          "ACTIVITY_OPEN": "이벤트 (개방중)",
+          "ACTIVITY_CLOSED": "이벤트 (종료)"
         },
         "status": {
           "closed": "Closed",
@@ -92,7 +92,7 @@
       },
       "stage": {
         "name": "작전지역",
-        "apCost": "{apCost} AP required",
+        "apCost": "{apCost} 이성 필요",
         "loots": {
           "normal": "일반 드랍",
           "extra": "추가 드랍",
diff --git a/src/components/toolbar/AccountManager.vue b/src/components/toolbar/AccountManager.vue
index a07366ab..c74d1c16 100644
--- a/src/components/toolbar/AccountManager.vue
+++ b/src/components/toolbar/AccountManager.vue
@@ -40,17 +40,17 @@
       "userId": "ユーザーID"
     },
     "ko": {
-      "notice": "The User ID helps us identifies your upload identity. Inputting this ID on other devices enable you to manage and inspect your uploads with ease.",
-      "success": "Successfully logged in",
+      "notice": "사용자 ID는 당신의 보고서를 확인하는데 사용됩니다. 이 ID를 다른 기기에 입력하면 편리하게 보고서를 관리하고 검사할 수 있습니다.",
+      "success": "성공적으로 로그인 되었습니다.",
       "failed": {
-        "message": "Failed to log in: {message}",
-        "notfound": "The specified User ID could not been found"
+        "message": "로그인에 실패했습니다: {message}",
+        "notfound": "지정된 사용자 ID를 찾을 수 없습니다"
       },
-      "login": "Login",
-      "logout": "Logout",
-      "logoutPrompt": "Are you sure?",
-      "loggedOut": "Logged out",
-      "userId": "User ID"
+      "login": "로그인",
+      "logout": "로그아웃",
+      "logoutPrompt": "정말로 로그아웃 하시겠습니까?",
+      "loggedOut": "로그아웃 되었습니다",
+      "userId": "사용자 ID"
     }
   }
 </i18n>
diff --git a/src/locales/en.json b/src/locales/en.json
index a5c8b18b..eea36979 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -36,7 +36,7 @@
     "footer": {
       "copyright": {
         "title": "License",
-        "content": "Data was collected by Penguin Delivery, licensed under a Creative Commons Attribution-NonCommercial 4.0 International License. In case of redistribution and transformation towards the material, you must give appropriate credit, provide a link to the license, indicate if changes were made, and may not use the material for commercial purposes."
+        "content": "Data was collected by Penguin Statistics, licensed under a Creative Commons Attribution-NonCommercial 4.0 International License. In case of redistribution and transformation towards the material, you must give appropriate credit, provide a link to the license, indicate if changes were made, and may not use the material for commercial purposes."
       },
       "credit": "Penguin Statistics | {date}"
     },
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 5622c407..8395b39b 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -45,7 +45,7 @@
   "stats": {
     "headers": {
       "stage": "ステージ",
-      "apCost": "消費理性",
+      "apCost": "理性",
       "item": "アイテム",
       "times": "サンプル数",
       "quantity": "ドロップ数",
@@ -120,12 +120,12 @@
       "item": {
         "_name": "アイテム数量",
         "now": "選択された {item} ×{quantity}",
-        "gte": "\"{item}\" should ≥{quantity}",
-        "lte": "\"{item}\" should ≤{quantity}",
-        "not": "\"{item}\" should ≠{quantity}"
+        "gte": "入力をした“{item}”の数がこのステージのドロップ最大数である {quantity} 個以上に設定されています",
+        "lte": "“{item}”の数を　{quantity}　個以下の数値で再入力して下さい",
+        "not": "“{item}”はこのステージでは1回のドロップ数が {quantity} 個になることはありません"
       },
       "type": {
-        "_name": "アイテム",
+        "_name": "アイテム種類数",
         "now": "選択されたアイテムは {quantity} 種類です",
         "gte": "最少 {quantity} 種類のアイテムが必要です",
         "lte": "最大 {quantity} 種類のアイテムが必要です",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index a0aae7b2..af2fa31b 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -1,11 +1,11 @@
 {
   "app": {
     "name": "펭귄 물류 데이터 분석 부서",
-    "name_line1": "펭귄 물류 데이터 분석 부서",
-    "name_line2": ""
+    "name_line1": "펭귄 물류",
+    "name_line2": "데이터 분석 부서"
   },
   "menu": {
-    "home": "톱 페이지",
+    "home": "홈",
     "report": "보고서 작성",
     "stats": {
       "_name": "통계",
@@ -24,10 +24,10 @@
     },
     "planner": "명일방주 계획기",
     "changelog": "변경 로그",
-    "v1": "구 버전 방문하기",
+    "v1": "구 버전 방문",
     "refreshData": "데이터 새로고침",
     "invertColors": "페이지 테마 변경",
-    "languages": "언어 전환"
+    "languages": "언어 변경"
   },
   "meta": {
     "details": "세부 사항",
@@ -36,7 +36,7 @@
     "footer": {
       "copyright": {
         "title": "라이센스",
-        "content": "Data was collected by Penguin Delivery, licensed under a Creative Commons Attribution-NonCommercial 4.0 International License. In case of redistribution and transformation towards the material, you must give appropriate credit, provide a link to the license, indicate if changes were made, and may not use the material for commercial purposes."
+        "content": "데이터는 펭귄 물류 데이터 분석 부서에 의하여 수집되었으며, 크리에이티브 커먼즈 저작자표시-비영리 4.0 국제 라이센스를 따릅니다. 재배포 혹은 변경시 적절한 출처와 라이센스 링크를 제공하여야 하며, 상업적 용도로 사용할 수 없습니다."
       },
       "credit": "펭귄 물류 데이터 분석 부서 | {date}"
     },
diff --git a/src/views/About/Bulletin.vue b/src/views/About/Bulletin.vue
index 524dc834..8f1607b3 100644
--- a/src/views/About/Bulletin.vue
+++ b/src/views/About/Bulletin.vue
@@ -3,25 +3,29 @@
     "zh": {
       "bulletin": {
         "bulletin_0": "1月16日海外版正式上线，为了避免数据混淆，请只上传国服的掉落。",
-        "bulletin_1": "专用于海外版的素材统计站是否开放正在计划中。"
+        "bulletin_1": "专用于海外版的素材统计站是否开放正在计划中。",
+        "bulletin_2": "全站翻译已经完成，感谢Syaro和方舟航海図的帮助！"
       }
     },
     "en": {
       "bulletin": {
         "bulletin_0": "Arknights EN server was officially released on 1/16. In order not to mess up the data, please only submit drop data from CN server.",
-        "bulletin_1": "We are considering whether to open another website for overseas servers."
+        "bulletin_1": "We are considering whether to open another website for overseas servers.",
+        "bulletin_2": "The translation of the entire website has been finished. Thanks Syaro and 方舟航海図 for their efforts!"
       }
     },
     "ja": {
       "bulletin": {
         "bulletin_0": "1月16日に海外版が正式にリリースされます。データの混雑を避けるために、当サイトでは大陸版のドロップデータのみをアップロードして下さい。",
-        "bulletin_1": "海外版のドロップまとめサイトを開設するかは現時点では思案中のみとなっています。"
+        "bulletin_1": "海外版のドロップまとめサイトを開設するかは現時点では思案中のみとなっています。",
+        "bulletin_2": "Webサイトの翻訳は全て完了しました。Syaroと方舟航海図のご協力に感謝します！"
       }
     },
     "ko": {
       "bulletin": {
         "bulletin_0": "명일방주 해외서버가 1/16일에 오픈하였습니다. 데이터의 혼란을 방지하기 위해, 중국 서버의 보고서만 작성하여 주십시오.",
-        "bulletin_1": "저희는 해외서버를 위한 웹 사이트 개설을 검토하고 있습니다."
+        "bulletin_1": "저희는 해외서버를 위한 웹 사이트 개설을 검토하고 있습니다.",
+        "bulletin_2": "웹 사이트 전체의 번역이 끝났습니다. Syaro님과 方舟航海図님의 노력에 감사드립니다!"
       }
     }
   }
@@ -44,6 +48,8 @@
         <span>{{ $t('bulletin.bulletin_0') }}</span>
         <br>
         <span>{{ $t('bulletin.bulletin_1') }}</span>
+        <br>
+        <span>{{ $t('bulletin.bulletin_2') }}</span>
       </v-col>
     </v-row>
   </v-card>
diff --git a/src/views/About/Intro.vue b/src/views/About/Intro.vue
index 4f3f8b3c..e9ab473e 100644
--- a/src/views/About/Intro.vue
+++ b/src/views/About/Intro.vue
@@ -25,7 +25,7 @@
       "intro": {
         "intro_0": "펭귄 물류 데이터 분석 부서에 오신것을 환영합니다!",
         "intro_1": "저희는 펭귄 물류의 데이터 분석 부서입니다. 저희는 아이템 드랍에 대한 분석을 맡고 있습니다.",
-        "intro_2": "대부분의 드랍 데이터는 박사들에 의해 수동으로 제출되었으며, 저희 부서는 잘못된 보고서나 잘못된 결과를 방지하기 위해 전체적인 데이터 검사를 실시하고 있습니다."
+        "intro_2": "대부분의 데이터는 박사들에 의해 수동으로 제출되었으며, 저희 부서는 잘못된 보고서나 잘못된 결과를 방지하기 위해 전체적인 데이터 검사를 실시하고 있습니다."
       }
     }
   }
diff --git a/src/views/About/Members.vue b/src/views/About/Members.vue
index 3ab9ab5e..fbb98021 100644
--- a/src/views/About/Members.vue
+++ b/src/views/About/Members.vue
@@ -351,11 +351,11 @@
           ],
           translators: [
             {
-              name: "シャロ",
+              name: "Syaro",
               responsibility: [
                 r.localization.ko
               ],
-              avatar: "syaro.jpeg",
+              avatar: "syaro.png",
               socials: {
                 twitter: "https://twitter.com/StarNight_ko"
               }
diff --git a/src/views/Report.vue b/src/views/Report.vue
index ec4744c4..31ccc244 100644
--- a/src/views/Report.vue
+++ b/src/views/Report.vue
@@ -82,7 +82,7 @@
         "rule_5": "大陸版のドロップデータのみをアップロードして下さい。ご協力ありがとうございます。"
       },
       "usage": "左クリックで個数増加、右クリックで個数減少",
-      "gacha": "Multiple results are allowed in the reporting of this stage."
+      "gacha": "この操作を行うことでデータに複数の結果を反映させることが出来ます。"
     },
     "ko": {
       "stage": {

From d09967ec5b0ee2f0ceeda155def4d9de442fa390 Mon Sep 17 00:00:00 2001
From: AlvISsReimu <alvissreimu@gmail.com>
Date: Sun, 1 Mar 2020 18:46:41 +0900
Subject: [PATCH 21/45] fix(sprite): enlarge the height of sprite image

---
 src/components/global/ItemIcon.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/global/ItemIcon.vue b/src/components/global/ItemIcon.vue
index 9e2543ee..b7e2ed69 100644
--- a/src/components/global/ItemIcon.vue
+++ b/src/components/global/ItemIcon.vue
@@ -49,7 +49,7 @@ export default {
       originalIconSize: 60,
       originalSpriteDimensions: {
         x: 360,
-        y: 600
+        y: 720
       }
     };
   },
@@ -96,7 +96,7 @@ export default {
   width: 60px;
   display: inline-block;
   overflow: hidden;
-  background-size: 360px 600px;
+  background-size: 360px 720px;
   transition: transform 150ms cubic-bezier(.25,.8,.5,1);
 }
 

From ea9cacf60f5d92525f0ac37c3e1c4c7649a3b0a1 Mon Sep 17 00:00:00 2001
From: AlvISsReimu <alvissreimu@gmail.com>
Date: Mon, 2 Mar 2020 01:41:43 +0900
Subject: [PATCH 22/45] improvement(planner): show 3 highest level materials

---
 src/views/Planner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index 48438e6c..69f85471 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -251,7 +251,7 @@
     name: "Planner",
     components: {Item},
     data: () => {
-      let items = get.items.all().filter(item => item.itemType === "MATERIAL" && item.itemId.length === 5);
+      let items = get.items.all().filter(item => item.itemType === "MATERIAL" && item.itemId.length === 5 || item.itemType === "ARKPLANNER");
       return {
         fundDressDialog: false,
         importExportDialog: false,

From 05b65727f3947936922f630c7a9a1d11393e5015 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sun, 1 Mar 2020 11:55:22 -0500
Subject: [PATCH 23/45] improvement(planner): added i18n support and optimized
 design

---
 src/App.vue                            |   4 +
 src/components/global/ItemStepper.vue  |   5 -
 src/components/stats/StageSelector.vue |   4 -
 src/views/About/Links.vue              |   5 -
 src/views/Planner.vue                  | 348 +++++++++++++++----------
 5 files changed, 221 insertions(+), 145 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 001612c1..829cd536 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -513,4 +513,8 @@ export default {
     word-break: break-word;
   }
 
+  .monospace {
+    font-family: SF Mono, Consolas, Courier, Courier New, monospace;
+  }
+
 </style>
diff --git a/src/components/global/ItemStepper.vue b/src/components/global/ItemStepper.vue
index 816d45f4..1347d900 100644
--- a/src/components/global/ItemStepper.vue
+++ b/src/components/global/ItemStepper.vue
@@ -117,11 +117,6 @@
 </script>
 
 <style scoped>
-  .quantity {
-    font-family: Consolas, Courier New, Courier, monospace;
-    font-weight: 700;
-  }
-
   .disabled {
     user-select: none;
   }
diff --git a/src/components/stats/StageSelector.vue b/src/components/stats/StageSelector.vue
index 2c5d374c..16f19d49 100644
--- a/src/components/stats/StageSelector.vue
+++ b/src/components/stats/StageSelector.vue
@@ -351,10 +351,6 @@
 </script>
 
 <style scoped>
-.monospace {
-  font-family: Consolas, Courier, monospace;
-}
-
   .full-width {
     width: 100%;
   }
diff --git a/src/views/About/Links.vue b/src/views/About/Links.vue
index e4eed8f2..d62f9c35 100644
--- a/src/views/About/Links.vue
+++ b/src/views/About/Links.vue
@@ -294,9 +294,4 @@ export default {
   width: 100%;
   border: 1px solid rgba(255, 255, 255, 0.75);
 }
-
-.monospace {
-  font-family: SF Mono, Consolas, Courier, Courier New, monospace;
-  font-size: 10px;
-}
 </style>
diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index 48438e6c..90aafc02 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -1,133 +1,206 @@
+<i18n>
+  {
+    "zh": {
+      "options": {
+        "_name": "选项",
+        "byProduct": "计算合成副产物",
+        "requireExp": "大量需求经验",
+        "requireLmb": "大量需求龙门币"
+      },
+      "actions": {
+        "import": "导入",
+        "export": "导出",
+        "importExport": "@:(actions.import)@:(meta.separator)@:(actions.export)",
+        "becomeIdol": "众筹站长女装",
+        "calculate": "计算规划"
+      },
+      "have": "已有",
+      "need": "需要",
+      "copy": "复制到剪贴板"
+    },
+    "en": {
+      "options": {
+        "_name": "Options",
+        "byProduct": "Consider by-products",
+        "requireExp": "Require large amount of EXP",
+        "requireLmb": "Require large amount of LMB"
+      },
+      "actions": {
+        "import": "Import",
+        "export": "Export",
+        "importExport": "@:(actions.import)@:(meta.separator)@:(actions.export)",
+        "becomeIdol": "Become Idol!",
+        "calculate": "Calculate"
+      },
+      "have": "Have",
+      "need": "Need",
+      "copy": "Copy to Clipboard"
+    }
+  }
+</i18n>
+
 <template>
   <v-container
     fluid
   >
     <v-row
-      no-gutters
-      class="px-2 mx-10"
-      align="center"
-      justify="center"
-    >
-      <v-col>
-        <v-switch label="Consider by-products" />
-      </v-col>
-      <v-col>
-        <v-switch label="Require large amount of EXP" />
-      </v-col>
-      <v-col>
-        <v-switch label="Require large amount of LMB" />
-      </v-col>
-    </v-row>
-    <v-row
-      no-gutters
-      class="px-2 pb-2 mb-6 mx-10"
       align="center"
       justify="center"
     >
-      <v-col>
-        <v-dialog
-          v-model="importExportDialog"
-          width="800"
+      <v-col
+        cols="12"
+        sm="12"
+        md="4"
+        lg="3"
+        xl="3"
+      >
+        <v-row
+          no-gutters
+          class="my-3 mx-6"
+          align="center"
+          justify="center"
         >
-          <template v-slot:activator="{ on }">
-            <v-btn
-              color="green"
-              v-on="on"
-            >
-              Import/Export
-            </v-btn>
-          </template>
-          <v-card>
-            <v-tabs
-              v-model="importExportDialogTab"
-              background-color="green"
-              color="white"
-            >
-              <v-tab>Import</v-tab>
-              <v-tab>Export</v-tab>
-            </v-tabs>
-            <v-tabs-items v-model="importExportDialogTab">
-              <v-tab-item>
-                <v-card flat>
-                  <v-container class="pa-4">
-                    <v-textarea
-                      v-model="importJson"
-                      dense
-                      hide-details
-                      outlined
-                    />
-                  </v-container>
-                  <v-divider />
-                  <v-card-actions>
-                    <v-spacer />
-                    <v-btn
-                      color="green"
-                      text
-                      @click="importToItemsData"
-                    >
-                      Import
-                    </v-btn>
-                  </v-card-actions>
-                </v-card>
-              </v-tab-item>
-              <v-tab-item>
-                <v-card flat>
-                  <v-card-text class="white--text">
-                    {{ exportJson }}
-                  </v-card-text>
-                  <v-divider />
-                  <v-card-actions>
-                    <v-spacer />
-                    <v-btn
-                      color="green"
-                      text
-                      @click="copyExportJson"
-                    >
-                      Copy
-                    </v-btn>
-                  </v-card-actions>
-                </v-card>
-              </v-tab-item>
-            </v-tabs-items>
-          </v-card>
-        </v-dialog>
+          <v-col cols="12">
+            <span class="title">
+              {{ $t('options._name') }}
+            </span>
+          </v-col>
+          <v-col cols="12">
+            <v-switch
+              :label="$t('options.byProduct')"
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12">
+            <v-switch
+              :label="$t('options.requireExp')"
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12">
+            <v-switch
+              :label="$t('options.requireLmb')"
+              hide-details
+            />
+          </v-col>
+        </v-row>
       </v-col>
-      <v-col>
-        <v-dialog
-          v-model="fundDressDialog"
-          width="500"
+      <v-col
+        cols="12"
+        sm="12"
+        md="8"
+        lg="9"
+        xl="9"
+      >
+        <v-row
+          no-gutters
+          class="my-3 mx-6"
+          align="center"
+          justify="space-between"
         >
-          <template v-slot:activator="{ on }">
-            <v-btn
-              color="yellow darken-3"
-              v-on="on"
-            >
-              众筹站长女装
-            </v-btn>
-          </template>
-          <v-card>
-            <v-card-title class="headline">
-              众筹站长女装
-            </v-card-title>
-            <v-card-actions>
-              <v-spacer />
+          <v-dialog
+            v-model="importExportDialog"
+            width="800"
+          >
+            <template v-slot:activator="{ on }">
               <v-btn
-                color="primary"
-                text
-                @click="fundDressDialog = false"
+                color="green"
+                v-on="on"
               >
-                OK
+                {{ $t('actions.importExport') }}
               </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-dialog>
-      </v-col>
-      <v-col>
-        <v-btn color="red">
-          Calculate
-        </v-btn>
+            </template>
+            <v-card>
+              <v-tabs
+                v-model="importExportDialogTab"
+                background-color="green"
+                color="white"
+              >
+                <v-tab>{{ $t('actions.import') }}</v-tab>
+                <v-tab>{{ $t('actions.export') }}</v-tab>
+              </v-tabs>
+              <v-tabs-items v-model="importExportDialogTab">
+                <v-tab-item>
+                  <v-card flat>
+                    <v-container class="pa-4">
+                      <v-textarea
+                        v-model="importJson"
+                        dense
+                        hide-details
+                        outlined
+                      />
+                    </v-container>
+                    <v-divider />
+                    <v-card-actions>
+                      <v-spacer />
+                      <v-btn
+                        color="green"
+                        text
+                        @click="importToItemsData"
+                      >
+                        {{ $t('actions.import') }}
+                      </v-btn>
+                    </v-card-actions>
+                  </v-card>
+                </v-tab-item>
+                <v-tab-item>
+                  <v-card flat>
+                    <v-card-text
+                      class="white--text monospace planner-export"
+                    >
+                      {{ exportJson }}
+                    </v-card-text>
+                    <v-divider />
+                    <v-card-actions style="flex: 0 0 auto;">
+                      <v-spacer />
+                      <v-btn
+                        color="green"
+                        text
+                        @click="copyExportJson"
+                      >
+                        {{ $t('copy') }}
+                      </v-btn>
+                    </v-card-actions>
+                  </v-card>
+                </v-tab-item>
+              </v-tabs-items>
+            </v-card>
+          </v-dialog>
+          <v-dialog
+            v-model="fundDressDialog"
+            width="500"
+          >
+            <template v-slot:activator="{ on }">
+              <v-btn
+                color="yellow darken-3"
+                v-on="on"
+              >
+                {{ $t('actions.becomeIdol') }}
+              </v-btn>
+            </template>
+            <v-card>
+              <v-card-title class="headline">
+                {{ $t('actions.becomeIdol') }}
+              </v-card-title>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn
+                  color="primary"
+                  text
+                  @click="fundDressDialog = false"
+                >
+                  OK
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+          <v-btn color="red">
+            {{ $t('actions.calculate') }}
+          </v-btn>
+        </v-row>
       </v-col>
     </v-row>
+    
     <v-divider />
     <v-row
       class="pt-2"
@@ -143,7 +216,7 @@
         cols="4"
       >
         <v-card
-          class="pa-1 ma-0"
+          class="pa-1 ma-0 bkop-medium"
         >
           <v-container class="px-0 py-2 ma-0">
             <v-row
@@ -159,39 +232,41 @@
               />
             </v-row>
           </v-container>
-          <v-divider />
           <v-container class="px-0 pt-0 pb-1 ma-0">
             <v-row
               align="center"
               justify="center"
               no-gutters
+              class="mb-2"
             >
               <v-col>
                 <v-text-field
                   v-model.number="itemData.have"
+                  outlined
+                  dense
                   hide-details
-                  label="已有"
-                  @click:prepend="{}"
-                  @click:append-outer="{}"
+                  :label="$t('have')"
+                  @click:prepend-inner="{}"
+                  @click:append="{}"
                 >
-                  <template v-slot:prepend>
+                  <template v-slot:prepend-inner>
                     <v-btn
                       text
                       icon
                       x-small
                       @click="itemData.have = decrement(itemData.have)"
                     >
-                      <v-icon>mdi-minus</v-icon>
+                      <v-icon>mdi-minus-circle</v-icon>
                     </v-btn>
                   </template>
-                  <template v-slot:append-outer>
+                  <template v-slot:append>
                     <v-btn
                       text
                       icon
                       x-small
                       @click="itemData.have = increment(itemData.have)"
                     >
-                      <v-icon>mdi-plus</v-icon>
+                      <v-icon>mdi-plus-circle</v-icon>
                     </v-btn>
                   </template>
                 </v-text-field>
@@ -206,29 +281,30 @@
                 <v-text-field
                   v-model.number="itemData.need"
                   hide-details
-                  label="需求"
-                  @click:prepend="{}"
-                  @click:append-outer="{}"
-                  v-on="on"
+                  outlined
+                  dense
+                  :label="$t('need')"
+                  @click:prepend-inner="{}"
+                  @click:append="{}"
                 >
-                  <template v-slot:prepend>
+                  <template v-slot:prepend-inner>
                     <v-btn
                       text
                       icon
                       x-small
                       @click="itemData.need = decrement(itemData.need)"
                     >
-                      <v-icon>mdi-minus</v-icon>
+                      <v-icon>mdi-minus-circle</v-icon>
                     </v-btn>
                   </template>
-                  <template v-slot:append-outer>
+                  <template v-slot:append>
                     <v-btn
                       text
                       icon
                       x-small
                       @click="itemData.need = increment(itemData.need)"
                     >
-                      <v-icon>mdi-plus</v-icon>
+                      <v-icon>mdi-plus-circle</v-icon>
                     </v-btn>
                   </template>
                 </v-text-field>
@@ -316,4 +392,14 @@
       max-width: 12.5%
     }
   }
+  .planner-export {
+    word-break: break-all;
+    line-height: 1.1 !important;
+    font-size: 12px;
+    height: 300px;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    flex: 1 1 auto;
+    overflow-y: auto;
+  }
 </style>
\ No newline at end of file

From d3ed4026257944b1ea61c4a8ff842ea40327b426 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sun, 1 Mar 2020 22:02:22 -0500
Subject: [PATCH 24/45] improvement(planner): improved planner page design

---
 src/App.vue                        |  28 ++++--
 src/components/global/ItemIcon.vue |   2 +-
 src/main.js                        |   1 +
 src/utils/getters.js               |  18 +++-
 src/views/About/Changelog.vue      |   2 +-
 src/views/About/Links.vue          |   2 +-
 src/views/About/Members.vue        |   1 -
 src/views/Planner.vue              | 143 ++++++++++++++++++++++-------
 8 files changed, 150 insertions(+), 47 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d7cde83a..84eb3e64 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app :class="languageFont">
     <v-navigation-drawer
       v-model="drawer"
       app
@@ -146,7 +146,7 @@
                     :key="i"
                     @click="changeLocale(locale.id)"
                   >
-                    <v-list-item-title>
+                    <v-list-item-title class="mr-2">
                       {{ locale.name }}
                     </v-list-item-title>
                     <v-list-item-action v-if="locale.beta">
@@ -154,7 +154,7 @@
                         mdi-beta
                       </v-icon>
                     </v-list-item-action>
-                    <v-list-item-action-text class="monospace">
+                    <v-list-item-action-text class="monospace ml-2">
                       {{ locale.id }}
                     </v-list-item-action-text>
                   </v-list-item>
@@ -199,7 +199,7 @@
             </v-img>
           </v-avatar>
         </transition>
-        <span class="title">
+        <span class="title force-lang-font">
           {{ $t($router.currentRoute.meta.i18n) }}
         </span>
       </v-toolbar-title>
@@ -346,8 +346,7 @@ export default {
           name: '日本語'
         }, {
           id: 'ko',
-          name: '한국어',
-          beta: true,
+          name: '한국어'
         }
       ],
       prefetchingResources: false,
@@ -371,6 +370,9 @@ export default {
         return this.localizations.indexOf(this.localizations.find(el => el.id === this.$i18n.locale))
       },
       set () {}
+    },
+    languageFont () {
+      return [`lang-${this.$i18n.locale}`]
     }
   },
   watch: {
@@ -481,6 +483,10 @@ export default {
     opacity: 0;
   }
 
+  .transition-all {
+    transition: all .225s cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
+
   .v-navigation-drawer {
     transition: all .3s cubic-bezier(.25,.8,.5,1) !important;
   }
@@ -575,4 +581,14 @@ export default {
     overflow: initial !important;
   }
 
+  .force-lang-font, .lang-ja {
+    font-family: YuGothic, 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Roboto', Tahoma, Arial, sans-serif !important
+  }
+  .force-lang-font, .lang-ko {
+    font-family: 'Malgun Gothic', Gulim, 'Roboto', Tahoma, Arial, sans-serif !important
+  }
+  .force-not-lang-font {
+    font-family: Roboto, sans-serif!important
+  }
+
 </style>
diff --git a/src/components/global/ItemIcon.vue b/src/components/global/ItemIcon.vue
index b7e2ed69..a2a2f3f3 100644
--- a/src/components/global/ItemIcon.vue
+++ b/src/components/global/ItemIcon.vue
@@ -88,7 +88,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .item-icon--sprite {
   background-image: url("https://penguin-stats.s3.ap-southeast-1.amazonaws.com/item_sprite.png");
   background-repeat: no-repeat;
diff --git a/src/main.js b/src/main.js
index e0d2fe03..9f614e57 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,6 +15,7 @@ import * as Integrations from '@sentry/integrations';
 
 const production = process.env.NODE_ENV === 'production';
 
+Vue.config.devtools = true;
 Vue.config.performance = true;
 
 if (production) {
diff --git a/src/utils/getters.js b/src/utils/getters.js
index 4d01fa9e..58295312 100644
--- a/src/utils/getters.js
+++ b/src/utils/getters.js
@@ -4,13 +4,21 @@ import Console from "@/utils/Console";
 let Getters = {};
 
 Getters.items = {
+  _cache: null,
   byItemId(itemId) {
-    return this.all().find(el => {
-      return el.itemId === itemId
-    })
+    const got = this.all(true);
+    if (!got) return {};
+    return got.get(itemId)
   },
-  all() {
-    return store.state.data.items || []
+  all(map=false) {
+    const items = store.state.data.items;
+    if (!items) return [];
+    if (map) {
+      if (!this._cache) this._cache = new Map(items.map(item => [item.itemId, item]))
+      return this._cache
+    } else {
+      return items
+    }
   }
 }
 Getters.limitations = {
diff --git a/src/views/About/Changelog.vue b/src/views/About/Changelog.vue
index 416cd29f..60509b53 100644
--- a/src/views/About/Changelog.vue
+++ b/src/views/About/Changelog.vue
@@ -12,7 +12,7 @@
       fill-dot
     >
       <v-card
-        class="bkop-light"
+        class="bkop-light force-not-lang-font"
         elevation="5"
       >
         <v-card-title class="title">
diff --git a/src/views/About/Links.vue b/src/views/About/Links.vue
index c1ffa273..67a1c9ad 100644
--- a/src/views/About/Links.vue
+++ b/src/views/About/Links.vue
@@ -138,7 +138,7 @@
             justify="center"
           >
             <v-chip
-              class="ma-2"
+              class="ma-2 force-not-lang-font"
               color="primary"
               text-color="white"
               @click="goToHref(link)"
diff --git a/src/views/About/Members.vue b/src/views/About/Members.vue
index 5503f0fc..bf8c0624 100644
--- a/src/views/About/Members.vue
+++ b/src/views/About/Members.vue
@@ -170,7 +170,6 @@
                 :href="url"
                 target="_blank"
                 :title="$t(`socials.${id}`)"
-                v-on="on"
               >
                 <v-icon>
                   {{ getSocial(id).icon }}
diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index e45e297d..b8dcc3ca 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -10,7 +10,7 @@
       "actions": {
         "import": "导入",
         "export": "导出",
-        "importExport": "@:(actions.import)@:(meta.separator)@:(actions.export)",
+        "importExport": "@:(actions.import)/@:(actions.export)",
         "becomeIdol": "众筹站长女装",
         "calculate": "计算规划"
       },
@@ -28,7 +28,7 @@
       "actions": {
         "import": "Import",
         "export": "Export",
-        "importExport": "@:(actions.import)@:(meta.separator)@:(actions.export)",
+        "importExport": "@:(actions.import)/@:(actions.export)",
         "becomeIdol": "Become Idol!",
         "calculate": "Calculate"
       },
@@ -42,17 +42,32 @@
 <template>
   <v-container
     fluid
+    class="fill-height align-content-center justify-center"
   >
+    <v-btn
+      fab
+      bottom
+      right
+      fixed
+      ripple
+      color="primary"
+      @click="calculate"
+    >
+      <v-icon>
+        mdi-calculator
+      </v-icon>
+    </v-btn>
     <v-row
       align="center"
       justify="center"
     >
       <v-col
         cols="12"
-        sm="12"
+        sm="5"
         md="4"
         lg="3"
         xl="3"
+        class="px-0"
       >
         <v-row
           no-gutters
@@ -87,10 +102,11 @@
       </v-col>
       <v-col
         cols="12"
-        sm="12"
+        sm="7"
         md="8"
         lg="9"
         xl="9"
+        class="pt-0 pb-2 px-0"
       >
         <v-row
           no-gutters
@@ -105,6 +121,7 @@
             <template v-slot:activator="{ on }">
               <v-btn
                 color="green"
+                class="my-1"
                 v-on="on"
               >
                 {{ $t('actions.importExport') }}
@@ -173,6 +190,7 @@
             <template v-slot:activator="{ on }">
               <v-btn
                 color="yellow darken-3"
+                class="my-1"
                 v-on="on"
               >
                 {{ $t('actions.becomeIdol') }}
@@ -194,14 +212,16 @@
               </v-card-actions>
             </v-card>
           </v-dialog>
-          <v-btn color="red">
+          <v-btn
+            color="red"
+            class="my-1"
+            @click="calculate"
+          >
             {{ $t('actions.calculate') }}
           </v-btn>
         </v-row>
       </v-col>
     </v-row>
-    
-    <v-divider />
     <v-row
       class="pt-2"
       dense
@@ -212,7 +232,7 @@
         xl="1"
         md="2"
         sm="3"
-        class="col-lg-1-8"
+        class="col-xs-1-2 col-md-1-10 col-lg-1-8"
         cols="4"
       >
         <v-card
@@ -225,7 +245,7 @@
               no-gutters
             >
               <Item
-                :item="itemIdMap.get(itemData.id)"
+                :item="items.get(itemData.id)"
                 :ratio="1"
                 disable-link
                 tooltip-position="bottom"
@@ -243,30 +263,34 @@
                 <v-text-field
                   v-model.number="itemData.have"
                   outlined
+                  rounded
                   dense
                   hide-details
                   :label="$t('have')"
+                  class="input-field transition-all"
+                  :class="{'input-field--is-zero': itemData.have === 0}"
                   @click:prepend-inner="{}"
                   @click:append="{}"
                 >
                   <template v-slot:prepend-inner>
                     <v-btn
-                      text
                       icon
-                      x-small
+                      left
+                      class="fix-icon--left"
+                      :disabled="itemData.have === 0"
                       @click="itemData.have = decrement(itemData.have)"
                     >
-                      <v-icon>mdi-minus-circle</v-icon>
+                      <v-icon>mdi-minus</v-icon>
                     </v-btn>
                   </template>
                   <template v-slot:append>
                     <v-btn
-                      text
                       icon
-                      x-small
+                      left
+                      class="fix-icon--right"
                       @click="itemData.have = increment(itemData.have)"
                     >
-                      <v-icon>mdi-plus-circle</v-icon>
+                      <v-icon>mdi-plus</v-icon>
                     </v-btn>
                   </template>
                 </v-text-field>
@@ -282,29 +306,33 @@
                   v-model.number="itemData.need"
                   hide-details
                   outlined
+                  rounded
                   dense
                   :label="$t('need')"
+                  class="input-field transition-all"
+                  :class="{'input-field--is-zero': itemData.need === 0}"
                   @click:prepend-inner="{}"
                   @click:append="{}"
                 >
                   <template v-slot:prepend-inner>
                     <v-btn
-                      text
                       icon
-                      x-small
+                      left
+                      class="fix-icon--left"
+                      :disabled="itemData.need === 0"
                       @click="itemData.need = decrement(itemData.need)"
                     >
-                      <v-icon>mdi-minus-circle</v-icon>
+                      <v-icon>mdi-minus</v-icon>
                     </v-btn>
                   </template>
                   <template v-slot:append>
                     <v-btn
-                      text
                       icon
-                      x-small
+                      left
+                      class="fix-icon--right"
                       @click="itemData.need = increment(itemData.need)"
                     >
-                      <v-icon>mdi-plus-circle</v-icon>
+                      <v-icon>mdi-plus</v-icon>
                     </v-btn>
                   </template>
                 </v-text-field>
@@ -327,19 +355,20 @@
     name: "Planner",
     components: {Item},
     data: () => {
-      let items = get.items.all().filter(item => item.itemType === "MATERIAL" && item.itemId.length === 5 || item.itemType === "ARKPLANNER");
+      const items = get.items.all(true);
       return {
         fundDressDialog: false,
         importExportDialog: false,
         importExportDialogTab: null,
         importJson: "",
-        items: items,
-        itemIdMap: new Map(items.map(item => [item.itemId, item])),
-        itemsData: items.map(item => ({
-          id: item.itemId,
-          need: 0,
-          have: 0,
-        }))
+        items,
+        itemsData: get.items.all(false)
+          .filter(item => item.itemType === "MATERIAL" && item.itemId.length === 5 || item.itemType === "ARKPLANNER")
+          .map(item => ({
+            id: item.itemId,
+            need: 0,
+            have: 0,
+          }))
       }
     },
     computed: {
@@ -355,6 +384,9 @@
       },
       increment(orig) {
         return orig + 1;
+      },
+      calculate () {
+
       },
       importToItemsData() {
         let imported = JSON.parse(this.importJson);
@@ -362,7 +394,7 @@
           return;
         let importedAsMap = new Map();
         for (const itemData of imported)
-          if (!(itemData.hasOwnProperty("id") && this.itemIdMap.has(itemData.id) &&
+          if (!(itemData.hasOwnProperty("id") && this.items.has(itemData.id) &&
             itemData.hasOwnProperty("need") && Number.isInteger(itemData.need) && itemData.need >= 0 &&
             itemData.hasOwnProperty("have") && Number.isInteger(itemData.have) && itemData.have >= 0))
             return;
@@ -384,7 +416,15 @@
 </script>
 
 <style scoped>
-  @media (min-width: 1264px) and (max-width: 1903px) {
+  @media (max-width: 380px) {
+    .col-xs-1-2 {
+      -webkit-box-flex: 0;
+      -ms-flex: 0 0 50%;
+      flex: 0 0 50%;
+      max-width: 50%;
+    }
+  }
+  @media (min-width: 1264px) and (max-width: 1584px) {
     .col-lg-1-8 {
       -webkit-box-flex: 0;
       -ms-flex: 0 0 12.5%;
@@ -392,14 +432,53 @@
       max-width: 12.5%
     }
   }
+  @media (min-width: 1584px) and (max-width: 1904px) {
+    .col-md-1-10 {
+      -webkit-box-flex: 0;
+      -ms-flex: 0 0 10%;
+      flex: 0 0 10%;
+      max-width: 10%
+    }
+  }
   .planner-export {
     word-break: break-all;
     line-height: 1.1 !important;
     font-size: 12px;
-    height: 300px;
+    max-height: 300px;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     flex: 1 1 auto;
     overflow-y: auto;
   }
+
+  .fix-icon--left {
+    transform: translate(-2px, -3.5px)
+  }
+  .fix-icon--right {
+    transform: translate(2px, -3.5px)
+  }
+
+  ::v-deep .input-field input {
+    text-align: center !important;
+    /*font-family: SF Mono, "Droid Sans Mono", Ubuntu Mono, Consolas, Courier New, Courier, monospace;*/
+    font-weight: bold;
+  }
+
+  ::v-deep .input-field .v-input__slot {
+    padding: 0 6px !important;
+  }
+
+  ::v-deep .input-field legend {
+    margin: 0 6px !important;
+  }
+
+  ::v-deep .input-field label {
+    margin: 0 12px !important;
+    max-width: none;
+  }
+
+
+  ::v-deep .input-field--is-zero input {
+    opacity: 0.5
+  }
 </style>
\ No newline at end of file

From 9ef4429c3474c0d0fd947e54ad519304b7a79de9 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sun, 1 Mar 2020 22:04:36 -0500
Subject: [PATCH 25/45] improvement(planner): changed icon

---
 src/views/Planner.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index b8dcc3ca..33f2d0bd 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -280,7 +280,7 @@
                       :disabled="itemData.have === 0"
                       @click="itemData.have = decrement(itemData.have)"
                     >
-                      <v-icon>mdi-minus</v-icon>
+                      <v-icon>mdi-minus-circle</v-icon>
                     </v-btn>
                   </template>
                   <template v-slot:append>
@@ -290,7 +290,7 @@
                       class="fix-icon--right"
                       @click="itemData.have = increment(itemData.have)"
                     >
-                      <v-icon>mdi-plus</v-icon>
+                      <v-icon>mdi-plus-circle</v-icon>
                     </v-btn>
                   </template>
                 </v-text-field>
@@ -322,7 +322,7 @@
                       :disabled="itemData.need === 0"
                       @click="itemData.need = decrement(itemData.need)"
                     >
-                      <v-icon>mdi-minus</v-icon>
+                      <v-icon>mdi-minus-circle</v-icon>
                     </v-btn>
                   </template>
                   <template v-slot:append>
@@ -332,7 +332,7 @@
                       class="fix-icon--right"
                       @click="itemData.need = increment(itemData.need)"
                     >
-                      <v-icon>mdi-plus</v-icon>
+                      <v-icon>mdi-plus-circle</v-icon>
                     </v-btn>
                   </template>
                 </v-text-field>

From b34147410936fc8762dd11c2ae4ec46f50bc03c7 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sun, 1 Mar 2020 22:07:08 -0500
Subject: [PATCH 26/45] improvement(font): fix font class

---
 src/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 84eb3e64..6fe3eaec 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -581,10 +581,10 @@ export default {
     overflow: initial !important;
   }
 
-  .force-lang-font, .lang-ja {
+  .lang-ja .force-lang-font, .lang-ja {
     font-family: YuGothic, 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Roboto', Tahoma, Arial, sans-serif !important
   }
-  .force-lang-font, .lang-ko {
+  .lang-ko .force-lang-font, .lang-ko {
     font-family: 'Malgun Gothic', Gulim, 'Roboto', Tahoma, Arial, sans-serif !important
   }
   .force-not-lang-font {

From ca40f229242b3dbcd6020aa3c056c028caf5423d Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Thu, 5 Mar 2020 00:38:06 -0500
Subject: [PATCH 27/45] improvement(planner): rewrite text field to improve
 perf on planner

---
 babel.config.js                               |   3 +
 package.json                                  |   2 +
 src/App.vue                                   |  14 +-
 src/apis/planner.js                           |   7 +
 src/components/global/Item.vue                |   2 +-
 .../toolbar/NetworkStateIndicator.vue         |   1 +
 src/main.js                                   |  11 +-
 src/plugins/vuetify.js                        |   8 +
 src/store/index.js                            |  25 +-
 src/utils/marshaller.js                       |  22 +
 src/views/Planner.vue                         | 613 ++++++++++++++----
 yarn.lock                                     | 159 +++++
 12 files changed, 733 insertions(+), 134 deletions(-)
 create mode 100644 src/apis/planner.js
 create mode 100644 src/utils/marshaller.js

diff --git a/babel.config.js b/babel.config.js
index ba179669..89d647a4 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,8 @@
 module.exports = {
   presets: [
     '@vue/app'
+  ],
+  plugins: [
+    "@babel/plugin-transform-modules-commonjs"
   ]
 }
diff --git a/package.json b/package.json
index ebd0c4f0..46c60932 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "submit": "git add . && git cz && git push"
   },
   "dependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.8.3",
+    "@chenfengyuan/vue-number-input": "^1.2.1",
     "@sentry/browser": "^5.6.2",
     "@sentry/integrations": "^5.6.1",
     "animejs": "^3.1.0",
diff --git a/src/App.vue b/src/App.vue
index 0f22f49f..c27f808c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -372,7 +372,7 @@ export default {
       set () {}
     },
     languageFont () {
-      return [`lang-${this.$i18n.locale}`]
+      return `lang-${this.$i18n.locale}`
     }
   },
   watch: {
@@ -451,9 +451,11 @@ export default {
       if (localeId !== this.$i18n.locale) {
         Console.debug("[i18n] locale changed to:", localeId, "| saving to vuex:", save);
         this.$i18n.locale = localeId;
+        this.$vuetify.lang.current = localeId;
+        document.title = `${this.$t(this.$route.meta.i18n) + ' | ' || ''}${this.$t('app.name')}`;
+        document.documentElement.lang = localeId;
         // this.$vuetify.lang.current = localeId;
         if (save) this.$store.commit("settings/changeLocale", localeId);
-        document.title = `${this.$t(this.$route.meta.i18n) + ' | ' || ''}${this.$t('app.name')}`;
       } else {
         Console.debug("[i18n] Same locale");
       }
@@ -565,6 +567,9 @@ export default {
   .no-wrap--text {
     word-break: break-word;
   }
+  .no-break--text {
+    word-break: keep-all;
+  }
 
   .monospace {
     font-family: SF Mono, "Droid Sans Mono", Ubuntu Mono, Consolas, Courier New, Courier, monospace;
@@ -582,7 +587,10 @@ export default {
   }
 
   .lang-ja .force-lang-font, .lang-ja {
-    font-family: YuGothic, 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Roboto', Tahoma, Arial, sans-serif !important
+    /*font-family : 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif !important;*/
+  }
+  .lang-ja .v-application .headline, .lang-ja .v-application .title {
+    font-family : 'ヒラギノ明朝 ProN' , 'Hiragino Mincho ProN' , '游明朝','游明朝体',YuMincho,'Yu Mincho' , 'ＭＳ 明朝' , 'MS Mincho' , HiraMinProN-W3 , 'TakaoEx明朝' , TakaoExMincho , 'MotoyaLCedar' , 'Droid Sans Japanese' , serif !important;
   }
   .lang-ko .force-lang-font, .lang-ko {
     font-family: 'Malgun Gothic', Gulim, 'Roboto', Tahoma, Arial, sans-serif !important
diff --git a/src/apis/planner.js b/src/apis/planner.js
new file mode 100644
index 00000000..4bde16de
--- /dev/null
+++ b/src/apis/planner.js
@@ -0,0 +1,7 @@
+import service from '@/utils/service'
+
+export default {
+  plan (data) {
+    return service.post("https://planner.penguin-stats.io/plan", data)
+  }
+}
\ No newline at end of file
diff --git a/src/components/global/Item.vue b/src/components/global/Item.vue
index a4db4fff..d50d2fde 100644
--- a/src/components/global/Item.vue
+++ b/src/components/global/Item.vue
@@ -17,7 +17,7 @@
         />
       </span>
     </template>
-    <span>{{ name }}</span>
+    <span class="force-lang-font">{{ name }}</span>
   </v-tooltip>
   <ItemIcon
     v-else-if="disableTooltip"
diff --git a/src/components/toolbar/NetworkStateIndicator.vue b/src/components/toolbar/NetworkStateIndicator.vue
index 23e7d9e8..5a56502b 100644
--- a/src/components/toolbar/NetworkStateIndicator.vue
+++ b/src/components/toolbar/NetworkStateIndicator.vue
@@ -161,5 +161,6 @@
     padding: 4px 8px;
     border-radius: 4px 0 0 4px !important;
     margin-bottom: calc(max(env(safe-area-inset-bottom), 8px)) !important;
+    z-index: 10
   }
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 7aacc959..77f3c54a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,20 +4,17 @@ import 'vuetify/dist/vuetify.min.css'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import i18n from './i18n'
 import VueAnalytics from "vue-analytics"
 import 'aos/dist/aos.css'
-import I18n from "@/i18n"
+import i18n from "@/i18n"
 import config from "@/config"
+import VueNumberInput from '@chenfengyuan/vue-number-input';
 
 import * as Sentry from '@sentry/browser';
 import * as Integrations from '@sentry/integrations';
 
 const production = process.env.NODE_ENV === 'production';
 
-Vue.config.devtools = true;
-Vue.config.performance = true;
-
 if (production) {
   Sentry.init({
     dsn: 'https://aebfbfbe08de42f7a9f291f5ae9ebf97@sentry.imgal.vin/2',
@@ -62,12 +59,14 @@ Vue.use(VueAnalytics, {
 });
 
 router.beforeEach((to, from, next) => {
-  document.title = `${I18n.t(to.meta.i18n)} | ${I18n.t('app.name')}`;
+  document.title = `${i18n.t(to.meta.i18n)} | ${i18n.t('app.name')}`;
   next();
 });
 
 Vue.config.productionTip = false;
 
+Vue.use(VueNumberInput);
+
 new Vue({
   vuetify,
   router,
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 36e725a0..ea7f3251 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -2,10 +2,18 @@ import '@mdi/font/css/materialdesignicons.css'
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
 
+import zhHans from 'vuetify/es5/locale/zh-Hans'
+import ja from 'vuetify/es5/locale/ja'
+import ko from 'vuetify/es5/locale/ko'
+import en from 'vuetify/es5/locale/en'
+
 Vue.use(Vuetify);
 
 export default new Vuetify({
   icons: {
     iconfont: 'mdi',
   },
+  lang: {
+    locales: { zh: zhHans, ja, ko, en }
+  },
 });
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 39a075b3..b6960b32 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -12,14 +12,31 @@ import settings from './modules/settings';
 
 Vue.use(Vuex);
 
+localStorage.removeItem("penguin-stats-state");
+
 export default new Vuex.Store({
   plugins: [
     createPersistedState({
-      key: "penguin-stats-state",
+      key: "penguin-stats-data",
+      paths: [
+        "data"
+      ]
+    }),
+    createPersistedState({
+      key: "penguin-stats-settings",
+      paths: [
+        "settings"
+      ]
+    }),
+    createPersistedState({
+      key: "penguin-stats-auth",
+      paths: [
+        "auth"
+      ]
+    }),
+    createPersistedState({
+      key: "penguin-stats-cacheTTL",
       paths: [
-        "data",
-        "settings",
-        "auth",
         "cacheUpdateAt"
       ]
     })
diff --git a/src/utils/marshaller.js b/src/utils/marshaller.js
new file mode 100644
index 00000000..225adeb2
--- /dev/null
+++ b/src/utils/marshaller.js
@@ -0,0 +1,22 @@
+export default {
+  planner ({items, options}) {
+    const body = {
+      required: {},
+      owned: {},
+      extra_outc: false,
+      exp_demand: false,
+      gold_demand: false
+    };
+
+    items.forEach(el => {
+      if (el.need) body.required[el.name] = el.need;
+      if (el.have) body.owned[el.name] = el.have;
+    });
+
+    body.extra_outc = options.byProduct;
+    body.exp_demand = options.requireExp;
+    body.gold_demand = options.requireLmb;
+
+    return body
+  }
+}
\ No newline at end of file
diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index 33f2d0bd..4d50abc8 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -16,7 +16,21 @@
       },
       "have": "已有",
       "need": "需要",
-      "copy": "复制到剪贴板"
+      "copy": "复制到剪贴板",
+      "calculation": {
+        "title": "规划结果",
+        "tabs": {
+          "stages": "关卡列表",
+          "syntheses": "合成列表",
+          "values": "素材价值"
+        },
+        "lmb": "预计龙门币收益",
+        "sanity": "预计需要理智",
+        "exp": "预计获得录像带经验",
+        "times": "次",
+        "items": "将得到物品",
+        "level": "素材等级"
+      }
     },
     "en": {
       "options": {
@@ -34,7 +48,21 @@
       },
       "have": "Have",
       "need": "Need",
-      "copy": "Copy to Clipboard"
+      "copy": "Copy to Clipboard",
+      "calculation": {
+        "title": "Calculation Result",
+        "tabs": {
+          "stages": "Stages",
+          "syntheses": "Syntheses",
+          "values": "Values"
+        },
+        "lmb": "Estimated LMB income",
+        "sanity": "Estimated Sanity required",
+        "exp": "Estimated EXP from Battle Records",
+        "times": "battles",
+        "items": "Will get",
+        "level": "Material Level"
+      }
     }
   }
 </i18n>
@@ -44,6 +72,255 @@
     fluid
     class="fill-height align-content-center justify-center"
   >
+    <v-dialog
+      v-model="calculation.done"
+      persistent
+      scrollable
+      max-width="calc(max(450px, 80vw))"
+    >
+      <v-card v-if="calculation.done">
+        <v-card-title
+          class="indigo pb-4 elevation-2 white--text"
+          style="background: #a14042; line-height: 1.1;"
+        >
+          <div
+            class="overline d-block"
+            style="width: 100%"
+          >
+            ArkPlanner
+          </div>
+          <br>
+          <div
+            class="headline font-weight-bold d-block"
+            style="width: 100%"
+          >
+            {{ $t('calculation.title') }}
+          </div>
+        </v-card-title>
+        <v-card-text>
+          <v-row
+            align="center"
+            justify="center"
+            no-gutters
+            class="my-2"
+          >
+            <v-col
+              cols="12"
+              sm="4"
+              md="4"
+              lg="4"
+              xl="4"
+            >
+              <v-list-item>
+                <v-list-item-icon>
+                  <v-icon>mdi-cash</v-icon>
+                </v-list-item-icon>
+                <v-list-item-content>
+                  <v-list-item-title class="monospace">
+                    {{ calculation.data.gold.toLocaleString() }}
+                  </v-list-item-title>
+                  <v-list-item-subtitle>
+                    {{ $t('calculation.lmb') }}
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+            </v-col>
+            <v-col
+              cols="12"
+              sm="4"
+              md="4"
+              lg="4"
+              xl="4"
+            >
+              <v-list-item>
+                <v-list-item-icon>
+                  <v-icon>mdi-brain</v-icon>
+                </v-list-item-icon>
+                <v-list-item-content>
+                  <v-list-item-title class="monospace">
+                    {{ calculation.data.cost.toLocaleString() }}
+                  </v-list-item-title>
+                  <v-list-item-subtitle>
+                    {{ $t('calculation.sanity') }}
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+            </v-col>
+            <v-col
+              cols="12"
+              sm="4"
+              md="4"
+              lg="4"
+              xl="4"
+            >
+              <v-list-item>
+                <v-list-item-icon>
+                  <v-icon>mdi-card-bulleted</v-icon>
+                </v-list-item-icon>
+                <v-list-item-content>
+                  <v-list-item-title class="monospace">
+                    {{ calculation.data.exp.toLocaleString() }} EXP
+                  </v-list-item-title>
+                  <v-list-item-subtitle>
+                    {{ $t('calculation.exp') }}
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+            </v-col>
+          </v-row>
+          <v-tabs
+            v-model="calculation.tab"
+            icons-and-text
+            grow
+            centered
+            class="elevated-tab"
+          >
+            <v-tabs-slider />
+            <v-tab
+              v-for="tab in calculation.tabs"
+              :key="tab.id"
+            >
+              {{ $t(tab.text) }}
+              <v-icon>{{ tab.icon }}</v-icon>
+            </v-tab>
+            <v-tab-item>
+              <v-row
+                align="start"
+                justify="start"
+              >
+                <v-col
+                  v-for="[index, stage] in calculation.data.stages.entries()"
+                  :key="stage.stage"
+                  cols="12"
+                  sm="6"
+                  md="4"
+                  lg="3"
+                  xl="2"
+                  class="align-self-stretch"
+                >
+                  <v-card class="card-item">
+                    <v-card-text>
+                      <div class="title">
+                        <span class="font-weight-bold headline">{{ stage.stage }}</span>
+                        <small class="float-right">#{{ index + 1 }}</small>
+                      </div>
+                      <div class="display-1 text-center monospace font-weight-bold mb-2">
+                        {{ parseInt(stage.count).toLocaleString() }} <small class="title">{{ $t('calculation.times') }}</small>
+                      </div>
+                      <div class="subtitle-1">
+                        {{ $t('calculation.items') }}
+                      </div>
+                      <ul class="pl-2">
+                        <li
+                          v-for="[name, value] in Object.entries(stage.items)"
+                          :key="name"
+                          class="d-flex align-center"
+                        >
+                          <span class="font-weight-bold">{{ name }}</span>
+                          <v-divider class="mx-2" />
+                          <span class="monospace float-right">&times;{{ value }}</span>
+                        </li>
+                      </ul>
+                    </v-card-text>
+                  </v-card>
+                </v-col>
+              </v-row>
+            </v-tab-item>
+            <v-tab-item>
+              <v-row
+                align="start"
+                justify="start"
+              >
+                <v-col
+                  v-for="[index, synthesis] in calculation.data.syntheses.entries()"
+                  :key="synthesis.target"
+                  cols="12"
+                  sm="6"
+                  md="4"
+                  lg="3"
+                  xl="2"
+                  class="align-self-stretch"
+                >
+                  <v-card class="card-item">
+                    <v-card-text>
+                      <div class="title">
+                        <span class="font-weight-bold headline">{{ synthesis.target }}</span>
+                        <small class="float-right">#{{ index + 1 }}</small>
+                      </div>
+                      <div class="display-1 text-center monospace font-weight-bold mb-2">
+                        &times;{{ parseInt(synthesis.count).toLocaleString() }}
+                      </div>
+                      <ul class="pl-2">
+                        <li
+                          v-for="[name, value] in Object.entries(synthesis.materials)"
+                          :key="name"
+                          class="d-flex align-center"
+                        >
+                          <span class="font-weight-bold">{{ name }}</span>
+                          <v-divider class="mx-2" />
+                          <span class="monospace float-right">&times;{{ value }}</span>
+                        </li>
+                      </ul>
+                    </v-card-text>
+                  </v-card>
+                </v-col>
+              </v-row>
+            </v-tab-item>
+            <v-tab-item>
+              <v-row
+                align="start"
+                justify="start"
+              >
+                <v-col
+                  v-for="value in calculation.data.values"
+                  :key="value.level"
+                  cols="12"
+                  sm="6"
+                  md="4"
+                  lg="3"
+                  xl="2"
+                  class="align-self-stretch"
+                >
+                  <v-card class="card-item">
+                    <v-card-text>
+                      <div class="title">
+                        <span class="font-weight-bold headline">{{ $t('calculation.level') }} {{ value.level }}</span>
+                      </div>
+                      <ul class="pl-2">
+                        <li
+                          v-for="item in value.items"
+                          :key="item.name"
+                          class="d-flex align-center"
+                        >
+                          <span class="font-weight-bold">{{ item.name }}</span>
+                          <v-divider class="mx-2" />
+                          <span class="monospace float-right">{{ item.value }}</span>
+                        </li>
+                      </ul>
+                    </v-card-text>
+                  </v-card>
+                </v-col>
+              </v-row>
+            </v-tab-item>
+          </v-tabs>
+        </v-card-text>
+
+        <v-card-actions class="elevation-4">
+          <v-btn
+            text
+            block
+            large
+            @click="calculation.done = false"
+          >
+            <v-divider style="opacity: 0.3" />
+            <span class="mx-4">
+              <v-icon left>mdi-close</v-icon>{{ $t('dialog.close') }}
+            </span>
+            <v-divider style="opacity: 0.3" />
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
     <v-btn
       fab
       bottom
@@ -51,6 +328,7 @@
       fixed
       ripple
       color="primary"
+      :loading="calculation.pending"
       @click="calculate"
     >
       <v-icon>
@@ -82,18 +360,21 @@
           </v-col>
           <v-col cols="12">
             <v-switch
+              v-model="options.byProduct"
               :label="$t('options.byProduct')"
               hide-details
             />
           </v-col>
           <v-col cols="12">
             <v-switch
+              v-model="options.requireExp"
               :label="$t('options.requireExp')"
               hide-details
             />
           </v-col>
           <v-col cols="12">
             <v-switch
+              v-model="options.requireLmb"
               :label="$t('options.requireLmb')"
               hide-details
             />
@@ -112,7 +393,7 @@
           no-gutters
           class="my-3 mx-6"
           align="center"
-          justify="space-between"
+          justify="space-around"
         >
           <v-dialog
             v-model="importExportDialog"
@@ -120,8 +401,9 @@
           >
             <template v-slot:activator="{ on }">
               <v-btn
-                color="green"
+                color="green white--text"
                 class="my-1"
+                large
                 v-on="on"
               >
                 {{ $t('actions.importExport') }}
@@ -130,11 +412,22 @@
             <v-card>
               <v-tabs
                 v-model="importExportDialogTab"
+                icons-and-text
+                grow
+                centered
                 background-color="green"
                 color="white"
               >
-                <v-tab>{{ $t('actions.import') }}</v-tab>
-                <v-tab>{{ $t('actions.export') }}</v-tab>
+                <v-tab>
+                  {{ $t('actions.import') }}
+                  <v-icon>
+                    mdi-file-import
+                  </v-icon>
+                </v-tab>
+                <v-tab>
+                  {{ $t('actions.export') }}
+                  <v-icon>mdi-file-export</v-icon>
+                </v-tab>
               </v-tabs>
               <v-tabs-items v-model="importExportDialogTab">
                 <v-tab-item>
@@ -145,6 +438,9 @@
                         dense
                         hide-details
                         outlined
+                        rows="14"
+                        class="monospace planner-import-export"
+                        placeholder="[{&quot;name&quot;:&quot;双极纳米片&quot;,&quot;need&quot;:4,&quot;have&quot;:0},{&quot;name&quot;:&quot;D32钢&quot;,&quot;need&quot;:4,&quot;have&quot;:0}...]"
                       />
                     </v-container>
                     <v-divider />
@@ -163,7 +459,7 @@
                 <v-tab-item>
                   <v-card flat>
                     <v-card-text
-                      class="white--text monospace planner-export"
+                      class="monospace planner-import-export"
                     >
                       {{ exportJson }}
                     </v-card-text>
@@ -183,38 +479,40 @@
               </v-tabs-items>
             </v-card>
           </v-dialog>
-          <v-dialog
-            v-model="fundDressDialog"
-            width="500"
-          >
-            <template v-slot:activator="{ on }">
-              <v-btn
-                color="yellow darken-3"
-                class="my-1"
-                v-on="on"
-              >
-                {{ $t('actions.becomeIdol') }}
-              </v-btn>
-            </template>
-            <v-card>
-              <v-card-title class="headline">
-                {{ $t('actions.becomeIdol') }}
-              </v-card-title>
-              <v-card-actions>
-                <v-spacer />
-                <v-btn
-                  color="primary"
-                  text
-                  @click="fundDressDialog = false"
-                >
-                  OK
-                </v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-dialog>
+          <!--          <v-dialog-->
+          <!--            v-model="fundDressDialog"-->
+          <!--            width="500"-->
+          <!--          >-->
+          <!--            <template v-slot:activator="{ on }">-->
+          <!--              <v-btn-->
+          <!--                color="yellow darken-3"-->
+          <!--                class="my-1"-->
+          <!--                v-on="on"-->
+          <!--              >-->
+          <!--                {{ $t('actions.becomeIdol') }}-->
+          <!--              </v-btn>-->
+          <!--            </template>-->
+          <!--            <v-card>-->
+          <!--              <v-card-title class="headline">-->
+          <!--                {{ $t('actions.becomeIdol') }}-->
+          <!--              </v-card-title>-->
+          <!--              <v-card-actions>-->
+          <!--                <v-spacer />-->
+          <!--                <v-btn-->
+          <!--                  color="primary"-->
+          <!--                  text-->
+          <!--                  @click="fundDressDialog = false"-->
+          <!--                >-->
+          <!--                  OK-->
+          <!--                </v-btn>-->
+          <!--              </v-card-actions>-->
+          <!--            </v-card>-->
+          <!--          </v-dialog>-->
           <v-btn
-            color="red"
+            color="red white--text"
             class="my-1"
+            :loading="calculation.pending"
+            large
             @click="calculate"
           >
             {{ $t('actions.calculate') }}
@@ -236,9 +534,9 @@
         cols="4"
       >
         <v-card
-          class="pa-1 ma-0 bkop-medium"
+          class="pa-2 ma-0 bkop-medium"
         >
-          <v-container class="px-0 py-2 ma-0">
+          <v-container>
             <v-row
               align="center"
               justify="center"
@@ -259,41 +557,26 @@
               no-gutters
               class="mb-2"
             >
-              <v-col>
-                <v-text-field
-                  v-model.number="itemData.have"
-                  outlined
-                  rounded
-                  dense
-                  hide-details
-                  :label="$t('have')"
-                  class="input-field transition-all"
-                  :class="{'input-field--is-zero': itemData.have === 0}"
-                  @click:prepend-inner="{}"
-                  @click:append="{}"
+              <v-col class="d-flex align-center">
+                <div
+                  class="d-flex"
+                  style="position: relative"
                 >
-                  <template v-slot:prepend-inner>
-                    <v-btn
-                      icon
-                      left
-                      class="fix-icon--left"
-                      :disabled="itemData.have === 0"
-                      @click="itemData.have = decrement(itemData.have)"
-                    >
-                      <v-icon>mdi-minus-circle</v-icon>
-                    </v-btn>
-                  </template>
-                  <template v-slot:append>
-                    <v-btn
-                      icon
-                      left
-                      class="fix-icon--right"
-                      @click="itemData.have = increment(itemData.have)"
-                    >
-                      <v-icon>mdi-plus-circle</v-icon>
-                    </v-btn>
-                  </template>
-                </v-text-field>
+                  <span
+                    class="caption no-break--text field-caption white--text"
+                  >
+                    {{ $t('have') }}
+                  </span>
+                </div>
+                <number-input
+                  v-model="itemData.have"
+                  size="small"
+                  center
+                  controls
+                  :placeholder="$t('have')"
+                  class="monospace font-weight-bold number-input-theme"
+                  :min="0"
+                />
               </v-col>
             </v-row>
             <v-row
@@ -301,41 +584,26 @@
               justify="center"
               no-gutters
             >
-              <v-col>
-                <v-text-field
-                  v-model.number="itemData.need"
-                  hide-details
-                  outlined
-                  rounded
-                  dense
-                  :label="$t('need')"
-                  class="input-field transition-all"
-                  :class="{'input-field--is-zero': itemData.need === 0}"
-                  @click:prepend-inner="{}"
-                  @click:append="{}"
+              <v-col class="d-flex align-center mt-2">
+                <div
+                  class="d-flex"
+                  style="position: relative"
                 >
-                  <template v-slot:prepend-inner>
-                    <v-btn
-                      icon
-                      left
-                      class="fix-icon--left"
-                      :disabled="itemData.need === 0"
-                      @click="itemData.need = decrement(itemData.need)"
-                    >
-                      <v-icon>mdi-minus-circle</v-icon>
-                    </v-btn>
-                  </template>
-                  <template v-slot:append>
-                    <v-btn
-                      icon
-                      left
-                      class="fix-icon--right"
-                      @click="itemData.need = increment(itemData.need)"
-                    >
-                      <v-icon>mdi-plus-circle</v-icon>
-                    </v-btn>
-                  </template>
-                </v-text-field>
+                  <span
+                    class="caption no-break--text field-caption white--text"
+                  >
+                    {{ $t('need') }}
+                  </span>
+                </div>
+                <number-input
+                  v-model="itemData.need"
+                  size="small"
+                  center
+                  controls
+                  :placeholder="$t('need')"
+                  class="monospace font-weight-bold number-input-theme"
+                  :min="0"
+                />
               </v-col>
             </v-row>
           </v-container>
@@ -346,10 +614,12 @@
 </template>
 
 <script>
+  import planner from "@/apis/planner";
   import get from "@/utils/getters";
   import Item from "@/components/global/Item";
 
   import * as clipboard from "clipboard-polyfill";
+  import marshaller from "@/utils/marshaller";
 
   export default {
     name: "Planner",
@@ -366,9 +636,34 @@
           .filter(item => item.itemType === "MATERIAL" && item.itemId.length === 5 || item.itemType === "ARKPLANNER")
           .map(item => ({
             id: item.itemId,
+            name: item.name,
             need: 0,
             have: 0,
-          }))
+          })),
+        calculation: {
+          pending: false,
+          done: false,
+          data: {},
+          tab: null,
+          tabs: [{
+            id: "stages",
+            icon: "mdi-cube",
+            text: "calculation.tabs.stages"
+          }, {
+            id: "syntheses",
+            icon: "mdi-treasure-chest",
+            text: "calculation.tabs.syntheses"
+          }, {
+            id: "values",
+            icon: "mdi-cash-usd",
+            text: "calculation.tabs.values"
+          }]
+        },
+        options: {
+          byProduct: false,
+          requireExp: false,
+          requireLmb: false
+        }
       }
     },
     computed: {
@@ -377,19 +672,35 @@
       }
     },
     methods: {
-      decrement(orig) {
-        if (orig > 0)
-          return orig - 1;
-        return 0;
-      },
-      increment(orig) {
-        return orig + 1;
-      },
-      calculate () {
-
+      calculate() {
+        this.calculation.pending = true;
+        planner.plan(
+          marshaller.planner({
+            items: this.itemsData,
+            options: this.options
+          })
+        )
+          .then(({data}) => {
+            console.log(data);
+            this.$set(this.calculation, "data", data);
+            this.calculation.done = true
+          })
+          .finally(() => {
+            this.calculation.pending = false;
+          })
       },
+      // fontSize (v) {
+      //   return {fontSize: `${(16 + (v.toString().length * -1.8)) * (document.body.clientWidth / 800)}px`}
+      //   // return {fontSize: `${2 - (v.toString().length - 1) * 0.5}ch`}
+      // },
       importToItemsData() {
-        let imported = JSON.parse(this.importJson);
+        let imported;
+        try {
+          imported = JSON.parse(this.importJson);
+        } catch (e) {
+          alert(e);
+          return
+        }
         if (imported.length !== this.itemsData.length)
           return;
         let importedAsMap = new Map();
@@ -424,6 +735,7 @@
       max-width: 50%;
     }
   }
+
   @media (min-width: 1264px) and (max-width: 1584px) {
     .col-lg-1-8 {
       -webkit-box-flex: 0;
@@ -432,6 +744,7 @@
       max-width: 12.5%
     }
   }
+
   @media (min-width: 1584px) and (max-width: 1904px) {
     .col-md-1-10 {
       -webkit-box-flex: 0;
@@ -440,7 +753,8 @@
       max-width: 10%
     }
   }
-  .planner-export {
+
+  .planner-import-export, ::v-deep .planner-import-export textarea {
     word-break: break-all;
     line-height: 1.1 !important;
     font-size: 12px;
@@ -454,6 +768,7 @@
   .fix-icon--left {
     transform: translate(-2px, -3.5px)
   }
+
   .fix-icon--right {
     transform: translate(2px, -3.5px)
   }
@@ -481,4 +796,62 @@
   ::v-deep .input-field--is-zero input {
     opacity: 0.5
   }
+
+  .card-item {
+    border: 2px solid #4350b0;
+    height: 100%
+  }
+
+  ::v-deep .number-input-theme .number-input__input {
+    background: rgba(0, 0, 0, .2) !important;
+    border: 1px solid #ddd;
+    border-radius: 1rem !important;
+    top: 0 !important;
+  }
+
+  ::v-deep .number-input-theme .number-input__input:hover {
+    background: rgba(0, 0, 0, .35) !important;
+  }
+  ::v-deep .number-input-theme .number-input__input:focus {
+    background: rgba(0, 0, 0, .5) !important;
+    border: 1px solid #0074d9;
+    /*border: none;*/
+    /*box-shadow: 0 0 0 1px #0074d9;*/
+  }
+
+  ::v-deep .theme--light .number-input-theme .number-input__input:hover {
+    background: rgba(0, 0, 0, .17) !important;
+  }
+  ::v-deep .theme--light .number-input-theme .number-input__input:focus {
+    background: rgba(0, 0, 0, .35) !important;
+  }
+
+  ::v-deep .number-input-theme .number-input__button {
+    border: none !important;
+    border-radius: 50% !important;
+    top: 6px !important;
+    height: 18px !important;
+    width: 18px !important;
+  }
+  ::v-deep .number-input-theme .number-input__button--minus {
+    left: 7px !important;
+  }
+  ::v-deep .number-input-theme .number-input__button--plus {
+    right: 7px !important;
+  }
+
+  .field-caption {
+    top: -30px;
+    left: 20px;
+    position: absolute;
+    background: rgba(0, 0, 0, .98);
+    font-weight: bold;
+    padding: 1px 5px;
+    border-radius: 3px;
+    font-size: 11px !important;
+    z-index: 4;
+
+    user-select: none;
+  }
+
 </style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index b485050b..83f522af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18,6 +18,13 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
+"@babel/code-frame@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
+  integrity sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==
+  dependencies:
+    "@babel/highlight" "^7.8.3"
+
 "@babel/core@^7.0.0":
   version "7.7.7"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.7.tgz#ee155d2e12300bcc0cff6a8ad46f2af5063803e9"
@@ -48,6 +55,16 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/generator@^7.8.6":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.6.tgz#57adf96d370c9a63c241cd719f9111468578537a"
+  integrity sha512-4bpOR5ZBz+wWcMeVtcf7FbjcFzCp+817z2/gHNncIRcM9MmKzUhtWCYAq27RAfUrAFwb+OCG1s9WEaVxfi6cjg==
+  dependencies:
+    "@babel/types" "^7.8.6"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz#bb3faf1e74b74bd547e867e48f551fa6b098b6ce"
@@ -118,6 +135,15 @@
     "@babel/template" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-function-name@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz#eeeb665a01b1f11068e9fb86ad56a1cb1a824cca"
+  integrity sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.8.3"
+    "@babel/template" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-get-function-arity@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0"
@@ -125,6 +151,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-get-function-arity@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
+  integrity sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-hoist-variables@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.7.4.tgz#612384e3d823fdfaaf9fce31550fe5d4db0f3d12"
@@ -139,6 +172,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-member-expression-to-functions@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz#659b710498ea6c1d9907e0c73f206eee7dadc24c"
+  integrity sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz#e5a92529f8888bf319a6376abfbd1cebc491ad91"
@@ -146,6 +186,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-module-imports@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
+  integrity sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-module-transforms@^7.7.4", "@babel/helper-module-transforms@^7.7.5":
   version "7.7.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.7.5.tgz#d044da7ffd91ec967db25cd6748f704b6b244835"
@@ -158,6 +205,19 @@
     "@babel/types" "^7.7.4"
     lodash "^4.17.13"
 
+"@babel/helper-module-transforms@^7.8.3":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.8.6.tgz#6a13b5eecadc35692047073a64e42977b97654a4"
+  integrity sha512-RDnGJSR5EFBJjG3deY0NiL0K9TO8SXxS9n/MPsbPK/s9LbQymuLNtlzvDiNS7IpecuL45cMeLVkA+HfmlrnkRg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-replace-supers" "^7.8.6"
+    "@babel/helper-simple-access" "^7.8.3"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    "@babel/template" "^7.8.6"
+    "@babel/types" "^7.8.6"
+    lodash "^4.17.13"
+
 "@babel/helper-optimise-call-expression@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.7.4.tgz#034af31370d2995242aa4df402c3b7794b2dcdf2"
@@ -165,11 +225,23 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-optimise-call-expression@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz#7ed071813d09c75298ef4f208956006b6111ecb9"
+  integrity sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-plugin-utils@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
   integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
 
+"@babel/helper-plugin-utils@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
+  integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
+
 "@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
@@ -198,6 +270,16 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-replace-supers@^7.8.6":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.8.6.tgz#5ada744fd5ad73203bf1d67459a27dcba67effc8"
+  integrity sha512-PeMArdA4Sv/Wf4zXwBKPqVj7n9UF/xg6slNRtZW84FM7JpE1CbG8B612FyM4cxrf4fMAMGO0kR7voy1ForHHFA==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.8.3"
+    "@babel/helper-optimise-call-expression" "^7.8.3"
+    "@babel/traverse" "^7.8.6"
+    "@babel/types" "^7.8.6"
+
 "@babel/helper-simple-access@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.7.4.tgz#a169a0adb1b5f418cfc19f22586b2ebf58a9a294"
@@ -206,6 +288,14 @@
     "@babel/template" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-simple-access@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
+  integrity sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==
+  dependencies:
+    "@babel/template" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-split-export-declaration@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz#57292af60443c4a3622cf74040ddc28e68336fd8"
@@ -213,6 +303,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-split-export-declaration@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
+  integrity sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-wrap-function@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz#37ab7fed5150e22d9d7266e830072c0cdd8baace"
@@ -241,11 +338,25 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.8.3.tgz#28f173d04223eaaa59bc1d439a3836e6d1265797"
+  integrity sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.0.0", "@babel/parser@^7.7.4", "@babel/parser@^7.7.7":
   version "7.7.7"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.7.tgz#1b886595419cf92d811316d5b715a53ff38b4937"
   integrity sha512-WtTZMZAZLbeymhkd/sEaPD8IQyGAhmuTuvTzLiCFM7iXiVdY0gc0IaI+cW0fh1BnSMbJSzXX6/fHllgHKwHhXw==
 
+"@babel/parser@^7.8.6":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.6.tgz#ba5c9910cddb77685a008e3c587af8d27b67962c"
+  integrity sha512-trGNYSfwq5s0SgM1BMEB8hX3NDmO7EP2wsDGDexiaKMB92BaRpS+qZfpkMqUBhcsOTBwNy9B/jieo4ad/t/z2g==
+
 "@babel/plugin-proposal-async-generator-functions@^7.2.0":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.4.tgz#0351c5ac0a9e927845fffd5b82af476947b7ce6d"
@@ -476,6 +587,16 @@
     "@babel/helper-simple-access" "^7.7.4"
     babel-plugin-dynamic-import-node "^2.3.0"
 
+"@babel/plugin-transform-modules-commonjs@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.8.3.tgz#df251706ec331bd058a34bdd72613915f82928a5"
+  integrity sha512-JpdMEfA15HZ/1gNuB9XEDlZM1h/gF/YOH7zaZzQu2xCFRfwc01NXBMHHSTT6hRjlXJJs5x/bfODM3LiCk94Sxg==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-simple-access" "^7.8.3"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
 "@babel/plugin-transform-modules-systemjs@^7.3.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.7.4.tgz#cd98152339d3e763dfe838b7d4273edaf520bb30"
@@ -659,6 +780,15 @@
     "@babel/parser" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/template@^7.8.3", "@babel/template@^7.8.6":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
+  integrity sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/parser" "^7.8.6"
+    "@babel/types" "^7.8.6"
+
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558"
@@ -674,6 +804,21 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
+"@babel/traverse@^7.8.6":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.6.tgz#acfe0c64e1cd991b3e32eae813a6eb564954b5ff"
+  integrity sha512-2B8l0db/DPi8iinITKuo7cbPznLCEk0kCxDoB9/N6gGNg/gxOXiR/IcymAFPiBwk5w6TtQ27w4wpElgp9btR9A==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.8.6"
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    "@babel/parser" "^7.8.6"
+    "@babel/types" "^7.8.6"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
 "@babel/types@^7.0.0", "@babel/types@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193"
@@ -683,6 +828,20 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.8.3", "@babel/types@^7.8.6":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.6.tgz#629ecc33c2557fcde7126e58053127afdb3e6d01"
+  integrity sha512-wqz7pgWMIrht3gquyEFPVXeXCti72Rm8ep9b5tQKz9Yg9LzJA3HxosF1SB3Kc81KD1A3XBkkVYtJvCKS2Z/QrA==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
+"@chenfengyuan/vue-number-input@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@chenfengyuan/vue-number-input/-/vue-number-input-1.2.1.tgz#acf9a220ca3e196bb2cb19b8094b2a7fcce53c4a"
+  integrity sha512-MNiA2KThxP6YtskBrw/31Qv6ul/TMhC5hn1W4Lb0XLcln8VPZpHFuWSq6EoHlvqwdBWKcc3Fqv4dVB14dhE/Hw==
+
 "@choojs/findup@^0.2.0":
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@choojs/findup/-/findup-0.2.1.tgz#ac13c59ae7be6e1da64de0779a0a7f03d75615a3"

From e1a33fdcdf912f986e1fa1cf3d0ae5089b040fab Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Thu, 5 Mar 2020 09:10:25 -0500
Subject: [PATCH 28/45] improvement(planner): enlarged button size

---
 src/views/Planner.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index 4d50abc8..14b1b422 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -170,7 +170,7 @@
           </v-row>
           <v-tabs
             v-model="calculation.tab"
-            icons-and-text
+            icons-and-text 
             grow
             centered
             class="elevated-tab"
@@ -829,15 +829,15 @@
   ::v-deep .number-input-theme .number-input__button {
     border: none !important;
     border-radius: 50% !important;
-    top: 6px !important;
-    height: 18px !important;
-    width: 18px !important;
+    top: 2px !important;
+    height: 27px !important;
+    width: 27px !important;
   }
   ::v-deep .number-input-theme .number-input__button--minus {
-    left: 7px !important;
+    left: 2px !important;
   }
   ::v-deep .number-input-theme .number-input__button--plus {
-    right: 7px !important;
+    right: 2px !important;
   }
 
   .field-caption {

From e6435fb2f795ad895057401ef0769cbe74b03053 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Thu, 5 Mar 2020 09:50:32 -0500
Subject: [PATCH 29/45] improvement(planner): improved button styles

---
 src/views/Planner.vue | 39 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index 14b1b422..ebed8717 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -29,7 +29,9 @@
         "exp": "预计获得录像带经验",
         "times": "次",
         "items": "将得到物品",
-        "level": "素材等级"
+        "level": "素材等级",
+        "noStage": "未找到需要作战的关卡。是不是忘记选择所需素材了？",
+        "noSyntheses": "未找到需要合成的素材。是不是忘记选择所需素材了？"
       }
     },
     "en": {
@@ -61,7 +63,9 @@
         "exp": "Estimated EXP from Battle Records",
         "times": "battles",
         "items": "Will get",
-        "level": "Material Level"
+        "level": "Material Level",
+        "noStage": "No stage found. Have you selected any material yet?",
+        "noSyntheses": "No syntheses found. Have you selected any material yet?"
       }
     }
   }
@@ -184,6 +188,14 @@
               <v-icon>{{ tab.icon }}</v-icon>
             </v-tab>
             <v-tab-item>
+              <v-alert
+                v-if="!calculation.data.stages.length"
+                type="warning"
+                border="left"
+                class="mt-4"
+              >
+                {{ $t('calculation.noStage') }}
+              </v-alert>
               <v-row
                 align="start"
                 justify="start"
@@ -227,6 +239,14 @@
               </v-row>
             </v-tab-item>
             <v-tab-item>
+              <v-alert
+                v-if="!calculation.data.syntheses.length"
+                type="warning"
+                border="left"
+                class="mt-4"
+              >
+                {{ $t('calculation.noSyntheses') }}
+              </v-alert>
               <v-row
                 align="start"
                 justify="start"
@@ -574,7 +594,7 @@
                   center
                   controls
                   :placeholder="$t('have')"
-                  class="monospace font-weight-bold number-input-theme"
+                  class="monospace font-weight-bold number-input-theme transition-all"
                   :min="0"
                 />
               </v-col>
@@ -601,7 +621,7 @@
                   center
                   controls
                   :placeholder="$t('need')"
-                  class="monospace font-weight-bold number-input-theme"
+                  class="monospace font-weight-bold number-input-theme transition-all"
                   :min="0"
                 />
               </v-col>
@@ -827,12 +847,21 @@
   }
 
   ::v-deep .number-input-theme .number-input__button {
-    border: none !important;
+    border: 1px solid #ddd !important;
     border-radius: 50% !important;
     top: 2px !important;
     height: 27px !important;
     width: 27px !important;
+    transition: all .575s cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
+  ::v-deep .number-input-theme .number-input__button:hover {
+    transform: scale(1.15);
+    transition: all .125s cubic-bezier(0.165, 0.84, 0.44, 1);
   }
+  ::v-deep .number-input-theme .number-input__button:active {
+    transform: scale(1.05);
+  }
+
   ::v-deep .number-input-theme .number-input__button--minus {
     left: 2px !important;
   }

From 86c7bb023483183a841b04bc2ac8268c95c2cbf0 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Thu, 5 Mar 2020 09:57:34 -0500
Subject: [PATCH 30/45] improvement(planner): improved button styles

---
 src/views/Planner.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index ebed8717..b3c76c03 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -852,11 +852,10 @@
     top: 2px !important;
     height: 27px !important;
     width: 27px !important;
-    transition: all .575s cubic-bezier(0.165, 0.84, 0.44, 1);
+    transition: all .225s cubic-bezier(0.165, 0.84, 0.44, 1);
   }
   ::v-deep .number-input-theme .number-input__button:hover {
     transform: scale(1.15);
-    transition: all .125s cubic-bezier(0.165, 0.84, 0.44, 1);
   }
   ::v-deep .number-input-theme .number-input__button:active {
     transform: scale(1.05);

From e199dfaec0c52b0c11fd5691d9ba2ea9d9a85973 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Thu, 5 Mar 2020 10:17:57 -0500
Subject: [PATCH 31/45] improvement(planner): improved button on mobile

---
 src/views/Planner.vue | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index b3c76c03..45d83af7 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -595,6 +595,7 @@
                   controls
                   :placeholder="$t('have')"
                   class="monospace font-weight-bold number-input-theme transition-all"
+                  :class="{'number-input-theme--dense': $vuetify.breakpoint.smAndDown}"
                   :min="0"
                 />
               </v-col>
@@ -622,6 +623,7 @@
                   controls
                   :placeholder="$t('need')"
                   class="monospace font-weight-bold number-input-theme transition-all"
+                  :class="{'number-input-theme--dense': $vuetify.breakpoint.smAndDown}"
                   :min="0"
                 />
               </v-col>
@@ -827,6 +829,12 @@
     border: 1px solid #ddd;
     border-radius: 1rem !important;
     top: 0 !important;
+    font-size: 16px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    padding-left: 30px !important;
+    padding-right: 30px !important;
   }
 
   ::v-deep .number-input-theme .number-input__input:hover {
@@ -848,10 +856,10 @@
 
   ::v-deep .number-input-theme .number-input__button {
     border: 1px solid #ddd !important;
-    border-radius: 50% !important;
     top: 2px !important;
-    height: 27px !important;
-    width: 27px !important;
+    border-radius: 50% !important;
+    height: 30px !important;
+    width: 30px !important;
     transition: all .225s cubic-bezier(0.165, 0.84, 0.44, 1);
   }
   ::v-deep .number-input-theme .number-input__button:hover {
@@ -868,6 +876,23 @@
     right: 2px !important;
   }
 
+  ::v-deep .number-input-theme--dense .number-input__button--minus {
+    border-radius: 15px 0 0 15px !important;
+  }
+  ::v-deep .number-input-theme--dense .number-input__button--plus {
+    border-radius: 0 15px 15px 0 !important;
+  }
+  ::v-deep .number-input-theme--dense .number-input__button::before {
+    width: 75%;
+  }
+  ::v-deep .number-input-theme--dense .number-input__button {
+    width: 20px !important;
+  }
+  ::v-deep .number-input-theme--dense .number-input__input {
+    padding-left: 20px !important;
+    padding-right: 20px !important;
+  }
+
   .field-caption {
     top: -30px;
     left: 20px;

From 2ef81e12473de16f924a8163f49a07f26d9b1fd4 Mon Sep 17 00:00:00 2001
From: AlvISsReimu <alvissreimu@gmail.com>
Date: Mon, 9 Mar 2020 02:15:18 +0900
Subject: [PATCH 32/45] improvement(planner): add i18n

---
 src/views/Planner.vue | 83 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 70 insertions(+), 13 deletions(-)

diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index 45d83af7..b4164d3b 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -3,7 +3,7 @@
     "zh": {
       "options": {
         "_name": "选项",
-        "byProduct": "计算合成副产物",
+        "byProduct": "考虑合成副产物",
         "requireExp": "大量需求经验",
         "requireLmb": "大量需求龙门币"
       },
@@ -11,7 +11,6 @@
         "import": "导入",
         "export": "导出",
         "importExport": "@:(actions.import)/@:(actions.export)",
-        "becomeIdol": "众筹站长女装",
         "calculate": "计算规划"
       },
       "have": "已有",
@@ -28,9 +27,8 @@
         "sanity": "预计需要理智",
         "exp": "预计获得录像带经验",
         "times": "次",
-        "items": "将得到物品",
-        "level": "素材等级",
-        "noStage": "未找到需要作战的关卡。是不是忘记选择所需素材了？",
+        "level": "材料等级",
+        "noStage": "未找到需要进行的作战。是不是忘记选择所需素材了？",
         "noSyntheses": "未找到需要合成的素材。是不是忘记选择所需素材了？"
       }
     },
@@ -38,14 +36,13 @@
       "options": {
         "_name": "Options",
         "byProduct": "Consider by-products",
-        "requireExp": "Require large amount of EXP",
-        "requireLmb": "Require large amount of LMB"
+        "requireExp": "Large demand for EXP",
+        "requireLmb": "Large demand for LMD"
       },
       "actions": {
         "import": "Import",
         "export": "Export",
         "importExport": "@:(actions.import)/@:(actions.export)",
-        "becomeIdol": "Become Idol!",
         "calculate": "Calculate"
       },
       "have": "Have",
@@ -58,15 +55,78 @@
           "syntheses": "Syntheses",
           "values": "Values"
         },
-        "lmb": "Estimated LMB income",
+        "lmb": "Estimated LMD income",
         "sanity": "Estimated Sanity required",
         "exp": "Estimated EXP from Battle Records",
         "times": "battles",
-        "items": "Will get",
         "level": "Material Level",
         "noStage": "No stage found. Have you selected any material yet?",
         "noSyntheses": "No syntheses found. Have you selected any material yet?"
       }
+    },
+    "ja": {
+      "options": {
+        "_name": "オプション",
+        "byProduct": "加工副産物を考慮する",
+        "requireExp": "大量の経験値が必要",
+        "requireLmb": "大量の龍門幣が必要"
+      },
+      "actions": {
+        "import": "インポート",
+        "export": "エクスポート",
+        "importExport": "@:(actions.import)/@:(actions.export)",
+        "calculate": "計算を行う"
+      },
+      "have": "所持数",
+      "need": "必要数",
+      "copy": "クリップボードにコピー",
+      "calculation": {
+        "title": "計算結果",
+        "tabs": {
+          "stages": "ステージ",
+          "syntheses": "素材加工",
+          "values": "素材等級"
+        },
+        "lmb": "推定獲得龍門幣",
+        "sanity": "推定必要理性",
+        "exp": "戦闘で入手出来る経験値の推定",
+        "times": "回",
+        "level": "素材レベル",
+        "noStage": "入力内容に不備があるため結果を表示出来ません。必要な素材の入力を忘れていませんか？",
+        "noSyntheses": "入力内容に不備があるため結果を表示出来ません。必要な素材の入力を忘れていませんか？"
+      }
+    },
+    "ko": {
+      "options": {
+        "_name": "설정",
+        "byProduct": "부산물 획득 고려",
+        "requireExp": "경험치 획득 고려",
+        "requireLmb": "용문폐 획득 고려"
+      },
+      "actions": {
+        "import": "가져오기",
+        "export": "내보내기",
+        "importExport": "@:(actions.import)/@:(actions.export)",
+        "calculate": "계산하기"
+      },
+      "have": "소유량",
+      "need": "필요량",
+      "copy": "클립보드에 복사",
+      "calculation": {
+        "title": "계산 결과",
+        "tabs": {
+          "stages": "작전 지역 기준",
+          "syntheses": "재료 가공 기준",
+          "values": "재료 등급 기준"
+        },
+        "lmb": "예상 용문폐 획득량",
+        "sanity": "예상 이성 필요량",
+        "exp": "예상 경험치 획득량",
+        "times": "회",
+        "level": "재료 등급",
+        "noStage": "작전 지역을 찾을 수 없습니다. 필요한 재료를 선택하셨습니까?",
+        "noSyntheses": "가공할 재료를 찾을 수 없습니다. 필요한 재료를 선택하셨습니까?"
+      }
     }
   }
 </i18n>
@@ -219,9 +279,6 @@
                       <div class="display-1 text-center monospace font-weight-bold mb-2">
                         {{ parseInt(stage.count).toLocaleString() }} <small class="title">{{ $t('calculation.times') }}</small>
                       </div>
-                      <div class="subtitle-1">
-                        {{ $t('calculation.items') }}
-                      </div>
                       <ul class="pl-2">
                         <li
                           v-for="[name, value] in Object.entries(stage.items)"

From f13ed723d6ad1c63ad2827a7e4389d4fe73b4348 Mon Sep 17 00:00:00 2001
From: AlvISsReimu <alvissreimu@gmail.com>
Date: Mon, 9 Mar 2020 02:58:00 +0900
Subject: [PATCH 33/45] fix(misc): fix much stuff

Add PRTS into Link Exchange; Add collaborators; Update version number

fix #224
---
 package.json                  |  2 +-
 src/config/index.js           |  2 +-
 src/views/About/Changelog.vue |  3 ++
 src/views/About/Links.vue     | 22 +++++++----
 src/views/About/Members.vue   | 72 ++++++++++++++++++++++-------------
 5 files changed, 65 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index 080646da..10b8124f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "penguin-stats-frontend",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/config/index.js b/src/config/index.js
index 89fdccbf..f09e82dd 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,6 +1,6 @@
 const client = {
   source: "frontend-v2",
-  version: "v1.1.2"
+  version: "v1.1.3"
 };
 
 export default {
diff --git a/src/views/About/Changelog.vue b/src/views/About/Changelog.vue
index 416cd29f..6e8fe14d 100644
--- a/src/views/About/Changelog.vue
+++ b/src/views/About/Changelog.vue
@@ -39,6 +39,9 @@ export default {
   data() {
     return {
       logs: {
+        'v1.1.3': [
+          '重做ArkPlanner'
+        ],
         'v1.1.2': [
           '加入韩语翻译',
           '增加载入界面'
diff --git a/src/views/About/Links.vue b/src/views/About/Links.vue
index 2f2f1581..f69f6ef5 100644
--- a/src/views/About/Links.vue
+++ b/src/views/About/Links.vue
@@ -16,6 +16,7 @@
           "walkthrough": "通关攻略",
           "experience": "经验分享",
           "ja_translation": "剧情日文翻译",
+          "cn_wiki": "国服wiki",
           "jp_wiki": "日服Wiki"
         }
       }
@@ -36,6 +37,7 @@
           "walkthrough": "Walkthrough",
           "experience": "Experience",
           "ja_translation": "Japanese Translation of Main Story",
+          "cn_wiki": "CN Server Wiki",
           "jp_wiki": "JP Server Wiki"
         }
       }
@@ -56,6 +58,7 @@
           "walkthrough": "ステージ攻略",
           "experience": "ゲームレビュー",
           "ja_translation": "ストーリー和訳",
+          "cn_wiki": "大陸版Wiki",
           "jp_wiki": "日本版Wiki"
         }
       }
@@ -76,6 +79,7 @@
           "walkthrough": "공략집",
           "experience": "팁 모음",
           "ja_translation": "메인스토리 일본어 번역",
+          "cn_wiki": "중국서버 위키",
           "jp_wiki": "일본서버 위키"
         }
       }
@@ -283,20 +287,22 @@ export default {
           ],
           url: "https://smartgamecap.net"
         },
+        {
+          title: "PRTS",
+          features: [
+            {
+              name: "cn_wiki",
+              color: "blue-grey"
+            }
+          ],
+          url: "http://ak.mooncell.wiki/id/1"
+        },
         {
           title: "ANWiki",
           features: [
             {
               name: "jp_wiki",
               color: "blue-grey"
-            },
-            {
-              name: "walkthrough",
-              color: "brown"
-            },
-            {
-              name: "character",
-              color: "orange"
             }
           ],
           url: "https://wiki.gamerclub.jp/anwiki"
diff --git a/src/views/About/Members.vue b/src/views/About/Members.vue
index 2b197889..17a6b972 100644
--- a/src/views/About/Members.vue
+++ b/src/views/About/Members.vue
@@ -263,6 +263,16 @@
                 github: "https://github.com/ycremar"
               }
             },
+            {
+              name: "根派",
+              responsibility: [
+                r.arkplanner
+              ],
+              avatar: "genpai.jpg",
+              socials: {
+                github: "https://github.com/SQRPI"
+              }
+            },
             {
               name: "Einzithy.D",
               responsibility: [
@@ -273,6 +283,16 @@
                 github: "https://github.com/Einzithy-D"
               }
             },
+            {
+              name: "Blealtan",
+              responsibility: [
+                r.frontend
+              ],
+              avatar: "blealtan.png",
+              socials: {
+                github: "https://github.com/Blealtan"
+              }
+            },
             {
               name: "ChaosNiku",
               responsibility: [
@@ -314,67 +334,67 @@
               }
             }
           ],
-          others: [
+          translators: [
             {
-              name: "Nemunemu",
+              name: "Syaro",
               responsibility: [
-                r.customersupport
+                r.localization.ko
               ],
-              avatar: "nemunemu.jpg",
+              avatar: "syaro.png",
               socials: {
-                weibo: "https://www.weibo.com/nemunemu"
+                twitter: "https://twitter.com/StarNight_ko"
               }
             },
             {
-              name: "侠",
+              name: "方舟航海図",
               responsibility: [
-                r.logo
+                r.localization.ja
               ],
-              avatar: "xia.png",
+              avatar: "koukaizu.jpg",
               socials: {
-                weibo: "https://www.weibo.com/u/2290638732"
+                twitter: "https://twitter.com/Arkn1ghts"
               }
             },
             {
-              name: "水晶泡芙",
+              name: "ウィン",
               responsibility: [
-                r.materials
+                r.localization.ja
               ],
-              avatar: "paofu.png",
+              avatar: "win.png",
               socials: {
-                github: "https://github.com/Evealicemier"
+                twitter: "https://twitter.com/Winterer000000"
               }
             }
           ],
-          translators: [
+          others: [
             {
-              name: "Syaro",
+              name: "Nemunemu",
               responsibility: [
-                r.localization.ko
+                r.customersupport
               ],
-              avatar: "syaro.png",
+              avatar: "nemunemu.jpg",
               socials: {
-                twitter: "https://twitter.com/StarNight_ko"
+                weibo: "https://www.weibo.com/nemunemu"
               }
             },
             {
-              name: "方舟航海図",
+              name: "侠",
               responsibility: [
-                r.localization.ja
+                r.logo
               ],
-              avatar: "koukaizu.jpg",
+              avatar: "xia.png",
               socials: {
-                twitter: "https://twitter.com/Arkn1ghts"
+                weibo: "https://www.weibo.com/u/2290638732"
               }
             },
             {
-              name: "ウィン",
+              name: "水晶泡芙",
               responsibility: [
-                r.localization.ja
+                r.materials
               ],
-              avatar: "win.png",
+              avatar: "paofu.png",
               socials: {
-                twitter: "https://twitter.com/Winterer000000"
+                github: "https://github.com/Evealicemier"
               }
             }
           ]

From a3d7ee04827b2641338633b1c4cf0bddc0460da6 Mon Sep 17 00:00:00 2001
From: AlvISsReimu <alvissreimu@gmail.com>
Date: Mon, 9 Mar 2020 02:59:59 +0900
Subject: [PATCH 34/45] fix(links): change the name of Links to Link Exchange

---
 src/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 0324b161..fcc70a1b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -19,7 +19,7 @@
       "changelog": "Change Log",
       "contact": "Contact us",
       "donate": "Donate",
-      "links": "Links",
+      "links": "Link Exchange",
       "bulletin": "Notice"
     },
     "planner": "ArkPlanner",

From b90819d98c3707eba38e819360871e51a5389303 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sun, 8 Mar 2020 14:53:57 -0400
Subject: [PATCH 35/45] improvement(planner): fixed import, improved item
 showcase

---
 src/App.vue                                   |   3 +
 src/components/global/GlobalSnackbar.vue      |  70 +++++++
 src/components/global/RandomBackground.vue    |   2 +-
 .../toolbar/NetworkStateIndicator.vue         |  11 +-
 src/store/index.js                            |  13 +-
 src/store/modules/ui.js                       |  26 +++
 src/utils/getters.js                          |   7 +-
 src/utils/snackbar.js                         |  24 +++
 src/views/Planner.vue                         | 189 +++++++++++++-----
 9 files changed, 284 insertions(+), 61 deletions(-)
 create mode 100644 src/components/global/GlobalSnackbar.vue
 create mode 100644 src/store/modules/ui.js
 create mode 100644 src/utils/snackbar.js

diff --git a/src/App.vue b/src/App.vue
index c27f808c..4394dcf4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <v-app :class="languageFont">
+    <GlobalSnackbar />
     <v-navigation-drawer
       v-model="drawer"
       app
@@ -322,10 +323,12 @@
   import strings from "@/utils/strings";
   import config from "@/config";
   import {mapGetters} from "vuex";
+  import GlobalSnackbar from "@/components/global/GlobalSnackbar";
 
 export default {
   name: 'App',
   components: {
+    GlobalSnackbar,
     NetworkStateIndicator,
     RandomBackground,
     AccountManager
diff --git a/src/components/global/GlobalSnackbar.vue b/src/components/global/GlobalSnackbar.vue
new file mode 100644
index 00000000..5c1ab784
--- /dev/null
+++ b/src/components/global/GlobalSnackbar.vue
@@ -0,0 +1,70 @@
+<i18n>
+  {
+    "zh": {
+      "network": {
+        "error": "网络请求失败，请检查网络后重试"
+      },
+      "clipboard": {
+        "success": "复制成功",
+        "error": "复制到剪贴板失败，请手动复制"
+      },
+      "planner": {
+        "import": {
+          "jsonError": "导入失败：数据格式错误，请检查后重试（{error}）",
+          "success": "导入成功：导入了 {amount} 个物品数据"
+        }
+      }
+    },
+    "en": {
+      "network": {
+        "error": "Network error, please check your network and try again."
+      },
+      "clipboard": {
+        "success": "Copied to clipboard",
+        "error": "Failed to copy to clipboard, please manually select text and copy it"
+      },
+      "planner": {
+        "import": {
+          "jsonError": "Failed to import: Data parsing error, please check your input ({error})",
+          "success": "Successfully imported data for {amount} items"
+        }
+      }
+    }
+  }
+</i18n>
+
+<template>
+  <v-snackbar
+    v-model="snackbar.enabled"
+    bottom
+    :timeout="snackbar.timeout"
+    :color="snackbar.color"
+  >
+    <v-icon class="mr-4">
+      {{ snackbar.icon }}
+    </v-icon>
+    {{ $t(snackbar.text, snackbar.extra) }}
+    <v-spacer />
+    <!--    <v-btn-->
+    <!--      text-->
+    <!--      @click="snackbar.enabled = false"-->
+    <!--    >-->
+    <!--      {{ $t('dialog.close') }}-->
+    <!--    </v-btn>-->
+  </v-snackbar>
+</template>
+
+<script>
+  import {mapState} from "vuex";
+
+  export default {
+    name: "GlobalSnackbar",
+    computed: {
+      ...mapState("ui", ["snackbar"])
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/global/RandomBackground.vue b/src/components/global/RandomBackground.vue
index 5afeaeec..c57db77e 100644
--- a/src/components/global/RandomBackground.vue
+++ b/src/components/global/RandomBackground.vue
@@ -34,7 +34,7 @@
         webpSupport: null,
         blurred: false,
         // TODO: Update image map.
-        // [key] is a special "zoneId" to display a special "background image"
+        // [key] is a special "stageId" to display a special "background image"
         // [value] represents a "background image url" on such route
         specialImageMap: {
           "main_06-14": "https://penguin-stats.s3.ap-southeast-1.amazonaws.com/backgrounds/fn_0_1.png", // 6-16
diff --git a/src/components/toolbar/NetworkStateIndicator.vue b/src/components/toolbar/NetworkStateIndicator.vue
index 5a56502b..73ae4f6a 100644
--- a/src/components/toolbar/NetworkStateIndicator.vue
+++ b/src/components/toolbar/NetworkStateIndicator.vue
@@ -68,8 +68,8 @@
     </v-dialog>
     <v-slide-x-reverse-transition>
       <v-card
-        v-if="(haveError && !model) || pending"
-        class="network-state-indicator"
+        v-if="show"
+        class="network-state-indicator transition-all"
         :class="{'error': haveError, 'blue darken-2': !haveError}"
       >
         <v-fade-transition>
@@ -125,13 +125,16 @@
     name: "NetworkStateIndicator",
     data () {
       return {
-        model: false,
+        model: false
       }
     },
     computed: {
       ...mapGetters('ajax', ['pending', 'errors']),
       haveError () {
         return this.errors.length > 0
+      },
+      show () {
+        return (this.haveError && !this.model) || this.pending
       }
     },
     watch: {
@@ -153,7 +156,7 @@
   }
 </script>
 
-<style scoped>
+<style>
   .network-state-indicator {
     position: fixed;
     right: 0;
diff --git a/src/store/index.js b/src/store/index.js
index b6960b32..ced87f6c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -9,10 +9,18 @@ import cacheUpdateAt from './modules/cacheUpdateAt';
 import data from './modules/data';
 import dataSource from './modules/dataSource';
 import settings from './modules/settings';
+import ui from './modules/ui';
 
 Vue.use(Vuex);
 
-localStorage.removeItem("penguin-stats-state");
+const previousState = localStorage.getItem("penguin-stats-state");
+if (previousState) {
+  localStorage.setItem("penguin-stats-data", {data: previousState["data"]});
+  localStorage.setItem("penguin-stats-settings", {settings: previousState["settings"]});
+  localStorage.setItem("penguin-stats-auth", {auth: previousState["auth"]});
+  localStorage.setItem("penguin-stats-cacheTTL", {cacheUpdateAt: previousState["cacheUpdateAt"]});
+  localStorage.removeItem("penguin-stats-state")
+}
 
 export default new Vuex.Store({
   plugins: [
@@ -47,6 +55,7 @@ export default new Vuex.Store({
     cacheUpdateAt,
     data,
     dataSource,
-    settings
+    settings,
+    ui
   }
 });
\ No newline at end of file
diff --git a/src/store/modules/ui.js b/src/store/modules/ui.js
new file mode 100644
index 00000000..97067515
--- /dev/null
+++ b/src/store/modules/ui.js
@@ -0,0 +1,26 @@
+export default {
+  namespaced: true,
+  state: {
+    snackbar: {
+      enabled: false,
+      color: "",
+      timeout: 0,
+      text: "",
+      icon: "",
+      extra: {}
+    }
+  },
+  mutations: {
+    setSnackbar (state, {color, timeout, text, icon, extra}) {
+      state.snackbar.enabled = true;
+      state.snackbar.color = color;
+      state.snackbar.timeout = timeout;
+      state.snackbar.text = text;
+      state.snackbar.icon = icon;
+      state.snackbar.extra = extra;
+    },
+  },
+  getters: {
+    snackbar: state => state.snackbar,
+  }
+};
\ No newline at end of file
diff --git a/src/utils/getters.js b/src/utils/getters.js
index 58295312..a55a9dfc 100644
--- a/src/utils/getters.js
+++ b/src/utils/getters.js
@@ -8,7 +8,12 @@ Getters.items = {
   byItemId(itemId) {
     const got = this.all(true);
     if (!got) return {};
-    return got.get(itemId)
+    return got.get(itemId) || {}
+  },
+  byName (name) {
+    const got = this.all(false);
+    if (!got) return {};
+    return got.find(el => el.name === name) || {}
   },
   all(map=false) {
     const items = store.state.data.items;
diff --git a/src/utils/snackbar.js b/src/utils/snackbar.js
new file mode 100644
index 00000000..61b8dc4e
--- /dev/null
+++ b/src/utils/snackbar.js
@@ -0,0 +1,24 @@
+import store from "../store";
+
+function getDefaultIcon (type) {
+  const MAP = {
+    "success": "mdi-check-circle",
+    "error": "mdi-close-circle",
+  };
+  return MAP[type]
+}
+
+export default {
+  launch (type, timeout, text, extra, icon) {
+    return store.commit("ui/setSnackbar", {
+      color: type,
+      timeout,
+      text,
+      extra,
+      icon: icon || getDefaultIcon(type) || "mdi-alert-circle"
+    })
+  },
+  networkError () {
+    this.launch("error", 10000, "network.error")
+  }
+}
\ No newline at end of file
diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index b4164d3b..fa92957c 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -138,7 +138,6 @@
   >
     <v-dialog
       v-model="calculation.done"
-      persistent
       scrollable
       max-width="calc(max(450px, 80vw))"
     >
@@ -276,20 +275,32 @@
                         <span class="font-weight-bold headline">{{ stage.stage }}</span>
                         <small class="float-right">#{{ index + 1 }}</small>
                       </div>
-                      <div class="display-1 text-center monospace font-weight-bold mb-2">
+                      <div class="display-1 text-center monospace font-weight-bold my-2">
                         {{ parseInt(stage.count).toLocaleString() }} <small class="title">{{ $t('calculation.times') }}</small>
                       </div>
-                      <ul class="pl-2">
-                        <li
+                      <div>
+                        <div
                           v-for="[name, value] in Object.entries(stage.items)"
                           :key="name"
-                          class="d-flex align-center"
+                          class="d-inline-flex mx-2 my-1 cursor-pointer"
+                          @click="redirectItem(getItem.byName(name).itemId)"
                         >
-                          <span class="font-weight-bold">{{ name }}</span>
-                          <v-divider class="mx-2" />
-                          <span class="monospace float-right">&times;{{ value }}</span>
-                        </li>
-                      </ul>
+                          <v-badge
+                            bottom
+                            overlap
+                            bordered
+                            label
+                            color="indigo"
+                            :offset-x="24"
+                            :offset-y="20"
+                            :content="`×${value}`"
+                          >
+                            <Item
+                              :item="getItem.byName(name)"
+                            />
+                          </v-badge>
+                        </div>
+                      </div>
                     </v-card-text>
                   </v-card>
                 </v-col>
@@ -320,24 +331,40 @@
                 >
                   <v-card class="card-item">
                     <v-card-text>
-                      <div class="title">
+                      <div class="title d-flex">
                         <span class="font-weight-bold headline">{{ synthesis.target }}</span>
-                        <small class="float-right">#{{ index + 1 }}</small>
+                        <v-spacer />
+                        <Item
+                          :item="getItem.byName(synthesis.target)"
+                          class="float-right"
+                          disable-tooltip
+                          :ratio="0.5"
+                        />
                       </div>
-                      <div class="display-1 text-center monospace font-weight-bold mb-2">
+                      <div class="display-1 text-center monospace font-weight-bold my-2">
                         &times;{{ parseInt(synthesis.count).toLocaleString() }}
                       </div>
-                      <ul class="pl-2">
-                        <li
-                          v-for="[name, value] in Object.entries(synthesis.materials)"
-                          :key="name"
-                          class="d-flex align-center"
+                      <div
+                        v-for="[name, value] in Object.entries(synthesis.materials)"
+                        :key="name"
+                        class="d-inline-flex mx-2 my-1 cursor-pointer"
+                        @click="redirectItem(getItem.byName(name).itemId)"
+                      >
+                        <v-badge
+                          bottom
+                          overlap
+                          bordered
+                          label
+                          color="secondary"
+                          :offset-x="24"
+                          :offset-y="20"
+                          :content="`×${value}`"
                         >
-                          <span class="font-weight-bold">{{ name }}</span>
-                          <v-divider class="mx-2" />
-                          <span class="monospace float-right">&times;{{ value }}</span>
-                        </li>
-                      </ul>
+                          <Item
+                            :item="getItem.byName(name)"
+                          />
+                        </v-badge>
+                      </div>
                     </v-card-text>
                   </v-card>
                 </v-col>
@@ -534,7 +561,9 @@
                   </v-card>
                 </v-tab-item>
                 <v-tab-item>
-                  <v-card flat>
+                  <v-card
+                    flat
+                  >
                     <v-card-text
                       class="monospace planner-import-export"
                     >
@@ -699,6 +728,8 @@
 
   import * as clipboard from "clipboard-polyfill";
   import marshaller from "@/utils/marshaller";
+  import snackbar from "@/utils/snackbar";
+  import Console from "@/utils/Console";
 
   export default {
     name: "Planner",
@@ -721,8 +752,8 @@
           })),
         calculation: {
           pending: false,
-          done: false,
-          data: {},
+          done: true,
+          data: {"cost":523285,"gcost":2200222,"gold":6279429,"exp":867763,"stages":[{"stage":"4-2","count":"2705","items":{"\u7cd6\u7ec4":"1067","\u5f02\u94c1":"417","\u5f02\u94c1\u788e\u7247":"348","\u7cd6":"532","\u4ee3\u7cd6":"448","\u7cd6\u805a\u5757":"107"}},{"stage":"4-4","count":"3048","items":{"\u56fa\u6e90\u5ca9\u7ec4":"69","\u56fa\u6e90\u5ca9":"934","\u6e90\u5ca9":"870","\u88c5\u7f6e":"376","\u626d\u8f6c\u9187":"1127","\u7834\u635f\u88c5\u7f6e":"340","\u767d\u9a6c\u9187":"153"}},{"stage":"4-9","count":"3237","items":{"\u916e\u51dd\u96c6":"249","\u7814\u78e8\u77f3":"74","RMA70-12":"960","\u916f\u539f\u6599":"1299","\u916e\u51dd\u96c6\u7ec4":"85","\u805a\u9178\u916f\u7ec4":"113","\u805a\u9178\u916f":"290","\u53cc\u916e":"1026","RMA70-24":"141"}},{"stage":"4-6","count":"3494","items":{"\u56fa\u6e90\u5ca9\u7ec4":"1566","\u56fa\u6e90\u5ca9":"1083","\u6e90\u5ca9":"989","\u88c5\u7f6e":"433","\u626d\u8f6c\u9187":"75","\u7834\u635f\u88c5\u7f6e":"381","\u63d0\u7eaf\u6e90\u5ca9":"190"}},{"stage":"4-5","count":"2753","items":{"\u916e\u51dd\u96c6":"258","\u916f\u539f\u6599":"1126","\u916e\u51dd\u96c6\u7ec4":"854","\u805a\u9178\u916f":"290","\u53cc\u916e":"902","\u916e\u9635\u5217":"101"}},{"stage":"4-8","count":"2262","items":{"\u916e\u51dd\u96c6":"160","\u7814\u78e8\u77f3":"786","RMA70-12":"46","\u916f\u539f\u6599":"910","\u916e\u51dd\u96c6\u7ec4":"59","\u805a\u9178\u916f\u7ec4":"77","\u805a\u9178\u916f":"192","\u53cc\u916e":"732","\u4e94\u6c34\u7814\u78e8\u77f3":"102"}},{"stage":"4-7","count":"3889","items":{"\u56fa\u6e90\u5ca9\u7ec4":"89","\u56fa\u6e90\u5ca9":"1220","\u6e90\u5ca9":"1077","\u88c5\u7f6e":"477","\u7834\u635f\u88c5\u7f6e":"432","\u8f7b\u9530\u77ff":"1157","\u4e09\u6c34\u9530\u77ff":"154"}},{"stage":"6-4","count":"1198","items":{"\u916e\u51dd\u96c6":"110","\u7814\u78e8\u77f3":"25","\u916f\u539f\u6599":"501","\u805a\u9178\u916f\u7ec4":"460","\u805a\u9178\u916f":"129","\u53cc\u916e":"382","\u805a\u9178\u916f\u5757":"47"}},{"stage":"4-10","count":"1924","items":{"\u5168\u65b0\u88c5\u7f6e":"577","\u56fa\u6e90\u5ca9\u7ec4":"71","\u56fa\u6e90\u5ca9":"664","\u6e90\u5ca9":"422","\u88c5\u7f6e":"266","\u626d\u8f6c\u9187":"70","\u7834\u635f\u88c5\u7f6e":"159","\u6539\u91cf\u88c5\u7f6e":"59"}},{"stage":"S4-1","count":"3325","items":{"\u5f02\u94c1":"521","\u5f02\u94c1\u788e\u7247":"452","\u7cd6":"637","\u4ee3\u7cd6":"553","\u5f02\u94c1\u7ec4":"1041","\u5f02\u94c1\u5757":"109"}}],"syntheses":[{"target":"D32\u94a2","count":"202","materials":{"\u4e09\u6c34\u9530\u77ff":"202","\u4e94\u6c34\u7814\u78e8\u77f3":"202","RMA70-24":"202"}},{"target":"\u53cc\u6781\u7eb3\u7c73\u7247","count":"222","materials":{"\u6539\u91cf\u88c5\u7f6e":"222","\u767d\u9a6c\u9187":"444"}},{"target":"\u805a\u5408\u5242","count":"204","materials":{"\u63d0\u7eaf\u6e90\u5ca9":"204","\u5f02\u94c1\u5757":"204","\u916e\u9635\u5217":"204"}},{"target":"RMA70-24","count":"297","materials":{"RMA70-12":"297","\u56fa\u6e90\u5ca9\u7ec4":"594","\u916e\u51dd\u96c6\u7ec4":"297"}},{"target":"\u4e94\u6c34\u7814\u78e8\u77f3","count":"389","materials":{"\u7814\u78e8\u77f3":"389","\u5f02\u94c1\u7ec4":"389","\u5168\u65b0\u88c5\u7f6e":"389"}},{"target":"\u4e09\u6c34\u9530\u77ff","count":"284","materials":{"\u8f7b\u9530\u77ff":"568","\u805a\u9178\u916f\u7ec4":"284","\u626d\u8f6c\u9187":"284"}},{"target":"\u767d\u9a6c\u9187","count":"574","materials":{"\u626d\u8f6c\u9187":"574","\u7cd6\u7ec4":"574","RMA70-12":"574"}},{"target":"\u88c5\u7f6e","count":"422","materials":{"\u7834\u635f\u88c5\u7f6e":"1266"}},{"target":"\u5168\u65b0\u88c5\u7f6e","count":"465","materials":{"\u88c5\u7f6e":"1860"}},{"target":"\u6539\u91cf\u88c5\u7f6e","count":"325","materials":{"\u5168\u65b0\u88c5\u7f6e":"325","\u56fa\u6e90\u5ca9\u7ec4":"650","\u7814\u78e8\u77f3":"325"}},{"target":"\u916e\u51dd\u96c6","count":"997","materials":{"\u53cc\u916e":"2991"}},{"target":"\u916e\u51dd\u96c6\u7ec4","count":"407","materials":{"\u916e\u51dd\u96c6":"1628"}},{"target":"\u916e\u9635\u5217","count":"311","materials":{"\u916e\u51dd\u96c6\u7ec4":"622","\u7cd6\u7ec4":"311","\u8f7b\u9530\u77ff":"311"}},{"target":"\u5f02\u94c1","count":"246","materials":{"\u5f02\u94c1\u788e\u7247":"738"}},{"target":"\u5f02\u94c1\u7ec4","count":"258","materials":{"\u5f02\u94c1":"1032"}},{"target":"\u5f02\u94c1\u5757","count":"293","materials":{"\u5f02\u94c1\u7ec4":"586","\u5168\u65b0\u88c5\u7f6e":"293","\u805a\u9178\u916f\u7ec4":"293"}},{"target":"\u805a\u9178\u916f","count":"1251","materials":{"\u916f\u539f\u6599":"3753"}},{"target":"\u805a\u9178\u916f\u7ec4","count":"493","materials":{"\u805a\u9178\u916f":"1972"}},{"target":"\u805a\u9178\u916f\u5757","count":"199","materials":{"\u805a\u9178\u916f\u7ec4":"398","\u916e\u51dd\u96c6\u7ec4":"199","\u626d\u8f6c\u9187":"199"}},{"target":"\u7cd6","count":"309","materials":{"\u4ee3\u7cd6":"927"}},{"target":"\u7cd6\u7ec4","count":"324","materials":{"\u7cd6":"1296"}},{"target":"\u7cd6\u805a\u5757","count":"162","materials":{"\u7cd6\u7ec4":"324","\u5f02\u94c1\u7ec4":"162","\u8f7b\u9530\u77ff":"162"}},{"target":"\u56fa\u6e90\u5ca9","count":"1082","materials":{"\u6e90\u5ca9":"3246"}},{"target":"\u56fa\u6e90\u5ca9\u7ec4","count":"949","materials":{"\u56fa\u6e90\u5ca9":"4745"}},{"target":"\u63d0\u7eaf\u6e90\u5ca9","count":"301","materials":{"\u56fa\u6e90\u5ca9\u7ec4":"1204"}}],"values":[{"level":"5","items":[{"name":"\u805a\u5408\u5242","value":"325.07"},{"name":"D32\u94a2","value":"322.68"},{"name":"\u53cc\u6781\u7eb3\u7c73\u7247","value":"287.93"}]},{"level":"4","items":[{"name":"\u5f02\u94c1\u5757","value":"128.63"},{"name":"\u916e\u9635\u5217","value":"114.94"},{"name":"\u6539\u91cf\u88c5\u7f6e","value":"114.30"},{"name":"\u4e09\u6c34\u9530\u77ff","value":"109.34"},{"name":"\u7cd6\u805a\u5757","value":"109.20"},{"name":"RMA70-24","value":"108.65"},{"name":"\u805a\u9178\u916f\u5757","value":"105.59"},{"name":"\u4e94\u6c34\u7814\u78e8\u77f3","value":"104.69"},{"name":"\u767d\u9a6c\u9187","value":"86.82"},{"name":"\u63d0\u7eaf\u6e90\u5ca9","value":"81.51"},{"name":"\u70bd\u5408\u91d1\u5757","value":"32.43"},{"name":"\u805a\u5408\u51dd\u80f6","value":"15.20"}]},{"level":"3","items":[{"name":"\u5168\u65b0\u88c5\u7f6e","value":"41.45"},{"name":"RMA70-12","value":"37.35"},{"name":"\u7814\u78e8\u77f3","value":"32.10"},{"name":"\u5f02\u94c1\u7ec4","value":"31.14"},{"name":"\u916e\u51dd\u96c6\u7ec4","value":"30.55"},{"name":"\u8f7b\u9530\u77ff","value":"29.60"},{"name":"\u626d\u8f6c\u9187","value":"25.24"},{"name":"\u805a\u9178\u916f\u7ec4","value":"24.90"},{"name":"\u7cd6\u7ec4","value":"24.23"},{"name":"\u56fa\u6e90\u5ca9\u7ec4","value":"20.38"},{"name":"\u51dd\u80f6","value":"0.00000"},{"name":"\u70bd\u5408\u91d1","value":"0.00000"}]},{"level":"2","items":[{"name":"\u88c5\u7f6e","value":"10.36"},{"name":"\u5f02\u94c1","value":"7.79"},{"name":"\u916e\u51dd\u96c6","value":"7.64"},{"name":"\u805a\u9178\u916f","value":"6.22"},{"name":"\u7cd6","value":"6.06"},{"name":"\u56fa\u6e90\u5ca9","value":"4.08"}]},{"level":"1","items":[{"name":"\u7834\u635f\u88c5\u7f6e","value":"3.45"},{"name":"\u5f02\u94c1\u788e\u7247","value":"2.60"},{"name":"\u53cc\u916e","value":"2.55"},{"name":"\u916f\u539f\u6599","value":"2.07"},{"name":"\u4ee3\u7cd6","value":"2.02"},{"name":"\u6e90\u5ca9","value":"1.36"}]}]},
           tab: null,
           tabs: [{
             id: "stages",
@@ -742,7 +773,8 @@
           byProduct: false,
           requireExp: false,
           requireLmb: false
-        }
+        },
+        getItem: get.items
       }
     },
     computed: {
@@ -760,10 +792,13 @@
           })
         )
           .then(({data}) => {
-            console.log(data);
+            Console.log(data);
             this.$set(this.calculation, "data", data);
             this.calculation.done = true
           })
+          .catch(() => {
+            snackbar.networkError()
+          })
           .finally(() => {
             this.calculation.pending = false;
           })
@@ -777,30 +812,79 @@
         try {
           imported = JSON.parse(this.importJson);
         } catch (e) {
-          alert(e);
+          Console.error("json error", e)
+          snackbar.launch("error", 5000, "planner.import.jsonError", {
+            error: e.toString()
+          });
           return
         }
-        if (imported.length !== this.itemsData.length)
-          return;
-        let importedAsMap = new Map();
-        for (const itemData of imported)
-          if (!(itemData.hasOwnProperty("id") && this.items.has(itemData.id) &&
-            itemData.hasOwnProperty("need") && Number.isInteger(itemData.need) && itemData.need >= 0 &&
-            itemData.hasOwnProperty("have") && Number.isInteger(itemData.have) && itemData.have >= 0))
-            return;
-          else
-            importedAsMap.set(itemData.id, [itemData.need, itemData.have]);
-        let newItemsData = [];
-        for (const item of this.items) {
-          let importedItem = importedAsMap.get(item.itemId);
-          newItemsData.push({id: item.itemId, need: importedItem[0], have: importedItem[1]});
+        let convertedImported = [];
+        for (const itemData of imported) {
+          if (!(itemData.hasOwnProperty("need") && Number.isInteger(itemData.need) && itemData.need >= 0 &&
+            itemData.hasOwnProperty("have") && Number.isInteger(itemData.have) && itemData.have >= 0)) {
+            Console.warn("one of the item data is invalid. not importing this and continue to the next one (reason: need or have invalid): ", itemData)
+            continue
+          }
+          const haveId = itemData.hasOwnProperty("id");
+          const haveName = itemData.hasOwnProperty("name");
+          if (haveId) {
+            if (!haveName) {
+              itemData.name = get.items.byItemId(itemData.id).name
+            }
+            convertedImported.push(itemData)
+          } else if (!haveId) {
+            if (!haveName) {
+              Console.warn("one of the item data is invalid. not importing this and continue to the next one (reason: no id and name): ", itemData)
+              continue
+            }
+            const item = get.items.byName(itemData.name);
+            convertedImported.push({
+              id: item.itemId,
+              name: item.name,
+              need: itemData.need,
+              have: itemData.have
+            })
+          }
+        }
+
+        let importedCounter = 0;
+
+        for (const item of convertedImported) {
+          const object = this.itemsData.find(el => el.id === item.id);
+          if (!object) {
+            Console.warn("no item found with", item);
+            continue
+          }
+          object.have = item.have;
+          object.need = item.need;
+          importedCounter++;
         }
-        this.itemsData = newItemsData;
+
+        this.importJson = "";
         this.importExportDialog = false;
+        snackbar.launch("success", 5000, "planner.import.success", {
+          amount: importedCounter
+        })
       },
       copyExportJson() {
-        clipboard.writeText(this.exportJson);
+        clipboard.writeText(this.exportJson)
+          .then(() => {
+            snackbar.launch("success", 5000, "clipboard.success")
+          })
+          .catch(() => {
+            snackbar.launch("error", 5000, "clipboard.error")
+          })
+      },
+      redirectItem(itemId) {
+        console.log(itemId)
+        this.$router.push({
+          name: "StatsByItem_SelectedItem",
+          params: {
+            itemId
+          }
+        })
       }
+
     }
   };
 </script>
@@ -835,13 +919,12 @@
 
   .planner-import-export, ::v-deep .planner-import-export textarea {
     word-break: break-all;
-    line-height: 1.1 !important;
+    line-height: 1.2 !important;
     font-size: 12px;
-    max-height: 300px;
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    flex: 1 1 auto;
-    overflow-y: auto;
+  }
+
+  ::v-deep .planner-import-export textarea {
+    padding: 8px 0;
   }
 
   .fix-icon--left {
@@ -884,7 +967,7 @@
   ::v-deep .number-input-theme .number-input__input {
     background: rgba(0, 0, 0, .2) !important;
     border: 1px solid #ddd;
-    border-radius: 1rem !important;
+    border-radius: 17px !important;
     top: 0 !important;
     font-size: 16px;
     text-overflow: ellipsis;
@@ -920,7 +1003,7 @@
     transition: all .225s cubic-bezier(0.165, 0.84, 0.44, 1);
   }
   ::v-deep .number-input-theme .number-input__button:hover {
-    transform: scale(1.15);
+    transform: scale(1.12);
   }
   ::v-deep .number-input-theme .number-input__button:active {
     transform: scale(1.05);

From 2f545caf693afa6d0d00d53abc54238c4b9e39c9 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sun, 8 Mar 2020 15:55:10 -0400
Subject: [PATCH 36/45] improvement(planner): add icon to calculation result

---
 src/components/global/GlobalSnackbar.vue |   6 +-
 src/views/Planner.vue                    | 113 +++++++++++++++++------
 2 files changed, 90 insertions(+), 29 deletions(-)

diff --git a/src/components/global/GlobalSnackbar.vue b/src/components/global/GlobalSnackbar.vue
index 5c1ab784..6c6a484a 100644
--- a/src/components/global/GlobalSnackbar.vue
+++ b/src/components/global/GlobalSnackbar.vue
@@ -12,7 +12,8 @@
         "import": {
           "jsonError": "导入失败：数据格式错误，请检查后重试（{error}）",
           "success": "导入成功：导入了 {amount} 个物品数据"
-        }
+        },
+        "calculationError": "计算失败：{error}"
       }
     },
     "en": {
@@ -27,7 +28,8 @@
         "import": {
           "jsonError": "Failed to import: Data parsing error, please check your input ({error})",
           "success": "Successfully imported data for {amount} items"
-        }
+        },
+        "calculationError": "Failed to calculate: {error}"
       }
     }
   }
diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index fa92957c..9f1c44a8 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -280,10 +280,10 @@
                       </div>
                       <div>
                         <div
-                          v-for="[name, value] in Object.entries(stage.items)"
-                          :key="name"
+                          v-for="material in stage.materials"
+                          :key="material.name"
                           class="d-inline-flex mx-2 my-1 cursor-pointer"
-                          @click="redirectItem(getItem.byName(name).itemId)"
+                          @click="redirectItem(material.item.itemId)"
                         >
                           <v-badge
                             bottom
@@ -293,10 +293,10 @@
                             color="indigo"
                             :offset-x="24"
                             :offset-y="20"
-                            :content="`×${value}`"
+                            :content="`×${material.value}`"
                           >
                             <Item
-                              :item="getItem.byName(name)"
+                              :item="material.item"
                             />
                           </v-badge>
                         </div>
@@ -320,8 +320,8 @@
                 justify="start"
               >
                 <v-col
-                  v-for="[index, synthesis] in calculation.data.syntheses.entries()"
-                  :key="synthesis.target"
+                  v-for="synthesis in calculation.data.syntheses"
+                  :key="synthesis.target.itemId"
                   cols="12"
                   sm="6"
                   md="4"
@@ -332,10 +332,10 @@
                   <v-card class="card-item">
                     <v-card-text>
                       <div class="title d-flex">
-                        <span class="font-weight-bold headline">{{ synthesis.target }}</span>
+                        <span class="font-weight-bold headline">{{ synthesis.target.name }}</span>
                         <v-spacer />
                         <Item
-                          :item="getItem.byName(synthesis.target)"
+                          :item="synthesis.target.item"
                           class="float-right"
                           disable-tooltip
                           :ratio="0.5"
@@ -345,10 +345,10 @@
                         &times;{{ parseInt(synthesis.count).toLocaleString() }}
                       </div>
                       <div
-                        v-for="[name, value] in Object.entries(synthesis.materials)"
-                        :key="name"
+                        v-for="item in synthesis.items"
+                        :key="item.name"
                         class="d-inline-flex mx-2 my-1 cursor-pointer"
-                        @click="redirectItem(getItem.byName(name).itemId)"
+                        @click="redirectItem(item.item.itemId)"
                       >
                         <v-badge
                           bottom
@@ -358,10 +358,10 @@
                           color="secondary"
                           :offset-x="24"
                           :offset-y="20"
-                          :content="`×${value}`"
+                          :content="`×${item.value}`"
                         >
                           <Item
-                            :item="getItem.byName(name)"
+                            :item="item.item"
                           />
                         </v-badge>
                       </div>
@@ -390,17 +390,27 @@
                       <div class="title">
                         <span class="font-weight-bold headline">{{ $t('calculation.level') }} {{ value.level }}</span>
                       </div>
-                      <ul class="pl-2">
-                        <li
-                          v-for="item in value.items"
-                          :key="item.name"
-                          class="d-flex align-center"
+                      <div
+                        v-for="item in value.materials"
+                        :key="item.name"
+                        class="d-inline-flex mx-4 my-1 cursor-pointer"
+                        @click="redirectItem(item.item.itemId)"
+                      >
+                        <v-badge
+                          bottom
+                          overlap
+                          bordered
+                          label
+                          color="secondary"
+                          :offset-x="24"
+                          :offset-y="20"
+                          :content="`${item.value}`"
                         >
-                          <span class="font-weight-bold">{{ item.name }}</span>
-                          <v-divider class="mx-2" />
-                          <span class="monospace float-right">{{ item.value }}</span>
-                        </li>
-                      </ul>
+                          <Item
+                            :item="item.item"
+                          />
+                        </v-badge>
+                      </div>
                     </v-card-text>
                   </v-card>
                 </v-col>
@@ -730,6 +740,7 @@
   import marshaller from "@/utils/marshaller";
   import snackbar from "@/utils/snackbar";
   import Console from "@/utils/Console";
+  import strings from "@/utils/strings";
 
   export default {
     name: "Planner",
@@ -753,7 +764,7 @@
         calculation: {
           pending: false,
           done: true,
-          data: {"cost":523285,"gcost":2200222,"gold":6279429,"exp":867763,"stages":[{"stage":"4-2","count":"2705","items":{"\u7cd6\u7ec4":"1067","\u5f02\u94c1":"417","\u5f02\u94c1\u788e\u7247":"348","\u7cd6":"532","\u4ee3\u7cd6":"448","\u7cd6\u805a\u5757":"107"}},{"stage":"4-4","count":"3048","items":{"\u56fa\u6e90\u5ca9\u7ec4":"69","\u56fa\u6e90\u5ca9":"934","\u6e90\u5ca9":"870","\u88c5\u7f6e":"376","\u626d\u8f6c\u9187":"1127","\u7834\u635f\u88c5\u7f6e":"340","\u767d\u9a6c\u9187":"153"}},{"stage":"4-9","count":"3237","items":{"\u916e\u51dd\u96c6":"249","\u7814\u78e8\u77f3":"74","RMA70-12":"960","\u916f\u539f\u6599":"1299","\u916e\u51dd\u96c6\u7ec4":"85","\u805a\u9178\u916f\u7ec4":"113","\u805a\u9178\u916f":"290","\u53cc\u916e":"1026","RMA70-24":"141"}},{"stage":"4-6","count":"3494","items":{"\u56fa\u6e90\u5ca9\u7ec4":"1566","\u56fa\u6e90\u5ca9":"1083","\u6e90\u5ca9":"989","\u88c5\u7f6e":"433","\u626d\u8f6c\u9187":"75","\u7834\u635f\u88c5\u7f6e":"381","\u63d0\u7eaf\u6e90\u5ca9":"190"}},{"stage":"4-5","count":"2753","items":{"\u916e\u51dd\u96c6":"258","\u916f\u539f\u6599":"1126","\u916e\u51dd\u96c6\u7ec4":"854","\u805a\u9178\u916f":"290","\u53cc\u916e":"902","\u916e\u9635\u5217":"101"}},{"stage":"4-8","count":"2262","items":{"\u916e\u51dd\u96c6":"160","\u7814\u78e8\u77f3":"786","RMA70-12":"46","\u916f\u539f\u6599":"910","\u916e\u51dd\u96c6\u7ec4":"59","\u805a\u9178\u916f\u7ec4":"77","\u805a\u9178\u916f":"192","\u53cc\u916e":"732","\u4e94\u6c34\u7814\u78e8\u77f3":"102"}},{"stage":"4-7","count":"3889","items":{"\u56fa\u6e90\u5ca9\u7ec4":"89","\u56fa\u6e90\u5ca9":"1220","\u6e90\u5ca9":"1077","\u88c5\u7f6e":"477","\u7834\u635f\u88c5\u7f6e":"432","\u8f7b\u9530\u77ff":"1157","\u4e09\u6c34\u9530\u77ff":"154"}},{"stage":"6-4","count":"1198","items":{"\u916e\u51dd\u96c6":"110","\u7814\u78e8\u77f3":"25","\u916f\u539f\u6599":"501","\u805a\u9178\u916f\u7ec4":"460","\u805a\u9178\u916f":"129","\u53cc\u916e":"382","\u805a\u9178\u916f\u5757":"47"}},{"stage":"4-10","count":"1924","items":{"\u5168\u65b0\u88c5\u7f6e":"577","\u56fa\u6e90\u5ca9\u7ec4":"71","\u56fa\u6e90\u5ca9":"664","\u6e90\u5ca9":"422","\u88c5\u7f6e":"266","\u626d\u8f6c\u9187":"70","\u7834\u635f\u88c5\u7f6e":"159","\u6539\u91cf\u88c5\u7f6e":"59"}},{"stage":"S4-1","count":"3325","items":{"\u5f02\u94c1":"521","\u5f02\u94c1\u788e\u7247":"452","\u7cd6":"637","\u4ee3\u7cd6":"553","\u5f02\u94c1\u7ec4":"1041","\u5f02\u94c1\u5757":"109"}}],"syntheses":[{"target":"D32\u94a2","count":"202","materials":{"\u4e09\u6c34\u9530\u77ff":"202","\u4e94\u6c34\u7814\u78e8\u77f3":"202","RMA70-24":"202"}},{"target":"\u53cc\u6781\u7eb3\u7c73\u7247","count":"222","materials":{"\u6539\u91cf\u88c5\u7f6e":"222","\u767d\u9a6c\u9187":"444"}},{"target":"\u805a\u5408\u5242","count":"204","materials":{"\u63d0\u7eaf\u6e90\u5ca9":"204","\u5f02\u94c1\u5757":"204","\u916e\u9635\u5217":"204"}},{"target":"RMA70-24","count":"297","materials":{"RMA70-12":"297","\u56fa\u6e90\u5ca9\u7ec4":"594","\u916e\u51dd\u96c6\u7ec4":"297"}},{"target":"\u4e94\u6c34\u7814\u78e8\u77f3","count":"389","materials":{"\u7814\u78e8\u77f3":"389","\u5f02\u94c1\u7ec4":"389","\u5168\u65b0\u88c5\u7f6e":"389"}},{"target":"\u4e09\u6c34\u9530\u77ff","count":"284","materials":{"\u8f7b\u9530\u77ff":"568","\u805a\u9178\u916f\u7ec4":"284","\u626d\u8f6c\u9187":"284"}},{"target":"\u767d\u9a6c\u9187","count":"574","materials":{"\u626d\u8f6c\u9187":"574","\u7cd6\u7ec4":"574","RMA70-12":"574"}},{"target":"\u88c5\u7f6e","count":"422","materials":{"\u7834\u635f\u88c5\u7f6e":"1266"}},{"target":"\u5168\u65b0\u88c5\u7f6e","count":"465","materials":{"\u88c5\u7f6e":"1860"}},{"target":"\u6539\u91cf\u88c5\u7f6e","count":"325","materials":{"\u5168\u65b0\u88c5\u7f6e":"325","\u56fa\u6e90\u5ca9\u7ec4":"650","\u7814\u78e8\u77f3":"325"}},{"target":"\u916e\u51dd\u96c6","count":"997","materials":{"\u53cc\u916e":"2991"}},{"target":"\u916e\u51dd\u96c6\u7ec4","count":"407","materials":{"\u916e\u51dd\u96c6":"1628"}},{"target":"\u916e\u9635\u5217","count":"311","materials":{"\u916e\u51dd\u96c6\u7ec4":"622","\u7cd6\u7ec4":"311","\u8f7b\u9530\u77ff":"311"}},{"target":"\u5f02\u94c1","count":"246","materials":{"\u5f02\u94c1\u788e\u7247":"738"}},{"target":"\u5f02\u94c1\u7ec4","count":"258","materials":{"\u5f02\u94c1":"1032"}},{"target":"\u5f02\u94c1\u5757","count":"293","materials":{"\u5f02\u94c1\u7ec4":"586","\u5168\u65b0\u88c5\u7f6e":"293","\u805a\u9178\u916f\u7ec4":"293"}},{"target":"\u805a\u9178\u916f","count":"1251","materials":{"\u916f\u539f\u6599":"3753"}},{"target":"\u805a\u9178\u916f\u7ec4","count":"493","materials":{"\u805a\u9178\u916f":"1972"}},{"target":"\u805a\u9178\u916f\u5757","count":"199","materials":{"\u805a\u9178\u916f\u7ec4":"398","\u916e\u51dd\u96c6\u7ec4":"199","\u626d\u8f6c\u9187":"199"}},{"target":"\u7cd6","count":"309","materials":{"\u4ee3\u7cd6":"927"}},{"target":"\u7cd6\u7ec4","count":"324","materials":{"\u7cd6":"1296"}},{"target":"\u7cd6\u805a\u5757","count":"162","materials":{"\u7cd6\u7ec4":"324","\u5f02\u94c1\u7ec4":"162","\u8f7b\u9530\u77ff":"162"}},{"target":"\u56fa\u6e90\u5ca9","count":"1082","materials":{"\u6e90\u5ca9":"3246"}},{"target":"\u56fa\u6e90\u5ca9\u7ec4","count":"949","materials":{"\u56fa\u6e90\u5ca9":"4745"}},{"target":"\u63d0\u7eaf\u6e90\u5ca9","count":"301","materials":{"\u56fa\u6e90\u5ca9\u7ec4":"1204"}}],"values":[{"level":"5","items":[{"name":"\u805a\u5408\u5242","value":"325.07"},{"name":"D32\u94a2","value":"322.68"},{"name":"\u53cc\u6781\u7eb3\u7c73\u7247","value":"287.93"}]},{"level":"4","items":[{"name":"\u5f02\u94c1\u5757","value":"128.63"},{"name":"\u916e\u9635\u5217","value":"114.94"},{"name":"\u6539\u91cf\u88c5\u7f6e","value":"114.30"},{"name":"\u4e09\u6c34\u9530\u77ff","value":"109.34"},{"name":"\u7cd6\u805a\u5757","value":"109.20"},{"name":"RMA70-24","value":"108.65"},{"name":"\u805a\u9178\u916f\u5757","value":"105.59"},{"name":"\u4e94\u6c34\u7814\u78e8\u77f3","value":"104.69"},{"name":"\u767d\u9a6c\u9187","value":"86.82"},{"name":"\u63d0\u7eaf\u6e90\u5ca9","value":"81.51"},{"name":"\u70bd\u5408\u91d1\u5757","value":"32.43"},{"name":"\u805a\u5408\u51dd\u80f6","value":"15.20"}]},{"level":"3","items":[{"name":"\u5168\u65b0\u88c5\u7f6e","value":"41.45"},{"name":"RMA70-12","value":"37.35"},{"name":"\u7814\u78e8\u77f3","value":"32.10"},{"name":"\u5f02\u94c1\u7ec4","value":"31.14"},{"name":"\u916e\u51dd\u96c6\u7ec4","value":"30.55"},{"name":"\u8f7b\u9530\u77ff","value":"29.60"},{"name":"\u626d\u8f6c\u9187","value":"25.24"},{"name":"\u805a\u9178\u916f\u7ec4","value":"24.90"},{"name":"\u7cd6\u7ec4","value":"24.23"},{"name":"\u56fa\u6e90\u5ca9\u7ec4","value":"20.38"},{"name":"\u51dd\u80f6","value":"0.00000"},{"name":"\u70bd\u5408\u91d1","value":"0.00000"}]},{"level":"2","items":[{"name":"\u88c5\u7f6e","value":"10.36"},{"name":"\u5f02\u94c1","value":"7.79"},{"name":"\u916e\u51dd\u96c6","value":"7.64"},{"name":"\u805a\u9178\u916f","value":"6.22"},{"name":"\u7cd6","value":"6.06"},{"name":"\u56fa\u6e90\u5ca9","value":"4.08"}]},{"level":"1","items":[{"name":"\u7834\u635f\u88c5\u7f6e","value":"3.45"},{"name":"\u5f02\u94c1\u788e\u7247","value":"2.60"},{"name":"\u53cc\u916e","value":"2.55"},{"name":"\u916f\u539f\u6599","value":"2.07"},{"name":"\u4ee3\u7cd6","value":"2.02"},{"name":"\u6e90\u5ca9","value":"1.36"}]}]},
+          data: {"cost":9818468,"gcost":65300331,"gold":117821629,"exp":78192312,"stages":[{"stage":"1-7","count":"121466","items":{"固源岩":"151180","源岩":"14435","破损装置":"4112","酯原料":"7282","双酮":"5588","异铁碎片":"5640","代糖":"6918"},"materials":[{"name":"初級源岩","item":{"itemId":"30012","name":"固源岩","sortId":100014,"rarity":1,"itemType":"MATERIAL","spriteCoord":[5,0],"name_i18n":{"ja":"初級源岩","en":"Orirock Cube","zh":"固源岩","ko":"원암 큐브"}},"value":"151180"},{"name":"源岩鉱","item":{"itemId":"30011","name":"源岩","sortId":100015,"rarity":0,"itemType":"MATERIAL","spriteCoord":[4,0],"name_i18n":{"ja":"源岩鉱","en":"Orirock","zh":"源岩","ko":"원암"}},"value":"14435"},{"name":"破損装置","item":{"itemId":"30061","name":"破损装置","sortId":100019,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,4],"name_i18n":{"ja":"破損装置","en":"Damaged Device","zh":"破损装置","ko":"파손된 장치"}},"value":"4112"},{"name":"エステル原料","item":{"itemId":"30031","name":"酯原料","sortId":100023,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,2],"name_i18n":{"ja":"エステル原料","en":"Ester","zh":"酯原料","ko":"에스테르 원료"}},"value":"7282"},{"name":"アケトン試剤","item":{"itemId":"30051","name":"双酮","sortId":100035,"rarity":0,"itemType":"MATERIAL","spriteCoord":[3,3],"name_i18n":{"ja":"アケトン試剤","en":"Diketon","zh":"双酮","ko":"디케톤"}},"value":"5588"},{"name":"異鉄の欠片","item":{"itemId":"30041","name":"异铁碎片","sortId":100031,"rarity":0,"itemType":"MATERIAL","spriteCoord":[5,2],"name_i18n":{"ja":"異鉄の欠片","en":"Oriron Shard","zh":"异铁碎片","ko":"이철 조각"}},"value":"5640"},{"name":"ブドウ糖","item":{"itemId":"30021","name":"代糖","sortId":100027,"rarity":0,"itemType":"MATERIAL","spriteCoord":[2,1],"name_i18n":{"ja":"ブドウ糖","en":"Sugar Substitute","zh":"代糖","ko":"대체당"}},"value":"6918"}]},{"stage":"4-4","count":"138251","items":{"固源岩组":"3120","固源岩":"42358","源岩":"39460","装置":"17054","扭转醇":"51118","破损装置":"15412","白马醇":"6944"},"materials":[{"name":"中級源岩","item":{"itemId":"30013","name":"固源岩组","sortId":100013,"rarity":2,"itemType":"MATERIAL","spriteCoord":[0,1],"name_i18n":{"ja":"中級源岩","en":"Orirock Cluster","zh":"固源岩组","ko":"원암 큐브 번들"}},"value":"3120"},{"name":"初級源岩","item":{"itemId":"30012","name":"固源岩","sortId":100014,"rarity":1,"itemType":"MATERIAL","spriteCoord":[5,0],"name_i18n":{"ja":"初級源岩","en":"Orirock Cube","zh":"固源岩","ko":"원암 큐브"}},"value":"42358"},{"name":"源岩鉱","item":{"itemId":"30011","name":"源岩","sortId":100015,"rarity":0,"itemType":"MATERIAL","spriteCoord":[4,0],"name_i18n":{"ja":"源岩鉱","en":"Orirock","zh":"源岩","ko":"원암"}},"value":"39460"},{"name":"初級装置","item":{"itemId":"30062","name":"装置","sortId":100018,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,4],"name_i18n":{"ja":"初級装置","en":"Device","zh":"装置","ko":"장치"}},"value":"17054"},{"name":"合成コール","item":{"itemId":"30073","name":"扭转醇","sortId":100005,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,4],"name_i18n":{"ja":"合成コール","en":"Loxic Kohl","zh":"扭转醇","ko":"로식 콜"}},"value":"51118"},{"name":"破損装置","item":{"itemId":"30061","name":"破损装置","sortId":100019,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,4],"name_i18n":{"ja":"破損装置","en":"Damaged Device","zh":"破损装置","ko":"파손된 장치"}},"value":"15412"},{"name":"上級合成コール","item":{"itemId":"30074","name":"白马醇","sortId":100004,"rarity":3,"itemType":"MATERIAL","spriteCoord":[0,5],"name_i18n":{"ja":"上級合成コール","en":"White Horse Kohl","zh":"白马醇","ko":"화이트 호스 콜"}},"value":"6944"}]},{"stage":"3-3","count":"88706","items":{"固源岩":"18075","源岩":"19253","研磨石":"28378","装置":"7326","破损装置":"7818","酯原料":"12483","聚酸酯":"12529"},"materials":[{"name":"初級源岩","item":{"itemId":"30012","name":"固源岩","sortId":100014,"rarity":1,"itemType":"MATERIAL","spriteCoord":[5,0],"name_i18n":{"ja":"初級源岩","en":"Orirock Cube","zh":"固源岩","ko":"원암 큐브"}},"value":"18075"},{"name":"源岩鉱","item":{"itemId":"30011","name":"源岩","sortId":100015,"rarity":0,"itemType":"MATERIAL","spriteCoord":[4,0],"name_i18n":{"ja":"源岩鉱","en":"Orirock","zh":"源岩","ko":"원암"}},"value":"19253"},{"name":"砥石","item":{"itemId":"30093","name":"研磨石","sortId":100009,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,5],"name_i18n":{"ja":"砥石","en":"Grindstone","zh":"研磨石","ko":"연마석"}},"value":"28378"},{"name":"初級装置","item":{"itemId":"30062","name":"装置","sortId":100018,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,4],"name_i18n":{"ja":"初級装置","en":"Device","zh":"装置","ko":"장치"}},"value":"7326"},{"name":"破損装置","item":{"itemId":"30061","name":"破损装置","sortId":100019,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,4],"name_i18n":{"ja":"破損装置","en":"Damaged Device","zh":"破损装置","ko":"파손된 장치"}},"value":"7818"},{"name":"エステル原料","item":{"itemId":"30031","name":"酯原料","sortId":100023,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,2],"name_i18n":{"ja":"エステル原料","en":"Ester","zh":"酯原料","ko":"에스테르 원료"}},"value":"12483"},{"name":"初級エステル","item":{"itemId":"30032","name":"聚酸酯","sortId":100022,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,2],"name_i18n":{"ja":"初級エステル","en":"Polyester","zh":"聚酸酯","ko":"폴리에스테르"}},"value":"12529"}]},{"stage":"2-10","count":"189088","items":{"酮凝集":"19168","RMA70-12":"53056","双酮":"22669","异铁":"19425","异铁碎片":"23400","糖":"24520","代糖":"29830"},"materials":[{"name":"初級アケトン","item":{"itemId":"30052","name":"酮凝集","sortId":100034,"rarity":1,"itemType":"MATERIAL","spriteCoord":[4,3],"name_i18n":{"ja":"初級アケトン","en":"Polyketon","zh":"酮凝集","ko":"아케톤 응집체"}},"value":"19168"},{"name":"RMA70-12","item":{"itemId":"30103","name":"RMA70-12","sortId":100011,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,5],"name_i18n":{"ja":"RMA70-12","en":"RMA70-12","zh":"RMA70-12","ko":"RMA70-12"}},"value":"53056"},{"name":"アケトン試剤","item":{"itemId":"30051","name":"双酮","sortId":100035,"rarity":0,"itemType":"MATERIAL","spriteCoord":[3,3],"name_i18n":{"ja":"アケトン試剤","en":"Diketon","zh":"双酮","ko":"디케톤"}},"value":"22669"},{"name":"初級異鉄","item":{"itemId":"30042","name":"异铁","sortId":100030,"rarity":1,"itemType":"MATERIAL","spriteCoord":[0,3],"name_i18n":{"ja":"初級異鉄","en":"Oriron","zh":"异铁","ko":"이철"}},"value":"19425"},{"name":"異鉄の欠片","item":{"itemId":"30041","name":"异铁碎片","sortId":100031,"rarity":0,"itemType":"MATERIAL","spriteCoord":[5,2],"name_i18n":{"ja":"異鉄の欠片","en":"Oriron Shard","zh":"异铁碎片","ko":"이철 조각"}},"value":"23400"},{"name":"初級糖原","item":{"itemId":"30022","name":"糖","sortId":100026,"rarity":1,"itemType":"MATERIAL","spriteCoord":[3,1],"name_i18n":{"ja":"初級糖原","en":"Sugar","zh":"糖","ko":"포도당"}},"value":"24520"},{"name":"ブドウ糖","item":{"itemId":"30021","name":"代糖","sortId":100027,"rarity":0,"itemType":"MATERIAL","spriteCoord":[2,1],"name_i18n":{"ja":"ブドウ糖","en":"Sugar Substitute","zh":"代糖","ko":"대체당"}},"value":"29830"}]},{"stage":"4-10","count":"53290","items":{"全新装置":"15971","固源岩组":"1979","固源岩":"18396","源岩":"11686","装置":"7375","扭转醇":"1937","破损装置":"4393","改量装置":"1622"},"materials":[{"name":"中級装置","item":{"itemId":"30063","name":"全新装置","sortId":100017,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,4],"name_i18n":{"ja":"中級装置","en":"Integrated Device","zh":"全新装置","ko":"리뉴얼 장치"}},"value":"15971"},{"name":"中級源岩","item":{"itemId":"30013","name":"固源岩组","sortId":100013,"rarity":2,"itemType":"MATERIAL","spriteCoord":[0,1],"name_i18n":{"ja":"中級源岩","en":"Orirock Cluster","zh":"固源岩组","ko":"원암 큐브 번들"}},"value":"1979"},{"name":"初級源岩","item":{"itemId":"30012","name":"固源岩","sortId":100014,"rarity":1,"itemType":"MATERIAL","spriteCoord":[5,0],"name_i18n":{"ja":"初級源岩","en":"Orirock Cube","zh":"固源岩","ko":"원암 큐브"}},"value":"18396"},{"name":"源岩鉱","item":{"itemId":"30011","name":"源岩","sortId":100015,"rarity":0,"itemType":"MATERIAL","spriteCoord":[4,0],"name_i18n":{"ja":"源岩鉱","en":"Orirock","zh":"源岩","ko":"원암"}},"value":"11686"},{"name":"初級装置","item":{"itemId":"30062","name":"装置","sortId":100018,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,4],"name_i18n":{"ja":"初級装置","en":"Device","zh":"装置","ko":"장치"}},"value":"7375"},{"name":"合成コール","item":{"itemId":"30073","name":"扭转醇","sortId":100005,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,4],"name_i18n":{"ja":"合成コール","en":"Loxic Kohl","zh":"扭转醇","ko":"로식 콜"}},"value":"1937"},{"name":"破損装置","item":{"itemId":"30061","name":"破损装置","sortId":100019,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,4],"name_i18n":{"ja":"破損装置","en":"Damaged Device","zh":"破损装置","ko":"파손된 장치"}},"value":"4393"},{"name":"上級装置","item":{"itemId":"30064","name":"改量装置","sortId":100016,"rarity":3,"itemType":"MATERIAL","spriteCoord":[4,4],"name_i18n":{"ja":"上級装置","en":"Optimized Device","zh":"改量装置","ko":"개량 장치"}},"value":"1622"}]},{"stage":"2-5","count":"109596","items":{"双酮":"21999","糖组":"40769","异铁碎片":"22430","糖":"3014","代糖":"28088"},"materials":[{"name":"アケトン試剤","item":{"itemId":"30051","name":"双酮","sortId":100035,"rarity":0,"itemType":"MATERIAL","spriteCoord":[3,3],"name_i18n":{"ja":"アケトン試剤","en":"Diketon","zh":"双酮","ko":"디케톤"}},"value":"21999"},{"name":"中級糖原","item":{"itemId":"30023","name":"糖组","sortId":100025,"rarity":2,"itemType":"MATERIAL","spriteCoord":[4,1],"name_i18n":{"ja":"中級糖原","en":"Sugar Pack","zh":"糖组","ko":"포도당 번들"}},"value":"40769"},{"name":"異鉄の欠片","item":{"itemId":"30041","name":"异铁碎片","sortId":100031,"rarity":0,"itemType":"MATERIAL","spriteCoord":[5,2],"name_i18n":{"ja":"異鉄の欠片","en":"Oriron Shard","zh":"异铁碎片","ko":"이철 조각"}},"value":"22430"},{"name":"初級糖原","item":{"itemId":"30022","name":"糖","sortId":100026,"rarity":1,"itemType":"MATERIAL","spriteCoord":[3,1],"name_i18n":{"ja":"初級糖原","en":"Sugar","zh":"糖","ko":"포도당"}},"value":"3014"},{"name":"ブドウ糖","item":{"itemId":"30021","name":"代糖","sortId":100027,"rarity":0,"itemType":"MATERIAL","spriteCoord":[2,1],"name_i18n":{"ja":"ブドウ糖","en":"Sugar Substitute","zh":"代糖","ko":"대체당"}},"value":"28088"}]}],"syntheses":[{"target":{"item":{"itemId":"30125","name":"双极纳米片","sortId":100002,"rarity":4,"itemType":"ARKPLANNER","spriteCoord":[4,9],"name_i18n":{"ja":"ナノフレーク","en":"Bipolar Nanoflake","zh":"双极纳米片","ko":"바이폴라 나노플레이크 칩"}},"name":"ナノフレーク"},"count":"30000","materials":{"改量装置":"30000","白马醇":"60000"},"items":[{"name":"上級装置","item":{"itemId":"30064","name":"改量装置","sortId":100016,"rarity":3,"itemType":"MATERIAL","spriteCoord":[4,4],"name_i18n":{"ja":"上級装置","en":"Optimized Device","zh":"改量装置","ko":"개량 장치"}},"value":"30000"},{"name":"上級合成コール","item":{"itemId":"30074","name":"白马醇","sortId":100004,"rarity":3,"itemType":"MATERIAL","spriteCoord":[0,5],"name_i18n":{"ja":"上級合成コール","en":"White Horse Kohl","zh":"白马醇","ko":"화이트 호스 콜"}},"value":"60000"}]},{"target":{"item":{"itemId":"30074","name":"白马醇","sortId":100004,"rarity":3,"itemType":"MATERIAL","spriteCoord":[0,5],"name_i18n":{"ja":"上級合成コール","en":"White Horse Kohl","zh":"白马醇","ko":"화이트 호스 콜"}},"name":"上級合成コール"},"count":"53056","materials":{"扭转醇":"53056","糖组":"53056","RMA70-12":"53056"},"items":[{"name":"合成コール","item":{"itemId":"30073","name":"扭转醇","sortId":100005,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,4],"name_i18n":{"ja":"合成コール","en":"Loxic Kohl","zh":"扭转醇","ko":"로식 콜"}},"value":"53056"},{"name":"中級糖原","item":{"itemId":"30023","name":"糖组","sortId":100025,"rarity":2,"itemType":"MATERIAL","spriteCoord":[4,1],"name_i18n":{"ja":"中級糖原","en":"Sugar Pack","zh":"糖组","ko":"포도당 번들"}},"value":"53056"},{"name":"RMA70-12","item":{"itemId":"30103","name":"RMA70-12","sortId":100011,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,5],"name_i18n":{"ja":"RMA70-12","en":"RMA70-12","zh":"RMA70-12","ko":"RMA70-12"}},"value":"53056"}]},{"target":{"item":{"itemId":"30062","name":"装置","sortId":100018,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,4],"name_i18n":{"ja":"初級装置","en":"Device","zh":"装置","ko":"장치"}},"name":"初級装置"},"count":"10579","materials":{"破损装置":"31737"},"items":[{"name":"破損装置","item":{"itemId":"30061","name":"破损装置","sortId":100019,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,4],"name_i18n":{"ja":"破損装置","en":"Damaged Device","zh":"破损装置","ko":"파손된 장치"}},"value":"31737"}]},{"target":{"item":{"itemId":"30063","name":"全新装置","sortId":100017,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,4],"name_i18n":{"ja":"中級装置","en":"Integrated Device","zh":"全新装置","ko":"리뉴얼 장치"}},"name":"中級装置"},"count":"10584","materials":{"装置":"42336"},"items":[{"name":"初級装置","item":{"itemId":"30062","name":"装置","sortId":100018,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,4],"name_i18n":{"ja":"初級装置","en":"Device","zh":"装置","ko":"장치"}},"value":"42336"}]},{"target":{"item":{"itemId":"30064","name":"改量装置","sortId":100016,"rarity":3,"itemType":"MATERIAL","spriteCoord":[4,4],"name_i18n":{"ja":"上級装置","en":"Optimized Device","zh":"改量装置","ko":"개량 장치"}},"name":"上級装置"},"count":"28379","materials":{"全新装置":"28379","固源岩组":"56758","研磨石":"28379"},"items":[{"name":"中級装置","item":{"itemId":"30063","name":"全新装置","sortId":100017,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,4],"name_i18n":{"ja":"中級装置","en":"Integrated Device","zh":"全新装置","ko":"리뉴얼 장치"}},"value":"28379"},{"name":"中級源岩","item":{"itemId":"30013","name":"固源岩组","sortId":100013,"rarity":2,"itemType":"MATERIAL","spriteCoord":[0,1],"name_i18n":{"ja":"中級源岩","en":"Orirock Cluster","zh":"固源岩组","ko":"원암 큐브 번들"}},"value":"56758"},{"name":"砥石","item":{"itemId":"30093","name":"研磨石","sortId":100009,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,5],"name_i18n":{"ja":"砥石","en":"Grindstone","zh":"研磨石","ko":"연마석"}},"value":"28379"}]},{"target":{"item":{"itemId":"30052","name":"酮凝集","sortId":100034,"rarity":1,"itemType":"MATERIAL","spriteCoord":[4,3],"name_i18n":{"ja":"初級アケトン","en":"Polyketon","zh":"酮凝集","ko":"아케톤 응집체"}},"name":"初級アケトン"},"count":"15561","materials":{"双酮":"46683"},"items":[{"name":"アケトン試剤","item":{"itemId":"30051","name":"双酮","sortId":100035,"rarity":0,"itemType":"MATERIAL","spriteCoord":[3,3],"name_i18n":{"ja":"アケトン試剤","en":"Diketon","zh":"双酮","ko":"디케톤"}},"value":"46683"}]},{"target":{"item":{"itemId":"30053","name":"酮凝集组","sortId":100033,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,3],"name_i18n":{"ja":"中級アケトン","en":"Aketon","zh":"酮凝集组","ko":"아케톤 응집체 번들"}},"name":"中級アケトン"},"count":"8311","materials":{"酮凝集":"33244"},"items":[{"name":"初級アケトン","item":{"itemId":"30052","name":"酮凝集","sortId":100034,"rarity":1,"itemType":"MATERIAL","spriteCoord":[4,3],"name_i18n":{"ja":"初級アケトン","en":"Polyketon","zh":"酮凝集","ko":"아케톤 응집체"}},"value":"33244"}]},{"target":{"item":{"itemId":"30042","name":"异铁","sortId":100030,"rarity":1,"itemType":"MATERIAL","spriteCoord":[0,3],"name_i18n":{"ja":"初級異鉄","en":"Oriron","zh":"异铁","ko":"이철"}},"name":"初級異鉄"},"count":"16049","materials":{"异铁碎片":"48147"},"items":[{"name":"異鉄の欠片","item":{"itemId":"30041","name":"异铁碎片","sortId":100031,"rarity":0,"itemType":"MATERIAL","spriteCoord":[5,2],"name_i18n":{"ja":"異鉄の欠片","en":"Oriron Shard","zh":"异铁碎片","ko":"이철 조각"}},"value":"48147"}]},{"target":{"item":{"itemId":"30043","name":"异铁组","sortId":100029,"rarity":2,"itemType":"MATERIAL","spriteCoord":[1,3],"name_i18n":{"ja":"中級異鉄","en":"Oriron Cluster","zh":"异铁组","ko":"이철 번들"}},"name":"中級異鉄"},"count":"8655","materials":{"异铁":"34620"},"items":[{"name":"初級異鉄","item":{"itemId":"30042","name":"异铁","sortId":100030,"rarity":1,"itemType":"MATERIAL","spriteCoord":[0,3],"name_i18n":{"ja":"初級異鉄","en":"Oriron","zh":"异铁","ko":"이철"}},"value":"34620"}]},{"target":{"item":{"itemId":"30032","name":"聚酸酯","sortId":100022,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,2],"name_i18n":{"ja":"初級エステル","en":"Polyester","zh":"聚酸酯","ko":"폴리에스테르"}},"name":"初級エステル"},"count":"5765","materials":{"酯原料":"17295"},"items":[{"name":"エステル原料","item":{"itemId":"30031","name":"酯原料","sortId":100023,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,2],"name_i18n":{"ja":"エステル原料","en":"Ester","zh":"酯原料","ko":"에스테르 원료"}},"value":"17295"}]},{"target":{"item":{"itemId":"30033","name":"聚酸酯组","sortId":100021,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,2],"name_i18n":{"ja":"中級エステル","en":"Polyester Pack","zh":"聚酸酯组","ko":"폴리에스테르 번들"}},"name":"中級エステル"},"count":"3937","materials":{"聚酸酯":"15748"},"items":[{"name":"初級エステル","item":{"itemId":"30032","name":"聚酸酯","sortId":100022,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,2],"name_i18n":{"ja":"初級エステル","en":"Polyester","zh":"聚酸酯","ko":"폴리에스테르"}},"value":"15748"}]},{"target":{"item":{"itemId":"30022","name":"糖","sortId":100026,"rarity":1,"itemType":"MATERIAL","spriteCoord":[3,1],"name_i18n":{"ja":"初級糖原","en":"Sugar","zh":"糖","ko":"포도당"}},"name":"初級糖原"},"count":"21613","materials":{"代糖":"64839"},"items":[{"name":"ブドウ糖","item":{"itemId":"30021","name":"代糖","sortId":100027,"rarity":0,"itemType":"MATERIAL","spriteCoord":[2,1],"name_i18n":{"ja":"ブドウ糖","en":"Sugar Substitute","zh":"代糖","ko":"대체당"}},"value":"64839"}]},{"target":{"item":{"itemId":"30023","name":"糖组","sortId":100025,"rarity":2,"itemType":"MATERIAL","spriteCoord":[4,1],"name_i18n":{"ja":"中級糖原","en":"Sugar Pack","zh":"糖组","ko":"포도당 번들"}},"name":"中級糖原"},"count":"12287","materials":{"糖":"49148"},"items":[{"name":"初級糖原","item":{"itemId":"30022","name":"糖","sortId":100026,"rarity":1,"itemType":"MATERIAL","spriteCoord":[3,1],"name_i18n":{"ja":"初級糖原","en":"Sugar","zh":"糖","ko":"포도당"}},"value":"49148"}]},{"target":{"item":{"itemId":"30012","name":"固源岩","sortId":100014,"rarity":1,"itemType":"MATERIAL","spriteCoord":[5,0],"name_i18n":{"ja":"初級源岩","en":"Orirock Cube","zh":"固源岩","ko":"원암 큐브"}},"name":"初級源岩"},"count":"28279","materials":{"源岩":"84837"},"items":[{"name":"源岩鉱","item":{"itemId":"30011","name":"源岩","sortId":100015,"rarity":0,"itemType":"MATERIAL","spriteCoord":[4,0],"name_i18n":{"ja":"源岩鉱","en":"Orirock","zh":"源岩","ko":"원암"}},"value":"84837"}]},{"target":{"item":{"itemId":"30013","name":"固源岩组","sortId":100013,"rarity":2,"itemType":"MATERIAL","spriteCoord":[0,1],"name_i18n":{"ja":"中級源岩","en":"Orirock Cluster","zh":"固源岩组","ko":"원암 큐브 번들"}},"name":"中級源岩"},"count":"51658","materials":{"固源岩":"258290"},"items":[{"name":"初級源岩","item":{"itemId":"30012","name":"固源岩","sortId":100014,"rarity":1,"itemType":"MATERIAL","spriteCoord":[5,0],"name_i18n":{"ja":"初級源岩","en":"Orirock Cube","zh":"固源岩","ko":"원암 큐브"}},"value":"258290"}]}],"values":[{"level":"5","items":[{"name":"双极纳米片","value":"327.28"},{"name":"D32钢","value":"64.39"},{"name":"聚合剂","value":"44.44"}],"materials":[{"name":"ナノフレーク","item":{"itemId":"30125","name":"双极纳米片","sortId":100002,"rarity":4,"itemType":"ARKPLANNER","spriteCoord":[4,9],"name_i18n":{"ja":"ナノフレーク","en":"Bipolar Nanoflake","zh":"双极纳米片","ko":"바이폴라 나노플레이크 칩"}},"value":"327.28"},{"name":"D32鋼","item":{"itemId":"30135","name":"D32钢","sortId":100001,"rarity":4,"itemType":"ARKPLANNER","spriteCoord":[5,9],"name_i18n":{"ja":"D32鋼","en":"D32 Steel","zh":"D32钢","ko":"D32강"}},"value":"64.39"},{"name":"融合剤","item":{"itemId":"30115","name":"聚合剂","sortId":100003,"rarity":4,"itemType":"ARKPLANNER","spriteCoord":[3,9],"name_i18n":{"ja":"融合剤","en":"Polymerization Preparation","zh":"聚合剂","ko":"중합제"}},"value":"44.44"}]},{"level":"4","items":[{"name":"改量装置","value":"124.35"},{"name":"白马醇","value":"101.47"},{"name":"RMA70-24","value":"48.42"},{"name":"五水研磨石","value":"47.31"},{"name":"炽合金块","value":"38.91"},{"name":"提纯源岩","value":"38.26"},{"name":"三水锰矿","value":"33.05"},{"name":"酮阵列","value":"28.70"},{"name":"异铁块","value":"21.91"},{"name":"糖聚块","value":"20.66"},{"name":"聚酸酯块","value":"11.09"},{"name":"聚合凝胶","value":"10.16"}],"materials":[{"name":"上級装置","item":{"itemId":"30064","name":"改量装置","sortId":100016,"rarity":3,"itemType":"MATERIAL","spriteCoord":[4,4],"name_i18n":{"ja":"上級装置","en":"Optimized Device","zh":"改量装置","ko":"개량 장치"}},"value":"124.35"},{"name":"上級合成コール","item":{"itemId":"30074","name":"白马醇","sortId":100004,"rarity":3,"itemType":"MATERIAL","spriteCoord":[0,5],"name_i18n":{"ja":"上級合成コール","en":"White Horse Kohl","zh":"白马醇","ko":"화이트 호스 콜"}},"value":"101.47"},{"name":"RMA70-24","item":{"itemId":"30104","name":"RMA70-24","sortId":100010,"rarity":3,"itemType":"MATERIAL","spriteCoord":[0,6],"name_i18n":{"ja":"RMA70-24","en":"RMA70-24","zh":"RMA70-24","ko":"RMA70-24"}},"value":"48.42"},{"name":"上級砥石","item":{"itemId":"30094","name":"五水研磨石","sortId":100008,"rarity":3,"itemType":"MATERIAL","spriteCoord":[4,5],"name_i18n":{"ja":"上級砥石","en":"Grindstone Pentahydrate","zh":"五水研磨石","ko":"고급연마석"}},"value":"47.31"},{"name":"炽合金块","item":{"itemId":"31024","name":"炽合金块","sortId":100038,"rarity":3,"itemType":"MATERIAL","addTimePoint":3,"spriteCoord":[4,8],"name_i18n":{"ja":"炽合金块","en":"炽合金块","zh":"炽合金块","ko":"炽合金块"}},"value":"38.91"},{"name":"上級源岩","item":{"itemId":"30014","name":"提纯源岩","sortId":100012,"rarity":3,"itemType":"MATERIAL","spriteCoord":[1,1],"name_i18n":{"ja":"上級源岩","en":"Orriock Concentration","zh":"提纯源岩","ko":"정제 원암"}},"value":"38.26"},{"name":"上級マンガン","item":{"itemId":"30084","name":"三水锰矿","sortId":100006,"rarity":3,"itemType":"MATERIAL","spriteCoord":[2,5],"name_i18n":{"ja":"上級マンガン","en":"Manganese Trihydrate","zh":"三水锰矿","ko":"망간 중합체"}},"value":"33.05"},{"name":"高級アケトン","item":{"itemId":"30054","name":"酮阵列","sortId":100032,"rarity":3,"itemType":"MATERIAL","spriteCoord":[0,4],"name_i18n":{"ja":"高級アケトン","en":"Keton Colloid","zh":"酮阵列","ko":"아케톤 팩"}},"value":"28.70"},{"name":"高級異鉄","item":{"itemId":"30044","name":"异铁块","sortId":100028,"rarity":3,"itemType":"MATERIAL","spriteCoord":[2,3],"name_i18n":{"ja":"高級異鉄","en":"Oriron Block","zh":"异铁块","ko":"이철 팩"}},"value":"21.91"},{"name":"高級糖原","item":{"itemId":"30024","name":"糖聚块","sortId":100024,"rarity":3,"itemType":"MATERIAL","spriteCoord":[5,1],"name_i18n":{"ja":"高級糖原","en":"Sugar Lump","zh":"糖聚块","ko":"포도당 팩"}},"value":"20.66"},{"name":"上級エステル","item":{"itemId":"30034","name":"聚酸酯块","sortId":100020,"rarity":3,"itemType":"MATERIAL","spriteCoord":[4,2],"name_i18n":{"ja":"上級エステル","en":"Polyester Lump","zh":"聚酸酯块","ko":"폴리에스테르 팩"}},"value":"11.09"},{"name":"聚合凝胶","item":{"itemId":"31014","name":"聚合凝胶","sortId":100036,"rarity":3,"itemType":"MATERIAL","addTimePoint":3,"spriteCoord":[2,8],"name_i18n":{"ja":"聚合凝胶","en":"聚合凝胶","zh":"聚合凝胶","ko":"聚合凝胶"}},"value":"10.16"}]},{"level":"3","items":[{"name":"RMA70-12","value":"48.59"},{"name":"全新装置","value":"40.10"},{"name":"研磨石","value":"39.52"},{"name":"糖组","value":"29.98"},{"name":"扭转醇","value":"22.89"},{"name":"固源岩组","value":"22.37"},{"name":"轻锰矿","value":"17.41"},{"name":"炽合金","value":"12.97"},{"name":"凝胶","value":"0.00000"},{"name":"酮凝集组","value":"0.00000"},{"name":"聚酸酯组","value":"0.00000"},{"name":"异铁组","value":"0.00000"}],"materials":[{"name":"RMA70-12","item":{"itemId":"30103","name":"RMA70-12","sortId":100011,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,5],"name_i18n":{"ja":"RMA70-12","en":"RMA70-12","zh":"RMA70-12","ko":"RMA70-12"}},"value":"48.59"},{"name":"中級装置","item":{"itemId":"30063","name":"全新装置","sortId":100017,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,4],"name_i18n":{"ja":"中級装置","en":"Integrated Device","zh":"全新装置","ko":"리뉴얼 장치"}},"value":"40.10"},{"name":"砥石","item":{"itemId":"30093","name":"研磨石","sortId":100009,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,5],"name_i18n":{"ja":"砥石","en":"Grindstone","zh":"研磨石","ko":"연마석"}},"value":"39.52"},{"name":"中級糖原","item":{"itemId":"30023","name":"糖组","sortId":100025,"rarity":2,"itemType":"MATERIAL","spriteCoord":[4,1],"name_i18n":{"ja":"中級糖原","en":"Sugar Pack","zh":"糖组","ko":"포도당 번들"}},"value":"29.98"},{"name":"合成コール","item":{"itemId":"30073","name":"扭转醇","sortId":100005,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,4],"name_i18n":{"ja":"合成コール","en":"Loxic Kohl","zh":"扭转醇","ko":"로식 콜"}},"value":"22.89"},{"name":"中級源岩","item":{"itemId":"30013","name":"固源岩组","sortId":100013,"rarity":2,"itemType":"MATERIAL","spriteCoord":[0,1],"name_i18n":{"ja":"中級源岩","en":"Orirock Cluster","zh":"固源岩组","ko":"원암 큐브 번들"}},"value":"22.37"},{"name":"マンガン","item":{"itemId":"30083","name":"轻锰矿","sortId":100007,"rarity":2,"itemType":"MATERIAL","spriteCoord":[1,5],"name_i18n":{"ja":"マンガン","en":"Manganese Ore","zh":"轻锰矿","ko":"망간 광석"}},"value":"17.41"},{"name":"炽合金","item":{"itemId":"31023","name":"炽合金","sortId":100039,"rarity":2,"itemType":"MATERIAL","addTimePoint":3,"spriteCoord":[3,8],"name_i18n":{"ja":"炽合金","en":"炽合金","zh":"炽合金","ko":"炽合金"}},"value":"12.97"}]},{"level":"2","items":[{"name":"装置","value":"10.03"},{"name":"糖","value":"7.50"},{"name":"固源岩","value":"4.47"},{"name":"酮凝集","value":"0.00000"},{"name":"聚酸酯","value":"0.00000"},{"name":"异铁","value":"0.00000"}],"materials":[{"name":"初級装置","item":{"itemId":"30062","name":"装置","sortId":100018,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,4],"name_i18n":{"ja":"初級装置","en":"Device","zh":"装置","ko":"장치"}},"value":"10.03"},{"name":"初級糖原","item":{"itemId":"30022","name":"糖","sortId":100026,"rarity":1,"itemType":"MATERIAL","spriteCoord":[3,1],"name_i18n":{"ja":"初級糖原","en":"Sugar","zh":"糖","ko":"포도당"}},"value":"7.50"},{"name":"初級源岩","item":{"itemId":"30012","name":"固源岩","sortId":100014,"rarity":1,"itemType":"MATERIAL","spriteCoord":[5,0],"name_i18n":{"ja":"初級源岩","en":"Orirock Cube","zh":"固源岩","ko":"원암 큐브"}},"value":"4.47"}]},{"level":"1","items":[{"name":"破损装置","value":"3.34"},{"name":"代糖","value":"2.50"},{"name":"源岩","value":"1.49"},{"name":"酯原料","value":"0.00000"},{"name":"双酮","value":"0.00000"},{"name":"异铁碎片","value":"0.00000"}],"materials":[{"name":"破損装置","item":{"itemId":"30061","name":"破损装置","sortId":100019,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,4],"name_i18n":{"ja":"破損装置","en":"Damaged Device","zh":"破损装置","ko":"파손된 장치"}},"value":"3.34"},{"name":"ブドウ糖","item":{"itemId":"30021","name":"代糖","sortId":100027,"rarity":0,"itemType":"MATERIAL","spriteCoord":[2,1],"name_i18n":{"ja":"ブドウ糖","en":"Sugar Substitute","zh":"代糖","ko":"대체당"}},"value":"2.50"},{"name":"源岩鉱","item":{"itemId":"30011","name":"源岩","sortId":100015,"rarity":0,"itemType":"MATERIAL","spriteCoord":[4,0],"name_i18n":{"ja":"源岩鉱","en":"Orirock","zh":"源岩","ko":"원암"}},"value":"1.49"}]}]},
           tab: null,
           tabs: [{
             id: "stages",
@@ -792,11 +803,59 @@
           })
         )
           .then(({data}) => {
-            Console.log(data);
+            if (data.error === true) {
+              return snackbar.launch("error", 15000, "planner.calculationError", {
+                error: data.reason
+              })
+            }
+
+            data.stages = data.stages.map(el => {
+              el.materials = [];
+              for (let [name, value] of Object.entries(el.items)) {
+                const item = get.items.byName(name);
+                el.materials.push({
+                  name: strings.translate(item, "name"),
+                  item,
+                  value
+                })
+              }
+              return el
+            });
+            data.syntheses = data.syntheses.map(el => {
+              el.target = {
+                item: get.items.byName(el.target)
+              };
+              el.target.name = strings.translate(el.target.item, "name");
+              el.items = [];
+              for (let [name, value] of Object.entries(el.materials)) {
+                const item = get.items.byName(name);
+                el.items.push({
+                  name: strings.translate(item, "name"),
+                  item,
+                  value
+                })
+              }
+              return el
+            });
+            data.values = data.values.map(el => {
+              el.materials = [];
+              for (let {name, value} of el.items) {
+                if (parseFloat(value) === 0) continue;
+                const itemObject = get.items.byName(name);
+                el.materials.push({
+                  name: strings.translate(itemObject, "name"),
+                  item: itemObject,
+                  value
+                })
+              }
+              return el
+            });
+            Console.log(data)
             this.$set(this.calculation, "data", data);
             this.calculation.done = true
           })
-          .catch(() => {
+          .catch((err) => {
+            Console.error(err)
             snackbar.networkError()
           })
           .finally(() => {

From fa06629e2bd7a86546cee27f432d6403d45cc2c9 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sun, 8 Mar 2020 15:58:17 -0400
Subject: [PATCH 37/45] improvement(i18n): improved `ja` font

---
 src/App.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4394dcf4..54cc296a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -591,9 +591,7 @@ export default {
 
   .lang-ja .force-lang-font, .lang-ja {
     /*font-family : 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif !important;*/
-  }
-  .lang-ja .v-application .headline, .lang-ja .v-application .title {
-    font-family : 'ヒラギノ明朝 ProN' , 'Hiragino Mincho ProN' , '游明朝','游明朝体',YuMincho,'Yu Mincho' , 'ＭＳ 明朝' , 'MS Mincho' , HiraMinProN-W3 , 'TakaoEx明朝' , TakaoExMincho , 'MotoyaLCedar' , 'Droid Sans Japanese' , serif !important;
+    font-family : 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , 'ヒラギノ明朝 ProN' , 'Hiragino Mincho ProN' , '游明朝','游明朝体',YuMincho,'Yu Mincho' , 'ＭＳ 明朝' , 'MS Mincho' , HiraMinProN-W3 , 'TakaoEx明朝' , TakaoExMincho , 'MotoyaLCedar' , 'Droid Sans Japanese' , serif !important;
   }
   .lang-ko .force-lang-font, .lang-ko {
     font-family: 'Malgun Gothic', Gulim, 'Roboto', Tahoma, Arial, sans-serif !important

From bc1547399fc7fe6897ab5c3efa9f3881f2a9c0ee Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sun, 8 Mar 2020 15:58:54 -0400
Subject: [PATCH 38/45] improvement(planner): remove test data

---
 src/views/Planner.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index 9f1c44a8..46089942 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -763,8 +763,8 @@
           })),
         calculation: {
           pending: false,
-          done: true,
-          data: {"cost":9818468,"gcost":65300331,"gold":117821629,"exp":78192312,"stages":[{"stage":"1-7","count":"121466","items":{"固源岩":"151180","源岩":"14435","破损装置":"4112","酯原料":"7282","双酮":"5588","异铁碎片":"5640","代糖":"6918"},"materials":[{"name":"初級源岩","item":{"itemId":"30012","name":"固源岩","sortId":100014,"rarity":1,"itemType":"MATERIAL","spriteCoord":[5,0],"name_i18n":{"ja":"初級源岩","en":"Orirock Cube","zh":"固源岩","ko":"원암 큐브"}},"value":"151180"},{"name":"源岩鉱","item":{"itemId":"30011","name":"源岩","sortId":100015,"rarity":0,"itemType":"MATERIAL","spriteCoord":[4,0],"name_i18n":{"ja":"源岩鉱","en":"Orirock","zh":"源岩","ko":"원암"}},"value":"14435"},{"name":"破損装置","item":{"itemId":"30061","name":"破损装置","sortId":100019,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,4],"name_i18n":{"ja":"破損装置","en":"Damaged Device","zh":"破损装置","ko":"파손된 장치"}},"value":"4112"},{"name":"エステル原料","item":{"itemId":"30031","name":"酯原料","sortId":100023,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,2],"name_i18n":{"ja":"エステル原料","en":"Ester","zh":"酯原料","ko":"에스테르 원료"}},"value":"7282"},{"name":"アケトン試剤","item":{"itemId":"30051","name":"双酮","sortId":100035,"rarity":0,"itemType":"MATERIAL","spriteCoord":[3,3],"name_i18n":{"ja":"アケトン試剤","en":"Diketon","zh":"双酮","ko":"디케톤"}},"value":"5588"},{"name":"異鉄の欠片","item":{"itemId":"30041","name":"异铁碎片","sortId":100031,"rarity":0,"itemType":"MATERIAL","spriteCoord":[5,2],"name_i18n":{"ja":"異鉄の欠片","en":"Oriron Shard","zh":"异铁碎片","ko":"이철 조각"}},"value":"5640"},{"name":"ブドウ糖","item":{"itemId":"30021","name":"代糖","sortId":100027,"rarity":0,"itemType":"MATERIAL","spriteCoord":[2,1],"name_i18n":{"ja":"ブドウ糖","en":"Sugar Substitute","zh":"代糖","ko":"대체당"}},"value":"6918"}]},{"stage":"4-4","count":"138251","items":{"固源岩组":"3120","固源岩":"42358","源岩":"39460","装置":"17054","扭转醇":"51118","破损装置":"15412","白马醇":"6944"},"materials":[{"name":"中級源岩","item":{"itemId":"30013","name":"固源岩组","sortId":100013,"rarity":2,"itemType":"MATERIAL","spriteCoord":[0,1],"name_i18n":{"ja":"中級源岩","en":"Orirock Cluster","zh":"固源岩组","ko":"원암 큐브 번들"}},"value":"3120"},{"name":"初級源岩","item":{"itemId":"30012","name":"固源岩","sortId":100014,"rarity":1,"itemType":"MATERIAL","spriteCoord":[5,0],"name_i18n":{"ja":"初級源岩","en":"Orirock Cube","zh":"固源岩","ko":"원암 큐브"}},"value":"42358"},{"name":"源岩鉱","item":{"itemId":"30011","name":"源岩","sortId":100015,"rarity":0,"itemType":"MATERIAL","spriteCoord":[4,0],"name_i18n":{"ja":"源岩鉱","en":"Orirock","zh":"源岩","ko":"원암"}},"value":"39460"},{"name":"初級装置","item":{"itemId":"30062","name":"装置","sortId":100018,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,4],"name_i18n":{"ja":"初級装置","en":"Device","zh":"装置","ko":"장치"}},"value":"17054"},{"name":"合成コール","item":{"itemId":"30073","name":"扭转醇","sortId":100005,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,4],"name_i18n":{"ja":"合成コール","en":"Loxic Kohl","zh":"扭转醇","ko":"로식 콜"}},"value":"51118"},{"name":"破損装置","item":{"itemId":"30061","name":"破损装置","sortId":100019,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,4],"name_i18n":{"ja":"破損装置","en":"Damaged Device","zh":"破损装置","ko":"파손된 장치"}},"value":"15412"},{"name":"上級合成コール","item":{"itemId":"30074","name":"白马醇","sortId":100004,"rarity":3,"itemType":"MATERIAL","spriteCoord":[0,5],"name_i18n":{"ja":"上級合成コール","en":"White Horse Kohl","zh":"白马醇","ko":"화이트 호스 콜"}},"value":"6944"}]},{"stage":"3-3","count":"88706","items":{"固源岩":"18075","源岩":"19253","研磨石":"28378","装置":"7326","破损装置":"7818","酯原料":"12483","聚酸酯":"12529"},"materials":[{"name":"初級源岩","item":{"itemId":"30012","name":"固源岩","sortId":100014,"rarity":1,"itemType":"MATERIAL","spriteCoord":[5,0],"name_i18n":{"ja":"初級源岩","en":"Orirock Cube","zh":"固源岩","ko":"원암 큐브"}},"value":"18075"},{"name":"源岩鉱","item":{"itemId":"30011","name":"源岩","sortId":100015,"rarity":0,"itemType":"MATERIAL","spriteCoord":[4,0],"name_i18n":{"ja":"源岩鉱","en":"Orirock","zh":"源岩","ko":"원암"}},"value":"19253"},{"name":"砥石","item":{"itemId":"30093","name":"研磨石","sortId":100009,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,5],"name_i18n":{"ja":"砥石","en":"Grindstone","zh":"研磨石","ko":"연마석"}},"value":"28378"},{"name":"初級装置","item":{"itemId":"30062","name":"装置","sortId":100018,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,4],"name_i18n":{"ja":"初級装置","en":"Device","zh":"装置","ko":"장치"}},"value":"7326"},{"name":"破損装置","item":{"itemId":"30061","name":"破损装置","sortId":100019,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,4],"name_i18n":{"ja":"破損装置","en":"Damaged Device","zh":"破损装置","ko":"파손된 장치"}},"value":"7818"},{"name":"エステル原料","item":{"itemId":"30031","name":"酯原料","sortId":100023,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,2],"name_i18n":{"ja":"エステル原料","en":"Ester","zh":"酯原料","ko":"에스테르 원료"}},"value":"12483"},{"name":"初級エステル","item":{"itemId":"30032","name":"聚酸酯","sortId":100022,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,2],"name_i18n":{"ja":"初級エステル","en":"Polyester","zh":"聚酸酯","ko":"폴리에스테르"}},"value":"12529"}]},{"stage":"2-10","count":"189088","items":{"酮凝集":"19168","RMA70-12":"53056","双酮":"22669","异铁":"19425","异铁碎片":"23400","糖":"24520","代糖":"29830"},"materials":[{"name":"初級アケトン","item":{"itemId":"30052","name":"酮凝集","sortId":100034,"rarity":1,"itemType":"MATERIAL","spriteCoord":[4,3],"name_i18n":{"ja":"初級アケトン","en":"Polyketon","zh":"酮凝集","ko":"아케톤 응집체"}},"value":"19168"},{"name":"RMA70-12","item":{"itemId":"30103","name":"RMA70-12","sortId":100011,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,5],"name_i18n":{"ja":"RMA70-12","en":"RMA70-12","zh":"RMA70-12","ko":"RMA70-12"}},"value":"53056"},{"name":"アケトン試剤","item":{"itemId":"30051","name":"双酮","sortId":100035,"rarity":0,"itemType":"MATERIAL","spriteCoord":[3,3],"name_i18n":{"ja":"アケトン試剤","en":"Diketon","zh":"双酮","ko":"디케톤"}},"value":"22669"},{"name":"初級異鉄","item":{"itemId":"30042","name":"异铁","sortId":100030,"rarity":1,"itemType":"MATERIAL","spriteCoord":[0,3],"name_i18n":{"ja":"初級異鉄","en":"Oriron","zh":"异铁","ko":"이철"}},"value":"19425"},{"name":"異鉄の欠片","item":{"itemId":"30041","name":"异铁碎片","sortId":100031,"rarity":0,"itemType":"MATERIAL","spriteCoord":[5,2],"name_i18n":{"ja":"異鉄の欠片","en":"Oriron Shard","zh":"异铁碎片","ko":"이철 조각"}},"value":"23400"},{"name":"初級糖原","item":{"itemId":"30022","name":"糖","sortId":100026,"rarity":1,"itemType":"MATERIAL","spriteCoord":[3,1],"name_i18n":{"ja":"初級糖原","en":"Sugar","zh":"糖","ko":"포도당"}},"value":"24520"},{"name":"ブドウ糖","item":{"itemId":"30021","name":"代糖","sortId":100027,"rarity":0,"itemType":"MATERIAL","spriteCoord":[2,1],"name_i18n":{"ja":"ブドウ糖","en":"Sugar Substitute","zh":"代糖","ko":"대체당"}},"value":"29830"}]},{"stage":"4-10","count":"53290","items":{"全新装置":"15971","固源岩组":"1979","固源岩":"18396","源岩":"11686","装置":"7375","扭转醇":"1937","破损装置":"4393","改量装置":"1622"},"materials":[{"name":"中級装置","item":{"itemId":"30063","name":"全新装置","sortId":100017,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,4],"name_i18n":{"ja":"中級装置","en":"Integrated Device","zh":"全新装置","ko":"리뉴얼 장치"}},"value":"15971"},{"name":"中級源岩","item":{"itemId":"30013","name":"固源岩组","sortId":100013,"rarity":2,"itemType":"MATERIAL","spriteCoord":[0,1],"name_i18n":{"ja":"中級源岩","en":"Orirock Cluster","zh":"固源岩组","ko":"원암 큐브 번들"}},"value":"1979"},{"name":"初級源岩","item":{"itemId":"30012","name":"固源岩","sortId":100014,"rarity":1,"itemType":"MATERIAL","spriteCoord":[5,0],"name_i18n":{"ja":"初級源岩","en":"Orirock Cube","zh":"固源岩","ko":"원암 큐브"}},"value":"18396"},{"name":"源岩鉱","item":{"itemId":"30011","name":"源岩","sortId":100015,"rarity":0,"itemType":"MATERIAL","spriteCoord":[4,0],"name_i18n":{"ja":"源岩鉱","en":"Orirock","zh":"源岩","ko":"원암"}},"value":"11686"},{"name":"初級装置","item":{"itemId":"30062","name":"装置","sortId":100018,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,4],"name_i18n":{"ja":"初級装置","en":"Device","zh":"装置","ko":"장치"}},"value":"7375"},{"name":"合成コール","item":{"itemId":"30073","name":"扭转醇","sortId":100005,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,4],"name_i18n":{"ja":"合成コール","en":"Loxic Kohl","zh":"扭转醇","ko":"로식 콜"}},"value":"1937"},{"name":"破損装置","item":{"itemId":"30061","name":"破损装置","sortId":100019,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,4],"name_i18n":{"ja":"破損装置","en":"Damaged Device","zh":"破损装置","ko":"파손된 장치"}},"value":"4393"},{"name":"上級装置","item":{"itemId":"30064","name":"改量装置","sortId":100016,"rarity":3,"itemType":"MATERIAL","spriteCoord":[4,4],"name_i18n":{"ja":"上級装置","en":"Optimized Device","zh":"改量装置","ko":"개량 장치"}},"value":"1622"}]},{"stage":"2-5","count":"109596","items":{"双酮":"21999","糖组":"40769","异铁碎片":"22430","糖":"3014","代糖":"28088"},"materials":[{"name":"アケトン試剤","item":{"itemId":"30051","name":"双酮","sortId":100035,"rarity":0,"itemType":"MATERIAL","spriteCoord":[3,3],"name_i18n":{"ja":"アケトン試剤","en":"Diketon","zh":"双酮","ko":"디케톤"}},"value":"21999"},{"name":"中級糖原","item":{"itemId":"30023","name":"糖组","sortId":100025,"rarity":2,"itemType":"MATERIAL","spriteCoord":[4,1],"name_i18n":{"ja":"中級糖原","en":"Sugar Pack","zh":"糖组","ko":"포도당 번들"}},"value":"40769"},{"name":"異鉄の欠片","item":{"itemId":"30041","name":"异铁碎片","sortId":100031,"rarity":0,"itemType":"MATERIAL","spriteCoord":[5,2],"name_i18n":{"ja":"異鉄の欠片","en":"Oriron Shard","zh":"异铁碎片","ko":"이철 조각"}},"value":"22430"},{"name":"初級糖原","item":{"itemId":"30022","name":"糖","sortId":100026,"rarity":1,"itemType":"MATERIAL","spriteCoord":[3,1],"name_i18n":{"ja":"初級糖原","en":"Sugar","zh":"糖","ko":"포도당"}},"value":"3014"},{"name":"ブドウ糖","item":{"itemId":"30021","name":"代糖","sortId":100027,"rarity":0,"itemType":"MATERIAL","spriteCoord":[2,1],"name_i18n":{"ja":"ブドウ糖","en":"Sugar Substitute","zh":"代糖","ko":"대체당"}},"value":"28088"}]}],"syntheses":[{"target":{"item":{"itemId":"30125","name":"双极纳米片","sortId":100002,"rarity":4,"itemType":"ARKPLANNER","spriteCoord":[4,9],"name_i18n":{"ja":"ナノフレーク","en":"Bipolar Nanoflake","zh":"双极纳米片","ko":"바이폴라 나노플레이크 칩"}},"name":"ナノフレーク"},"count":"30000","materials":{"改量装置":"30000","白马醇":"60000"},"items":[{"name":"上級装置","item":{"itemId":"30064","name":"改量装置","sortId":100016,"rarity":3,"itemType":"MATERIAL","spriteCoord":[4,4],"name_i18n":{"ja":"上級装置","en":"Optimized Device","zh":"改量装置","ko":"개량 장치"}},"value":"30000"},{"name":"上級合成コール","item":{"itemId":"30074","name":"白马醇","sortId":100004,"rarity":3,"itemType":"MATERIAL","spriteCoord":[0,5],"name_i18n":{"ja":"上級合成コール","en":"White Horse Kohl","zh":"白马醇","ko":"화이트 호스 콜"}},"value":"60000"}]},{"target":{"item":{"itemId":"30074","name":"白马醇","sortId":100004,"rarity":3,"itemType":"MATERIAL","spriteCoord":[0,5],"name_i18n":{"ja":"上級合成コール","en":"White Horse Kohl","zh":"白马醇","ko":"화이트 호스 콜"}},"name":"上級合成コール"},"count":"53056","materials":{"扭转醇":"53056","糖组":"53056","RMA70-12":"53056"},"items":[{"name":"合成コール","item":{"itemId":"30073","name":"扭转醇","sortId":100005,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,4],"name_i18n":{"ja":"合成コール","en":"Loxic Kohl","zh":"扭转醇","ko":"로식 콜"}},"value":"53056"},{"name":"中級糖原","item":{"itemId":"30023","name":"糖组","sortId":100025,"rarity":2,"itemType":"MATERIAL","spriteCoord":[4,1],"name_i18n":{"ja":"中級糖原","en":"Sugar Pack","zh":"糖组","ko":"포도당 번들"}},"value":"53056"},{"name":"RMA70-12","item":{"itemId":"30103","name":"RMA70-12","sortId":100011,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,5],"name_i18n":{"ja":"RMA70-12","en":"RMA70-12","zh":"RMA70-12","ko":"RMA70-12"}},"value":"53056"}]},{"target":{"item":{"itemId":"30062","name":"装置","sortId":100018,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,4],"name_i18n":{"ja":"初級装置","en":"Device","zh":"装置","ko":"장치"}},"name":"初級装置"},"count":"10579","materials":{"破损装置":"31737"},"items":[{"name":"破損装置","item":{"itemId":"30061","name":"破损装置","sortId":100019,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,4],"name_i18n":{"ja":"破損装置","en":"Damaged Device","zh":"破损装置","ko":"파손된 장치"}},"value":"31737"}]},{"target":{"item":{"itemId":"30063","name":"全新装置","sortId":100017,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,4],"name_i18n":{"ja":"中級装置","en":"Integrated Device","zh":"全新装置","ko":"리뉴얼 장치"}},"name":"中級装置"},"count":"10584","materials":{"装置":"42336"},"items":[{"name":"初級装置","item":{"itemId":"30062","name":"装置","sortId":100018,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,4],"name_i18n":{"ja":"初級装置","en":"Device","zh":"装置","ko":"장치"}},"value":"42336"}]},{"target":{"item":{"itemId":"30064","name":"改量装置","sortId":100016,"rarity":3,"itemType":"MATERIAL","spriteCoord":[4,4],"name_i18n":{"ja":"上級装置","en":"Optimized Device","zh":"改量装置","ko":"개량 장치"}},"name":"上級装置"},"count":"28379","materials":{"全新装置":"28379","固源岩组":"56758","研磨石":"28379"},"items":[{"name":"中級装置","item":{"itemId":"30063","name":"全新装置","sortId":100017,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,4],"name_i18n":{"ja":"中級装置","en":"Integrated Device","zh":"全新装置","ko":"리뉴얼 장치"}},"value":"28379"},{"name":"中級源岩","item":{"itemId":"30013","name":"固源岩组","sortId":100013,"rarity":2,"itemType":"MATERIAL","spriteCoord":[0,1],"name_i18n":{"ja":"中級源岩","en":"Orirock Cluster","zh":"固源岩组","ko":"원암 큐브 번들"}},"value":"56758"},{"name":"砥石","item":{"itemId":"30093","name":"研磨石","sortId":100009,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,5],"name_i18n":{"ja":"砥石","en":"Grindstone","zh":"研磨石","ko":"연마석"}},"value":"28379"}]},{"target":{"item":{"itemId":"30052","name":"酮凝集","sortId":100034,"rarity":1,"itemType":"MATERIAL","spriteCoord":[4,3],"name_i18n":{"ja":"初級アケトン","en":"Polyketon","zh":"酮凝集","ko":"아케톤 응집체"}},"name":"初級アケトン"},"count":"15561","materials":{"双酮":"46683"},"items":[{"name":"アケトン試剤","item":{"itemId":"30051","name":"双酮","sortId":100035,"rarity":0,"itemType":"MATERIAL","spriteCoord":[3,3],"name_i18n":{"ja":"アケトン試剤","en":"Diketon","zh":"双酮","ko":"디케톤"}},"value":"46683"}]},{"target":{"item":{"itemId":"30053","name":"酮凝集组","sortId":100033,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,3],"name_i18n":{"ja":"中級アケトン","en":"Aketon","zh":"酮凝集组","ko":"아케톤 응집체 번들"}},"name":"中級アケトン"},"count":"8311","materials":{"酮凝集":"33244"},"items":[{"name":"初級アケトン","item":{"itemId":"30052","name":"酮凝集","sortId":100034,"rarity":1,"itemType":"MATERIAL","spriteCoord":[4,3],"name_i18n":{"ja":"初級アケトン","en":"Polyketon","zh":"酮凝集","ko":"아케톤 응집체"}},"value":"33244"}]},{"target":{"item":{"itemId":"30042","name":"异铁","sortId":100030,"rarity":1,"itemType":"MATERIAL","spriteCoord":[0,3],"name_i18n":{"ja":"初級異鉄","en":"Oriron","zh":"异铁","ko":"이철"}},"name":"初級異鉄"},"count":"16049","materials":{"异铁碎片":"48147"},"items":[{"name":"異鉄の欠片","item":{"itemId":"30041","name":"异铁碎片","sortId":100031,"rarity":0,"itemType":"MATERIAL","spriteCoord":[5,2],"name_i18n":{"ja":"異鉄の欠片","en":"Oriron Shard","zh":"异铁碎片","ko":"이철 조각"}},"value":"48147"}]},{"target":{"item":{"itemId":"30043","name":"异铁组","sortId":100029,"rarity":2,"itemType":"MATERIAL","spriteCoord":[1,3],"name_i18n":{"ja":"中級異鉄","en":"Oriron Cluster","zh":"异铁组","ko":"이철 번들"}},"name":"中級異鉄"},"count":"8655","materials":{"异铁":"34620"},"items":[{"name":"初級異鉄","item":{"itemId":"30042","name":"异铁","sortId":100030,"rarity":1,"itemType":"MATERIAL","spriteCoord":[0,3],"name_i18n":{"ja":"初級異鉄","en":"Oriron","zh":"异铁","ko":"이철"}},"value":"34620"}]},{"target":{"item":{"itemId":"30032","name":"聚酸酯","sortId":100022,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,2],"name_i18n":{"ja":"初級エステル","en":"Polyester","zh":"聚酸酯","ko":"폴리에스테르"}},"name":"初級エステル"},"count":"5765","materials":{"酯原料":"17295"},"items":[{"name":"エステル原料","item":{"itemId":"30031","name":"酯原料","sortId":100023,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,2],"name_i18n":{"ja":"エステル原料","en":"Ester","zh":"酯原料","ko":"에스테르 원료"}},"value":"17295"}]},{"target":{"item":{"itemId":"30033","name":"聚酸酯组","sortId":100021,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,2],"name_i18n":{"ja":"中級エステル","en":"Polyester Pack","zh":"聚酸酯组","ko":"폴리에스테르 번들"}},"name":"中級エステル"},"count":"3937","materials":{"聚酸酯":"15748"},"items":[{"name":"初級エステル","item":{"itemId":"30032","name":"聚酸酯","sortId":100022,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,2],"name_i18n":{"ja":"初級エステル","en":"Polyester","zh":"聚酸酯","ko":"폴리에스테르"}},"value":"15748"}]},{"target":{"item":{"itemId":"30022","name":"糖","sortId":100026,"rarity":1,"itemType":"MATERIAL","spriteCoord":[3,1],"name_i18n":{"ja":"初級糖原","en":"Sugar","zh":"糖","ko":"포도당"}},"name":"初級糖原"},"count":"21613","materials":{"代糖":"64839"},"items":[{"name":"ブドウ糖","item":{"itemId":"30021","name":"代糖","sortId":100027,"rarity":0,"itemType":"MATERIAL","spriteCoord":[2,1],"name_i18n":{"ja":"ブドウ糖","en":"Sugar Substitute","zh":"代糖","ko":"대체당"}},"value":"64839"}]},{"target":{"item":{"itemId":"30023","name":"糖组","sortId":100025,"rarity":2,"itemType":"MATERIAL","spriteCoord":[4,1],"name_i18n":{"ja":"中級糖原","en":"Sugar Pack","zh":"糖组","ko":"포도당 번들"}},"name":"中級糖原"},"count":"12287","materials":{"糖":"49148"},"items":[{"name":"初級糖原","item":{"itemId":"30022","name":"糖","sortId":100026,"rarity":1,"itemType":"MATERIAL","spriteCoord":[3,1],"name_i18n":{"ja":"初級糖原","en":"Sugar","zh":"糖","ko":"포도당"}},"value":"49148"}]},{"target":{"item":{"itemId":"30012","name":"固源岩","sortId":100014,"rarity":1,"itemType":"MATERIAL","spriteCoord":[5,0],"name_i18n":{"ja":"初級源岩","en":"Orirock Cube","zh":"固源岩","ko":"원암 큐브"}},"name":"初級源岩"},"count":"28279","materials":{"源岩":"84837"},"items":[{"name":"源岩鉱","item":{"itemId":"30011","name":"源岩","sortId":100015,"rarity":0,"itemType":"MATERIAL","spriteCoord":[4,0],"name_i18n":{"ja":"源岩鉱","en":"Orirock","zh":"源岩","ko":"원암"}},"value":"84837"}]},{"target":{"item":{"itemId":"30013","name":"固源岩组","sortId":100013,"rarity":2,"itemType":"MATERIAL","spriteCoord":[0,1],"name_i18n":{"ja":"中級源岩","en":"Orirock Cluster","zh":"固源岩组","ko":"원암 큐브 번들"}},"name":"中級源岩"},"count":"51658","materials":{"固源岩":"258290"},"items":[{"name":"初級源岩","item":{"itemId":"30012","name":"固源岩","sortId":100014,"rarity":1,"itemType":"MATERIAL","spriteCoord":[5,0],"name_i18n":{"ja":"初級源岩","en":"Orirock Cube","zh":"固源岩","ko":"원암 큐브"}},"value":"258290"}]}],"values":[{"level":"5","items":[{"name":"双极纳米片","value":"327.28"},{"name":"D32钢","value":"64.39"},{"name":"聚合剂","value":"44.44"}],"materials":[{"name":"ナノフレーク","item":{"itemId":"30125","name":"双极纳米片","sortId":100002,"rarity":4,"itemType":"ARKPLANNER","spriteCoord":[4,9],"name_i18n":{"ja":"ナノフレーク","en":"Bipolar Nanoflake","zh":"双极纳米片","ko":"바이폴라 나노플레이크 칩"}},"value":"327.28"},{"name":"D32鋼","item":{"itemId":"30135","name":"D32钢","sortId":100001,"rarity":4,"itemType":"ARKPLANNER","spriteCoord":[5,9],"name_i18n":{"ja":"D32鋼","en":"D32 Steel","zh":"D32钢","ko":"D32강"}},"value":"64.39"},{"name":"融合剤","item":{"itemId":"30115","name":"聚合剂","sortId":100003,"rarity":4,"itemType":"ARKPLANNER","spriteCoord":[3,9],"name_i18n":{"ja":"融合剤","en":"Polymerization Preparation","zh":"聚合剂","ko":"중합제"}},"value":"44.44"}]},{"level":"4","items":[{"name":"改量装置","value":"124.35"},{"name":"白马醇","value":"101.47"},{"name":"RMA70-24","value":"48.42"},{"name":"五水研磨石","value":"47.31"},{"name":"炽合金块","value":"38.91"},{"name":"提纯源岩","value":"38.26"},{"name":"三水锰矿","value":"33.05"},{"name":"酮阵列","value":"28.70"},{"name":"异铁块","value":"21.91"},{"name":"糖聚块","value":"20.66"},{"name":"聚酸酯块","value":"11.09"},{"name":"聚合凝胶","value":"10.16"}],"materials":[{"name":"上級装置","item":{"itemId":"30064","name":"改量装置","sortId":100016,"rarity":3,"itemType":"MATERIAL","spriteCoord":[4,4],"name_i18n":{"ja":"上級装置","en":"Optimized Device","zh":"改量装置","ko":"개량 장치"}},"value":"124.35"},{"name":"上級合成コール","item":{"itemId":"30074","name":"白马醇","sortId":100004,"rarity":3,"itemType":"MATERIAL","spriteCoord":[0,5],"name_i18n":{"ja":"上級合成コール","en":"White Horse Kohl","zh":"白马醇","ko":"화이트 호스 콜"}},"value":"101.47"},{"name":"RMA70-24","item":{"itemId":"30104","name":"RMA70-24","sortId":100010,"rarity":3,"itemType":"MATERIAL","spriteCoord":[0,6],"name_i18n":{"ja":"RMA70-24","en":"RMA70-24","zh":"RMA70-24","ko":"RMA70-24"}},"value":"48.42"},{"name":"上級砥石","item":{"itemId":"30094","name":"五水研磨石","sortId":100008,"rarity":3,"itemType":"MATERIAL","spriteCoord":[4,5],"name_i18n":{"ja":"上級砥石","en":"Grindstone Pentahydrate","zh":"五水研磨石","ko":"고급연마석"}},"value":"47.31"},{"name":"炽合金块","item":{"itemId":"31024","name":"炽合金块","sortId":100038,"rarity":3,"itemType":"MATERIAL","addTimePoint":3,"spriteCoord":[4,8],"name_i18n":{"ja":"炽合金块","en":"炽合金块","zh":"炽合金块","ko":"炽合金块"}},"value":"38.91"},{"name":"上級源岩","item":{"itemId":"30014","name":"提纯源岩","sortId":100012,"rarity":3,"itemType":"MATERIAL","spriteCoord":[1,1],"name_i18n":{"ja":"上級源岩","en":"Orriock Concentration","zh":"提纯源岩","ko":"정제 원암"}},"value":"38.26"},{"name":"上級マンガン","item":{"itemId":"30084","name":"三水锰矿","sortId":100006,"rarity":3,"itemType":"MATERIAL","spriteCoord":[2,5],"name_i18n":{"ja":"上級マンガン","en":"Manganese Trihydrate","zh":"三水锰矿","ko":"망간 중합체"}},"value":"33.05"},{"name":"高級アケトン","item":{"itemId":"30054","name":"酮阵列","sortId":100032,"rarity":3,"itemType":"MATERIAL","spriteCoord":[0,4],"name_i18n":{"ja":"高級アケトン","en":"Keton Colloid","zh":"酮阵列","ko":"아케톤 팩"}},"value":"28.70"},{"name":"高級異鉄","item":{"itemId":"30044","name":"异铁块","sortId":100028,"rarity":3,"itemType":"MATERIAL","spriteCoord":[2,3],"name_i18n":{"ja":"高級異鉄","en":"Oriron Block","zh":"异铁块","ko":"이철 팩"}},"value":"21.91"},{"name":"高級糖原","item":{"itemId":"30024","name":"糖聚块","sortId":100024,"rarity":3,"itemType":"MATERIAL","spriteCoord":[5,1],"name_i18n":{"ja":"高級糖原","en":"Sugar Lump","zh":"糖聚块","ko":"포도당 팩"}},"value":"20.66"},{"name":"上級エステル","item":{"itemId":"30034","name":"聚酸酯块","sortId":100020,"rarity":3,"itemType":"MATERIAL","spriteCoord":[4,2],"name_i18n":{"ja":"上級エステル","en":"Polyester Lump","zh":"聚酸酯块","ko":"폴리에스테르 팩"}},"value":"11.09"},{"name":"聚合凝胶","item":{"itemId":"31014","name":"聚合凝胶","sortId":100036,"rarity":3,"itemType":"MATERIAL","addTimePoint":3,"spriteCoord":[2,8],"name_i18n":{"ja":"聚合凝胶","en":"聚合凝胶","zh":"聚合凝胶","ko":"聚合凝胶"}},"value":"10.16"}]},{"level":"3","items":[{"name":"RMA70-12","value":"48.59"},{"name":"全新装置","value":"40.10"},{"name":"研磨石","value":"39.52"},{"name":"糖组","value":"29.98"},{"name":"扭转醇","value":"22.89"},{"name":"固源岩组","value":"22.37"},{"name":"轻锰矿","value":"17.41"},{"name":"炽合金","value":"12.97"},{"name":"凝胶","value":"0.00000"},{"name":"酮凝集组","value":"0.00000"},{"name":"聚酸酯组","value":"0.00000"},{"name":"异铁组","value":"0.00000"}],"materials":[{"name":"RMA70-12","item":{"itemId":"30103","name":"RMA70-12","sortId":100011,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,5],"name_i18n":{"ja":"RMA70-12","en":"RMA70-12","zh":"RMA70-12","ko":"RMA70-12"}},"value":"48.59"},{"name":"中級装置","item":{"itemId":"30063","name":"全新装置","sortId":100017,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,4],"name_i18n":{"ja":"中級装置","en":"Integrated Device","zh":"全新装置","ko":"리뉴얼 장치"}},"value":"40.10"},{"name":"砥石","item":{"itemId":"30093","name":"研磨石","sortId":100009,"rarity":2,"itemType":"MATERIAL","spriteCoord":[3,5],"name_i18n":{"ja":"砥石","en":"Grindstone","zh":"研磨石","ko":"연마석"}},"value":"39.52"},{"name":"中級糖原","item":{"itemId":"30023","name":"糖组","sortId":100025,"rarity":2,"itemType":"MATERIAL","spriteCoord":[4,1],"name_i18n":{"ja":"中級糖原","en":"Sugar Pack","zh":"糖组","ko":"포도당 번들"}},"value":"29.98"},{"name":"合成コール","item":{"itemId":"30073","name":"扭转醇","sortId":100005,"rarity":2,"itemType":"MATERIAL","spriteCoord":[5,4],"name_i18n":{"ja":"合成コール","en":"Loxic Kohl","zh":"扭转醇","ko":"로식 콜"}},"value":"22.89"},{"name":"中級源岩","item":{"itemId":"30013","name":"固源岩组","sortId":100013,"rarity":2,"itemType":"MATERIAL","spriteCoord":[0,1],"name_i18n":{"ja":"中級源岩","en":"Orirock Cluster","zh":"固源岩组","ko":"원암 큐브 번들"}},"value":"22.37"},{"name":"マンガン","item":{"itemId":"30083","name":"轻锰矿","sortId":100007,"rarity":2,"itemType":"MATERIAL","spriteCoord":[1,5],"name_i18n":{"ja":"マンガン","en":"Manganese Ore","zh":"轻锰矿","ko":"망간 광석"}},"value":"17.41"},{"name":"炽合金","item":{"itemId":"31023","name":"炽合金","sortId":100039,"rarity":2,"itemType":"MATERIAL","addTimePoint":3,"spriteCoord":[3,8],"name_i18n":{"ja":"炽合金","en":"炽合金","zh":"炽合金","ko":"炽合金"}},"value":"12.97"}]},{"level":"2","items":[{"name":"装置","value":"10.03"},{"name":"糖","value":"7.50"},{"name":"固源岩","value":"4.47"},{"name":"酮凝集","value":"0.00000"},{"name":"聚酸酯","value":"0.00000"},{"name":"异铁","value":"0.00000"}],"materials":[{"name":"初級装置","item":{"itemId":"30062","name":"装置","sortId":100018,"rarity":1,"itemType":"MATERIAL","spriteCoord":[2,4],"name_i18n":{"ja":"初級装置","en":"Device","zh":"装置","ko":"장치"}},"value":"10.03"},{"name":"初級糖原","item":{"itemId":"30022","name":"糖","sortId":100026,"rarity":1,"itemType":"MATERIAL","spriteCoord":[3,1],"name_i18n":{"ja":"初級糖原","en":"Sugar","zh":"糖","ko":"포도당"}},"value":"7.50"},{"name":"初級源岩","item":{"itemId":"30012","name":"固源岩","sortId":100014,"rarity":1,"itemType":"MATERIAL","spriteCoord":[5,0],"name_i18n":{"ja":"初級源岩","en":"Orirock Cube","zh":"固源岩","ko":"원암 큐브"}},"value":"4.47"}]},{"level":"1","items":[{"name":"破损装置","value":"3.34"},{"name":"代糖","value":"2.50"},{"name":"源岩","value":"1.49"},{"name":"酯原料","value":"0.00000"},{"name":"双酮","value":"0.00000"},{"name":"异铁碎片","value":"0.00000"}],"materials":[{"name":"破損装置","item":{"itemId":"30061","name":"破损装置","sortId":100019,"rarity":0,"itemType":"MATERIAL","spriteCoord":[1,4],"name_i18n":{"ja":"破損装置","en":"Damaged Device","zh":"破损装置","ko":"파손된 장치"}},"value":"3.34"},{"name":"ブドウ糖","item":{"itemId":"30021","name":"代糖","sortId":100027,"rarity":0,"itemType":"MATERIAL","spriteCoord":[2,1],"name_i18n":{"ja":"ブドウ糖","en":"Sugar Substitute","zh":"代糖","ko":"대체당"}},"value":"2.50"},{"name":"源岩鉱","item":{"itemId":"30011","name":"源岩","sortId":100015,"rarity":0,"itemType":"MATERIAL","spriteCoord":[4,0],"name_i18n":{"ja":"源岩鉱","en":"Orirock","zh":"源岩","ko":"원암"}},"value":"1.49"}]}]},
+          done: false,
+          data: {},
           tab: null,
           tabs: [{
             id: "stages",

From cf44a2677af888e9f7bdbb9c99025f63d33a3096 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sun, 8 Mar 2020 16:24:13 -0400
Subject: [PATCH 39/45] improvement(planner): fixed item icon position
 mis-alignment, improved stepper button exp. on mobile

---
 src/components/global/ItemIcon.vue |  2 +-
 src/views/Planner.vue              | 25 +++++++++++++------------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/global/ItemIcon.vue b/src/components/global/ItemIcon.vue
index a2a2f3f3..ef00575b 100644
--- a/src/components/global/ItemIcon.vue
+++ b/src/components/global/ItemIcon.vue
@@ -2,7 +2,7 @@
   <figure
     v-if="item.itemId !== 'furni' && item.spriteCoord"
     :class="{'item-icon--sprite': true, 'item-icon--sprite--disable-hover-effect': disableTooltip}"
-    :alt="`item(${item.itemId})`"
+    :alt="item.name"
     :style="style"
   />
   <v-icon
diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index 46089942..5629cf5a 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -331,15 +331,14 @@
                 >
                   <v-card class="card-item">
                     <v-card-text>
-                      <div class="title d-flex">
-                        <span class="font-weight-bold headline">{{ synthesis.target.name }}</span>
-                        <v-spacer />
+                      <div class="title d-block">
                         <Item
                           :item="synthesis.target.item"
-                          class="float-right"
                           disable-tooltip
+                          class="float-right"
                           :ratio="0.5"
                         />
+                        <span class="font-weight-bold headline">{{ synthesis.target.name }}</span>
                       </div>
                       <div class="display-1 text-center monospace font-weight-bold my-2">
                         &times;{{ parseInt(synthesis.count).toLocaleString() }}
@@ -563,7 +562,7 @@
                       <v-btn
                         color="green"
                         text
-                        @click="importToItemsData"
+                        @click="importFromText"
                       >
                         {{ $t('actions.import') }}
                       </v-btn>
@@ -862,11 +861,7 @@
             this.calculation.pending = false;
           })
       },
-      // fontSize (v) {
-      //   return {fontSize: `${(16 + (v.toString().length * -1.8)) * (document.body.clientWidth / 800)}px`}
-      //   // return {fontSize: `${2 - (v.toString().length - 1) * 0.5}ch`}
-      // },
-      importToItemsData() {
+      importFromText () {
         let imported;
         try {
           imported = JSON.parse(this.importJson);
@@ -877,6 +872,9 @@
           });
           return
         }
+        this.importToItemsData(imported)
+      },
+      importToItemsData(imported) {
         let convertedImported = [];
         for (const itemData of imported) {
           if (!(itemData.hasOwnProperty("need") && Number.isInteger(itemData.need) && itemData.need >= 0 &&
@@ -1082,10 +1080,13 @@
     border-radius: 0 15px 15px 0 !important;
   }
   ::v-deep .number-input-theme--dense .number-input__button::before {
-    width: 75%;
+    width: 14px;
   }
   ::v-deep .number-input-theme--dense .number-input__button {
-    width: 20px !important;
+    width: 24px !important;
+  }
+  ::v-deep .number-input-theme--dense .number-input__button:hover {
+    width: 30px !important;
   }
   ::v-deep .number-input-theme--dense .number-input__input {
     padding-left: 20px !important;

From 99a2d512e403c8bf9325b4920e9624dddea63ed4 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sun, 8 Mar 2020 17:00:25 -0400
Subject: [PATCH 40/45] improvement(planner): add only foreignServer option

---
 src/utils/marshaller.js |  3 +++
 src/views/Planner.vue   | 36 +++++++++++++++++++++++++++++-------
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/utils/marshaller.js b/src/utils/marshaller.js
index 225adeb2..9b664716 100644
--- a/src/utils/marshaller.js
+++ b/src/utils/marshaller.js
@@ -16,6 +16,9 @@ export default {
     body.extra_outc = options.byProduct;
     body.exp_demand = options.requireExp;
     body.gold_demand = options.requireLmb;
+    if (options.foreignServer) {
+      body["exclude"] = ["6-1","6-10","6-11","6-12","6-14","6-15","6-16","6-2","6-3","6-4","6-5","6-8","6-9","S6-1","S6-2","S6-3","S6-4"]
+    }
 
     return body
   }
diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index 5629cf5a..ee8783ed 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -5,7 +5,8 @@
         "_name": "选项",
         "byProduct": "考虑合成副产物",
         "requireExp": "大量需求经验",
-        "requireLmb": "大量需求龙门币"
+        "requireLmb": "大量需求龙门币",
+        "foreignServer": "仅计算国际服关卡"
       },
       "actions": {
         "import": "导入",
@@ -37,7 +38,8 @@
         "_name": "Options",
         "byProduct": "Consider by-products",
         "requireExp": "Large demand for EXP",
-        "requireLmb": "Large demand for LMD"
+        "requireLmb": "Large demand for LMD",
+        "foreignServer": "Only foreign server stages"
       },
       "actions": {
         "import": "Import",
@@ -492,6 +494,13 @@
               hide-details
             />
           </v-col>
+          <v-col cols="12">
+            <v-switch
+              v-model="options.foreignServer"
+              :label="$t('options.foreignServer')"
+              hide-details
+            />
+          </v-col>
         </v-row>
       </v-col>
       <v-col
@@ -526,7 +535,6 @@
               <v-tabs
                 v-model="importExportDialogTab"
                 icons-and-text
-                grow
                 centered
                 background-color="green"
                 color="white"
@@ -782,7 +790,8 @@
         options: {
           byProduct: false,
           requireExp: false,
-          requireLmb: false
+          requireLmb: false,
+          foreignServer: false
         },
         getItem: get.items
       }
@@ -790,6 +799,15 @@
     computed: {
       exportJson() {
         return JSON.stringify(this.itemsData);
+      },
+      foreignServerSwitchMap: {
+        MAP: [true, false],
+        get () {
+          return this.MAP.indexOf(this.options.foreignServer)
+        },
+        set (value) {
+          this.options.foreignServer = this.MAP[value]
+        }
       }
     },
     methods: {
@@ -941,7 +959,6 @@
           }
         })
       }
-
     }
   };
 </script>
@@ -1057,13 +1074,13 @@
     border-radius: 50% !important;
     height: 30px !important;
     width: 30px !important;
-    transition: all .225s cubic-bezier(0.165, 0.84, 0.44, 1);
+    transition: all .125s cubic-bezier(0.165, 0.84, 0.44, 1);
   }
   ::v-deep .number-input-theme .number-input__button:hover {
     transform: scale(1.12);
   }
   ::v-deep .number-input-theme .number-input__button:active {
-    transform: scale(1.05);
+    transform: scale(1.02);
   }
 
   ::v-deep .number-input-theme .number-input__button--minus {
@@ -1107,4 +1124,9 @@
     user-select: none;
   }
 
+  ::v-deep .v-tabs .v-slide-group__prev {
+    display: none !important;
+  }
+
+
 </style>
\ No newline at end of file

From 97640091125ac39f9ca40dacbe4dd9a91301327e Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sun, 8 Mar 2020 17:01:45 -0400
Subject: [PATCH 41/45] improvement(planner): only calculate foreign server by
 default if locale not `zh`

---
 src/views/Planner.vue | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index ee8783ed..952f25d5 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -741,6 +741,7 @@
 <script>
   import planner from "@/apis/planner";
   import get from "@/utils/getters";
+  import i18n from "@/i18n";
   import Item from "@/components/global/Item";
 
   import * as clipboard from "clipboard-polyfill";
@@ -791,7 +792,7 @@
           byProduct: false,
           requireExp: false,
           requireLmb: false,
-          foreignServer: false
+          foreignServer: i18n.locale !== "zh"
         },
         getItem: get.items
       }
@@ -799,15 +800,6 @@
     computed: {
       exportJson() {
         return JSON.stringify(this.itemsData);
-      },
-      foreignServerSwitchMap: {
-        MAP: [true, false],
-        get () {
-          return this.MAP.indexOf(this.options.foreignServer)
-        },
-        set (value) {
-          this.options.foreignServer = this.MAP[value]
-        }
       }
     },
     methods: {

From d0bcf01cf040b3b5d9e97d6d146a561aa7713601 Mon Sep 17 00:00:00 2001
From: AlvISsReimu <alvissreimu@gmail.com>
Date: Mon, 9 Mar 2020 06:26:39 +0900
Subject: [PATCH 42/45] fix(i18n): add translation to "Do not add Chapter 6
 into calculation"

---
 src/views/Planner.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index 952f25d5..1d3777b6 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -6,7 +6,7 @@
         "byProduct": "考虑合成副产物",
         "requireExp": "大量需求经验",
         "requireLmb": "大量需求龙门币",
-        "foreignServer": "仅计算国际服关卡"
+        "foreignServer": "不考虑第六章"
       },
       "actions": {
         "import": "导入",
@@ -39,7 +39,7 @@
         "byProduct": "Consider by-products",
         "requireExp": "Large demand for EXP",
         "requireLmb": "Large demand for LMD",
-        "foreignServer": "Only foreign server stages"
+        "foreignServer": "Do not add Chapter 6 into calculation"
       },
       "actions": {
         "import": "Import",
@@ -71,7 +71,8 @@
         "_name": "オプション",
         "byProduct": "加工副産物を考慮する",
         "requireExp": "大量の経験値が必要",
-        "requireLmb": "大量の龍門幣が必要"
+        "requireLmb": "大量の龍門幣が必要",
+        "foreignServer": "第6章を計算に追加しません"
       },
       "actions": {
         "import": "インポート",
@@ -103,7 +104,8 @@
         "_name": "설정",
         "byProduct": "부산물 획득 고려",
         "requireExp": "경험치 획득 고려",
-        "requireLmb": "용문폐 획득 고려"
+        "requireLmb": "용문폐 획득 고려",
+        "foreignServer": "에피소드 6을 계산에 추가하지 않습니다"
       },
       "actions": {
         "import": "가져오기",

From 276ef5168c3c26beb2c1658d3c8d58f7cb6fb898 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sun, 8 Mar 2020 17:37:14 -0400
Subject: [PATCH 43/45] improvement(planner): disable double tap to zoom on
 stepper icons

---
 src/views/Planner.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index 952f25d5..37edcac4 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -535,6 +535,7 @@
               <v-tabs
                 v-model="importExportDialogTab"
                 icons-and-text
+                grow
                 centered
                 background-color="green"
                 color="white"
@@ -1067,6 +1068,7 @@
     height: 30px !important;
     width: 30px !important;
     transition: all .125s cubic-bezier(0.165, 0.84, 0.44, 1);
+    touch-action: manipulation;
   }
   ::v-deep .number-input-theme .number-input__button:hover {
     transform: scale(1.12);

From d402eb7a021b996e00b43d8e0207410f3ee68a59 Mon Sep 17 00:00:00 2001
From: AlvISsReimu <alvissreimu@gmail.com>
Date: Mon, 9 Mar 2020 06:45:59 +0900
Subject: [PATCH 44/45] fix(i18n): fix a Korean translation

---
 src/views/Planner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Planner.vue b/src/views/Planner.vue
index 1d3777b6..34400898 100644
--- a/src/views/Planner.vue
+++ b/src/views/Planner.vue
@@ -105,7 +105,7 @@
         "byProduct": "부산물 획득 고려",
         "requireExp": "경험치 획득 고려",
         "requireLmb": "용문폐 획득 고려",
-        "foreignServer": "에피소드 6을 계산에 추가하지 않습니다"
+        "foreignServer": "에피소드 6을 계산에 넣지 마십시오"
       },
       "actions": {
         "import": "가져오기",

From 85c80a20ba8e0e2d2ef0ce321bb8f94c38476199 Mon Sep 17 00:00:00 2001
From: GalvinGao <galvingaoper@gmail.com>
Date: Sun, 8 Mar 2020 17:49:31 -0400
Subject: [PATCH 45/45] ci(travis): improve CI build speed

---
 .travis.yml  | 2 +-
 package.json | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index f3ef3e38..aff016db 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -6,4 +6,4 @@ cache:
     - node_modules
 script:
   - yarn lint
-  - yarn build
\ No newline at end of file
+  - yarn build:single
\ No newline at end of file
diff --git a/package.json b/package.json
index cfb67b23..22c78d2a 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "npx --max_old_space_size=4096 vue-cli-service build --modern",
+    "build:single": "npx --max_old_space_size=4096 vue-cli-service build",
     "lint": "vue-cli-service lint",
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
     "submit": "git add . && git cz && git push"