Translate elf pages

public/locales/en-US/common.json

@@ -11,7 +11,8 @@
     "honkai-3rd": "Honkai 3rd",
     "battlesuits": "Battlesuits",
     "stigmata": "Stigmata",
-    "weapons": "Weapons"
+    "weapons": "Weapons",
+    "elfs": "ELFs"
   },
   "battlesuits-list": {
     "heading": "Battlesuits",
@@ -50,5 +51,14 @@
     "lance": "Lance",
     "gauntlet": "Gauntlet",
     "bow": "Bow"
+  },
+  "elfs-list": {
+    "elfs": "ELFs"
+  },
+  "elfs-show": {
+    "passive": "Passive",
+    "basic": "Basic",
+    "ultimate": "Ultimate",
+    "team": "Team"
   }
 }

public/locales/ko-KR/common.json

@@ -14,7 +14,8 @@
     "top": "(상)",
     "mid": "(중)",
     "bot": "(하)",
-    "weapons": "무기"
+    "weapons": "무기",
+    "elfs": "무장인형"
   },
   "battlesuits-list": {
     "heading": "발키리",
@@ -53,5 +54,14 @@
     "lance": "랜스",
     "gauntlet": "건틀릿",
     "bow": "활"
+  },
+  "elfs-list": {
+    "elfs": "무장인형"
+  },
+  "elfs-show": {
+    "passive": "패시브",
+    "basic": "기본 공격",
+    "ultimate": "필살기",
+    "team": "팀"
   }
 }

src/components/molecules/ElfCard.tsx

@@ -1,16 +1,21 @@
 /** @jsxImportSource theme-ui */
 
 import { Box, Card, Text } from '@theme-ui/components'
+import { useRouter } from 'next/router'
 import { ElfData } from '../../lib/honkai3rd/elfs'
+import { translate } from '../../lib/i18n'
 import PageLink from '../atoms/PageLink'
 import SquareImageBox from '../atoms/SquareImageBox'
 
 interface ElfCardProps {
-  elf: Pick<ElfData, 'id' | 'name'>
+  elf: Pick<ElfData, 'id' | 'name' | 'krName'>
   hidden?: boolean
 }
 
 const ElfCard = ({ elf }: ElfCardProps) => {
+  const { locale } = useRouter()
+  const elfName = translate(locale, { 'ko-KR': elf.krName }, elf.name)
+
   return (
     <Card
       sx={{
@@ -24,7 +29,7 @@ const ElfCard = ({ elf }: ElfCardProps) => {
     >
       <PageLink href={`/honkai3rd/elfs/${elf.id}`}>
         <SquareImageBox
-          alt={elf.name}
+          alt={elfName}
           src={`/assets/honkai3rd/elfs/icon-${elf.id}.png`}
           size={[120, 140]}
         />
@@ -37,7 +42,7 @@ const ElfCard = ({ elf }: ElfCardProps) => {
             textAlign: 'center',
           }}
         >
-          <Text>{elf.name}</Text>
+          <Text>{elfName}</Text>
         </Box>
       </PageLink>
     </Card>

src/lib/honkai3rd/elfs.ts

@@ -1,13 +1,16 @@
 export interface ElfSkill {
   type: 'passive' | 'basic' | 'ultimate' | 'team'
   name: string
+  krName?: string
   requiredRank: number
   description: string
+  krDescription?: string
 }
 
 export interface ElfData {
   id: string
   name: string
+  krName?: string
   baseRank: number
   features: string[]
   skillRows: [ElfSkill[], ElfSkill[], ElfSkill[], ElfSkill[]]

src/pages/honkai3rd/elfs/[elfId].tsx

@@ -8,15 +8,20 @@ import SecondaryLabel from '../../../components/atoms/SecondaryLabel'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { ElfData } from '../../../lib/honkai3rd/elfs'
-import { capitalize } from '../../../lib/string'
 import { getElfById, listElfs } from '../../../server/data/honkai3rd/elfs'
 import { generateI18NPaths, getI18NProps } from '../../../server/i18n'
-
+import { translate, useTranslation } from '../../../lib/i18n'
+import { useRouter } from 'next/router'
 interface ElfShowPageProps {
   elf: ElfData
 }
 
 const ElfShowPage = ({ elf }: ElfShowPageProps) => {
+  const { locale } = useRouter()
+  const { t } = useTranslation()
+
+  const elfName = translate(locale, { 'ko-KR': elf.krName }, elf.name)
+
   return (
     <Box>
       <Honkai3rdNavigator />
@@ -24,16 +29,16 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
       <Box p={3}>
         <Breadcrumb
           items={[
-            { href: '/honkai3rd', label: 'Honkai 3rd' },
+            { href: '/honkai3rd', label: t('breadcrumb.honkai-3rd') },
-            { href: '/honkai3rd/elfs', label: 'ELFs' },
+            { href: '/honkai3rd/elfs', label: t('breadcrumb.elfs') },
             {
               href: `/honkai3rd/elfs/${elf.id}`,
-              label: elf.name,
+              label: elfName,
             },
           ]}
         />
 
-        <Heading as='h1'>{elf.name}</Heading>
+        <Heading as='h1'>{elfName}</Heading>
 
         <Box mb={3}>
           <Box
@@ -78,9 +83,11 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
                         as={columnIndex === 0 ? 'h2' : 'h3'}
                         sx={{ mb: 1 }}
                       >
-                        {item.name}
+                        {translate(locale, { 'ko-KR': item.krName }, item.name)}
                       </Heading>
-                      <SecondaryLabel>{capitalize(item.type)}</SecondaryLabel>
+                      <SecondaryLabel>
+                        {t(`elfs-show.${item.type}`)}
+                      </SecondaryLabel>
                     </Box>
                     <Paragraph
                       sx={{
@@ -89,7 +96,11 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
                         '&:last-child': { borderBottom: 'none' },
                       }}
                     >
-                      {item.description}
+                      {translate(
+                        locale,
+                        { 'ko-KR': item.krDescription },
+                        item.description
+                      )}
                     </Paragraph>
                   </React.Fragment>
                 )

src/pages/honkai3rd/elfs/index.tsx

@@ -8,12 +8,15 @@ import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator
 import { ElfData } from '../../../lib/honkai3rd/elfs'
 import { getI18NProps } from '../../../server/i18n'
 import { listElfs } from '../../../server/data/honkai3rd/elfs'
+import { useTranslation } from '../../../lib/i18n'
 
 interface ElfListPageProps {
-  elfs: Pick<ElfData, 'id' | 'name'>[]
+  elfs: Pick<ElfData, 'id' | 'name' | 'krName'>[]
 }
 
 const ElfListPage = ({ elfs }: ElfListPageProps) => {
+  const { t } = useTranslation()
+
   return (
     <Box>
       <Honkai3rdNavigator />
@@ -21,12 +24,12 @@ const ElfListPage = ({ elfs }: ElfListPageProps) => {
       <Box p={3}>
         <Breadcrumb
           items={[
-            { href: '/honkai3rd', label: 'Honkai 3rd' },
+            { href: '/honkai3rd', label: t('breadcrumb.honkai-3rd') },
-            { href: '/honkai3rd/elfs', label: 'ELFs' },
+            { href: '/honkai3rd/elfs', label: t('breadcrumb.elfs') },
           ]}
         />
 
-        <Heading as='h1'>ELFs</Heading>
+        <Heading as='h1'>{t('elfs-list.elfs')}</Heading>
 
         <Flex
           sx={{
@@ -48,7 +51,7 @@ export default ElfListPage
 export async function getStaticProps({ locale }: NextPageContext) {
   return {
     props: {
-      elfs: listElfs().map((elf) => pick(['id', 'name'], elf)),
+      elfs: listElfs().map((elf) => pick(['id', 'name', 'krName'], elf)),
       ...(await getI18NProps(locale)),
     },
   }

src/server/data/honkai3rd/elfs.ts

@@ -1,4 +1,4 @@
-import { readdirSync, readJsonFileSync } from '../fs'
+import { readdirSync, readFileSync, readJsonFileSync } from '../fs'
 import { compareVersion } from '../../../lib/string'
 import { ElfData } from '../../../lib/honkai3rd/elfs'
 
@@ -8,6 +8,28 @@ const elfDataList = elfFileNameList
     const filePathname = 'honkai3rd/elfs/' + fileName
     const data = readJsonFileSync(filePathname) as ElfData
 
+    const krDataFilePath = `honkai3rd/ko-KR/elfs/${data.id}.md`
+    try {
+      const krData = parseElfData(readFileSync(krDataFilePath).toString())
+      data.krName = krData.name
+      data.skillRows.forEach((skillRow, skillRowIndex) => {
+        skillRow.forEach((skill, skillIndex) => {
+          if (krData.skillRows?.[skillRowIndex]?.[skillIndex]?.name != null) {
+            skill.krName = krData.skillRows?.[skillRowIndex]?.[skillIndex]?.name
+          }
+          if (
+            krData.skillRows?.[skillRowIndex]?.[skillIndex]?.description != null
+          ) {
+            skill.krDescription =
+              krData.skillRows?.[skillRowIndex]?.[skillIndex]?.description
+          }
+        })
+      })
+    } catch (error) {
+      // console.warn('Failed to read', krDataFilePath)
+      // console.warn(error)
+    }
+
     return data
   })
   .sort((a, b) => {
@@ -37,3 +59,24 @@ export function listElfs() {
 export function getElfById(id: string) {
   return elfMap.get(id)
 }
+
+function parseElfData(rawData: string) {
+  const [name, ...skillRowSections] = rawData.split('\n## ')
+  const skillRows = skillRowSections.map((skillRowSection) => {
+    const skillSections = skillRowSection.split('\n### ')
+    return skillSections.map((skillSection) => {
+      const [name, description] = skillSection
+        .split('\n\n')
+        .map((data) => data.replace(/#+\s/, '').trim())
+      return {
+        name,
+        description,
+      }
+    })
+  })
+
+  return {
+    name: name.replace(/#+\s/, '').trim(),
+    skillRows,
+  }
+}