i18n: /characters

tokanada · Sep 24, 2022 · efd5201 · efd5201
1 parent bf5d8e9
commit efd5201
Show file tree

Hide file tree

Showing 29 changed files with 288 additions and 200 deletions.
diff --git a/components/api/effToStr/skillxToString.ts b/components/api/effToStr/skillxToString.ts
@@ -20,7 +20,6 @@ import {
     skillEffectTypeNames,
     triggerEffectTypeNames,
 } from '#data/vendor/searchSkillTypes'
-import { CharacterChineseNameList } from '#data/vendor/characterId'
 import { EffectTypeName } from '#utils/typeSlug'
 
 // jq '[.[].levels[].skillDetails[].triggerId, .[].levels[].triggerId] | unique | sort' Skill.json
@@ -66,9 +65,8 @@ function triggerToString(s: string): string | null {
         }
         // tg-more_than_character_count-mei-1
         case 'more_than_character_count': {
-            return `${
-                CharacterChineseNameList['char-' + parts[2]]
-            }在编组中达到${parts[3]}人时`
+            // TODO: translate
+            return `char-${parts[2]}在编组中达到${parts[3]}人时`
         }
         // tg-position_attribute_dance
         case 'position_attribute_dance': {

diff --git a/components/cards/CardCard.tsx b/components/cards/CardCard.tsx
@@ -8,7 +8,6 @@ import { getAssetSlug } from './CardAsset'
 import getCardColor from '#utils/getCardColor'
 import { APIResponseOf, UnArray } from '#utils/api'
 import AssetImage from '#components/AssetImage'
-import { CharacterChineseNameList, CharacterId } from '#data/vendor/characterId'
 
 const CardCard = ({
     card,
@@ -18,6 +17,7 @@ const CardCard = ({
     nameCn?: string
 }) => {
     const $v = useTranslations('vendor')
+    const $vc = useTranslations('v-chr')
     const { id, name, characterId, assetId, type, initialRarity } = card
 
     const assetImage =
@@ -65,9 +65,8 @@ const CardCard = ({
                     </div>
 
                     <p>
-                        {CharacterChineseNameList[characterId as CharacterId]} /{' '}
-                        {$v(CardType[type])} / {$v(getCardColor(card))} / 初始{' '}
-                        {initialRarity}★
+                        {$vc(characterId)} / {$v(CardType[type])} /{' '}
+                        {$v(getCardColor(card))} / 初始 {initialRarity}★
                     </p>
                 </Card>
             </a>

diff --git a/components/cards/CardItem.tsx b/components/cards/CardItem.tsx
@@ -26,7 +26,7 @@ import useApi from '#utils/useApi'
 import Paths from '#utils/paths'
 import getCardColor from '#utils/getCardColor'
 import { APIResponseOf, UnArray } from '#utils/api'
-import { CharacterChineseNameList, CharacterId } from '#data/vendor/characterId'
+import { CharacterId } from '#data/vendor/characterId'
 import useFrontendApi from '#utils/useFrontendApi'
 import CCIDTable from '#data/ccid'
 
@@ -52,6 +52,7 @@ const CardItem = ({
     } = card
 
     const $v = useTranslations('vendor')
+    const $vc = useTranslations('v-chr')
 
     const maxRarity = Math.max(...rarityData.map((x) => x.rarity))
     const [rarity, setRarity] = useState(maxRarity)
@@ -235,11 +236,9 @@ const CardItem = ({
                             variant="outline"
                             component="a"
                             href={Paths.wiki(
-                                `${
-                                    CharacterChineseNameList[
-                                        card.characterId as CharacterId
-                                    ]
-                                }/卡牌/${cardCcidInfo.ccid}`
+                                `${$vc(card.characterId)}/卡牌/${
+                                    cardCcidInfo.ccid
+                                }`
                             )}
                             target="_blank"
                             rel="noopener"

diff --git a/components/characters/BirthdayCommu.tsx b/components/characters/BirthdayCommu.tsx
@@ -1,23 +1,24 @@
 import { Button, Grid, Group, NativeSelect, Skeleton } from '@mantine/core'
 import { useEffect, useState } from 'react'
+import { useTranslations } from 'next-intl'
 
 import useFrontendApi from '#utils/useFrontendApi'
-import Paths from '#utils/paths'
 import { toVideoLink } from '#components/ExternalVideo'
 import type { BirthdayStoryData } from '#data/birthday.data'
 
-const CommuTypes: Record<keyof BirthdayStoryData, string> = {
-    opening: '开场剧情',
-    phone: '电话剧情',
-    others: '全员祝福',
-}
-
 const BirthdayCommu = ({ charaId }: { charaId: string }) => {
+    const $t = useTranslations('characters')
     const { data, isSuccess } = useFrontendApi('birthdayCommu', {
         charaId,
     })
     const [selectedYear, setSelectedYear] = useState('')
 
+    const CommuTypes: Record<keyof BirthdayStoryData, string> = {
+        opening: $t('bday-opening'),
+        phone: $t('bday-phone'),
+        others: $t('bday-others'),
+    }
+
     const yearList = Object.keys(data ?? {})
 
     useEffect(() => {
@@ -35,11 +36,9 @@ const BirthdayCommu = ({ charaId }: { charaId: string }) => {
     if (yearList.length === 0) {
         return (
             <div>
-                暂无生日剧情翻译信息。请添加到翻译信息到{' '}
-                <a href={Paths.repo('data/birthday.data.ts')}>
-                    data/birthday.data.ts
-                </a>{' '}
-                的 BirthdayCommu[{charaId}] 。
+                {$t('no-bday-traslation', {
+                    charaId,
+                })}
             </div>
         )
     }
@@ -56,7 +55,7 @@ const BirthdayCommu = ({ charaId }: { charaId: string }) => {
                         onChange={(event) =>
                             setSelectedYear(event.currentTarget.value)
                         }
-                        label="选择年份"
+                        label={$t('Year')}
                     />
                 </span>
             </Grid.Col>

diff --git a/components/characters/CharacterItem.tsx b/components/characters/CharacterItem.tsx
@@ -7,20 +7,16 @@ import {
     Skeleton,
     Table,
 } from '@mantine/core'
-import { useTranslations } from 'next-intl'
+import { useLocale, useTranslations } from 'next-intl'
 
-import { HometownIntroductionPageUrl, OrgName } from './const'
+import { HometownIntroductionPageUrl } from './const'
 import SquareColor from './SquareColor'
 import CharacterAnimation from './CharacterAnimation'
 import InGameVoice from './InGameVoice'
 
 import useApi from '#utils/useApi'
 import { APIResponseOf, UnArray } from '#utils/api'
-import {
-    CharacterChineseNameList,
-    CharacterId,
-    PrimaryCharacterIds,
-} from '#data/vendor/characterId'
+import { CharacterId, PrimaryCharacterIds } from '#data/vendor/characterId'
 import Paths from '#utils/paths'
 import { IdolyFashionUrl, IdolyRoomUrl } from '#data/ipcmmu.data'
 import { Idols } from '#data/wikiPages'
@@ -36,6 +32,9 @@ const CharacterItem = ({
     character: UnArray<APIResponseOf<'Character/List'>>
 }) => {
     const $t = useTranslations('characters')
+    const $vc = useTranslations('v-chr')
+    const $vg = useTranslations('v-group')
+    const locale = useLocale()
 
     const { id, characterGroupId, name, enName, color } = character
 
@@ -62,17 +61,15 @@ const CharacterItem = ({
     } = CharacterData[0] ?? {}
 
     const tableItem = [
-        ...(OrgName[characterGroupId]
-            ? [['所属团体', OrgName[characterGroupId]]]
-            : []),
-        ['年龄', age.replace('歳', '岁')],
-        ['CV', $t(cv)],
-        ['生日', birthday],
-        ['身高', height],
-        ['体重', weight],
-        ['星座', $t(zodiacSign)],
+        [$t('Group'), $vg(characterGroupId)],
+        [$t('Age'), $t('age', { age: age.replace('歳', '') })],
+        [$t('CV'), $t(cv)],
+        [$t('Birthday'), birthday],
+        [$t('Height'), height],
+        [$t('Weight'), weight],
+        [$t('Zodiac sign'), $t(zodiacSign)],
         [
-            '学校',
+            $t('School'),
             HometownIntroductionPageUrl[hometown] ? (
                 <a href={HometownIntroductionPageUrl[hometown]}>
                     {$t(hometown)}
@@ -81,10 +78,10 @@ const CharacterItem = ({
                 $t(hometown)
             ),
         ],
-        ['喜欢的东西', $t(favorite)],
-        ['讨厌的东西', $t(unfavorite)],
-        ['习惯手', isLeftHanded ? '左手' : '右手'],
-        ['三围', threeSize],
+        [$t('Like'), $t(favorite)],
+        [$t('Hate'), $t(unfavorite)],
+        [$t('Accustomed hand'), isLeftHanded ? $t('Left') : $t('Right')],
+        [$t('Three size'), threeSize],
     ]
 
     return (
@@ -98,23 +95,28 @@ const CharacterItem = ({
                 }}
             >
                 <b className="text-4xl" lang="zh-hans">
-                    {CharacterChineseNameList[id as CharacterId]}
+                    {$vc(id)}
                 </b>{' '}
                 <span className="text-2xl ml-4" lang="ja">
                     {name}
                 </span>
-                <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
-                    <div className="uppercase text-3xl mt-1 text-gray-600 right-1 top-0 absolute">
+                {/* Hidden for en */}
+                {locale !== 'en' && (
+                    <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
+                        <div className="uppercase text-3xl mt-1 text-gray-600 right-1 top-0 absolute">
+                            {enName}
+                        </div>
+                    </MediaQuery>
+                )}
+            </div>
+            {/* Hidden for en */}
+            {locale !== 'en' && (
+                <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
+                    <div className="uppercase text-2xl mt-1 text-gray-500">
                         {enName}
                     </div>
                 </MediaQuery>
-            </div>
-
-            <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
-                <div className="uppercase text-2xl mt-1 text-gray-500">
-                    {enName}
-                </div>
-            </MediaQuery>
+            )}
 
             {catchphrase && (
                 <Blockquote
@@ -151,7 +153,7 @@ const CharacterItem = ({
                                         </tr>
                                     ))}
                                     <tr>
-                                        <td>代表色</td>
+                                        <td>{$t('Theme color')}</td>
                                         <td>
                                             <SquareColor color={color} />{' '}
                                             {toHashColor(color)}
@@ -160,29 +162,24 @@ const CharacterItem = ({
                                 </tbody>
                             </Table>
                             <Group position="center" className="mt-4">
-                                <a
-                                    href={Paths.mgw(
-                                        CharacterChineseNameList[
-                                            id as CharacterId
-                                        ]
-                                    )}
-                                >
-                                    <Button>萌娘百科条目</Button>
-                                </a>
+                                {/* Chinese only */}
+                                {locale === 'zh-hans' && (
+                                    <a href={Paths.mgw($vc(id))}>
+                                        <Button>萌娘百科条目</Button>
+                                    </a>
+                                )}
                                 {IdolyFashionUrl[id as CharacterId] && (
                                     <a
                                         href={
                                             IdolyFashionUrl[id as CharacterId]
                                         }
                                     >
-                                        <Button>
-                                            服装介绍 / IDOLY FASHION
-                                        </Button>
+                                        <Button>{$t('IDOLY FASHION')}</Button>
                                     </a>
                                 )}
                                 {IdolyRoomUrl[id as CharacterId] && (
                                     <a href={IdolyRoomUrl[id as CharacterId]}>
-                                        <Button>房间介绍 / IDOLY ROOM</Button>
+                                        <Button>{$t('IDOLY ROOM')}</Button>
                                     </a>
                                 )}
                             </Group>
@@ -201,13 +198,13 @@ const CharacterItem = ({
             </Grid>
             {!BirthdayCommuException.includes(id) && (
                 <>
-                    <h2>生日剧情</h2>
+                    <h2>{$t('Birthday stories')}</h2>
                     <BirthdayCommu charaId={id} />
                 </>
             )}
             {!VoiceException.includes(id) && (
                 <>
-                    <h2>语音</h2>
+                    <h2>{$t('In-game voices')}</h2>
                     <InGameVoice charaId={id} />
                 </>
             )}

diff --git a/components/characters/InGameVoice.tsx b/components/characters/InGameVoice.tsx
@@ -1,18 +1,20 @@
 import { Grid, NativeSelect } from '@mantine/core'
 import { useState } from 'react'
+import { useTranslations } from 'next-intl'
 
 import AssetAudio from '#components/AssetAudio'
 
-const VoiceSlugs: [string, string][] = [
-    ['QualiArts', 'sud_vo_cmn_%s_corp-01'],
-    ['标题', 'sud_vo_other_%s_title-01'],
-    ['标题后半', 'sud_vo_other_%s_title-shout-01'],
-    ['礼物', 'sud_vo_cmn_%s_transit-gift-top'],
-    ['商店', 'sud_vo_cmn_%s_transit-shop-top'],
-]
-
 const InGameVoice = ({ charaId }: { charaId: string }) => {
+    const $t = useTranslations('characters')
     const charaShortId = charaId.replace(/^char-/, '')
+
+    const VoiceSlugs: [string, string][] = [
+        [$t('QualiArts'), 'sud_vo_cmn_%s_corp-01'],
+        [$t('Title'), 'sud_vo_other_%s_title-01'],
+        [$t('After title'), 'sud_vo_other_%s_title-shout-01'],
+        [$t('Gifts'), 'sud_vo_cmn_%s_transit-gift-top'],
+        [$t('Store'), 'sud_vo_cmn_%s_transit-shop-top'],
+    ]
     const [selectedVoice, setSelectedVoice] = useState(VoiceSlugs[0][0])
 
     const [, voiceSlugSuffix] =
@@ -32,7 +34,7 @@ const InGameVoice = ({ charaId }: { charaId: string }) => {
                         onChange={(event) =>
                             setSelectedVoice(event.currentTarget.value)
                         }
-                        label="选择音频"
+                        label={$t('Audio type')}
                     />
                 </span>
             </Grid.Col>

diff --git a/components/characters/const.ts b/components/characters/const.ts
@@ -1,12 +1,5 @@
 import Paths from '#utils/paths'
 
-export const OrgName: Record<string, string> = {
-    character_group_1: '月光风暴',
-    character_group_2: 'SUNNY PEACE',
-    character_group_3: 'TRINITYAiLE',
-    character_group_4: 'LizNoir',
-}
-
 export const HometownIntroductionPageUrl: Record<string, string> = {
     '私立 星見高校': Paths.ipcommu('o-009'),
     '公立 光ヶ崎高校': Paths.ipcommu('o-010'),

diff --git a/components/messages/MessageItem.tsx b/components/messages/MessageItem.tsx
@@ -2,8 +2,9 @@ import { faUserCircle } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Group } from '@mantine/core'
 import { ReactNode } from 'react'
+import { useTranslations } from 'next-intl'
 
-import { CharacterChineseNameList, CharacterId } from '#data/vendor/characterId'
+import { CharacterId } from '#data/vendor/characterId'
 import AssetImage from '#components/AssetImage'
 
 const MessageItem = ({
@@ -15,6 +16,8 @@ const MessageItem = ({
     characterId: CharacterId | string
     user: 'self' | 'others'
 }) => {
+    const $vc = useTranslations('v-chr')
+
     const isSelf = user === 'self'
     const userIcon =
         user === 'others' ? (
@@ -35,9 +38,7 @@ const MessageItem = ({
         >
             {userIcon}
             <div>
-                <div className="text-white mb-1">
-                    {CharacterChineseNameList[characterId as CharacterId]}
-                </div>
+                <div className="text-white mb-1">{$vc(characterId)}</div>
                 <div
                     className={`text-black p-2 rounded-2xl ${
                         isSelf