poi-plugin-quest-info-2 0.5.9 → 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.9",
+  "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/convertAssets.ts

@@ -1,5 +1,6 @@
 import fs from 'fs'
 import path from 'path'
+import { prepareDir } from './utils'
 
 const ASSETS_PATH = path.resolve('assets')
 const OUTPUT_PATH = path.resolve('build')
@@ -15,19 +16,13 @@ const HEADER = `/**
  * Do not edit!
  */` as const
 
-const prepare = () => {
-  if (!fs.existsSync(OUTPUT_PATH)) {
-    fs.mkdirSync(OUTPUT_PATH, { recursive: true })
-  }
-}
-
 function base64Encode(file: string) {
   const bitmap = fs.readFileSync(file)
   return bitmap.toString('base64')
 }
 
 function main() {
-  prepare()
+  prepareDir(OUTPUT_PATH)
   const imageData = fs
     .readdirSync(ASSETS_PATH)
     // exclusive ignored ext

package/scripts/downloadKcQuestsData.ts

@@ -1,8 +1,9 @@
 /* eslint-disable no-console */
-import path from 'path'
-import { readFileSync, existsSync, writeFileSync, mkdirSync } from 'fs'
+import { existsSync, readFileSync, writeFileSync } from 'fs'
 import pangu from 'pangu'
+import path from 'path'
 import { fetch } from './proxyFetch'
+import { prepareDir } from './utils'
 
 // See https://github.com/kcwikizh/kcQuests
 
@@ -12,11 +13,8 @@ const URL = `https://kcwikizh.github.io/kcQuests/${FILE_NAME}`
 const VERSION_URL =
   'https://api.github.com/repos/kcwikizh/kcQuests/branches/main'
 
-const prepare = () => {
-  if (!existsSync(OUTPUT_PATH)) {
-    mkdirSync(OUTPUT_PATH, { recursive: true })
-  }
-}
+// expired quest: 2021 节分任务
+const IGNORE_DATA = [329, 441, 840, 841, 842, 843] as const
 
 const getRemoteVersion = async () => {
   const resp = await fetch(VERSION_URL)
@@ -60,7 +58,7 @@ const genTS = (version: string) => {
 const main = async () => {
   const args = process.argv.slice(2)
 
-  prepare()
+  prepareDir(OUTPUT_PATH)
   const remoteVersion = await getRemoteVersion()
   const localVersion = getLocalVersion()
   if (remoteVersion === localVersion) {
@@ -82,14 +80,23 @@ 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])
   const data = JSON.stringify(json, undefined, 2)
   writeFileSync(`${OUTPUT_PATH}/${FILE_NAME}`, data)
 

package/scripts/downloadKcanotifyGamedata.ts

@@ -1,8 +1,9 @@
 /* eslint-disable no-console */
-import path from 'path'
-import { readFileSync, existsSync, writeFileSync, mkdirSync } from 'fs'
+import { existsSync, readFileSync, writeFileSync } from 'fs'
 import pangu from 'pangu'
+import path from 'path'
 import { fetch } from './proxyFetch'
+import { prepareDir } from './utils'
 
 // See https://github.com/antest1/kcanotify-gamedata
 
@@ -14,12 +15,6 @@ const DATA_URL = `${URL_PREFIX}/files`
 const LANGS = ['scn', 'tcn', 'jp', 'en', 'ko'] as const
 const LOCALES = ['zh-CN', 'zh-TW', 'ja-JP', 'en-US', 'ko-KR'] as const
 
-const prepare = () => {
-  if (!existsSync(OUTPUT_PATH)) {
-    mkdirSync(OUTPUT_PATH, { recursive: true })
-  }
-}
-
 const getRemoteVersion = async () => {
   const resp = await fetch(VERSION_URL)
   if (!resp.ok) {
@@ -73,7 +68,7 @@ const genTS = (version: string) => {
 const main = async () => {
   const args = process.argv.slice(2)
 
-  prepare()
+  prepareDir(OUTPUT_PATH)
   const remoteVersion = await getRemoteVersion()
   const localVersion = getLocalVersion()
   if (remoteVersion === localVersion) {
@@ -102,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/scripts/downloadSprites.ts

@@ -5,6 +5,7 @@ import crypto from 'crypto'
 // See https://sharp.pixelplumbing.com/
 import sharp from 'sharp'
 import { fetch } from './proxyFetch'
+import { prepareDir } from './utils'
 
 const OUTPUT_PATH = path.resolve('build', 'dutySprites')
 
@@ -15,12 +16,6 @@ const VERSION = '5.1.2.0'
 const SPRITES_URL = `${SERVER_URL}${SPRITES_PATH}?version=${VERSION}`
 const META_URL = `${SERVER_URL}${JSON_PATH}?version=${VERSION}`
 
-const prepare = () => {
-  if (!fs.existsSync(OUTPUT_PATH)) {
-    fs.mkdirSync(OUTPUT_PATH, { recursive: true })
-  }
-}
-
 const getFilename = (url: string) => {
   const pathname = new URL(url).pathname
   const index = pathname.lastIndexOf('/')
@@ -109,7 +104,7 @@ const parseSprites = (sprites: Buffer, meta: KCS2Meta) => {
 }
 
 const main = async () => {
-  prepare()
+  prepareDir(OUTPUT_PATH)
   const [
     { buffer: metaBuffer },
     { filePath: spritesPath, buffer: spritesBuffer },

package/scripts/utils.ts

@@ -0,0 +1,8 @@
+import { existsSync, mkdirSync } from 'fs'
+import type { PathLike } from 'fs'
+
+export const prepareDir = (dir: PathLike) => {
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true })
+  }
+}

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(`"2021122901"`)
+  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(
-    `"7e8ee6c176e45f71c6af4c10d66c708d40d938e2"`
+    `"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;
+  }
+`