Merge pull request #407 from Constrat/feat/i18n-operators

feat: i18n operator names

Author: guansss

scripts/shared.ts

@@ -4,7 +4,7 @@ import fetch from 'node-fetch'
 import { pinyin } from 'pinyin'
 import simplebig from 'simplebig'
 
-type Profession = { id: string; name: string }
+type Profession = { id: string; name: string; name_en?: string }
 type Professions = (Profession & { sub: Profession[] })[]
 
 export async function fileExists(file: string) {
@@ -48,11 +48,14 @@ function transformOperatorName(name: string) {
   }
 }
 
-const CHARACTER_TABLE_JSON_URL =
+const CHARACTER_TABLE_JSON_URL_CN =
   'https://raw.githubusercontent.com/Kengxxiao/ArknightsGameData/master/zh_CN/gamedata/excel/character_table.json'
-const UNIEQUIP_TABLE_JSON_URL =
+const UNIEQUIP_TABLE_JSON_URL_CN =
   'https://raw.githubusercontent.com/Kengxxiao/ArknightsGameData/master/zh_CN/gamedata/excel/uniequip_table.json'
-
+const CHARACTER_TABLE_JSON_URL_EN =
+  'https://raw.githubusercontent.com/Kengxxiao/ArknightsGameData_YoStar/main/en_US/gamedata/excel/character_table.json'
+const UNIEQUIP_TABLE_JSON_URL_EN =
+  'https://raw.githubusercontent.com/Kengxxiao/ArknightsGameData_YoStar/main/en_US/gamedata/excel/uniequip_table.json'
 const CHARACTER_BLOCKLIST = [
   'char_512_aprot', // 暮落(集成战略)：It's just not gonna be there.
   'token_10012_rosmon_shield', // 迷迭香的战术装备：It's just not gonna be there.
@@ -74,37 +77,55 @@ async function json(url: string) {
 }
 
 export async function getOperators() {
-  const [charTable, uniequipTable] = await Promise.all([
-    json(CHARACTER_TABLE_JSON_URL),
-    json(UNIEQUIP_TABLE_JSON_URL),
-  ])
+  const [charTableCN, uniequipTableCN, charTableEN, uniequipTableEN] =
+    await Promise.all([
+      json(CHARACTER_TABLE_JSON_URL_CN),
+      json(UNIEQUIP_TABLE_JSON_URL_CN),
+      json(CHARACTER_TABLE_JSON_URL_EN),
+      json(UNIEQUIP_TABLE_JSON_URL_EN),
+    ])
 
-  const { subProfDict } = uniequipTable
+  const { subProfDict: subProfDictCN } = uniequipTableCN
+  const { subProfDict: subProfDictEN } = uniequipTableEN
 
-  const opIds = Object.keys(charTable)
+  const opIds = Object.keys(charTableCN)
   const professions: Professions = []
   const result = uniqBy(
     opIds.flatMap((id) => {
-      const op = charTable[id]
+      const op = charTableCN[id]
+      const enName = charTableEN[id]?.name || op.appellation || op.name
+
       if (['TRAP'].includes(op.profession)) return []
 
       if (!['TOKEN'].includes(op.profession)) {
         const prof = professions.find((p) => p.id === op.profession)
         if (!prof) {
+          const enSubProfName =
+            subProfDictEN?.[op.subProfessionId]?.subProfessionName ||
+            subProfDictCN[op.subProfessionId].subProfessionName
+
           professions.push({
             id: op.profession,
             name: PROFESSION_NAMES[op.profession],
+            name_en:
+              op.profession.charAt(0) + op.profession.slice(1).toLowerCase(),
             sub: [
               {
                 id: op.subProfessionId,
-                name: subProfDict[op.subProfessionId].subProfessionName,
+                name: subProfDictCN[op.subProfessionId].subProfessionName,
+                name_en: enSubProfName,
               },
             ],
           })
         } else if (!prof.sub.find((p) => p.id === op.subProfessionId)) {
+          const enSubProfName =
+            subProfDictEN?.[op.subProfessionId]?.subProfessionName ||
+            subProfDictCN[op.subProfessionId].subProfessionName
+
           prof.sub.push({
             id: op.subProfessionId,
-            name: subProfDict[op.subProfessionId].subProfessionName,
+            name: subProfDictCN[op.subProfessionId].subProfessionName,
+            name_en: enSubProfName,
           })
         }
       }
@@ -113,6 +134,7 @@ export async function getOperators() {
           id: id,
           prof: op.profession,
           subProf: op.subProfessionId,
+          name_en: enName,
           ...transformOperatorName(op.name),
           rarity:
             op.subProfessionId === 'notchar1'

src/components/OperationCard.tsx

@@ -2,6 +2,7 @@ import { Button, Card, Elevation, H4, H5, Icon, Tag } from '@blueprintjs/core'
 import { Tooltip2 } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
+import { useAtomValue } from 'jotai'
 import { CopilotInfoStatusEnum } from 'maa-copilot-client'
 import { copyShortCode, handleLazyDownloadJSON } from 'services/operation'
 
@@ -11,8 +12,9 @@ import { OperationRating } from 'components/viewer/OperationRating'
 import { OpDifficulty, Operation } from 'models/operation'
 
 import { useLevels } from '../apis/level'
-import { useTranslation } from '../i18n/i18n'
+import { languageAtom, useTranslation } from '../i18n/i18n'
 import { createCustomLevel, findLevelByStageName } from '../models/level'
+import { getLocalizedOperatorName } from '../models/operator'
 import { Paragraphs } from './Paragraphs'
 import { ReLinkDiv } from './ReLinkDiv'
 import { UserName } from './UserName'
@@ -245,13 +247,14 @@ export const OperationCard = ({ operation }: { operation: Operation }) => {
 
 const OperatorTags = ({ operation }: { operation: Operation }) => {
   const t = useTranslation()
+  const language = useAtomValue(languageAtom)
   const { opers, groups } = operation.parsedContent
 
   return opers?.length || groups?.length ? (
     <div>
       {opers?.map(({ name, skill }, index) => (
         <Tag key={index} className="mr-2 last:mr-0 mb-1 last:mb-0">
-          {`${name} ${skill ?? 1}`}
+          {`${getLocalizedOperatorName(name, language)} ${skill ?? 1}`}
         </Tag>
       ))}
       {groups?.map(({ name, opers }, index) => (
@@ -261,7 +264,10 @@ const OperatorTags = ({ operation }: { operation: Operation }) => {
           placement="top"
           content={
             opers
-              ?.map(({ name, skill }) => `${name} ${skill ?? 1}`)
+              ?.map(
+                ({ name, skill }) =>
+                  `${getLocalizedOperatorName(name, language)} ${skill ?? 1}`,
+              )
               .join(', ') || t.components.OperationCard.no_operators
           }
         >

src/components/OperatorFilter.tsx

@@ -9,11 +9,11 @@ import {
 } from '@blueprintjs/core'
 
 import clsx from 'clsx'
-import { getDefaultStore, useAtom } from 'jotai'
+import { getDefaultStore, useAtom, useAtomValue } from 'jotai'
 import { compact } from 'lodash-es'
 import { FC, useEffect, useMemo, useState } from 'react'
 
-import { useTranslation } from '../i18n/i18n'
+import { languageAtom, useTranslation } from '../i18n/i18n'
 import { OPERATORS } from '../models/operator'
 import {
   DEFAULT_OPERATOR_FILTER,
@@ -53,6 +53,7 @@ export const OperatorFilter: FC<OperatorFilterProps> = ({
   onChange,
 }) => {
   const t = useTranslation()
+  const language = useAtomValue(languageAtom)
   const [savedFilter, setSavedFilter] = useAtom(operatorFilterAtom)
   const [dialogOpen, setDialogOpen] = useState(false)
   const [editingFilter, setEditingFilter] = useState<typeof savedFilter>(filter)
@@ -137,27 +138,29 @@ export const OperatorFilter: FC<OperatorFilterProps> = ({
                 !filter.enabled && 'opacity-30',
               )}
             >
-              {includedOperators.map(({ id, name, rarity }) => (
+              {includedOperators.map(({ id, name, name_en, rarity }) => (
                 <Tag minimal key={id} className="py-0 pl-0" intent="primary">
                   <div className="flex items-center gap-1 text-sm">
                     <OperatorAvatar
                       className="w-8 h-8"
                       id={id}
                       rarity={rarity}
                     />
-                    &nbsp;{name}&nbsp;
+                    &nbsp;{language === 'en' ? name_en : name}
+                    &nbsp;
                   </div>
                 </Tag>
               ))}
-              {excludedOperators.map(({ id, name, rarity }) => (
+              {excludedOperators.map(({ id, name, name_en, rarity }) => (
                 <Tag minimal key={id} className="py-0 pl-0" intent="danger">
                   <div className="flex items-center gap-1 text-sm line-through">
                     <OperatorAvatar
                       className="w-8 h-8"
                       id={id}
                       rarity={rarity}
                     />
-                    &nbsp;{name}&nbsp; {/* 两边加空格让删除线更显眼一些 */}
+                    &nbsp;{language === 'en' ? name_en : name}
+                    &nbsp; {/* 两边加空格让删除线更显眼一些 */}
                   </div>
                 </Tag>
               ))}

src/components/OperatorSelect.tsx

@@ -4,10 +4,11 @@ import { MultiSelect2 } from '@blueprintjs/select'
 
 import clsx from 'clsx'
 import Fuse from 'fuse.js'
+import { useAtomValue } from 'jotai'
 import { compact } from 'lodash-es'
 import { FC, useMemo } from 'react'
 
-import { useTranslation } from '../i18n/i18n'
+import { languageAtom, useTranslation } from '../i18n/i18n'
 import { OPERATORS } from '../models/operator'
 import { useDebouncedQuery } from '../utils/useDebouncedQuery'
 import { OperatorAvatar } from './editor/operator/EditorOperator'
@@ -26,13 +27,14 @@ export const OperatorSelect: FC<OperatorSelectProps> = ({
   onChange,
 }) => {
   const t = useTranslation()
+  const language = useAtomValue(languageAtom)
   const { query, trimmedDebouncedQuery, updateQuery, onOptionMouseDown } =
     useDebouncedQuery()
 
   const fuse = useMemo(
     () =>
       new Fuse(OPERATORS, {
-        keys: ['name', 'alias', 'alt_name'],
+        keys: ['name', 'name_en', 'alias', 'alt_name'],
         threshold: 0.3,
       }),
     [],
@@ -82,7 +84,7 @@ export const OperatorSelect: FC<OperatorSelectProps> = ({
                 id={item.id}
                 rarity={item.rarity}
               />
-              {item.name}
+              {language === 'en' ? item.name_en : item.name}
             </div>
           }
           onClick={handleClick}
@@ -129,7 +131,7 @@ export const OperatorSelect: FC<OperatorSelectProps> = ({
             id={item.id}
             rarity={item.rarity}
           />
-          {item.name}
+          {language === 'en' ? item.name_en : item.name}
         </div>
       )}
       popoverProps={{

src/components/editor/operator/EditorOperator.tsx

@@ -2,12 +2,13 @@ import { Icon, IconSize, MenuItem } from '@blueprintjs/core'
 
 import clsx from 'clsx'
 import Fuse from 'fuse.js'
+import { useAtomValue } from 'jotai'
 import { useMemo } from 'react'
 import { FieldValues, useController } from 'react-hook-form'
 
 import { EditorFieldProps } from 'components/editor/EditorFieldProps'
 
-import { useTranslation } from '../../../i18n/i18n'
+import { languageAtom, useTranslation } from '../../../i18n/i18n'
 import { CopilotDocV1 } from '../../../models/copilot.schema'
 import { OPERATORS } from '../../../models/operator'
 import { Suggest } from '../../Suggest'
@@ -27,6 +28,7 @@ const createArbitraryOperator = (name: string): OperatorInfo => ({
   alias: '',
   alt_name: '',
   subProf: '',
+  name_en: '',
   prof: '',
   rarity: 0,
 })
@@ -43,6 +45,7 @@ export const EditorOperatorName = <T extends FieldValues>({
   operators?: CopilotDocV1.Operator[]
 }) => {
   const t = useTranslation()
+  const language = useAtomValue(languageAtom)
 
   const entityName = useMemo(
     () =>
@@ -90,7 +93,7 @@ export const EditorOperatorName = <T extends FieldValues>({
   const fuse = useMemo(
     () =>
       new Fuse(items, {
-        keys: ['name', 'alias', 'alt_name'],
+        keys: ['name', 'name_en', 'alias', 'alt_name'],
         threshold: 0.3,
       }),
     [items],
@@ -107,7 +110,11 @@ export const EditorOperatorName = <T extends FieldValues>({
       itemRenderer={(item, { handleClick, handleFocus, modifiers }) => (
         <MenuItem
           key={'id' in item ? item.id : item.name}
-          text={item.name}
+          text={
+            isOperator(item) && language === 'en' && item.name_en
+              ? item.name_en
+              : item.name
+          }
           icon={
             isOperator(item) ? (
               <OperatorAvatar id={item.id} size="small" />
@@ -123,7 +130,11 @@ export const EditorOperatorName = <T extends FieldValues>({
       )}
       onItemSelect={(item) => onChange(item.name)}
       selectedItem={createArbitraryOperator((value || '') as string)}
-      inputValueRenderer={(item) => item.name}
+      inputValueRenderer={(item) =>
+        isOperator(item) && language === 'en' && item.name_en
+          ? item.name_en
+          : item.name
+      }
       createNewItemFromQuery={(query) => createArbitraryOperator(query)}
       createNewItemRenderer={(query, active, handleClick) => (
         <MenuItem

src/components/editor/operator/EditorOperatorItem.tsx

@@ -1,11 +1,16 @@
 import { Card, Elevation, Icon } from '@blueprintjs/core'
 
 import clsx from 'clsx'
+import { useAtomValue } from 'jotai'
 
 import type { CopilotDocV1 } from 'models/copilot.schema'
 
-import { useTranslation } from '../../../i18n/i18n'
-import { OPERATORS, getSkillUsageTitle } from '../../../models/operator'
+import { languageAtom, useTranslation } from '../../../i18n/i18n'
+import {
+  OPERATORS,
+  getLocalizedOperatorName,
+  getSkillUsageTitle,
+} from '../../../models/operator'
 import { SortableItemProps } from '../../dnd'
 import { CardDeleteOption, CardEditOption } from '../CardOptions'
 import { OperatorAvatar } from './EditorOperator'
@@ -27,7 +32,7 @@ export const EditorOperatorItem = ({
   listeners,
 }: EditorOperatorItemProps) => {
   const t = useTranslation()
-
+  const language = useAtomValue(languageAtom)
   const id = OPERATORS.find(({ name }) => name === operator.name)?.id
   const skillUsage = getSkillUsageTitle(
     operator.skillUsage as CopilotDocV1.SkillUsageType,
@@ -52,7 +57,9 @@ export const EditorOperatorItem = ({
       />
       <OperatorAvatar id={id} size="large" />
       <div className="ml-4 flex-grow">
-        <h3 className="font-bold leading-none mb-1">{operator.name}</h3>
+        <h3 className="font-bold leading-none mb-1">
+          {getLocalizedOperatorName(operator.name, language)}
+        </h3>
         <div className="text-gray-400 text-xs">
           {t.components.editor.operator.EditorOperatorItem.skill_number({
             count: operator.skill,

src/components/editor/operator/sheet/SheetOperatorSkillAbout.tsx

@@ -115,7 +115,7 @@ export const SkillAboutTrigger = ({
   const SkillAboutTrigger = (
     <div
       className={clsx(
-        'flex mt-3 text-gray-500 items-center text-xs',
+        'flex mt-1 text-gray-500 items-center text-xs',
         operator && 'hover:text-black',
       )}
     >

src/components/editor/operator/sheet/sheetGroup/OperatorInGroupItem.tsx

@@ -2,6 +2,8 @@ import { Card } from '@blueprintjs/core'
 
 import { FC } from 'react'
 
+import { useLocalizedOperatorName } from 'models/operator'
+
 import { OperatorAvatar } from '../../EditorOperator'
 import { Operator } from '../../EditorSheet'
 import { SkillAboutTrigger } from '../SheetOperatorSkillAbout'
@@ -20,7 +22,7 @@ export const OperatorInGroupItem: FC<OperatorInGroupItemProp> = ({
       <div className="flex items-center">
         <OperatorAvatar name={name} size="large" />
         <p className="font-bold leading-none text-center truncate ml-2 mr-auto">
-          {name}
+          {useLocalizedOperatorName(name)}
         </p>
       </div>
       {!!onOperatorSkillChange && (