Apply i18n for battlesuit show page

This commit is contained in:
Sakura Knoll
2022-01-06 13:04:44 +09:00 Unverified
parent f2fe200af5
commit e8c54284ae
3 changed files with 111 additions and 7 deletions
+1 -1
View File
@@ -2,7 +2,7 @@ export interface BattlesuitSkill {
name: string name: string
krName?: string krName?: string
description: string description: string
krDescription: string krDescription?: string
requiredRank?: string requiredRank?: string
} }
@@ -124,37 +124,44 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
<BattlesuitSkillGroupCard <BattlesuitSkillGroupCard
heading={t('battlesuit-show.leader')} heading={t('battlesuit-show.leader')}
skillGroup={battlesuit.leader} skillGroup={battlesuit.leader}
locale={locale}
/> />
<BattlesuitSkillGroupCard <BattlesuitSkillGroupCard
heading={t('battlesuit-show.passive')} heading={t('battlesuit-show.passive')}
skillGroup={battlesuit.passive} skillGroup={battlesuit.passive}
locale={locale}
/> />
<BattlesuitSkillGroupCard <BattlesuitSkillGroupCard
heading={t('battlesuit-show.evasion')} heading={t('battlesuit-show.evasion')}
skillGroup={battlesuit.evasion} skillGroup={battlesuit.evasion}
locale={locale}
/> />
<BattlesuitSkillGroupCard <BattlesuitSkillGroupCard
heading={t('battlesuit-show.special-attack')} heading={t('battlesuit-show.special-attack')}
skillGroup={battlesuit.special} skillGroup={battlesuit.special}
locale={locale}
/> />
<BattlesuitSkillGroupCard <BattlesuitSkillGroupCard
heading={t('battlesuit-show.ultimate')} heading={t('battlesuit-show.ultimate')}
skillGroup={battlesuit.ultimate} skillGroup={battlesuit.ultimate}
locale={locale}
/> />
<BattlesuitSkillGroupCard <BattlesuitSkillGroupCard
heading={t('battlesuit-show.basic-attack')} heading={t('battlesuit-show.basic-attack')}
skillGroup={battlesuit.basic} skillGroup={battlesuit.basic}
locale={locale}
/> />
{battlesuit.sp != null && ( {battlesuit.sp != null && (
<BattlesuitSkillGroupCard <BattlesuitSkillGroupCard
heading={t('battlesuit-show.sp-skill')} heading={t('battlesuit-show.sp-skill')}
skillGroup={battlesuit.sp} skillGroup={battlesuit.sp}
locale={locale}
/> />
)} )}
</Box> </Box>
@@ -191,11 +198,13 @@ export async function getStaticPaths() {
interface BattlesuitSkillGroupCardProps { interface BattlesuitSkillGroupCardProps {
heading: string heading: string
skillGroup: BattlesuitSkillGroup skillGroup: BattlesuitSkillGroup
locale?: string
} }
const BattlesuitSkillGroupCard = ({ const BattlesuitSkillGroupCard = ({
heading, heading,
skillGroup, skillGroup,
locale,
}: BattlesuitSkillGroupCardProps) => { }: BattlesuitSkillGroupCardProps) => {
return ( return (
<Card mb={3}> <Card mb={3}>
@@ -206,21 +215,39 @@ const BattlesuitSkillGroupCard = ({
}} }}
> >
<Heading as='h2' mb={1}> <Heading as='h2' mb={1}>
{skillGroup.core.name} {translate(
locale,
{ 'ko-KR': skillGroup.core.krName },
skillGroup.core.name
)}
</Heading> </Heading>
<SecondaryLabel>{heading}</SecondaryLabel> <SecondaryLabel>{heading}</SecondaryLabel>
</Box> </Box>
<Paragraph p={2} sx={{ whiteSpace: 'pre-wrap', borderBottom: 'default' }}> <Paragraph p={2} sx={{ whiteSpace: 'pre-wrap', borderBottom: 'default' }}>
{skillGroup.core.description} {translate(
locale,
{ 'ko-KR': skillGroup.core.krDescription },
skillGroup.core.description
)}
</Paragraph> </Paragraph>
{skillGroup.subskills.map((subskill) => { {skillGroup.subskills.map((subskill) => {
const skillName = translate(
locale,
{ 'ko-KR': subskill.krName },
subskill.name
)
const skillDescription = translate(
locale,
{ 'ko-KR': subskill.krDescription },
subskill.description
)
return ( return (
<React.Fragment key={subskill.name}> <React.Fragment key={subskill.name}>
<Heading as='h3' p={2} m={0} sx={{ borderBottom: 'default' }}> <Heading as='h3' p={2} m={0} sx={{ borderBottom: 'default' }}>
<Flex sx={{ alignItems: 'center' }}> <Flex sx={{ alignItems: 'center' }}>
<Text>{subskill.name}</Text> <Text>{skillName}</Text>
{subskill.requiredRank != null ? ( {subskill.requiredRank != null ? (
/^[0-9]/.test(subskill.requiredRank) ? ( /^[0-9]/.test(subskill.requiredRank) ? (
<Box <Box
@@ -250,7 +277,7 @@ const BattlesuitSkillGroupCard = ({
'&:last-child': { borderBottom: 'none' }, '&:last-child': { borderBottom: 'none' },
}} }}
> >
{subskill.description} {skillDescription}
</Paragraph> </Paragraph>
</React.Fragment> </React.Fragment>
) )
+79 -2
View File
@@ -1,6 +1,9 @@
import { readdirSync, readJsonFileSync } from '../fs' import { readdirSync, readFileSync, readJsonFileSync } from '../fs'
import { compareVersion } from '../../../lib/string' import { compareVersion } from '../../../lib/string'
import { BattlesuitData } from '../../../lib/honkai3rd/battlesuits' import {
BattlesuitData,
BattlesuitSkillGroup,
} from '../../../lib/honkai3rd/battlesuits'
const battlesuitsFileNameList = readdirSync('honkai3rd/battlesuits') const battlesuitsFileNameList = readdirSync('honkai3rd/battlesuits')
const battlesuitDataList = battlesuitsFileNameList const battlesuitDataList = battlesuitsFileNameList
@@ -8,6 +11,21 @@ const battlesuitDataList = battlesuitsFileNameList
const filePathname = 'honkai3rd/battlesuits/' + fileName const filePathname = 'honkai3rd/battlesuits/' + fileName
const data = readJsonFileSync(filePathname) as BattlesuitData const data = readJsonFileSync(filePathname) as BattlesuitData
const krDataFilePath = `honkai3rd/battlesuits-kr/${data.id}.md`
try {
const krData = parseSkillData(readFileSync(krDataFilePath).toString())
data.krName = krData.name
assignKrDataToSkill(data.leader, krData.leader)
assignKrDataToSkill(data.passive, krData.passive)
assignKrDataToSkill(data.evasion, krData.evasion)
assignKrDataToSkill(data.special, krData.special)
assignKrDataToSkill(data.ultimate, krData.ultimate)
assignKrDataToSkill(data.basic, krData.basic)
} catch (error) {
// console.warn('Failed to read', krDataFilePath)
// console.warn(error)
}
return data return data
}) })
.sort((a, b) => { .sort((a, b) => {
@@ -33,3 +51,62 @@ export function listBattlesuits() {
export function getBattlesuitById(id: string) { export function getBattlesuitById(id: string) {
return battlesuitMap.get(id) return battlesuitMap.get(id)
} }
function parseSkillData(rawData: string) {
const [
nameSection,
leaderSection,
passiveSection,
evasionSection,
specialSection,
ultimateSection,
basicSection,
] = rawData.split('\n## ')
const name = nameSection.replace('#', '').trim()
return {
name,
leader: parseSkillSection(leaderSection),
passive: parseSkillSection(passiveSection),
evasion: parseSkillSection(evasionSection),
special: parseSkillSection(specialSection),
ultimate: parseSkillSection(ultimateSection),
basic: parseSkillSection(basicSection),
}
}
function parseSkillSection(rawData: string) {
const [coreSection, ...subskillSections] = rawData.split('\n### ')
const [coreName, ...descriptionLines] = coreSection.trim().split('\n')
return {
core: {
name: coreName,
description: descriptionLines.join('\n').trim(),
},
subskills: subskillSections.map((subskillSection) => {
const [subskillName, ...subskillDescriptionLines] = subskillSection
.trim()
.split('\n')
return {
name: subskillName,
description: subskillDescriptionLines.join('\n').trim(),
}
}),
}
}
function assignKrDataToSkill(
skillGroup: BattlesuitSkillGroup,
krDataSkillGroup: BattlesuitSkillGroup
) {
skillGroup.core.krName = krDataSkillGroup.core.name
skillGroup.core.krDescription = krDataSkillGroup.core.description
skillGroup.subskills.forEach((subskill, index) => {
subskill.krName = krDataSkillGroup.subskills[index].name
subskill.krDescription = krDataSkillGroup.subskills[index].description
})
}