poi-plugin-quest-info-2 0.8.9 → 0.9.1

package/src/components/QuestCard/utils.tsx

@@ -19,7 +19,7 @@ export const questStatusMap: Record<QUEST_STATUS, React.FC> = {
   [QUEST_STATUS.LOCKED]: function Locked() {
     const { t } = usePluginTranslation()
     return (
-      <Tooltip content={t('Locked')}>
+      <Tooltip content={t('Locked', { number: '' })}>
         <Icon icon={IconNames.LOCK} iconSize={Icon.SIZE_LARGE}></Icon>
       </Tooltip>
     )
@@ -29,7 +29,7 @@ export const questStatusMap: Record<QUEST_STATUS, React.FC> = {
   [QUEST_STATUS.IN_PROGRESS]: function InProgress() {
     const { t } = usePluginTranslation()
     return (
-      <Tooltip content={t('In Progress')}>
+      <Tooltip content={t('In Progress', { number: '' })}>
         <img src={IconInProgress}></img>
       </Tooltip>
     )
@@ -45,7 +45,7 @@ export const questStatusMap: Record<QUEST_STATUS, React.FC> = {
   [QUEST_STATUS.ALREADY_COMPLETED]: function AlreadyCompleted() {
     const { t } = usePluginTranslation()
     return (
-      <Tooltip content={t('Already Completed')}>
+      <Tooltip content={t('Already Completed', { number: '' })}>
         <Icon icon={IconNames.TICK} iconSize={Icon.SIZE_LARGE}></Icon>
       </Tooltip>
     )

package/src/patch.ts

@@ -1,14 +1,13 @@
-import { name as PACKAGE_NAME } from '../package.json'
-import { getPoiStore } from './poi/store'
-import { importFromPoi } from './poi/env'
+import type { i18n } from 'i18next'
 import { QuestData } from '../build/kcanotifyGamedata'
 import { KcwikiQuestData } from '../build/kcQuestsData'
+import { importFromPoi, PACKAGE_NAME } from './poi/env'
+import { getPoiStore } from './poi/store'
 import {
   checkIsKcwikiSupportedLanguages,
   getStorage,
   isSupportedLanguages,
 } from './store'
-import type { i18n } from 'i18next'
 
 const LEGACY_QUEST_PLUGIN_ID = 'poi-plugin-quest-info'
 const HACK_KEY = `__patched-from-${PACKAGE_NAME}`

package/src/poi/env.ts

@@ -1,3 +1,7 @@
+import { name } from '../../package.json'
+
+export const PACKAGE_NAME = name as 'poi-plugin-quest-info-2'
+
 export const IN_POI = 'POI_VERSION' in globalThis
 /**
  * Prevent webpack early error

package/src/poi/hooks.ts

@@ -1,7 +1,12 @@
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { name as PACKAGE_NAME } from '../../package.json'
-import { observePluginStore, observePoiStore } from './store'
+import { PACKAGE_NAME } from './env'
+import {
+  exportPoiState,
+  importPoiState,
+  observePluginStore,
+  observePoiStore,
+} from './store'
 import { GameQuest, PoiQuestState, PoiState, QuestTab } from './types'
 
 export const activeQuestsSelector = (state: PoiState): PoiQuestState =>
@@ -21,6 +26,7 @@ export const useActiveQuest = () => {
 }
 
 export const usePluginTranslation = () => {
+  // @ts-expect-error we declared a incorrect types in i18n/index.ts
   return useTranslation(PACKAGE_NAME)
 }
 
@@ -65,3 +71,50 @@ export const useIsQuestPluginTab = () => {
   const activeMainTab = useActiveTab()
   return activeMainTab === PACKAGE_NAME
 }
+
+const checkQuestList = (questList: unknown): questList is GameQuest[] => {
+  if (!Array.isArray(questList)) {
+    return false
+  }
+  // just a simple check
+  return questList.every((q) => q && q.api_no)
+}
+
+export const useStateExporter = () => {
+  const exportQuestDataToClipboard = async () => {
+    const state = await exportPoiState()
+    if (!state?.ext[PACKAGE_NAME]._.questList) {
+      console.error('poi state', state)
+      throw new Error('Failed to export quest data! questList not found!')
+    }
+    return navigator.clipboard.writeText(
+      JSON.stringify(state?.ext[PACKAGE_NAME]._.questList)
+    )
+  }
+  const importAsPoiState = (stateString: string) => {
+    const maybeQuestList: unknown = JSON.parse(stateString)
+
+    if (!checkQuestList(maybeQuestList)) {
+      console.error(maybeQuestList)
+      throw new Error('Failed to import quest state! Incorrect data format!')
+    }
+
+    importPoiState({
+      ext: {
+        [PACKAGE_NAME]: {
+          _: { questList: maybeQuestList, tabId: QuestTab.ALL },
+        },
+      },
+      ui: {
+        activeMainTab: '',
+        activeFleetId: undefined,
+        activePluginName: undefined,
+      },
+      plugins: [],
+    })
+  }
+  return {
+    exportQuestDataToClipboard,
+    importAsPoiState,
+  }
+}

package/src/poi/store.ts

@@ -1,7 +1,6 @@
-import { name as PACKAGE_NAME } from '../../package.json'
 import type { PluginState } from '../reducer'
 import { id, noop } from '../utils'
-import { importFromPoi, IN_POI } from './env'
+import { importFromPoi, IN_POI, PACKAGE_NAME } from './env'
 import type { PoiState, Store } from './types'
 
 /**
@@ -51,10 +50,11 @@ export const observePluginStore = <SelectedState = PluginState>(
   selector: (state: PluginState) => SelectedState = id as any
 ) => observePoiStore(onChange, (s) => selector(s?.ext[PACKAGE_NAME]))
 
-const fallbackStore: Store<PoiState> = {
-  getState: noop as () => PoiState,
-  subscribe: () => (() => {}) as () => () => void,
-}
+const genFallbackStore = (state?: PoiState) =>
+  ({
+    getState: () => state,
+    subscribe: () => (() => {}) as () => () => void,
+  } as Store<PoiState>)
 
 let globalStore: Store<PoiState> | null = null
 /**
@@ -73,6 +73,23 @@ export const getPoiStore: () => Promise<Store<PoiState>> = async () => {
       console.warn('Load global store error', error)
     }
   }
-  globalStore = fallbackStore
-  return fallbackStore
+  globalStore = genFallbackStore()
+  return globalStore
+}
+
+export const exportPoiState = async () => {
+  if (!IN_POI) {
+    throw new Error(
+      'Failed export state from poi! You are not currently in the poi environment!'
+    )
+  }
+  const { getState } = await getPoiStore()
+  return getState()
+}
+
+/**
+ * TODO fix state update
+ */
+export const importPoiState = (state: PoiState) => {
+  globalStore = genFallbackStore(state)
 }

package/src/poi/utils.ts

@@ -0,0 +1,50 @@
+/**
+ * See https://dev.poooi.app/docs/api-poi-utils.html#notifications
+ */
+import { IN_POI } from './env'
+
+export const toast = (message: string) => {
+  if (!IN_POI) {
+    // eslint-disable-next-line no-console
+    console.log('[Toast]', message)
+    return
+  }
+  window.toast(message)
+}
+
+export const tips = {
+  log(message: string) {
+    if (!IN_POI) {
+      // eslint-disable-next-line no-console
+      console.log('[log]', message)
+      return
+    }
+    // @ts-expect-error poi env
+    window.log(message) // display on the information bar below game window
+  },
+  warn(message: string) {
+    if (!IN_POI) {
+      console.warn('[warn]', message)
+      return
+    }
+    // @ts-expect-error poi env
+    window.warn(message) // display on the information bar below game window
+  },
+  error(message: string) {
+    if (!IN_POI) {
+      console.error('[error]', message)
+      return
+    }
+    // @ts-expect-error poi env
+    window.error(message) // display on the information bar below game window
+  },
+  success(message: string) {
+    if (!IN_POI) {
+      // eslint-disable-next-line no-console
+      console.log('[success]', message)
+      return
+    }
+    // @ts-expect-error poi env
+    window.success(message) // display on the information bar below game window
+  },
+}

package/src/store/filterTags.ts

@@ -2,13 +2,8 @@ import { useCallback } from 'react'
 import { useUpdateEffect } from 'react-use'
 import { useGameTab } from '../poi/hooks'
 import { QuestTab } from '../poi/types'
-import {
-  ALL_CATEGORY_TAG,
-  ALL_TYPE_TAG,
-  CATEGORY_TAGS,
-  TYPE_TAGS,
-} from '../tags'
-import { useStore, useSyncWithGame } from './store'
+import { CATEGORY_TAGS, TYPE_TAGS } from '../tags'
+import { ALL_CATEGORY_TAG, ALL_TYPE_TAG, PROGRESS_TAG, useStore } from './store'
 
 export const useFilterTags = () => {
   const {
@@ -32,7 +27,7 @@ export const useFilterTags = () => {
     },
     [updateStore]
   )
-  const manualSetTypeTags = useCallback(
+  const setMultiTypeTags = useCallback(
     (data: Record<string, boolean>) => {
       updateStore({ typeTags: data })
     },
@@ -49,18 +44,44 @@ export const useFilterTags = () => {
     setCategoryTags,
     setCategoryTagsAll,
     setTypeTags,
-    manualSetTypeTags,
+    setMultiTypeTags,
     setTypeTagsAll,
   }
 }
 
+export const useFilterProgressTag = () => {
+  const {
+    store: { progressTag },
+    updateStore,
+  } = useStore()
+
+  const toggleTag = useCallback(
+    (tag: PROGRESS_TAG) => {
+      if (progressTag === tag) {
+        updateStore({ progressTag: PROGRESS_TAG.All })
+        return
+      }
+      updateStore({ progressTag: tag })
+    },
+    [progressTag, updateStore]
+  )
+
+  return {
+    progressTag,
+    toggleTag,
+  }
+}
+
+/**
+ * @deprecated Should not update state when render
+ */
 export const useSyncGameTagEffect = () => {
-  const { syncWithGame } = useSyncWithGame()
+  const { progressTag } = useFilterProgressTag()
   const filterTags = useFilterTags()
   const tab = useGameTab()
 
   useUpdateEffect(() => {
-    if (!syncWithGame) {
+    if (progressTag !== PROGRESS_TAG.Unlocked) {
       return
     }
     switch (tab) {
@@ -80,7 +101,7 @@ export const useSyncGameTagEffect = () => {
         filterTags.setTypeTags('In Progress')
         break
       case QuestTab.OTHERS:
-        filterTags.manualSetTypeTags({ Quarterly: true, Yearly: true })
+        filterTags.setMultiTypeTags({ Quarterly: true, Yearly: true })
         break
       case QuestTab.ONCE:
         filterTags.setTypeTags('One-time')
@@ -88,5 +109,5 @@ export const useSyncGameTagEffect = () => {
       default:
         break
     }
-  }, [syncWithGame, tab])
+  }, [tab])
 }

package/src/store/gameQuest.tsx

@@ -1,20 +1,123 @@
-import React, { createContext, useContext } from 'react'
 import type { ReactNode } from 'react'
-import { GameQuest } from '../poi/types'
+import React, { createContext, useContext } from 'react'
 import { useGameQuest } from '../poi/hooks'
+import { GameQuest } from '../poi/types'
+import {
+  getCompletedQuest,
+  getLockedQuest,
+  questApiStateToQuestStatus,
+  QUEST_STATUS,
+} from '../questHelper'
 
-export const GameQuestContext = createContext<GameQuest[]>([])
+export const GameQuestContext = createContext<{
+  gameQuest: GameQuest[]
+  questStatusQuery: (gameId: number) => QUEST_STATUS
+  lockedQuestNum: number
+  unlockedQuestNum: number
+  completedQuestNum: number
+  alreadyCompletedQuestNum: number
+}>({
+  gameQuest: [],
+  questStatusQuery: () => QUEST_STATUS.UNKNOWN,
+  lockedQuestNum: 0,
+  unlockedQuestNum: 0,
+  completedQuestNum: 0,
+  alreadyCompletedQuestNum: 0,
+})
+
+const useQuestStatusQuery = (inProgressQuests: GameQuest[]) => {
+  const gameQuestIds = inProgressQuests.map((quest) => quest.api_no)
+  const unlockedGameQuest = Object.fromEntries(
+    inProgressQuests.map((quest) => [quest.api_no, quest])
+  )
+  const alreadyCompletedQuest = getCompletedQuest(gameQuestIds)
+  const lockedQuest = getLockedQuest(gameQuestIds)
+  const completedQuest = inProgressQuests
+    .map((quest) => questApiStateToQuestStatus(quest.api_state))
+    .filter((status) => status === QUEST_STATUS.COMPLETED)
+  return {
+    lockedQuestNum: Object.keys(lockedQuest).length,
+    unlockedQuestNum: Object.keys(unlockedGameQuest).length,
+    completedQuestNum: completedQuest.length,
+    alreadyCompletedQuestNum: Object.keys(alreadyCompletedQuest).length,
+    questStatusQuery: (gameId: number) => {
+      const theGameQuest = unlockedGameQuest[gameId]
+      if (theGameQuest) {
+        // the quest is in game
+        return questApiStateToQuestStatus(theGameQuest.api_state)
+      }
+
+      if (gameId in lockedQuest) {
+        return QUEST_STATUS.LOCKED
+      }
+      if (gameId in alreadyCompletedQuest) {
+        return QUEST_STATUS.ALREADY_COMPLETED
+      }
+      return QUEST_STATUS.UNKNOWN
+    },
+  }
+}
 
 export const GameQuestProvider = ({ children }: { children?: ReactNode }) => {
   const gameQuest = useGameQuest()
+  const {
+    lockedQuestNum,
+    unlockedQuestNum,
+    completedQuestNum,
+    alreadyCompletedQuestNum,
+    questStatusQuery,
+  } = useQuestStatusQuery(gameQuest)
+
   return (
-    <GameQuestContext.Provider value={gameQuest}>
+    <GameQuestContext.Provider
+      value={{
+        gameQuest,
+        questStatusQuery,
+        lockedQuestNum,
+        unlockedQuestNum,
+        completedQuestNum,
+        alreadyCompletedQuestNum,
+      }}
+    >
       {children}
     </GameQuestContext.Provider>
   )
 }
 
+/**
+ * Get the questList from poi.
+ *
+ * Same as {@link useGameQuest}, but singleton
+ */
 export const useGlobalGameQuest = () => {
-  const gameQuest = useContext(GameQuestContext)
+  const { gameQuest } = useContext(GameQuestContext)
   return gameQuest
 }
+
+/**
+ * Get the questList from poi.
+ *
+ * Same as {@link useQuestStatusQuery}, but singleton
+ */
+export const useGlobalQuestStatusQuery = () => {
+  const { questStatusQuery } = useContext(GameQuestContext)
+  return questStatusQuery
+}
+
+/**
+ * Get the number of quests in different states.
+ */
+export const useGlobalQuestStatusNum = () => {
+  const {
+    lockedQuestNum,
+    unlockedQuestNum,
+    completedQuestNum,
+    alreadyCompletedQuestNum,
+  } = useContext(GameQuestContext)
+  return {
+    lockedQuestNum,
+    unlockedQuestNum,
+    completedQuestNum,
+    alreadyCompletedQuestNum,
+  }
+}

package/src/store/quest.ts

@@ -1,19 +1,13 @@
-import { useCallback } from 'react'
 import { usePluginTranslation } from '../poi/hooks'
 import {
   DocQuest,
-  getCategory,
-  getCompletedQuest,
   getKcanotifyQuestData,
-  getLockedQuest,
   getQuestIdByCode,
-  questApiStateToQuestStatus,
   QUEST_STATUS,
   UnionQuest,
 } from '../questHelper'
-import { useGlobalGameQuest } from './gameQuest'
+import { useGlobalGameQuest, useGlobalQuestStatusQuery } from './gameQuest'
 import { checkIsKcwikiSupportedLanguages, useKcwikiData } from './kcwiki'
-import { useStore, useSyncWithGame } from './store'
 
 const DEFAULT_LANG = 'ja-JP'
 
@@ -53,40 +47,27 @@ const useQuestMap = (): Record<string, DocQuest> => {
 export const useQuest = (): UnionQuest[] => {
   const docQuestMap = useQuestMap()
   const gameQuest = useGlobalGameQuest()
-  const { syncWithGame } = useSyncWithGame()
-
-  if (syncWithGame && gameQuest.length) {
-    return gameQuest.map((quest) => {
-      const gameId = quest.api_no
-      if (gameId in docQuestMap) {
-        return {
-          gameId,
-          gameQuest: quest,
-          docQuest: docQuestMap[String(gameId) as keyof typeof docQuestMap],
-        }
-      }
-
-      // Not yet recorded quest
-      // May be a new quest
-      return {
-        gameId,
-        gameQuest: quest,
-        docQuest: {
-          code: `${getCategory(quest.api_category).wikiSymbol}?`,
-          name: quest.api_title,
-          desc: quest.api_detail,
-        },
-      }
-    })
-  } else {
-    // Return all recorded quests
-    return Object.entries(docQuestMap).map(([gameId, val]) => ({
-      gameId: +gameId,
-      // Maybe empty
-      gameQuest: gameQuest.find((quest) => quest.api_no === Number(gameId))!,
-      docQuest: val,
-    }))
-  }
+  // TODO extract new quest from game quest
+  // Not yet recorded quest
+  // May be a new quest
+  // if (!(gameId in docQuestMap)) {
+  //   return {
+  //     gameId,
+  //     gameQuest: quest,
+  //     docQuest: {
+  //       code: `${getCategory(quest.api_category).wikiSymbol}?`,
+  //       name: quest.api_title,
+  //       desc: quest.api_detail,
+  //     },
+  //   }
+  // }
+  // Return all recorded quests
+  return Object.entries(docQuestMap).map(([gameId, val]) => ({
+    gameId: +gameId,
+    // Maybe empty
+    gameQuest: gameQuest.find((quest) => quest.api_no === Number(gameId))!,
+    docQuest: val,
+  }))
 }
 
 export const useQuestByCode = (code: string) => {
@@ -101,50 +82,13 @@ export const useQuestByCode = (code: string) => {
   return null
 }
 
+/**
+ * Get the completion status of a specific game quest
+ */
 export const useQuestStatus = (gameId: number | null) => {
-  const gameQuest = useGlobalGameQuest()
-
+  const searcher = useGlobalQuestStatusQuery()
   if (!gameId) {
     return QUEST_STATUS.UNKNOWN
   }
-  const theGameQuest = gameQuest.find((quest) => quest.api_no === gameId)
-  if (theGameQuest) {
-    // the quest is in game
-    return questApiStateToQuestStatus(theGameQuest.api_state)
-  }
-
-  const gameQuestId = gameQuest.map((quest) => quest.api_no)
-  const completedQuest = getCompletedQuest(gameQuestId)
-  const lockedQuest = getLockedQuest(gameQuestId)
-
-  if (gameId in lockedQuest) {
-    return QUEST_STATUS.LOCKED
-  }
-  if (gameId in completedQuest) {
-    return QUEST_STATUS.ALREADY_COMPLETED
-  }
-  return QUEST_STATUS.UNKNOWN
-}
-
-/**
- * @deprecated Not large card now
- */
-export const useLargeCard = () => {
-  const {
-    store: { largeCard },
-    updateStore,
-  } = useStore()
-  const setLarge = useCallback(
-    (gameId: string) => updateStore({ largeCard: gameId }),
-    [updateStore]
-  )
-  const setMinimal = useCallback(
-    () => updateStore({ largeCard: null }),
-    [updateStore]
-  )
-  return {
-    largeCard,
-    setLarge,
-    setMinimal,
-  }
+  return searcher(gameId)
 }

package/src/store/store.tsx

@@ -7,10 +7,24 @@ import React, {
   useState,
 } from 'react'
 import { useMount, useUpdateEffect } from 'react-use'
-import { name as PACKAGE_NAME } from '../../package.json'
-import { ALL_CATEGORY_TAG, ALL_TYPE_TAG } from '../tags'
+import { PACKAGE_NAME } from '../poi/env'
+import { noop, yes } from '../utils'
 import { GameQuestProvider } from './gameQuest'
 
+export const ALL_CATEGORY_TAG = {
+  name: 'All',
+  filter: yes,
+} as const
+
+export const ALL_TYPE_TAG = ALL_CATEGORY_TAG
+
+export enum PROGRESS_TAG {
+  All = 'All',
+  Unlocked = 'Unlocked',
+  Locked = 'Locked',
+  AlreadyCompleted = 'AlreadyCompleted',
+}
+
 export const initialState = {
   searchInput: '',
   typeTags: {
@@ -19,8 +33,8 @@ export const initialState = {
   categoryTags: {
     [ALL_CATEGORY_TAG.name]: true,
   } as Record<string, boolean>,
-  largeCard: null as null | string,
-  syncWithGame: false,
+  progressTag: PROGRESS_TAG.All,
+  syncWithGame: false as const,
   preferKcwikiData: true,
 }
 
@@ -39,7 +53,7 @@ const useStorage = <T,>(initialValue: T) => {
         return
       }
       const parsedStorage: T = JSON.parse(stringStore)
-      setState(parsedStorage)
+      setState({ ...initialState, ...parsedStorage })
     } catch (error) {
       console.error('Failed to load storage', error)
     }
@@ -97,22 +111,14 @@ export const useRemoveStorage = () => {
   }
 }
 
+/**
+ * @deprecated Use progress tag
+ */
 export const useSyncWithGame = () => {
-  const {
-    store: { syncWithGame },
-    updateStore,
-  } = useStore()
-  const setSyncWithGame = useCallback(
-    (value: boolean) => {
-      updateStore({ syncWithGame: value })
-    },
-    [updateStore]
-  )
-  const toggleSyncWithGame = useCallback(() => {
-    setSyncWithGame(!syncWithGame)
-  }, [setSyncWithGame, syncWithGame])
+  const setSyncWithGame = noop
+  const toggleSyncWithGame = noop
   return {
-    syncWithGame,
+    syncWithGame: false as const,
     setSyncWithGame,
     toggleSyncWithGame,
   }