feat: 周回回数目安の表示機能 (#256)

* feat: ドロップ率データスキーマ追加

* add: ドロップ率データ追加

* feat: 設定ページ作成

* feat: 周回数計算用util関数

* feat: ドロップ率データにクラフト数量の情報を追加

* feat: SwitchListItemのスイッチ状態にVListItemのactiveを使用するように

* feat: ドロップ率の表示追加

* refactor: BookmarkDetailsDialogのデータ処理をすべてcomputedで行うように

nuxt/app.vue

@@ -162,6 +162,10 @@ const drawerItems: DrawerItemOrDivider[] = [
     to: "/sync",
   },
   "---" as const,
+  {
+    icon: "mdi-cog",
+    to: "/settings",
+  },
   {
     icon: "mdi-information",
     to: "/about",

nuxt/assets/data/drop-rates.yaml

@@ -0,0 +1,176 @@
+- readableType: characterExp
+  ids:
+    - travel-encounters
+    - adventure-log
+    - travelers-guide
+  craftFactors:
+    rarities:
+      2: 5
+      3: 4
+  drops:
+    - equilibriumLevels:
+        - 0
+      rarities:
+        2: 3
+        3: 3
+        4: 0
+    - equilibriumLevels:
+        - 1
+      rarities:
+        2: 4
+        3: 4
+        4: 0
+    - equilibriumLevels:
+        - 2
+      rarities:
+        2: 5
+        3: 5
+        4: 0
+    - equilibriumLevels:
+        - 3
+      rarities:
+        2: 2.57
+        3: 3
+        4: 1
+    - equilibriumLevels:
+        - 4
+        - 5
+        - 6
+      rarities:
+        2: 0
+        3: 5
+        4: 1
+
+- readableType: lightConeExp
+  ids:
+    - sparse-aether
+    - condensed-aether
+    - refined-aether
+  craftFactors:
+    rarities:
+      2: 4
+      3: 3
+  drops:
+    - equilibriumLevels:
+        - 0
+      rarities:
+        2: 5
+        3: 1
+        4: 0
+    - equilibriumLevels:
+        - 1
+      rarities:
+        2: 4
+        3: 2
+        4: 0
+    - equilibriumLevels:
+        - 2
+      rarities:
+        2: 3
+        3: 3
+        4: 0
+    - equilibriumLevels:
+        - 3
+      rarities:
+        2: 2.70
+        3: 1
+        4: 1
+    - equilibriumLevels:
+        - 4
+        - 5
+        - 6
+      rarities:
+        2: 2.48
+        3: 2
+        4: 1
+
+- type: character_ascension
+  drops:
+    - equilibriumLevels:
+        - 2
+      rarities:
+        4: 2
+    - equilibriumLevels:
+        - 3
+      rarities:
+        4: 3
+    - equilibriumLevels:
+        - 4
+      rarities:
+        4: 4
+    - equilibriumLevels:
+        - 5
+        - 6
+      rarities:
+        4: 5
+
+- type: light_cone_or_skill_upgrade
+  craftFactors:
+    rarities:
+      2: 3
+      3: 3
+  drops:
+    - equilibriumLevels:
+        - 0
+      rarities:
+        2: 1.62
+        3: 0
+        4: 0
+    - equilibriumLevels:
+        - 1
+      rarities:
+        2: 2.27
+        3: 0
+        4: 0
+    - equilibriumLevels:
+        - 2
+      rarities:
+        2: 2.24
+        3: 0.26
+        4: 0
+    - equilibriumLevels:
+        - 3
+      rarities:
+        2: 2.24
+        3: 0.49
+        4: 0
+    - equilibriumLevels:
+        - 4
+      rarities:
+        2: 1.25
+        3: 1
+        4: 0.06
+    - equilibriumLevels:
+        - 5
+        - 6
+      rarities:
+        2: 1.25
+        3: 1
+        4: 0.16
+
+- type: advanced_skill_upgrade
+  drops:
+    - equilibriumLevels:
+        - 1
+      rarities:
+        4: 1
+    - equilibriumLevels:
+        - 2
+      rarities:
+        4: 1.61
+    - equilibriumLevels:
+        - 3
+      rarities:
+        4: 2
+    - equilibriumLevels:
+        - 4
+      rarities:
+        4: 2.32
+    - equilibriumLevels:
+        - 5
+      rarities:
+        4: 2.7
+    - equilibriumLevels:
+        - 6
+      rarities:
+        4: 3

nuxt/components/bookmark/character-card.vue

@@ -9,6 +9,7 @@ import {isBookmarkableExp} from "~/types/bookmark/bookmarkables"
 interface Props {
   character: CharacterIdWithVariant
   bookmarks: Bookmark[]
+  showFarmingCount?: boolean
 }
 
 const props = defineProps<Props>()
@@ -91,6 +92,7 @@ const detailsDialog = reactive({
               :initial-selected-exp-item="isBookmarkableExp(materials[0]) ? materials[0].selectedItem : undefined"
               :items="materials"
               :purpose-types="['ascension', 'basicAttack', 'skill', 'talent', 'ultimate']"
+              :show-farming-count="showFarmingCount"
             />
             <v-btn
               :text="tx('common.details')"
@@ -148,7 +150,12 @@ const detailsDialog = reactive({
         </section>
       </div>
 
-      <BookmarkDetailsDialog v-model="detailsDialog.show" :bookmarks="bookmarks" :items="detailsDialog.items" />
+      <BookmarkDetailsDialog
+        v-model="detailsDialog.show"
+        :bookmarks="bookmarks"
+        :items="detailsDialog.items"
+        :show-farming-count="showFarmingCount"
+      />
     </div>
   </v-card>
 </template>

nuxt/components/bookmark/details-dialog.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {groupBy} from "lodash"
+import {flatMap, groupBy, mapValues} from "lodash"
 import {PurposeType} from "~/types/strings"
 import {Bookmark, LevelingBookmark} from "~/types/bookmark/bookmark"
 import {materialSortFunc} from "~/utils/merge-items"
@@ -10,6 +10,7 @@ interface Props {
   modelValue: boolean
   items: LevelingBookmark[]
   bookmarks: Bookmark[]
+  showFarmingCount?: boolean
 }
 
 const props = defineProps<Props>()
@@ -27,25 +28,33 @@ const loadingCompleteLeveling = ref<string | null>(null)
 const _persistent = ref(false)
 
 const purposes = computed(() => {
-  const result: Partial<Record<PurposeType, LevelingBookmark[]>> = {}
+  const _purposes: Partial<Record<PurposeType, LevelingBookmark[]>> = {}
 
   for (const item of props.items) {
     if (item.usage.type === "exp") {
-      (result.ascension ||= []).push(item)
+      (_purposes.ascension ||= []).push(item)
     } else {
-      (result[item.usage.purposeType] ||= []).push(item)
+      (_purposes[item.usage.purposeType] ||= []).push(item)
     }
   }
 
-  return result
+  const grouped = mapValues(_purposes, bookmarks => groupByLevel(bookmarks))
+
+  const sorted = mapValues(grouped, levels => mapValues(levels, items => items.sort(materialSortFunc)))
+
+  return sorted
 })
 
+const groupByLevel = (items: LevelingBookmark[] | undefined): { [purpose: string]: LevelingBookmark[] } => {
+  return groupBy(items, e => e.usage.upperLevel)
+}
+
 const getSkillTitle = (item: LevelingBookmark) => {
   return tx(i18n, `skillTitles.${item.characterId.replace("_", ".")}.${item.usage.purposeType}`)
 }
 
 const removeBookmarksInLevel = (purposeType: PurposeType, level: number) => {
-  const ids = purposes.value[purposeType]?.filter(e => e.usage.upperLevel <= level)?.map(e => e.id!)
+  const ids = flatMap(purposes.value[purposeType])?.filter(e => e.usage.upperLevel <= level)?.map(e => e.id!)
   if (ids) {
     loadingCompleteLeveling.value = `${purposeType}-${level}`
     return db.bookmarks.remove(...ids).then((result) => {
@@ -91,12 +100,12 @@ router.beforeEach(() => {
           <v-expansion-panel
             v-for="(_items, purpose) in purposes"
             :key="purpose"
-            :title="tx(`purposeTypes.${purpose}`, {title: getSkillTitle(_items![0])})"
+            :title="tx(`purposeTypes.${purpose}`, {title: getSkillTitle(Object.values(_items!)[0][0])})"
             :value="purpose"
           >
             <template #text>
               <ul>
-                <li v-for="(__items, lv) in groupBy(_items, (e) => e.usage.upperLevel)" :key="lv">
+                <li v-for="(__items, lv) in _items" :key="lv">
                   <v-row align="center" class="mb-2" no-gutters>
                     <h3 class="text-slight-heading">
                       Lv. {{ lv }}
@@ -108,7 +117,7 @@ router.beforeEach(() => {
                       class="ml-1"
                       prepend-icon="mdi-marker-check"
                       variant="text"
-                      @click="removeBookmarksInLevel(purpose, parseInt(lv))"
+                      @click="removeBookmarksInLevel(purpose, Number(lv))"
                     >
                       <span>{{ tx('bookmark.completeLeveling') }}</span>
 
@@ -120,12 +129,13 @@ router.beforeEach(() => {
                   </v-row>
                   <div class="material-cards-container">
                     <MaterialItem
-                      v-for="item in __items.sort(materialSortFunc)"
+                      v-for="item in __items"
                       :key="item.id"
                       :initial-selected-exp-item="isBookmarkableExp(item) ? item.selectedItem : undefined"
                       :items="[item]"
                       :purpose-types="[purpose]"
                       individual
+                      :show-farming-count="showFarmingCount"
                     />
                   </div>
                 </li>

nuxt/components/bookmark/list.vue

@@ -52,6 +52,7 @@ const saveCharacterSort = (ev: Sortable.SortableEvent) => {
         :data-character-id="characterId"
         :bookmarks="characterBookmarks"
         :character="characterId as string"
+        :show-farming-count="config.showFarmingCount"
       />
     </Draggable>
 

nuxt/components/material/item.vue

@@ -26,6 +26,7 @@ interface Props {
   purposeTypes: PurposeType[]
   initialSelectedExpItem?: string
   individual?: boolean
+  showFarmingCount?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -162,6 +163,7 @@ const reBookmark = async(selectedExpItemId: string | undefined) => {
     :material-image="getMaterialImage"
     :quantity="quantity"
     :rarity="getRarity"
+    :farming-count="showFarmingCount ? getFarmingCount : undefined"
     @toggle-bookmark="toggleBookmark"
     @re-bookmark="reBookmark"
   />