poi-plugin-quest-info-2 0.5.9 → 0.6.1

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

@@ -8,6 +8,7 @@ type DocQuest = {
   memo?: string
   unlock?: number[]
   tracking?: number[][]
+  pre?: string[]
 }
 
 export type UnionQuest = {

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/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/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>
-  )
-}