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

package/src/__tests__/kcanotifyData.spec.ts

@@ -1,7 +1,7 @@
 import { version, QuestData } from '../../build/kcanotifyGamedata'
 
 test('should Kcanotify Game data version correct', () => {
-  expect(version).toMatchInlineSnapshot(`"2022040401"`)
+  expect(version).toMatchInlineSnapshot(`"2022042601"`)
 })
 
 test('should Kcanotify Game data keys correct', () => {
@@ -15,3 +15,16 @@ Array [
 ]
 `)
 })
+
+describe('should format correct', () => {
+  Object.keys(QuestData).forEach((lang) => {
+    test(`${lang} key format`, () => {
+      Object.keys(QuestData[lang as keyof typeof QuestData]).forEach((key) => {
+        // gameId should not extra space
+        expect(key.trim()).toEqual(key)
+        // gameId should be number
+        expect(String(+key)).toEqual(key)
+      })
+    })
+  })
+})

package/src/__tests__/kcwikiData.spec.ts

@@ -1,9 +1,10 @@
 import { version, KcwikiQuestData } from '../../build/kcQuestsData'
+import newQuestData from '../../build/kcQuestsData/quests-scn-new.json'
 
 describe('should version correct', () => {
   test('should KcwikiQuestData Game data version correct', () => {
     expect(version).toMatchInlineSnapshot(
-      `"2b2c2222f933ff9863dec8c72fc6037fbfe375ac"`
+      `"cf24003d54c1b9cb2f6a76cdd670de717de0886c"`
     )
   })
 
@@ -25,4 +26,13 @@ describe('should format correct', () => {
       expect(String(+key)).toEqual(key)
     })
   })
+
+  test('new quest key format', () => {
+    Object.keys(newQuestData).forEach((gameId) => {
+      // gameId should not extra space
+      expect(gameId.trim()).toEqual(gameId)
+      // gameId should be number
+      expect(String(+gameId)).toEqual(gameId)
+    })
+  })
 })

package/src/__tests__/questCategory.spec.ts

@@ -9,7 +9,7 @@ describe('should questCategory correct', () => {
     expect(questCategory.monthlyQuest.length).toMatchInlineSnapshot(`11`)
     expect(questCategory.quarterlyQuest.length).toMatchInlineSnapshot(`25`)
     expect(questCategory.yearlyQuest.length).toMatchInlineSnapshot(`37`)
-    expect(questCategory.singleQuest.length).toMatchInlineSnapshot(`475`)
+    expect(questCategory.singleQuest.length).toMatchInlineSnapshot(`477`)
   })
 
   test('snapshot', () => {
@@ -21,11 +21,11 @@ describe('should questCategory correct', () => {
       Object.entries(questCategory).map(([key, val]) => [
         key,
         val
-          .sort((a, b) => +a - +b)
+          .sort((a, b) => a - b)
           .map((gameId) => ({
             gameId,
-            code: mergeData[gameId as keyof typeof mergeData].code,
-            name: mergeData[gameId as keyof typeof mergeData].name,
+            code: mergeData[String(gameId) as keyof typeof mergeData].code,
+            name: mergeData[String(gameId) as keyof typeof mergeData].name,
           })),
       ])
     )

package/src/components/QuestCard/MinimalQuestCard.tsx

@@ -1,19 +1,19 @@
-import { Elevation, Text, Tooltip } from '@blueprintjs/core'
-import React from 'react'
+import { Card, Elevation, Text, Tooltip } from '@blueprintjs/core'
+import React, { forwardRef } from 'react'
+import type { StyledComponentProps } from 'styled-components'
 import { guessQuestCategory, QUEST_STATUS } from '../../questHelper'
 import type { QuestCardProps } from './index'
 import { CardBody, CardTail, CatIndicator, FlexCard } from './styles'
 import { questStatusMap } from './utils'
 
-export const MinimalQuestCard: React.FC<QuestCardProps> = ({
-  code,
-  name,
-  desc,
-  tip,
-  status = QUEST_STATUS.DEFAULT,
-  onClick,
-  style,
-}) => {
+/**
+ * @deprecated
+ */
+export const MinimalQuestCard = forwardRef<
+  Card,
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  QuestCardProps & StyledComponentProps<typeof Card, any, {}, never>
+>(({ code, name, desc, tip, status = QUEST_STATUS.DEFAULT, ...props }, ref) => {
   const indicatorColor = guessQuestCategory(code).color
   const TailIcon = questStatusMap[status]
 
@@ -29,10 +29,10 @@ export const MinimalQuestCard: React.FC<QuestCardProps> = ({
       }
     >
       <FlexCard
+        ref={ref}
         elevation={Elevation.ZERO}
         interactive={true}
-        onClick={onClick}
-        style={style}
+        {...props}
       >
         <CatIndicator color={indicatorColor}></CatIndicator>
         <CardBody>
@@ -45,4 +45,4 @@ export const MinimalQuestCard: React.FC<QuestCardProps> = ({
       </FlexCard>
     </Tooltip>
   )
-}
+})

package/src/components/QuestCard/index.tsx

@@ -1,74 +1,109 @@
-import { Elevation, H5, Text } from '@blueprintjs/core'
-import React from 'react'
-import styled from 'styled-components'
+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 { guessQuestCategory, QUEST_STATUS } from '../../questHelper'
-import { PreTaskTag } from '../PreTaskTag'
-import { CardBody, CardMedia, CardTail, FlexCard } from './styles'
+import {
+  getQuestPrePost,
+  guessQuestCategory,
+  QUEST_STATUS,
+} from '../../questHelper'
+import { QuestTag } from '../QuestTag'
+import {
+  CardActionWrapper,
+  CardBody,
+  CardMedia,
+  CardTail,
+  FlexCard,
+  SpanText,
+  TagsWrapper,
+} from './styles'
 import { questIconMap, questStatusMap } from './utils'
 
 export type QuestCardProps = {
+  gameId: number
   code: string
   name: string
   desc: string | JSX.Element
   tip?: string
   tip2?: string
   status?: QUEST_STATUS
-  preTask?: string[]
-  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
-  style?: React.CSSProperties
+  preQuest?: string[]
 }
 
-const PreTaskTagWrapper = styled.div`
-  display: flex;
-  align-items: baseline;
-`
-
-export const LargeQuestCard = ({
-  code,
-  name,
-  desc,
-  tip,
-  tip2,
-  preTask,
-  status = QUEST_STATUS.DEFAULT,
-  onClick,
-  style,
-}: QuestCardProps) => {
-  const headIcon = questIconMap[guessQuestCategory(code).type]
-  const TailIcon = questStatusMap[status]
+const CardAction = ({ gameId }: { gameId: number }) => {
   const { t } = usePluginTranslation()
 
+  const prePostQuests = getQuestPrePost(gameId)
+
   return (
-    <FlexCard
-      elevation={Elevation.ZERO}
-      interactive={false}
-      onClick={onClick}
-      style={style}
-    >
-      <CardMedia src={headIcon}></CardMedia>
-      <CardBody>
-        <H5>{[code, name].filter((i) => i != undefined).join(' - ')}</H5>
-        <Text>{desc}</Text>
-        {tip2 && <b>{tip2}</b>}
-        {tip && <i>{tip}</i>}
-        <PreTaskTagWrapper>
-          {!!preTask?.length && <span>{t('Requires')}</span>}
-          {preTask?.map((i) => (
-            <PreTaskTag key={i} code={i}></PreTaskTag>
-          ))}
-        </PreTaskTagWrapper>
-      </CardBody>
+    <CardActionWrapper>
+      <TagsWrapper>
+        {!!prePostQuests.pre.length && (
+          <>
+            <SpanText>{t('Requires')}</SpanText>
+            {prePostQuests.pre.map((i) => (
+              <QuestTag key={i} code={i}></QuestTag>
+            ))}
+          </>
+        )}
+      </TagsWrapper>
 
-      <CardTail>
-        <TailIcon />
-      </CardTail>
-    </FlexCard>
+      <TagsWrapper>
+        {!!prePostQuests.post.length && (
+          <>
+            <SpanText>{t('Unlocks')}</SpanText>
+            {prePostQuests.post.map((i) => (
+              <QuestTag key={i} code={i}></QuestTag>
+            ))}
+          </>
+        )}
+      </TagsWrapper>
+    </CardActionWrapper>
   )
 }
 
-export const QuestCard: React.FC<QuestCardProps & { gameId: string }> = ({
-  ...props
-}) => {
-  return <LargeQuestCard {...props}></LargeQuestCard>
-}
+export const QuestCard = forwardRef<
+  Card,
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  QuestCardProps & StyledComponentProps<typeof Card, any, {}, never>
+>(
+  (
+    {
+      gameId,
+      code,
+      name,
+      desc,
+      tip,
+      tip2,
+      status = QUEST_STATUS.DEFAULT,
+      ...props
+    },
+    ref
+  ) => {
+    const headIcon = questIconMap[guessQuestCategory(code).type]
+    const TailIcon = questStatusMap[status]
+
+    return (
+      <FlexCard
+        ref={ref}
+        elevation={Elevation.ZERO}
+        interactive={false}
+        {...props}
+      >
+        <CardMedia src={headIcon}></CardMedia>
+        <CardBody>
+          <H5>{[code, name].filter((i) => i != undefined).join(' - ')}</H5>
+          <Text>{desc}</Text>
+          {tip2 && <b>{tip2}</b>}
+          {tip && <i>{tip}</i>}
+
+          <CardAction gameId={gameId}></CardAction>
+        </CardBody>
+
+        <CardTail>
+          <TailIcon />
+        </CardTail>
+      </FlexCard>
+    )
+  }
+)

package/src/components/QuestCard/styles.ts

@@ -40,3 +40,20 @@ export const CardTail = styled.div`
     height: 20px;
   }
 `
+
+export const CardActionWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+`
+
+export const TagsWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: center;
+`
+
+export const SpanText = styled.span`
+  white-space: nowrap;
+`

package/src/components/QuestList.tsx

@@ -11,7 +11,6 @@ import type { ListRowProps } from 'react-virtualized'
 import styled from 'styled-components'
 import { QUEST_STATUS } from '../questHelper'
 import type { UnionQuest } from '../questHelper'
-import { useLargeCard } from '../store'
 import { QuestCard } from './QuestCard'
 import { useIsQuestPluginTab } from '../poi/hooks'
 import { QUEST_API_STATE } from '../poi/types'
@@ -27,7 +26,7 @@ const cache = new CellMeasurerCache({
   fixedWidth: true,
 })
 
-const questStateToQuestStatus = (
+const questApiStateToQuestStatus = (
   state: QUEST_API_STATE | undefined
 ): QUEST_STATUS => {
   switch (state) {
@@ -48,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
@@ -67,7 +66,7 @@ const useQuestsRowRenderer = (quests: UnionQuest[]) => {
               desc={desc}
               tip={memo}
               tip2={memo2}
-              preTask={pre}
+              preQuest={pre}
               status={questStatus}
             ></QuestCard>
           </div>
@@ -80,16 +79,14 @@ const useQuestsRowRenderer = (quests: UnionQuest[]) => {
 }
 
 export const QuestList: React.FC<{ quests: UnionQuest[] }> = ({ quests }) => {
-  const { largeCard } = useLargeCard()
   const activeTab = useIsQuestPluginTab()
   const listRef = useRef<List>(null)
   const rowRenderer: ListRowRenderer = useQuestsRowRenderer(quests)
 
   useEffect(() => {
-    const largeCardIdx = quests.findIndex((i) => i.gameId === largeCard)
     cache.clearAll()
-    listRef.current?.recomputeRowHeights(largeCardIdx)
-  }, [quests, largeCard])
+    listRef.current?.recomputeRowHeights()
+  }, [quests])
 
   useEffect(() => {
     if (activeTab) {

package/src/components/QuestTag.tsx

@@ -0,0 +1,104 @@
+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 { 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: ${({ interactive }) => (interactive ? 'none' : 'auto')};
+  overflow: visible;
+
+  & > span {
+    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)
+    setCategoryTagsAll()
+    setTypeTagsAll()
+  }, [code, setCategoryTagsAll, setSearchInput, setTypeTagsAll])
+  const indicatorColor = guessQuestCategory(code).color
+  const fontColor =
+    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 (
+    <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,8 +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
@@ -29,18 +33,21 @@ type DocQuest = {
 }
 
 export type UnionQuest = {
-  gameId: string
+  gameId: number
   gameQuest?: GameQuest
   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)
 const quarterlyQuest = new Set(questCategory.quarterlyQuest)
 const yearlyQuest = new Set(questCategory.yearlyQuest)
 const singleQuest = new Set(questCategory.singleQuest)
-const newQuest = new Set(newQuestData)
+const newQuest = new Set(newQuestData.map((gameId) => +gameId))
 
 export const isInProgressQuest = (quest: GameQuest) =>
   quest.api_state === QUEST_API_STATE.IN_PROGRESS ||
@@ -196,6 +203,20 @@ export const isUnknownCategoryQuest = ({ code }: DocQuest) =>
   // Starts with unknown character
   /^[^ABCDEFG]/.test(code)
 
+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]
 }