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

package/i18n/en-US.json

@@ -20,11 +20,12 @@
   "In Progress": "In Progress",
   "Completed": "Completed",
   "TotalQuests": "Total {{count}} quests",
-  "Sync with game": "Sync with game",
+  "Sync with game": "Sync with game (Show in-game quests only)",
   "Version": "Version: {{version}}",
   "Data Version": "Data Version: {{version}}",
   "View source code on GitHub": "View source code on GitHub",
   "Restore defaults": "Restore defaults",
   "Use Kcwiki data": "Use Kcwiki's data (Simplified Chinese only)",
+  "Requires": "Requires",
   "": ""
 }

package/i18n/ja-JP.json

@@ -20,11 +20,12 @@
   "In Progress": "進行中",
   "Completed": "完了",
   "TotalQuests": "全て {{count}} 個の任務",
-  "Sync with game": "ゲーム一致になり",
+  "Sync with game": "ゲームと連動(インゲームクエストのみ表示する)",
   "Version": "バージョン: {{version}}",
   "Data Version": "データ バージョン: {{version}}",
   "View source code on GitHub": "GitHubでソースコードを表示",
   "Restore defaults": "デフォルトに戻す",
   "Use Kcwiki data": "Kcwikiのデータを利用する（簡体字中国語のみ）",
+  "Requires": "開放条件",
   "": ""
 }

package/i18n/ko-KR.json

@@ -11,5 +11,6 @@
   "View source code on GitHub": "GitHub에서 소스코드를 알아보세요",
   "Restore defaults": "기본값 복원",
   "Use Kcwiki data": "Kcwiki의 데이터 사용(중국어 간체만 해당)",
+  "Requires": "필요",
   "": ""
 }

package/i18n/zh-CN.json

@@ -20,11 +20,12 @@
   "In Progress": "进行中",
   "Completed": "已完成",
   "TotalQuests": "一共 {{count}} 个任务",
-  "Sync with game": "与游戏同步",
+  "Sync with game": "与游戏同步（仅展示游戏内任务）",
   "Version": "版本: {{version}}",
   "Data Version": "数据版本: {{version}}",
   "View source code on GitHub": "去 GitHub 查看源码",
   "Restore defaults": "恢复默认设置",
   "Use Kcwiki data": "使用 Kcwiki 的数据",
+  "Requires": "前置",
   "": ""
 }

package/i18n/zh-TW.json

@@ -26,5 +26,6 @@
   "View source code on GitHub": "去 GitHub 查看源碼",
   "Restore defaults": "還原預設值",
   "Use Kcwiki data": "使用 Kcwiki 的數據（僅限簡體中文）",
+  "Requires": "需要",
   "": ""
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poi-plugin-quest-info-2",
-  "version": "0.5.12",
+  "version": "0.6.1",
   "private": false,
   "description": "show quest info",
   "homepage": "https://github.com/lawvs/poi-plugin-quest-2/",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@blueprintjs/core": "^3.38.0",
+    "@blueprintjs/core": "^3.52.0",
     "@storybook/addon-actions": "^6.3.4",
     "@storybook/addon-essentials": "^6.3.4",
     "@storybook/addon-links": "^6.3.4",

package/scripts/downloadKcQuestsData.ts

@@ -80,12 +80,20 @@ const main = async () => {
   text = text.trim()
 
   const json = JSON.parse(text) as {
-    [gameId: string]: { code: string; name: string; desc: string }
+    [gameId: string]: {
+      code: string
+      name: string
+      desc: string
+      memo?: string
+    }
   }
   for (const gameId in json) {
-    const { name, desc } = json[gameId]
+    const { name, desc, memo } = json[gameId]
     json[gameId].name = pangu.spacing(name)
     json[gameId].desc = pangu.spacing(desc)
+    if (memo) {
+      json[gameId].memo = pangu.spacing(memo)
+    }
   }
 
   IGNORE_DATA.forEach((gameId) => delete json[gameId])

package/scripts/downloadKcanotifyGamedata.ts

@@ -97,12 +97,20 @@ const main = async () => {
       text = text.trim()
 
       const json = JSON.parse(text) as {
-        [gameId: string]: { code: string; name: string; desc: string }
+        [gameId: string]: {
+          code: string
+          name: string
+          desc: string
+          memo?: string
+        }
       }
       for (const gameId in json) {
-        const { name, desc } = json[gameId]
+        const { name, desc, memo } = json[gameId]
         json[gameId].name = pangu.spacing(name)
         json[gameId].desc = pangu.spacing(desc)
+        if (memo) {
+          json[gameId].memo = pangu.spacing(memo)
+        }
       }
 
       const data = JSON.stringify(json, undefined, 2)

package/src/Toolbar.tsx

@@ -1,20 +1,22 @@
 import { Button, InputGroup, Intent, Tag, Tooltip } from '@blueprintjs/core'
 import { IconNames } from '@blueprintjs/icons'
-import styled from 'styled-components'
-import React, { useCallback } from 'react'
 import type { ChangeEvent } from 'react'
+import React, { useCallback } from 'react'
 import { useThrottle } from 'react-use'
-import { useQuest, useStore } from './store'
+import styled from 'styled-components'
+import { IN_POI } from './poi/env'
+import { usePluginTranslation } from './poi/hooks'
+import type { UnionQuest } from './questHelper'
+import { useQuest, useSyncWithGame } from './store'
+import { useFilterTags } from './store/filterTags'
+import { useSearchInput } from './store/search'
 import {
-  ALL_TYPE_TAG,
   ALL_CATEGORY_TAG,
-  TYPE_TAGS,
-  CATEGORY_TAGS,
   ALL_TAGS,
+  ALL_TYPE_TAG,
+  CATEGORY_TAGS,
+  TYPE_TAGS,
 } from './tags'
-import type { UnionQuest } from './questHelper'
-import { usePluginTranslation } from './poi/hooks'
-import { IN_POI } from './poi/env'
 
 const ToolbarWrapper = styled.div`
   display: flex;
@@ -37,18 +39,21 @@ const TagsWrapper = styled.div`
 
 const SyncButton = () => {
   const { t } = usePluginTranslation()
-  const {
-    store: { syncWithGame },
-    updateStore,
-  } = useStore()
+  const { searchInput } = useSearchInput()
+  const { syncWithGame, toggleSyncWithGame } = useSyncWithGame()
   const handleClick = useCallback(() => {
-    updateStore({ syncWithGame: !syncWithGame })
-  }, [syncWithGame, updateStore])
+    toggleSyncWithGame()
+  }, [toggleSyncWithGame])
+  const intent = syncWithGame
+    ? searchInput
+      ? Intent.WARNING
+      : Intent.SUCCESS
+    : Intent.NONE
   return (
     <Tooltip content={t('Sync with game')}>
       <Button
         icon={IconNames.EXCHANGE}
-        intent={syncWithGame ? Intent.SUCCESS : Intent.NONE}
+        intent={intent}
         disabled={!IN_POI}
         onClick={handleClick}
       />
@@ -58,24 +63,30 @@ const SyncButton = () => {
 
 export const SearchInput: React.FC = () => {
   const { t } = usePluginTranslation()
-  const {
-    store: { searchInput },
-    updateStore,
-  } = useStore()
+  const { searchInput, setSearchInput } = useSearchInput()
 
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) =>
-      updateStore({ searchInput: event.target.value }),
-    [updateStore]
+      setSearchInput(event.target.value),
+    [setSearchInput]
   )
 
+  const handleClear = useCallback(() => setSearchInput(''), [setSearchInput])
+
   return (
     <InputGroup
       value={searchInput}
       onChange={handleChange}
       placeholder={t('Search')}
       leftIcon={IconNames.SEARCH}
-      rightElement={<SyncButton></SyncButton>}
+      rightElement={
+        <>
+          {!!searchInput && (
+            <Button icon={IconNames.CROSS} onClick={handleClear} />
+          )}
+          <SyncButton></SyncButton>
+        </>
+      }
       type="text"
     />
   )
@@ -83,22 +94,16 @@ export const SearchInput: React.FC = () => {
 
 const Tags = () => {
   const { t } = usePluginTranslation()
-  const {
-    store: { typeTags, categoryTags },
-    updateStore,
-  } = useStore()
-  const withHandleClickTag = useCallback(
-    (tagName: string, key: 'typeTags' | 'categoryTags') => () =>
-      updateStore({ [key]: { [tagName]: true } }),
-    [updateStore]
-  )
+
+  const { typeTags, categoryTags, setCategoryTags, setTypeTags } =
+    useFilterTags()
 
   return (
     <>
       <TagsWrapper>
         {CATEGORY_TAGS.map(({ name }) => (
           <Tag
-            onClick={withHandleClickTag(name, 'categoryTags')}
+            onClick={() => setCategoryTags(name)}
             intent={
               categoryTags[name]
                 ? name === ALL_CATEGORY_TAG.name
@@ -116,7 +121,7 @@ const Tags = () => {
       <TagsWrapper>
         {TYPE_TAGS.map(({ name }) => (
           <Tag
-            onClick={withHandleClickTag(name, 'typeTags')}
+            onClick={() => setTypeTags(name)}
             intent={
               typeTags[name]
                 ? name === ALL_TYPE_TAG.name
@@ -145,9 +150,9 @@ export const Toolbar = () => {
 }
 
 const useToolbarFilter = () => {
-  const {
-    store: { searchInput, typeTags, categoryTags },
-  } = useStore()
+  const { searchInput } = useSearchInput()
+  const { typeTags, categoryTags } = useFilterTags()
+
   const activatedTags = { ...typeTags, ...categoryTags }
   const activatedTagsName = ALL_TAGS.filter((tag) => activatedTags[tag.name])
   const tagsFilter = activatedTagsName.map((tag) => tag.filter)

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(`"2022012402"`)
+  expect(version).toMatchInlineSnapshot(`"2022020101"`)
 })
 
 test('should Kcanotify Game data keys correct', () => {

package/src/__tests__/kcwikiData.spec.ts

@@ -2,7 +2,7 @@ import { version, KcwikiQuestData } from '../../build/kcQuestsData'
 
 test('should KcwikiQuestData Game data version correct', () => {
   expect(version).toMatchInlineSnapshot(
-    `"1ad9f7a5373ab65fc6abea972b571dc6c44d5492"`
+    `"56b37a6d0a5ee58e8b88be58f7d7efff31ac6e28"`
   )
 })
 

package/src/components/PreTaskTag.tsx

@@ -0,0 +1,40 @@
+import { Tag } from '@blueprintjs/core'
+import React, { useCallback } from 'react'
+import styled from 'styled-components'
+import { guessQuestCategory } from '../questHelper'
+import { useFilterTags } from '../store/filterTags'
+import { useSearchInput } from '../store/search'
+
+const TagWrapper = styled(Tag)`
+  margin: 0 4px;
+  user-select: none;
+
+  & > span {
+    cursor: pointer;
+  }
+`
+
+export const PreTaskTag = ({ code }: { code: string }) => {
+  const { setSearchInput } = useSearchInput()
+  const { setCategoryTagsAll, setTypeTagsAll } = useFilterTags()
+
+  const handleClick = useCallback(() => {
+    setSearchInput(code)
+    setCategoryTagsAll()
+    setTypeTagsAll()
+  }, [code, setCategoryTagsAll, setSearchInput, setTypeTagsAll])
+  const indicatorColor = guessQuestCategory(code).color
+  const fontColor =
+    indicatorColor === '#fff' || indicatorColor === '#87da61'
+      ? 'black'
+      : 'white'
+  return (
+    <TagWrapper
+      onClick={handleClick}
+      interactive
+      style={{ color: fontColor, background: indicatorColor }}
+    >
+      {code}
+    </TagWrapper>
+  )
+}

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

@@ -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,
+  }
+}