poi-plugin-quest-info-2 0.7.4 → 0.8.0

package/.eslintrc.js

@@ -19,8 +19,6 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
     'prettier',
-    'prettier/react',
-    'prettier/@typescript-eslint',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {

package/build/kcQuestsData/DATA_VERSION

@@ -1 +1 @@
-433261cf82381efd22702e882ad359bf426695b5
+cf24003d54c1b9cb2f6a76cdd670de717de0886c

package/build/kcQuestsData/index.ts

@@ -4,4 +4,4 @@ export const KcwikiQuestData = {
   'zh-CN': zh_CN,
 }
 
-export const version = '433261cf82381efd22702e882ad359bf426695b5'
+export const version = 'cf24003d54c1b9cb2f6a76cdd670de717de0886c'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poi-plugin-quest-info-2",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "private": false,
   "description": "show quest info",
   "homepage": "https://github.com/lawvs/poi-plugin-quest-2/",
@@ -44,33 +44,33 @@
     "@storybook/addon-essentials": "^6.3.4",
     "@storybook/addon-links": "^6.3.4",
     "@storybook/react": "^6.3.4",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^27.4.1",
     "@types/pangu": "^3.3.0",
     "@types/react-virtualized": "^9.21.11",
     "@types/sharp": "^0.27.1",
     "@types/styled-components": "^5.1.7",
-    "@typescript-eslint/eslint-plugin": "^4.14.1",
-    "@typescript-eslint/parser": "^4.14.1",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^5.22.0",
     "babel-loader": "^8.2.2",
-    "eslint": "^7.18.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint": "^8.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "https-proxy-agent": "^5.0.0",
     "i18next": "^19.8.5",
     "jest": "^27.0.6",
     "pangu": "^4.0.7",
     "poi-asset-themes": "^4.2.0",
-    "prettier": "^2.3.2",
+    "prettier": "^2.6.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-i18next": "^11.8.5",
     "sharp": "^0.28.3",
     "styled-components": "^5.3.3",
-    "ts-jest": "^27.0.3",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.4.4"
+    "ts-jest": "^27.1.4",
+    "ts-node": "^10.7.0",
+    "typescript": "^4.5.5"
   },
   "poiPlugin": {
     "title": "Quest Information",

package/src/__tests__/kcwikiData.spec.ts

@@ -4,7 +4,7 @@ import newQuestData from '../../build/kcQuestsData/quests-scn-new.json'
 describe('should version correct', () => {
   test('should KcwikiQuestData Game data version correct', () => {
     expect(version).toMatchInlineSnapshot(
-      `"433261cf82381efd22702e882ad359bf426695b5"`
+      `"cf24003d54c1b9cb2f6a76cdd670de717de0886c"`
     )
   })
 

package/src/components/QuestCard/MinimalQuestCard.tsx

@@ -6,6 +6,9 @@ import type { QuestCardProps } from './index'
 import { CardBody, CardTail, CatIndicator, FlexCard } from './styles'
 import { questStatusMap } from './utils'
 
+/**
+ * @deprecated
+ */
 export const MinimalQuestCard = forwardRef<
   Card,
   // eslint-disable-next-line @typescript-eslint/ban-types

package/src/components/QuestCard/index.tsx

@@ -2,7 +2,11 @@ import { Card, Elevation, H5, Text } from '@blueprintjs/core'
 import React, { forwardRef } from 'react'
 import type { StyledComponentProps } from 'styled-components'
 import { usePluginTranslation } from '../../poi/hooks'
-import { getPrePost, guessQuestCategory, QUEST_STATUS } from '../../questHelper'
+import {
+  getQuestPrePost,
+  guessQuestCategory,
+  QUEST_STATUS,
+} from '../../questHelper'
 import { QuestTag } from '../QuestTag'
 import {
   CardActionWrapper,
@@ -29,15 +33,15 @@ export type QuestCardProps = {
 const CardAction = ({ gameId }: { gameId: number }) => {
   const { t } = usePluginTranslation()
 
-  const preQuests = getPrePost(gameId)
+  const prePostQuests = getQuestPrePost(gameId)
 
   return (
     <CardActionWrapper>
       <TagsWrapper>
-        {!!preQuests.pre.length && (
+        {!!prePostQuests.pre.length && (
           <>
             <SpanText>{t('Requires')}</SpanText>
-            {preQuests.pre.map((i) => (
+            {prePostQuests.pre.map((i) => (
               <QuestTag key={i} code={i}></QuestTag>
             ))}
           </>
@@ -45,10 +49,10 @@ const CardAction = ({ gameId }: { gameId: number }) => {
       </TagsWrapper>
 
       <TagsWrapper>
-        {!!preQuests.post.length && (
+        {!!prePostQuests.post.length && (
           <>
             <SpanText>{t('Unlocks')}</SpanText>
-            {preQuests.post.map((i) => (
+            {prePostQuests.post.map((i) => (
               <QuestTag key={i} code={i}></QuestTag>
             ))}
           </>

package/src/components/QuestList.tsx

@@ -26,7 +26,7 @@ const cache = new CellMeasurerCache({
   fixedWidth: true,
 })
 
-const questStateToQuestStatus = (
+const questApiStateToQuestStatus = (
   state: QUEST_API_STATE | undefined
 ): QUEST_STATUS => {
   switch (state) {
@@ -47,7 +47,7 @@ const useQuestsRowRenderer = (quests: UnionQuest[]) => {
       const quest = quests[index]
       const { gameId } = quest
       const { code, name, desc, memo, memo2, pre } = quest.docQuest
-      const questStatus = questStateToQuestStatus(quest.gameQuest?.api_state)
+      const questStatus = questApiStateToQuestStatus(quest.gameQuest?.api_state)
 
       return (
         <CellMeasurer

package/src/components/QuestTag.tsx

@@ -1,23 +1,70 @@
-import { Tag } from '@blueprintjs/core'
-import React, { useCallback } from 'react'
+import type { TooltipProps } from '@blueprintjs/core'
+import { Tag, Tooltip } from '@blueprintjs/core'
+import { IconNames } from '@blueprintjs/icons'
+import React, { forwardRef, useCallback } from 'react'
 import styled from 'styled-components'
-import { guessQuestCategory } from '../questHelper'
+import { DocQuest, guessQuestCategory, QUEST_STATUS } from '../questHelper'
 import { useFilterTags } from '../store/filterTags'
+import { useQuestByCode, useQuestStatus } from '../store/quest'
 import { useSearchInput } from '../store/search'
 
 const TagWrapper = styled(Tag)`
   margin: 2px 4px;
-  user-select: none;
+  user-select: ${({ interactive }) => (interactive ? 'none' : 'auto')};
   overflow: visible;
 
   & > span {
-    cursor: pointer;
+    cursor: ${({ interactive }) => (interactive ? 'pointer' : 'auto')};
   }
 `
 
+const QuestTooltip = forwardRef<
+  Tooltip,
+  Omit<TooltipProps, 'content'> & {
+    quest: DocQuest
+    children: React.ReactNode
+  }
+>(({ quest, children, ...props }, ref) => {
+  if (!quest) {
+    return <>{children}</>
+  }
+  return (
+    <Tooltip
+      ref={ref}
+      content={
+        <>
+          <div>{`${quest.code} - ${quest.name}`}</div>
+          <div>{quest.desc}</div>
+          {quest.memo2 && <b>{quest.memo2}</b>}
+          {quest.memo && <i>{quest.memo}</i>}
+        </>
+      }
+      placement={'top'}
+      {...props}
+    >
+      {children}
+    </Tooltip>
+  )
+})
+
+const getTagIcon = (questStatus: QUEST_STATUS) => {
+  switch (questStatus) {
+    case QUEST_STATUS.ALREADY_COMPLETED:
+      return IconNames.TICK
+    case QUEST_STATUS.LOCKED:
+      return IconNames.LOCK
+    default:
+      return null
+  }
+}
+
 export const QuestTag = ({ code }: { code: string }) => {
   const { setSearchInput } = useSearchInput()
   const { setCategoryTagsAll, setTypeTagsAll } = useFilterTags()
+  const maybeQuest = useQuestByCode(code)
+  const maybeGameId = maybeQuest?.gameId ?? null
+  const questStatus = useQuestStatus(maybeGameId)
+  const tagIcon = getTagIcon(questStatus)
 
   const handleClick = useCallback(() => {
     setSearchInput(code)
@@ -29,13 +76,29 @@ export const QuestTag = ({ code }: { code: string }) => {
     indicatorColor === '#fff' || indicatorColor === '#87da61'
       ? 'black'
       : 'white'
+
+  if (!maybeQuest) {
+    return (
+      <TagWrapper
+        icon={IconNames.HELP}
+        style={{ color: fontColor, background: indicatorColor }}
+      >
+        {code}
+      </TagWrapper>
+    )
+  }
+
+  const quest = maybeQuest.docQuest
   return (
-    <TagWrapper
-      onClick={handleClick}
-      interactive
-      style={{ color: fontColor, background: indicatorColor }}
-    >
-      {code}
-    </TagWrapper>
+    <QuestTooltip quest={quest}>
+      <TagWrapper
+        interactive
+        icon={tagIcon}
+        onClick={handleClick}
+        style={{ color: fontColor, background: indicatorColor }}
+      >
+        {code}
+      </TagWrapper>
+    </QuestTooltip>
   )
 }

package/src/poi/hooks.ts

@@ -3,6 +3,10 @@ import { useTranslation } from 'react-i18next'
 import { observePluginStore, observePoiStore } from './store'
 import { name as PACKAGE_NAME } from '../../package.json'
 import { GameQuest, PoiQuestState, PoiState, QuestTab } from './types'
+import { createGlobalState } from 'react-use'
+
+export const activeQuestsSelector = (state: PoiState): PoiQuestState =>
+  state?.info?.quests?.activeQuests ?? {}
 
 export const useActiveQuest = () => {
   const [activeQuests, setActiveQuests] = useState<PoiQuestState>({})
@@ -17,20 +21,19 @@ export const useActiveQuest = () => {
   return activeQuests
 }
 
-export const activeQuestsSelector = (state: PoiState): PoiQuestState =>
-  state?.info?.quests?.activeQuests ?? {}
-
 export const usePluginTranslation = () => {
   return useTranslation(PACKAGE_NAME)
 }
 
+const useGlobalGameQuest = createGlobalState<GameQuest[]>([])
+
 export const useGameQuest = () => {
-  const [quests, setQuests] = useState<GameQuest[]>([])
+  const [quests, setQuests] = useGlobalGameQuest()
   useEffect(() => {
     const listener = (quests: GameQuest[] | null) => setQuests(quests ?? [])
     // See reducer.ts
     return observePluginStore(listener, (i) => i?._?.questList)
-  }, [])
+  }, [setQuests])
   return quests
 }
 

package/src/questHelper.ts

@@ -1,9 +1,12 @@
-import questCategory from '../build/questCategory.json'
+import { QuestData } from '../build/kcanotifyGamedata'
+import { KcwikiQuestData } from '../build/kcQuestsData'
 import newQuestData from '../build/kcQuestsData/quests-scn-new.json'
 import prePostQuest from '../build/prePostQuest.json'
+import questCategory from '../build/questCategory.json'
+import questCodeMap from '../build/questCodeMap.json'
 import { GameQuest, QUEST_API_STATE } from './poi/types'
 
-type DocQuest = {
+export type DocQuest = {
   code: string
   name: string
   desc: string
@@ -35,6 +38,9 @@ export type UnionQuest = {
   docQuest: DocQuest
 }
 
+export const getKcwikiQuestData = () => KcwikiQuestData
+export const getKcanotifyQuestData = () => QuestData
+
 const dailyQuest = new Set(questCategory.dailyQuest)
 const weeklyQuest = new Set(questCategory.weeklyQuest)
 const monthlyQuest = new Set(questCategory.monthlyQuest)
@@ -197,13 +203,20 @@ export const isUnknownCategoryQuest = ({ code }: DocQuest) =>
   // Starts with unknown character
   /^[^ABCDEFG]/.test(code)
 
-export const getPrePost = (gameId: number) => {
+export const getQuestPrePost = (gameId: number) => {
   if (!(gameId in prePostQuest)) {
     return { pre: [], post: [] }
   }
   return prePostQuest[String(gameId) as keyof typeof prePostQuest]
 }
 
+export const getQuestIdByCode = (code: string) => {
+  if (code in questCodeMap) {
+    return questCodeMap[code as keyof typeof questCodeMap]
+  }
+  return null
+}
+
 export enum QUEST_STATUS {
   LOCKED,
   DEFAULT,

package/src/store/kcwiki.ts

@@ -1,5 +1,5 @@
-import { KcwikiQuestData } from '../../build/kcQuestsData'
 import { useStore } from '.'
+import { getKcwikiQuestData } from '../questHelper'
 
 export const usePreferKcwiki = () => {
   const {
@@ -13,7 +13,10 @@ export const usePreferKcwiki = () => {
 
 export const checkIsKcwikiSupportedLanguages = (
   lang: string
-): lang is keyof typeof KcwikiQuestData => lang in KcwikiQuestData
+): lang is keyof typeof kcwikiQuestData => {
+  const kcwikiQuestData = getKcwikiQuestData()
+  return lang in kcwikiQuestData
+}
 
 export const useKcwikiData = (lang: string) => {
   const [preferKcwiki] = usePreferKcwiki()
@@ -25,5 +28,6 @@ export const useKcwikiData = (lang: string) => {
   if (!supported) {
     return null
   }
-  return KcwikiQuestData[lang]
+  const kcwikiQuestData = getKcwikiQuestData()
+  return kcwikiQuestData[lang]
 }

package/src/store/quest.ts

@@ -1,20 +1,29 @@
 import { useCallback } from 'react'
-import { QuestData } from '../../build/kcanotifyGamedata'
 import { useGameQuest, usePluginTranslation } from '../poi/hooks'
-import { getCategory } from '../questHelper'
+import {
+  DocQuest,
+  getCategory,
+  getKcanotifyQuestData,
+  getQuestIdByCode,
+  getQuestPrePost,
+  QUEST_STATUS,
+} from '../questHelper'
 import type { UnionQuest } from '../questHelper'
 import { useKcwikiData, checkIsKcwikiSupportedLanguages } from './kcwiki'
 import { useStore, useSyncWithGame } from './store'
 
 const DEFAULT_LANG = 'ja-JP'
 
-export const checkIsKcanotifySupportedLanguages = (
+const checkIsKcanotifySupportedLanguages = (
   lang: string
-): lang is keyof typeof QuestData => lang in QuestData
+): lang is keyof typeof kcaQuestData => {
+  const kcaQuestData = getKcanotifyQuestData()
+  return lang in kcaQuestData
+}
 
 export const isSupportedLanguages = (
   lang: string
-): lang is keyof typeof QuestData =>
+): lang is keyof ReturnType<typeof getKcanotifyQuestData> =>
   checkIsKcanotifySupportedLanguages(lang) ||
   checkIsKcwikiSupportedLanguages(lang)
 
@@ -28,13 +37,14 @@ export const useLanguage = () => {
   return lang
 }
 
-const useQuestMap = () => {
+const useQuestMap = (): Record<string, DocQuest> => {
   const lang = useLanguage()
   const kcwikiData = useKcwikiData(lang)
   if (kcwikiData) {
     return kcwikiData
   }
-  return QuestData[lang]
+  const kcaQuestData = getKcanotifyQuestData()
+  return kcaQuestData[lang]
 }
 
 export const useQuest = (): UnionQuest[] => {
@@ -76,6 +86,77 @@ export const useQuest = (): UnionQuest[] => {
   }
 }
 
+export const useQuestByCode = (code: string): UnionQuest | null => {
+  const questMap = useQuestMap()
+  const gameId = getQuestIdByCode(code)
+  if (gameId && gameId in questMap) {
+    return {
+      gameId,
+      docQuest: questMap[String(gameId) as keyof typeof questMap],
+    }
+  }
+  return null
+}
+
+const useCompletedQuest = () => {
+  const completedQuest: Record<number, true> = {}
+  const gameQuest = useGameQuest()
+  const queue: number[] = gameQuest.map((quest) => quest.api_no)
+  while (queue.length) {
+    const gameId = queue.shift()!
+    if (gameId in completedQuest) {
+      continue
+    }
+    completedQuest[gameId] = true
+
+    const prePostQuests = getQuestPrePost(gameId)
+    prePostQuests.pre.forEach((nextCode) => {
+      const nextGameId = getQuestIdByCode(nextCode)
+      if (nextGameId) {
+        queue.push(nextGameId)
+      }
+    })
+  }
+  return completedQuest
+}
+
+const useLockedQuest = () => {
+  const lockedQuest: Record<number, true> = {}
+  const gameQuest = useGameQuest()
+  const queue: number[] = gameQuest.map((quest) => quest.api_no)
+  while (queue.length) {
+    const gameId = queue.shift()!
+    if (gameId in lockedQuest) {
+      continue
+    }
+    lockedQuest[gameId] = true
+    const prePostQuests = getQuestPrePost(gameId)
+    prePostQuests.post.forEach((nextCode) => {
+      const nextGameId = getQuestIdByCode(nextCode)
+      if (nextGameId) {
+        queue.push(nextGameId)
+      }
+    })
+  }
+  return lockedQuest
+}
+
+export const useQuestStatus = (gameId: number | null) => {
+  const completedQuest = useCompletedQuest()
+  const lockedQuest = useLockedQuest()
+
+  if (!gameId) {
+    return QUEST_STATUS.DEFAULT
+  }
+  if (gameId in completedQuest) {
+    return QUEST_STATUS.ALREADY_COMPLETED
+  }
+  if (gameId in lockedQuest) {
+    return QUEST_STATUS.LOCKED
+  }
+  return QUEST_STATUS.DEFAULT
+}
+
 /**
  * @deprecated Not large card now
  */

package/src/tags.tsx

@@ -38,12 +38,12 @@ export const ALL_CATEGORY_TAG = {
 export const ALL_TYPE_TAG = ALL_CATEGORY_TAG
 
 const withDocQuest =
-  <T extends any>(filterFn: (q: UnionQuest['docQuest']) => T) =>
+  <T,>(filterFn: (q: UnionQuest['docQuest']) => T) =>
   (unionQuest: UnionQuest) =>
     filterFn(unionQuest.docQuest)
 
 const withGameQuestOr =
-  <T extends any>(filterFn: (q: GameQuest) => T, fallback: T) =>
+  <T,>(filterFn: (q: GameQuest) => T, fallback: T) =>
   ({ gameQuest }: UnionQuest) => {
     if (!gameQuest) {
       return fallback