Refactor battlesuits data

This commit is contained in:
Sakura Knoll
2022-07-04 08:43:35 +09:00 Unverified
parent 80c95eabd3
commit 3388151c42
13 changed files with 101 additions and 289 deletions
@@ -59,12 +59,6 @@ const BattlesuitShowPage = ({
const { t } = useTranslation()
const { locale } = useRouter()
const battlesuitName = translate(
locale,
{ ['ko-KR']: battlesuit.krName },
battlesuit.name
)
const { label: valkyrieLabel, krLabel } = valkyries.find(
(aValkyrie) => aValkyrie.value === battlesuit.valkyrie
) || { label: battlesuit.valkyrie, krLabel: battlesuit.valkyrie }
@@ -85,7 +79,7 @@ const BattlesuitShowPage = ({
return (
<Honkai3rdLayout>
<Head
title={`${battlesuitName} - ${t('common.honkai-3rd')} - ${t(
title={`${battlesuit.name} - ${t('common.honkai-3rd')} - ${t(
'common.abyss-lab'
)}`}
description={`${t('common.honkai-3rd')} ${t(
@@ -116,12 +110,12 @@ const BattlesuitShowPage = ({
},
{
href: `/honkai3rd/battlesuits/${battlesuit.id}`,
label: battlesuitName,
label: battlesuit.name,
},
]}
/>
<Heading as='h1'>{battlesuitName}</Heading>
<Heading as='h1'>{battlesuit.name}</Heading>
<Box mb={3}>
<Box
@@ -133,7 +127,7 @@ const BattlesuitShowPage = ({
}}
>
<Image
alt={battlesuitName}
alt={battlesuit.name}
src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/${battlesuit.id}.png`}
width={400}
height={400}
@@ -239,44 +233,37 @@ const BattlesuitShowPage = ({
<BattlesuitSkillGroupCard
heading={t('battlesuit-show.leader')}
skillGroup={battlesuit.leader}
locale={locale}
/>
<BattlesuitSkillGroupCard
heading={t('battlesuit-show.passive')}
skillGroup={battlesuit.passive}
locale={locale}
/>
<BattlesuitSkillGroupCard
heading={t('battlesuit-show.evasion')}
skillGroup={battlesuit.evasion}
locale={locale}
/>
<BattlesuitSkillGroupCard
heading={t('battlesuit-show.special-attack')}
skillGroup={battlesuit.special}
locale={locale}
/>
<BattlesuitSkillGroupCard
heading={t('battlesuit-show.ultimate')}
skillGroup={battlesuit.ultimate}
locale={locale}
/>
<BattlesuitSkillGroupCard
heading={t('battlesuit-show.basic-attack')}
skillGroup={battlesuit.basic}
locale={locale}
/>
{battlesuit.sp != null && (
<BattlesuitSkillGroupCard
heading={t('battlesuit-show.sp-skill')}
skillGroup={battlesuit.sp}
locale={locale}
/>
)}
</Box>
@@ -290,7 +277,7 @@ export async function getStaticProps({
params,
locale,
}: NextPageContext & { params: { battlesuitId: string } }) {
const battlesuit = getBattlesuitById(params.battlesuitId)!
const battlesuit = getBattlesuitById(params.battlesuitId, locale)!
const { weaponIds, stigmataIds } = (battlesuit.equipment || []).reduce<{
weaponIds: string[]
stigmataIds: string[]
@@ -336,13 +323,11 @@ export async function getStaticPaths() {
interface BattlesuitSkillGroupCardProps {
heading: string
skillGroup: BattlesuitSkillGroup
locale?: string
}
const BattlesuitSkillGroupCard = ({
heading,
skillGroup,
locale,
}: BattlesuitSkillGroupCardProps) => {
return (
<Card mb={3}>
@@ -353,39 +338,21 @@ const BattlesuitSkillGroupCard = ({
}}
>
<Heading as='h2' mb={1}>
{translate(
locale,
{ 'ko-KR': skillGroup.core.krName },
skillGroup.core.name
)}
{skillGroup.core.name}
</Heading>
<SecondaryLabel>{heading}</SecondaryLabel>
</Box>
<Paragraph p={2} sx={{ whiteSpace: 'pre-wrap', borderBottom: 'default' }}>
{translate(
locale,
{ 'ko-KR': skillGroup.core.krDescription },
skillGroup.core.description
)}
{skillGroup.core.description}
</Paragraph>
{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 (
<React.Fragment key={subskill.name}>
<Heading as='h3' p={2} m={0} sx={{ borderBottom: 'default' }}>
<Flex sx={{ alignItems: 'center' }}>
<Text>{skillName}</Text>
<Text>{subskill.name}</Text>
{subskill.requiredRank != null ? (
/^[0-9]/.test(subskill.requiredRank) ? (
<Box
@@ -415,7 +382,7 @@ const BattlesuitSkillGroupCard = ({
'&:last-child': { borderBottom: 'none' },
}}
>
{skillDescription}
{subskill.description}
</Paragraph>
</React.Fragment>
)
+10 -8
View File
@@ -1,6 +1,5 @@
/** @jsxImportSource theme-ui */
import { Box, Heading, Flex, Button } from '@theme-ui/components'
import { pick } from 'ramda'
import { useCallback, useMemo, useState } from 'react'
import FilterButton from '../../../components/atoms/FilterButton'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
@@ -21,7 +20,7 @@ import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
type BattlesuitListItemData = Pick<
BattlesuitData,
'id' | 'name' | 'krName' | 'features' | 'type' | 'valkyrie'
'id' | 'name' | 'features' | 'type' | 'valkyrie'
>
interface BattlesuitListPageProps {
@@ -171,12 +170,15 @@ export default BattlesuitListPage
export async function getStaticProps({ locale }: NextPageContext) {
return {
props: {
battlesuits: listBattlesuits().map((battlesuit) =>
pick(
['id', 'name', 'krName', 'features', 'type', 'valkyrie'],
battlesuit
)
),
battlesuits: listBattlesuits().map((battlesuit) => {
return {
id: battlesuit.id,
name: battlesuit.name,
features: battlesuit.features,
type: battlesuit.type,
valikyrie: battlesuit.valkyrie,
}
}),
...(await getI18NProps(locale)),
},
}
@@ -5,8 +5,7 @@ import Breadcrumb from '../../../../components/organisms/Breadcrumb'
import { BattlesuitData } from '../../../../lib/honkai3rd/battlesuits'
import { generateI18NPaths, getI18NProps } from '../../../../server/i18n'
import { getBattlesuitById } from '../../../../server/data/honkai3rd/battlesuits'
import { translate, useTranslation } from '../../../../lib/i18n'
import { useRouter } from 'next/router'
import { useTranslation } from '../../../../lib/i18n'
import Head from '../../../../components/atoms/Head'
import { assetsBucketBaseUrl } from '../../../../lib/consts'
import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
@@ -38,18 +37,10 @@ const BattlesuitShowPage = ({
signetSet,
}: BattlesuitShowPageProps) => {
const { t } = useTranslation()
const { locale } = useRouter()
const battlesuitName = translate(
locale,
{ ['ko-KR']: battlesuit.krName },
battlesuit.name
)
return (
<Honkai3rdLayout>
<Head
title={`${battlesuitName} (${t('common.elysian-realm')}) - ${t(
title={`${battlesuit.name} (${t('common.elysian-realm')}) - ${t(
'common.honkai-3rd'
)} - ${t('common.abyss-lab')}`}
description={`${t('common.honkai-3rd')} ${t(
@@ -67,12 +58,12 @@ const BattlesuitShowPage = ({
},
{
href: `/honkai3rd/elysian-realm/battlesuits/${battlesuit.id}`,
label: battlesuitName,
label: battlesuit.name,
},
]}
/>
<Heading as='h1'>{battlesuitName}</Heading>
<Heading as='h1'>{battlesuit.name}</Heading>
<Box mb={3}>
<Box
@@ -84,7 +75,7 @@ const BattlesuitShowPage = ({
}}
>
<Image
alt={battlesuitName}
alt={battlesuit.name}
src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/${battlesuit.id}.png`}
width={400}
height={400}
@@ -111,7 +102,7 @@ export async function getStaticProps({
locale,
}: NextPageContext & { params: { battlesuitId: string } }) {
try {
const battlesuit = getBattlesuitById(params.battlesuitId)!
const battlesuit = getBattlesuitById(params.battlesuitId, locale)!
const { weaponIds, stigmataIds } = (battlesuit.equipment || []).reduce<{
weaponIds: string[]
stigmataIds: string[]
+2 -2
View File
@@ -22,7 +22,7 @@ import {
type BattlesuitListItemData = Pick<
BattlesuitData,
'id' | 'name' | 'krName' | 'features' | 'type' | 'valkyrie'
'id' | 'name' | 'features' | 'type' | 'valkyrie'
>
interface BattlesuitListPageProps {
@@ -182,7 +182,7 @@ export async function getStaticProps({ locale }: NextPageContext) {
})
return {
props: {
battlesuitMap: getBattlesuitMapByIds(erBattlesuitIds),
battlesuitMap: getBattlesuitMapByIds(erBattlesuitIds, locale),
supportBattlesuits,
remembranceSigils,
...(await getI18NProps(locale)),
@@ -25,8 +25,7 @@ import {
getBattlesuitById,
listBattlesuits,
} from '../../../../server/data/honkai3rd/battlesuits'
import { translate, useTranslation } from '../../../../lib/i18n'
import { useRouter } from 'next/router'
import { useTranslation } from '../../../../lib/i18n'
import { assetsBucketBaseUrl } from '../../../../lib/consts'
import { WeaponData } from '../../../../lib/honkai3rd/weapons'
import { getWeaponMapByIds } from '../../../../server/data/honkai3rd/weapons'
@@ -50,17 +49,10 @@ const BattlesuitShowPage = ({
stigmataMap,
}: BattlesuitShowPageProps) => {
const { t } = useTranslation()
const { locale } = useRouter()
const battlesuitName = translate(
locale,
{ ['ko-KR']: battlesuit.krName },
battlesuit.name
)
return (
<Box p={3}>
<Heading as='h1'>{battlesuitName}</Heading>
<Heading as='h1'>{battlesuit.name}</Heading>
<Box mb={3}>
<Box
@@ -72,7 +64,7 @@ const BattlesuitShowPage = ({
}}
>
<Image
alt={battlesuitName}
alt={battlesuit.name}
src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/${battlesuit.id}.png`}
width={400}
height={400}
@@ -178,44 +170,37 @@ const BattlesuitShowPage = ({
<BattlesuitSkillGroupCard
heading={t('battlesuit-show.leader')}
skillGroup={battlesuit.leader}
locale={locale}
/>
<BattlesuitSkillGroupCard
heading={t('battlesuit-show.passive')}
skillGroup={battlesuit.passive}
locale={locale}
/>
<BattlesuitSkillGroupCard
heading={t('battlesuit-show.evasion')}
skillGroup={battlesuit.evasion}
locale={locale}
/>
<BattlesuitSkillGroupCard
heading={t('battlesuit-show.special-attack')}
skillGroup={battlesuit.special}
locale={locale}
/>
<BattlesuitSkillGroupCard
heading={t('battlesuit-show.ultimate')}
skillGroup={battlesuit.ultimate}
locale={locale}
/>
<BattlesuitSkillGroupCard
heading={t('battlesuit-show.basic-attack')}
skillGroup={battlesuit.basic}
locale={locale}
/>
{battlesuit.sp != null && (
<BattlesuitSkillGroupCard
heading={t('battlesuit-show.sp-skill')}
skillGroup={battlesuit.sp}
locale={locale}
/>
)}
</Box>
@@ -228,7 +213,7 @@ export async function getStaticProps({
params,
locale,
}: NextPageContext & { params: { battlesuitId: string } }) {
const battlesuit = getBattlesuitById(params.battlesuitId)!
const battlesuit = getBattlesuitById(params.battlesuitId, locale)!
const { weaponIds, stigmataIds } = (battlesuit.equipment || []).reduce<{
weaponIds: string[]
stigmataIds: string[]
@@ -274,13 +259,11 @@ export async function getStaticPaths() {
interface BattlesuitSkillGroupCardProps {
heading: string
skillGroup: BattlesuitSkillGroup
locale?: string
}
const BattlesuitSkillGroupCard = ({
heading,
skillGroup,
locale,
}: BattlesuitSkillGroupCardProps) => {
return (
<Card mb={3}>
@@ -291,39 +274,21 @@ const BattlesuitSkillGroupCard = ({
}}
>
<Heading as='h2' mb={1}>
{translate(
locale,
{ 'ko-KR': skillGroup.core.krName },
skillGroup.core.name
)}
{skillGroup.core.name}
</Heading>
<SecondaryLabel>{heading}</SecondaryLabel>
</Box>
<Paragraph p={2} sx={{ whiteSpace: 'pre-wrap', borderBottom: 'default' }}>
{translate(
locale,
{ 'ko-KR': skillGroup.core.krDescription },
skillGroup.core.description
)}
{skillGroup.core.description}
</Paragraph>
{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 (
<React.Fragment key={subskill.name}>
<Heading as='h3' p={2} m={0} sx={{ borderBottom: 'default' }}>
<Flex sx={{ alignItems: 'center' }}>
<Text>{skillName}</Text>
<Text>{subskill.name}</Text>
{subskill.requiredRank != null ? (
/^[0-9]/.test(subskill.requiredRank) ? (
<Box
@@ -353,7 +318,7 @@ const BattlesuitSkillGroupCard = ({
'&:last-child': { borderBottom: 'none' },
}}
>
{skillDescription}
{subskill.description}
</Paragraph>
</React.Fragment>
)
@@ -147,7 +147,8 @@ export async function getStaticProps({
const battlesuitMap = getBattlesuitMapByIds(
weapon != null && weapon.battlesuits != null
? weapon.battlesuits.map(({ id }) => id)
: []
: [],
locale
)
const weaponIds = []
+4 -14
View File
@@ -57,11 +57,7 @@ const VersionShowPage = ({
'versions.version'
)} ${versionName} / ${t('versions.new-battlesuits')}: ${battlesuits
.map((battlesuit) => {
return translate(
locale,
{ 'ko-KR': battlesuit.krName },
battlesuit.name
)
return battlesuit.name
})
.join(',')} / ${t('versions.new-weapons')}: ${weapons
.map((weapon) => {
@@ -113,12 +109,6 @@ const VersionShowPage = ({
</Heading>
<Box mb={3} sx={{ display: 'inline-block' }}>
{battlesuits.map((battlesuit) => {
const battlesuitName = translate(
locale,
{ 'ko-KR': battlesuit.krName },
battlesuit.name
)
return (
<NextLink
key={battlesuit.id}
@@ -130,10 +120,10 @@ const VersionShowPage = ({
<SquareImageBox
size={40}
src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
alt={`${battlesuitName}`}
alt={`${battlesuit.name}`}
mr={2}
/>
<Text>{battlesuitName}</Text>
<Text>{battlesuit.name}</Text>
</Flex>
</Link>
</NextLink>
@@ -232,7 +222,7 @@ export async function getStaticProps({
const versionData = getVersion(params.versionId)!
const battlesuits = versionData.newBattlesuits.map((battlesuitId) => {
return getBattlesuitById(battlesuitId)
return getBattlesuitById(battlesuitId, locale)
})
const weapons = versionData.newWeapons.map((weaponId) => {
return getWeaponById(weaponId)
+2 -8
View File
@@ -103,12 +103,6 @@ const VersionIndexPage = ({
</Heading>
<Box mb={3} sx={{ display: 'inline-block' }}>
{currentVersionNewBattlesuits.map((battlesuit) => {
const battlesuitName = translate(
locale,
{ 'ko-KR': battlesuit.krName },
battlesuit.name
)
return (
<NextLink
key={battlesuit.id}
@@ -120,10 +114,10 @@ const VersionIndexPage = ({
<SquareImageBox
size={40}
src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
alt={`${battlesuitName}`}
alt={`${battlesuit.name}`}
mr={2}
/>
<Text>{battlesuitName}</Text>
<Text>{battlesuit.name}</Text>
</Flex>
</Link>
</NextLink>