feat: キャラの所持状況で絞り込む機能の追加

nuxt/assets/styles/global.sass

@@ -85,10 +85,17 @@ h4.c-subheader
   pre
     .v-theme--dark &
       background: #343434
+
     .v-theme--light &
       background: #d7d7d7
 
     border-radius: 4px
     overflow-x: auto
     white-space: nowrap
     padding: 8px 16px
+
+.g-2
+  gap: 8px !important
+
+.g-4
+  gap: 16px !important

nuxt/locales/en.yaml

@@ -85,7 +85,13 @@ bookmark:
   completeLeveling: Complete Leveling
   completeLevelingDesc: Removes all bookmarks above this.
 
+charactersPage:
+  possessionStatus: Possession Status
+  owned: Owned
+  notOwned: Not Owned
+
 characterDetailsPage:
+  iHave: I have this character.
   ascension: Ascension / Character Level Up Materials
   skills: Skill Leveling Materials
 

nuxt/locales/ja.yaml

@@ -83,7 +83,13 @@ bookmark:
   completeLeveling: 育成完了
   completeLevelingDesc: これより上のブックマークをすべて解除します。
 
+charactersPage:
+  possessionStatus: 所持状況
+  owned: 所持
+  notOwned: 未所持
+
 characterDetailsPage:
+  iHave: 所持
   ascension: キャラLvアップ/昇格素材
   skills: スキルLvアップ素材
 

nuxt/pages/characters/[characterId].vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import characters from "~/assets/data/characters.yaml"
 import {CharacterVariant} from "~/types/generated/characters.g"
+import {useConfigStore} from "~/store/config"
 
 definePageMeta({
   title: "characterDetails",
@@ -9,6 +10,7 @@ definePageMeta({
 
 const route = useRoute()
 const router = useRouter()
+const config = useConfigStore()
 
 if (!characters.some(e => e.id === route.params.characterId)) {
   throw createError({statusCode: 404, message: "Page not found", fatal: true})
@@ -36,9 +38,12 @@ onActivated(() => {
 
 <template>
   <div>
-    <v-row align="center" no-gutters>
+    <v-row align="center" class="g-4" no-gutters>
+      <!-- character image -->
       <v-img :src="getCharacterImage(character.id, 'small')" max-width="80" />
-      <div class="ml-4 d-flex flex-column" style="gap: 4px">
+
+      <!-- character info -->
+      <div class="d-flex flex-column" style="gap: 4px">
         <div>
           <v-icon v-for="i of character.rarity" :key="i" color="star" size="18">
             mdi-star
@@ -62,6 +67,14 @@ onActivated(() => {
           <span class="ml-1">{{ tx(`combatTypes.${currentVariant.combatType}` as const) }}</span>
         </div>
       </div>
+
+      <!-- Is owned checkbox -->
+      <v-checkbox-btn
+        v-if="character.id !== 'trailblazer'"
+        v-model="config.ownedCharacters"
+        :label="tx('characterDetailsPage.iHave')"
+        :value="character.id"
+      />
     </v-row>
 
     <client-only>

nuxt/pages/characters/index.vue

@@ -1,28 +1,40 @@
 <script setup lang="ts">
 import characters from "~/assets/data/characters.yaml"
 import {CombatType, Path} from "~/types/generated/characters.g"
+import {useConfigStore} from "~/store/config"
+import {reactive} from "#imports"
 
 definePageMeta({
   title: "characters",
 })
 
+const config = useConfigStore()
+
 const paths = new Set(characters.map(e => e.path ?? "destruction"))
 const combatTypes = new Set(characters.map(e => e.combatType ?? "physical"))
 
-const filter = ref({
+const filter = reactive({
   rarity: [] as number[],
   path: [] as Path[],
   combatType: [] as CombatType[],
+  possessionStatus: [] as ("owned" | "not-owned")[],
 })
 
 const filteredCharacters = computed(() => {
   return characters.filter((character) => {
-    if (filter.value.path.length > 0 && (!character.path || !filter.value.path.includes(character.path))) {
+    if (filter.path.length > 0 && (!character.path || !filter.path.includes(character.path))) {
       return false
-    } else if (filter.value.combatType.length > 0 && (!character.combatType || !filter.value.combatType.includes(character.combatType))) {
+    } else if (filter.combatType.length > 0 && (!character.combatType || !filter.combatType.includes(character.combatType))) {
       return false
-    } else if (filter.value.rarity.length > 0 && !filter.value.rarity.includes(character.rarity)) {
+    } else if (filter.rarity.length > 0 && !filter.rarity.includes(character.rarity)) {
       return false
+    } else if (filter.possessionStatus.length > 0) {
+      const owned = [...config.ownedCharacters, "trailblazer"] // Trailblazer is always owned
+      if (filter.possessionStatus[0] === "owned" && !owned.includes(character.id)) {
+        return false
+      } else if (filter.possessionStatus[0] === "not-owned" && owned.includes(character.id)) {
+        return false
+      }
     }
 
     return true
@@ -33,11 +45,24 @@ const filteredCharacters = computed(() => {
 <template>
   <div>
     <v-row no-gutters>
+      <!-- filter button -->
       <v-btn :color="Object.values(filter).some(e => e.length >= 1) ? 'star' : ''" prepend-icon="mdi-filter">
         <span>{{ tx("common.filter") }}</span>
         <client-only>
           <v-menu activator="parent" :close-on-content-click="false" max-width="400px">
             <v-card>
+              <div>
+                <div class="filter-row-title">
+                  {{ tx("charactersPage.possessionStatus") }}
+                </div>
+                <v-list v-model:selected="filter.possessionStatus">
+                  <v-row no-gutters>
+                    <v-list-item :title="tx('charactersPage.owned')" prepend-icon="mdi-check" value="owned" />
+                    <v-list-item :title="tx('charactersPage.notOwned')" prepend-icon="mdi-close" value="not-owned" />
+                  </v-row>
+                </v-list>
+              </div>
+              <v-divider />
               <div>
                 <div class="filter-row-title">
                   {{ tx("common.rarity") }}
@@ -105,6 +130,7 @@ const filteredCharacters = computed(() => {
         </client-only>
       </v-btn>
     </v-row>
+
     <v-row no-gutters class="mt-4" style="gap: 16px">
       <CharacterCard v-for="character in filteredCharacters" :key="character.id" :character="character" />
     </v-row>

nuxt/store/config.ts

@@ -24,13 +24,17 @@ export const useConfigStore = defineStore("config", {
      * Whether to show the pity history in Warps Pity Counter.
      */
     warpsShowPityList: false,
+    /**
+     * Owned characters.
+     */
+    ownedCharacters: [] as string[],
   }),
   actions: {
     /**
-     * Gets the actual theme to set. (This method is in `actions` to avoid caching the result.)
+     * Gets the actual theme to set. (To avoid caching the result, this method is an action.)
      *
-     * If the theme is set to "auto", it will return "dark" or "light" depending on the user's OS.
-     * otherwise, it will return the theme set by the user.
+     * If the theme is set to `auto`, it will return `dark` or `light` depending on the user's OS settings.
+     * Otherwise, it will return the theme set in app.
      */
     getCurrentTheme() {
       if (this.theme === "auto") {

nuxt/types/firestore/user-document.ts

@@ -17,11 +17,12 @@ export interface SyncedUserData {
 }
 
 export type SyncedConfig = typeof useConfigStore extends StoreDefinition<any, infer S> ?
-  Pick<S, "warpsUrl" | "tpCount" | "tpBaseTime" | "warpsShowPityList"> : never
+  Pick<S, "warpsUrl" | "tpCount" | "tpBaseTime" | "warpsShowPityList" | "ownedCharacters"> : never
 
 export const configStoreToSyncedConfig = (config: ReturnType<typeof useConfigStore>): SyncedConfig => ({
   warpsUrl: config.warpsUrl,
   tpCount: config.tpCount,
   tpBaseTime: config.tpBaseTime,
   warpsShowPityList: config.warpsShowPityList,
+  ownedCharacters: config.ownedCharacters,
 })