Translate weapon list page

src/components/molecules/WeaponCard.tsx

@@ -1,15 +1,20 @@
 /** @jsxImportSource theme-ui */
 import { Box, Card, Text } from '@theme-ui/components'
+import { useRouter } from 'next/router'
 import { WeaponData } from '../../lib/honkai3rd/weapons'
+import { translate } from '../../lib/i18n'
 import PageLink from '../atoms/PageLink'
 import SquareImageBox from '../atoms/SquareImageBox'
 
 interface WeaponCardProps {
-  weapon: Pick<WeaponData, 'id' | 'name' | 'rarity'>
+  weapon: Pick<WeaponData, 'id' | 'name' | 'rarity' | 'krName'>
   hidden?: boolean
 }
 
 const WeaponCard = ({ weapon, hidden }: WeaponCardProps) => {
+  const { locale } = useRouter()
+  const weaponName = translate(locale, { 'ko-KR': weapon.krName }, weapon.name)
+
   return (
     <Card
       className={hidden ? 'hidden' : ''}
@@ -25,7 +30,7 @@ const WeaponCard = ({ weapon, hidden }: WeaponCardProps) => {
       <PageLink href={`/honkai3rd/weapons/${weapon.id}`}>
         <SquareImageBox
           size={100}
-          alt={weapon.name}
+          alt={weaponName}
           src={`/assets/honkai3rd/weapons/${weapon.id}.png`}
         />
         <Box
@@ -37,7 +42,7 @@ const WeaponCard = ({ weapon, hidden }: WeaponCardProps) => {
             textAlign: 'center',
           }}
         >
-          <Text>{weapon.name}</Text>
+          <Text>{weaponName}</Text>
         </Box>
         <Box sx={{ fontSize: 1, textAlign: 'center' }}>
           {'⭐'.repeat(weapon.rarity)}

src/lib/honkai3rd/weapons.ts

@@ -1,11 +1,14 @@
 export interface WeaponSkill {
   name: string
+  krName?: string
   description: string
+  krDescription?: string
 }
 
 export interface WeaponData {
   id: string
   name: string
+  krName?: string
   atk: number
   crt: number
   category:

src/pages/honkai3rd/weapons/index.tsx

@@ -11,10 +11,12 @@ import { WeaponData } from '../../../lib/honkai3rd/weapons'
 import WeaponCard from '../../../components/molecules/WeaponCard'
 import { getI18NProps } from '../../../server/i18n'
 import { NextPageContext } from 'next'
+import { useTranslation } from 'next-i18next'
+import { translate } from '../../../lib/i18n'
 
 type WeaponListItemData = Pick<
   WeaponData,
-  'id' | 'name' | 'rarity' | 'category'
+  'id' | 'name' | 'rarity' | 'category' | 'krName'
 >
 
 interface WeaponListPageProps {
@@ -22,20 +24,21 @@ interface WeaponListPageProps {
 }
 
 const weaponFilterOptions = [
-  { value: 'all', label: 'All' },
-  { value: 'pistol', label: 'Pistols' },
-  { value: 'katana', label: 'Katanas' },
-  { value: 'cannon', label: 'Cannons' },
-  { value: 'greatsword', label: 'Greatswords' },
-  { value: 'cross', label: 'Crosses' },
-  { value: 'gauntlet', label: 'Gauntlets' },
-  { value: 'scythe', label: 'Scythes' },
-  { value: 'lance', label: 'Lances' },
-  { value: 'bow', label: 'Bows' },
+  { value: 'all', label: 'All', krLabel: '전체' },
+  { value: 'pistol', label: 'Pistols', krLabel: '쌍권총' },
+  { value: 'katana', label: 'Katanas', krLabel: '태도' },
+  { value: 'cannon', label: 'Cannons', krLabel: '대포' },
+  { value: 'greatsword', label: 'Greatswords', krLabel: '대검' },
+  { value: 'cross', label: 'Crosses', krLabel: '십자가' },
+  { value: 'gauntlet', label: 'Gauntlets', krLabel: '건틀릿' },
+  { value: 'scythe', label: 'Scythes', krLabel: '낫' },
+  { value: 'lance', label: 'Lances', krLabel: '랜스' },
+  { value: 'bow', label: 'Bows', krLabel: '활' },
 ]
 
 const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
-  const { query } = useRouter()
+  const { query, locale } = useRouter()
+  const { t } = useTranslation()
 
   const filter = useMemo(() => {
     if (query.filter == null) {
@@ -64,17 +67,17 @@ const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
           ]}
         />
 
-        <Heading as='h1'>Weapons</Heading>
+        <Heading as='h1'>{t('weapons-list.weapons')}</Heading>
         <Box>
-          <Heading as='h3'>Filter by Category</Heading>
+          <Heading as='h3'>{t('weapons-list.filter-by-category')}</Heading>
           <Flex mb={2} sx={{ flexWrap: 'wrap' }}>
-            {weaponFilterOptions.map(({ value, label }) => {
+            {weaponFilterOptions.map(({ value, label, krLabel }) => {
               return (
                 <FilterButton
                   key={value}
                   active={value === filter}
                   value={value}
-                  label={label}
+                  label={translate(locale, { 'ko-KR': krLabel }, label)}
                   m={1}
                 />
               )
@@ -100,7 +103,7 @@ export async function getStaticProps({ locale }: NextPageContext) {
   return {
     props: {
       weaponDataList: listWeapons().map((weapon) => {
-        return pick(['name', 'id', 'rarity', 'category'], weapon)
+        return pick(['name', 'id', 'rarity', 'category', 'krName'], weapon)
       }),
       ...(await getI18NProps(locale)),
     },

src/server/data/honkai3rd/weapons.ts

@@ -1,4 +1,4 @@
-import { readdirSync, readJsonFileSync } from '../fs'
+import { readdirSync, readFileSync, readJsonFileSync } from '../fs'
 import { compareVersion } from '../../../lib/string'
 import { WeaponData } from '../../../lib/honkai3rd/weapons'
 
@@ -8,6 +8,20 @@ const weaponDataList = weaponsFileNameList
     const filePathname = 'honkai3rd/weapons/' + fileName
     const data = readJsonFileSync(filePathname) as WeaponData
 
+    const krDataFilePath = `honkai3rd/ko-KR/weapons/${data.id}.md`
+    try {
+      const krData = parseWeaponData(readFileSync(krDataFilePath).toString())
+
+      data.krName = krData.name
+      data.skills.forEach((skill, index) => {
+        skill.krName = krData.skills[index].name
+        skill.krDescription = krData.skills[index].description
+      })
+    } catch (error) {
+      // console.warn('Failed to read', krDataFilePath)
+      // console.warn(error)
+    }
+
     return data
   })
   .sort((a, b) => {
@@ -41,3 +55,22 @@ export function listWeapons() {
 export function getWeaponById(id: string) {
   return weaponMap.get(id)
 }
+
+function parseWeaponData(rawData: string) {
+  const [name, ...skillSections] = rawData
+    .split('## ')
+    .map((data) => data.replace(/#+\s/, '').trim())
+  const skills = skillSections.map((skillSection) => {
+    const [skillName, skillDescription] = skillSection.split('\n\n')
+
+    return {
+      name: skillName,
+      description: skillDescription,
+    }
+  })
+
+  return {
+    name,
+    skills,
+  }
+}