poi-plugin-quest-info-2 0.5.10 → 0.6.2

package/src/components/QuestCard/MinimalQuestCard.tsx

@@ -0,0 +1,48 @@
+import { Elevation, Text, Tooltip } from '@blueprintjs/core'
+import React from 'react'
+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,
+  tips,
+  status = QUEST_STATUS.DEFAULT,
+  onClick,
+  style,
+}) => {
+  const indicatorColor = guessQuestCategory(code).color
+  const TailIcon = questStatusMap[status]
+
+  return (
+    <Tooltip
+      targetTagName="div"
+      content={
+        <>
+          {desc}
+          <br />
+          {tips}
+        </>
+      }
+    >
+      <FlexCard
+        elevation={Elevation.ZERO}
+        interactive={true}
+        onClick={onClick}
+        style={style}
+      >
+        <CatIndicator color={indicatorColor}></CatIndicator>
+        <CardBody>
+          <Text>{[code, name].filter((i) => i != undefined).join(' - ')}</Text>
+        </CardBody>
+
+        <CardTail>
+          <TailIcon></TailIcon>
+        </CardTail>
+      </FlexCard>
+    </Tooltip>
+  )
+}

package/src/components/QuestCard/index.tsx

@@ -0,0 +1,71 @@
+import { Elevation, H5, Text } from '@blueprintjs/core'
+import React from 'react'
+import styled 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 { questIconMap, questStatusMap } from './utils'
+
+export type QuestCardProps = {
+  code: string
+  name: string
+  desc: string | JSX.Element
+  tips?: string
+  status?: QUEST_STATUS
+  preTask?: string[]
+  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  style?: React.CSSProperties
+}
+
+const PreTaskTagWrapper = styled.div`
+  display: flex;
+  align-items: baseline;
+`
+
+export const LargeQuestCard = ({
+  code,
+  name,
+  desc,
+  tips,
+  preTask,
+  status = QUEST_STATUS.DEFAULT,
+  onClick,
+  style,
+}: QuestCardProps) => {
+  const headIcon = questIconMap[guessQuestCategory(code).type]
+  const TailIcon = questStatusMap[status]
+  const { t } = usePluginTranslation()
+
+  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>
+        {tips && <Text tagName="i">{tips}</Text>}
+        <PreTaskTagWrapper>
+          {!!preTask?.length && <Text tagName="span">{t('Requires')}</Text>}
+          {preTask?.map((i) => (
+            <PreTaskTag key={i} code={i}></PreTaskTag>
+          ))}
+        </PreTaskTagWrapper>
+      </CardBody>
+
+      <CardTail>
+        <TailIcon />
+      </CardTail>
+    </FlexCard>
+  )
+}
+
+export const QuestCard: React.FC<QuestCardProps & { gameId: string }> = ({
+  ...props
+}) => {
+  return <LargeQuestCard {...props}></LargeQuestCard>
+}

package/src/components/QuestCard/styles.ts

@@ -0,0 +1,42 @@
+import { Card } from '@blueprintjs/core'
+import styled from 'styled-components'
+
+export const FlexCard = styled(Card)`
+  display: flex;
+  align-items: center;
+
+  & > * + * {
+    margin-left: 8px;
+  }
+`
+
+export const CardMedia = styled.img`
+  width: 64px;
+  height: 64px;
+`
+
+export const CatIndicator = styled.span<{ color: string }>`
+  height: 1em;
+  width: 4px;
+  background-color: ${({ color }) => color};
+`
+
+export const CardBody = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  & > * + * {
+    margin-top: 8px;
+  }
+`
+
+export const CardTail = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    height: 20px;
+  }
+`

package/src/components/QuestCard/utils.tsx

@@ -0,0 +1,68 @@
+import { Icon, Tooltip } from '@blueprintjs/core'
+import { IconNames } from '@blueprintjs/icons'
+import React from 'react'
+import {
+  IconArsenal,
+  IconCompleted,
+  IconComposition,
+  IconExercise,
+  IconExpedition,
+  IconInProgress,
+  IconModernization,
+  IconSortie,
+  IconSupplyDocking,
+} from '../../../build/assets'
+import { usePluginTranslation } from '../../poi/hooks'
+import { QUEST_CATEGORY, QUEST_STATUS } from '../../questHelper'
+
+export const questStatusMap: Record<QUEST_STATUS, React.FC> = {
+  [QUEST_STATUS.LOCKED]: function Locked() {
+    const { t } = usePluginTranslation()
+    return (
+      <Tooltip content={t('Locked')}>
+        <Icon icon={IconNames.LOCK} iconSize={Icon.SIZE_LARGE}></Icon>
+      </Tooltip>
+    )
+  },
+  // Display nothing
+  [QUEST_STATUS.DEFAULT]: () => null,
+  [QUEST_STATUS.IN_PROGRESS]: function InProgress() {
+    const { t } = usePluginTranslation()
+    return (
+      <Tooltip content={t('In Progress')}>
+        <img src={IconInProgress}></img>
+      </Tooltip>
+    )
+  },
+  [QUEST_STATUS.COMPLETED]: function Completed() {
+    const { t } = usePluginTranslation()
+    return (
+      <Tooltip content={t('Completed')}>
+        <img src={IconCompleted}></img>
+      </Tooltip>
+    )
+  },
+  [QUEST_STATUS.ALREADY_COMPLETED]: function AlreadyCompleted() {
+    const { t } = usePluginTranslation()
+    return (
+      <Tooltip content={t('Already Completed')}>
+        <Icon icon={IconNames.TICK} iconSize={Icon.SIZE_LARGE}></Icon>
+      </Tooltip>
+    )
+  },
+}
+
+// transparent GIF pixel
+const PLACEHOLDER =
+  'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
+
+export const questIconMap = {
+  [QUEST_CATEGORY.Composition]: IconComposition,
+  [QUEST_CATEGORY.Sortie]: IconSortie,
+  [QUEST_CATEGORY.Exercise]: IconExercise,
+  [QUEST_CATEGORY.Expedition]: IconExpedition,
+  [QUEST_CATEGORY.SupplyOrDocking]: IconSupplyDocking,
+  [QUEST_CATEGORY.Arsenal]: IconArsenal,
+  [QUEST_CATEGORY.Modernization]: IconModernization,
+  [QUEST_CATEGORY.Unknown]: PLACEHOLDER,
+} as const

package/src/components/QuestList.tsx

@@ -47,7 +47,7 @@ const useQuestsRowRenderer = (quests: UnionQuest[]) => {
     ({ key, index, style, parent }: ListRowProps) => {
       const quest = quests[index]
       const { gameId } = quest
-      const { code, name, desc, memo } = quest.docQuest
+      const { code, name, desc, memo, pre } = quest.docQuest
       const questStatus = questStateToQuestStatus(quest.gameQuest?.api_state)
 
       return (
@@ -66,6 +66,7 @@ const useQuestsRowRenderer = (quests: UnionQuest[]) => {
               name={name}
               desc={desc}
               tips={memo}
+              preTask={pre}
               status={questStatus}
             ></QuestCard>
           </div>

package/src/questHelper.ts

@@ -1,4 +1,4 @@
-import { QuestData } from '../build/kcanotifyGamedata'
+import questCategory from '../build/questCategory.json'
 import { GameQuest, QUEST_API_STATE } from './poi/types'
 
 type DocQuest = {
@@ -6,8 +6,18 @@ type DocQuest = {
   name: string
   desc: string
   memo?: string
+  /**
+   * Only in kcanotify
+   */
   unlock?: number[]
+  /**
+   * Only in kcanotify
+   */
   tracking?: number[][]
+  /**
+   * Only in KcWiki
+   */
+  pre?: string[]
 }
 
 export type UnionQuest = {
@@ -16,31 +26,27 @@ export type UnionQuest = {
   docQuest: DocQuest
 }
 
-const questStartsFilter = (str: string) =>
-  Object.entries(QuestData['zh-CN'])
-    .filter(([, quest]) => quest.name.startsWith(str))
-    .map(([gameId]) => gameId)
-
-export const dailyQuest = questStartsFilter('(日任)')
-export const weeklyQuest = questStartsFilter('(周任)')
-export const monthlyQuest = questStartsFilter('(月任)')
-export const quarterlyQuest = questStartsFilter('(季任)')
-// (年任) (年任 / x 月)
-export const yearlyQuest = questStartsFilter('(年任')
+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)
 
 export const isInProgressQuest = (quest: UnionQuest) =>
   quest.gameQuest?.api_state === QUEST_API_STATE.IN_PROGRESS ||
   quest.gameQuest?.api_state === QUEST_API_STATE.COMPLETED
-export const isDailyQuest = (quest: UnionQuest) =>
-  dailyQuest.includes(quest.gameId)
+export const isDailyQuest = (quest: UnionQuest) => dailyQuest.has(quest.gameId)
 export const isWeeklyQuest = (quest: UnionQuest) =>
-  weeklyQuest.includes(quest.gameId)
+  weeklyQuest.has(quest.gameId)
 export const isMonthlyQuest = (quest: UnionQuest) =>
-  monthlyQuest.includes(quest.gameId)
+  monthlyQuest.has(quest.gameId)
 export const isQuarterlyQuest = (quest: UnionQuest) =>
-  quarterlyQuest.includes(quest.gameId)
+  quarterlyQuest.has(quest.gameId)
 export const isYearlyQuest = (quest: UnionQuest) =>
-  yearlyQuest.includes(quest.gameId)
+  yearlyQuest.has(quest.gameId)
+export const isSingleQuest = (quest: UnionQuest) =>
+  singleQuest.has(quest.gameId)
 
 export enum QUEST_CATEGORY {
   Composition = '1',

package/src/store/filterTags.ts

@@ -0,0 +1,44 @@
+import { useCallback } from 'react'
+import {
+  ALL_CATEGORY_TAG,
+  ALL_TYPE_TAG,
+  CATEGORY_TAGS,
+  TYPE_TAGS,
+} from '../tags'
+import { useStore } from './store'
+
+export const useFilterTags = () => {
+  const {
+    store: { categoryTags, typeTags },
+    updateStore,
+  } = useStore()
+  const setCategoryTags = useCallback(
+    (tagName: typeof CATEGORY_TAGS[number]['name']) => {
+      updateStore({ categoryTags: { [tagName]: true } })
+    },
+    [updateStore]
+  )
+
+  const setCategoryTagsAll = useCallback(() => {
+    setCategoryTags(ALL_CATEGORY_TAG.name)
+  }, [setCategoryTags])
+
+  const setTypeTags = useCallback(
+    (tagName: typeof TYPE_TAGS[number]['name']) => {
+      updateStore({ typeTags: { [tagName]: true } })
+    },
+    [updateStore]
+  )
+  const setTypeTagsAll = useCallback(() => {
+    setTypeTags(ALL_TYPE_TAG.name)
+  }, [setTypeTags])
+
+  return {
+    categoryTags,
+    typeTags,
+    setCategoryTags,
+    setCategoryTagsAll,
+    setTypeTags,
+    setTypeTagsAll,
+  }
+}

package/src/store/quest.ts

@@ -78,6 +78,9 @@ export const useQuest = (): UnionQuest[] => {
   }
 }
 
+/**
+ * @deprecated Not large card now
+ */
 export const useLargeCard = () => {
   const {
     store: { largeCard },

package/src/store/search.ts

@@ -0,0 +1,17 @@
+import { useCallback } from 'react'
+import { useStore } from './store'
+
+export const useSearchInput = () => {
+  const {
+    store: { searchInput },
+    updateStore,
+  } = useStore()
+  const setSearchInput = useCallback(
+    (value: string) => updateStore({ searchInput: value }),
+    [updateStore]
+  )
+  return {
+    searchInput,
+    setSearchInput,
+  }
+}

package/src/store/store.tsx

@@ -78,9 +78,12 @@ export const useStore = () => {
   const store = useContext(StateContext)
   const setStore = useContext(SetStateContext)
   const updateStore = useCallback(
-    (newStore: Partial<State>) => setStore({ ...store, ...newStore }),
-    [setStore, store]
+    (newStore: Partial<State>) => {
+      setStore((previousStore) => ({ ...previousStore, ...newStore }))
+    },
+    [setStore]
   )
+
   return { store, setStore, updateStore }
 }
 
@@ -91,3 +94,23 @@ export const useRemoveStorage = () => {
     updateStore(initialState)
   }
 }
+
+export const useSyncWithGame = () => {
+  const {
+    store: { syncWithGame },
+    updateStore,
+  } = useStore()
+  const setSyncWithGame = useCallback(
+    (value: boolean) => {
+      updateStore({ syncWithGame: value })
+    },
+    [updateStore]
+  )
+  const toggleSyncWithGame = useCallback(() => {
+    setSyncWithGame(!syncWithGame)
+  }, [setSyncWithGame, syncWithGame])
+  return {
+    syncWithGame,
+    toggleSyncWithGame,
+  }
+}

package/src/tags.ts

@@ -14,6 +14,7 @@ import {
   isModernizationQuest,
   isUnknownCategoryQuest,
   isInProgressQuest,
+  isSingleQuest,
 } from './questHelper'
 import type { UnionQuest } from './questHelper'
 
@@ -51,7 +52,7 @@ export const TYPE_TAGS = [
   { name: 'Monthly', filter: isMonthlyQuest },
   { name: 'Quarterly', filter: isQuarterlyQuest },
   { name: 'Yearly', filter: isYearlyQuest },
-  // TODO add one-time
+  { name: 'One-time', filter: isSingleQuest },
 ] as const
 
 // TODO tag In Progress / Lock / Completed

package/src/components/QuestCard.tsx

@@ -1,213 +0,0 @@
-import { Card, Elevation, H5, Text, Tooltip, Icon } from '@blueprintjs/core'
-import { IconNames } from '@blueprintjs/icons'
-import React, { useCallback } from 'react'
-import styled from 'styled-components'
-import { usePluginTranslation } from '../poi/hooks'
-import {
-  guessQuestCategory,
-  QUEST_CATEGORY,
-  QUEST_STATUS,
-} from '../questHelper'
-import { IconComposition } from '../../build/assets'
-import { IconExpedition } from '../../build/assets'
-import { IconArsenal } from '../../build/assets'
-import { IconModernization } from '../../build/assets'
-import { IconExercise } from '../../build/assets'
-import { IconSortie } from '../../build/assets'
-import { IconSupplyDocking } from '../../build/assets'
-import { IconInProgress } from '../../build/assets'
-import { IconCompleted } from '../../build/assets'
-import { useLargeCard } from '../store/quest'
-
-const FlexCard = styled(Card)`
-  display: flex;
-  align-items: center;
-
-  & > * + * {
-    margin-left: 8px;
-  }
-`
-
-const CardMedia = styled.img`
-  width: 64px;
-  height: 64px;
-`
-
-const CatIndicator = styled.span<{ color: string }>`
-  height: 1em;
-  width: 4px;
-  background-color: ${({ color }) => color};
-`
-
-const CardBody = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-
-  * + * {
-    margin-top: 8px;
-  }
-`
-
-const CardTail = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  img {
-    height: 20px;
-  }
-`
-
-// transparent GIF pixel
-const PLACEHOLDER =
-  'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
-
-const questIconMap = {
-  [QUEST_CATEGORY.Composition]: IconComposition,
-  [QUEST_CATEGORY.Sortie]: IconSortie,
-  [QUEST_CATEGORY.Exercise]: IconExercise,
-  [QUEST_CATEGORY.Expedition]: IconExpedition,
-  [QUEST_CATEGORY.SupplyOrDocking]: IconSupplyDocking,
-  [QUEST_CATEGORY.Arsenal]: IconArsenal,
-  [QUEST_CATEGORY.Modernization]: IconModernization,
-  [QUEST_CATEGORY.Unknown]: PLACEHOLDER,
-} as const
-
-const questStatusMap: Record<QUEST_STATUS, React.FC> = {
-  [QUEST_STATUS.LOCKED]: function Locked() {
-    const { t } = usePluginTranslation()
-    return (
-      <Tooltip content={t('Locked')}>
-        <Icon icon={IconNames.LOCK} iconSize={Icon.SIZE_LARGE}></Icon>
-      </Tooltip>
-    )
-  },
-  // Display nothing
-  [QUEST_STATUS.DEFAULT]: () => null,
-  [QUEST_STATUS.IN_PROGRESS]: function InProgress() {
-    const { t } = usePluginTranslation()
-    return (
-      <Tooltip content={t('In Progress')}>
-        <img src={IconInProgress}></img>
-      </Tooltip>
-    )
-  },
-  [QUEST_STATUS.COMPLETED]: function Completed() {
-    const { t } = usePluginTranslation()
-    return (
-      <Tooltip content={t('Completed')}>
-        <img src={IconCompleted}></img>
-      </Tooltip>
-    )
-  },
-  [QUEST_STATUS.ALREADY_COMPLETED]: function AlreadyCompleted() {
-    const { t } = usePluginTranslation()
-    return (
-      <Tooltip content={t('Already Completed')}>
-        <Icon icon={IconNames.TICK} iconSize={Icon.SIZE_LARGE}></Icon>
-      </Tooltip>
-    )
-  },
-}
-
-type QuestCardProps = {
-  code: string
-  name: string
-  desc: string | JSX.Element
-  tips?: string
-  status?: QUEST_STATUS
-  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
-  style?: React.CSSProperties
-}
-
-export const LargeQuestCard: React.FC<QuestCardProps> = ({
-  code,
-  name,
-  desc,
-  tips,
-  status = QUEST_STATUS.DEFAULT,
-  onClick,
-  style,
-}) => {
-  const headIcon = questIconMap[guessQuestCategory(code).type]
-  const TailIcon = questStatusMap[status]
-
-  return (
-    <FlexCard
-      elevation={Elevation.ZERO}
-      interactive={true}
-      onClick={onClick}
-      style={style}
-    >
-      <CardMedia src={headIcon}></CardMedia>
-      <CardBody>
-        <H5>{[code, name].filter((i) => i != undefined).join(' - ')}</H5>
-        <Text>{desc}</Text>
-        <Text tagName="i">{tips}</Text>
-      </CardBody>
-
-      <CardTail>
-        <TailIcon></TailIcon>
-      </CardTail>
-    </FlexCard>
-  )
-}
-
-export const MinimalQuestCard: React.FC<QuestCardProps> = ({
-  code,
-  name,
-  desc,
-  tips,
-  status = QUEST_STATUS.DEFAULT,
-  onClick,
-  style,
-}) => {
-  const indicatorColor = guessQuestCategory(code).color
-  const TailIcon = questStatusMap[status]
-
-  return (
-    <Tooltip
-      targetTagName="div"
-      content={
-        <>
-          {desc}
-          <br />
-          {tips}
-        </>
-      }
-    >
-      <FlexCard
-        elevation={Elevation.ZERO}
-        interactive={true}
-        onClick={onClick}
-        style={style}
-      >
-        <CatIndicator color={indicatorColor}></CatIndicator>
-        <CardBody>
-          <Text>{[code, name].filter((i) => i != undefined).join(' - ')}</Text>
-        </CardBody>
-
-        <CardTail>
-          <TailIcon></TailIcon>
-        </CardTail>
-      </FlexCard>
-    </Tooltip>
-  )
-}
-
-export const QuestCard: React.FC<QuestCardProps & { gameId: string }> = ({
-  gameId,
-  ...props
-}) => {
-  const { largeCard, setLarge, setMinimal } = useLargeCard()
-  const setQuestCardLarge = useCallback(
-    () => setLarge(gameId),
-    [gameId, setLarge]
-  )
-  return gameId === largeCard ? (
-    <LargeQuestCard onClick={setMinimal} {...props}></LargeQuestCard>
-  ) : (
-    <MinimalQuestCard onClick={setQuestCardLarge} {...props}></MinimalQuestCard>
-  )
-}