Add layouts
This commit is contained in:
Sakura Knoll
@@ -22,125 +22,143 @@ import StarIcon from '../../../../components/v2/StarIcon'
|
||||
import ChibiIcon from '../../../../components/v2/ChibiIcon'
|
||||
import WeaponTypeIcon from '../../../../components/v2/WeaponTypeIcon'
|
||||
import { sortBattlesuitSkill } from '../../../../lib/v2/data/utils'
|
||||
import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
|
||||
import { getI18NProps } from '../../../../server/i18n'
|
||||
import Head from '../../../../components/atoms/Head'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
interface BattlesuitShowPageProps {
|
||||
battlesuit: Battlesuit
|
||||
}
|
||||
|
||||
const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Box>
|
||||
<Heading as="h1">{battlesuit.fullName}</Heading>
|
||||
<Honkai3rdLayout>
|
||||
<Head
|
||||
title={`${battlesuit.fullName} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
|
||||
description={`${t('common.honkai-3rd')} ${t('battlesuit-show.battlesuit')} / ${battlesuit.fullName} / ${
|
||||
battlesuit.attributeType
|
||||
} / ${battlesuit.tags
|
||||
.map(tag => {
|
||||
return getTagTypeLabel(tag)
|
||||
})
|
||||
.join(', ')}`}
|
||||
canonicalHref={`/honkai3rd/battlesuits/${battlesuit.id}`}
|
||||
/>
|
||||
<Box p={2}>
|
||||
<Heading as="h1">{battlesuit.fullName}</Heading>
|
||||
|
||||
<AvatarFigureImage battlesuitId={battlesuit.id} sx={{ height: 400 }} />
|
||||
<AvatarFigureImage battlesuitId={battlesuit.id} sx={{ height: 400 }} />
|
||||
|
||||
<Box mb={3}>
|
||||
<BattlesuitAvatarIcon battlesuit={battlesuit} />
|
||||
</Box>
|
||||
<Box mb={3}>
|
||||
<BattlesuitAvatarIcon battlesuit={battlesuit} />
|
||||
</Box>
|
||||
|
||||
<Card mb={3}>
|
||||
<Flex sx={{ borderBottom: 'default', p: 1 }}>
|
||||
<Flex sx={{ alignItems: 'center' }}>
|
||||
<Box mr={2}>
|
||||
<StarIcon star={battlesuit.initialStar} />
|
||||
</Box>
|
||||
<Card mb={3}>
|
||||
<Flex sx={{ borderBottom: 'default', p: 1 }}>
|
||||
<Flex sx={{ alignItems: 'center' }}>
|
||||
<Box mr={2}>
|
||||
<StarIcon star={battlesuit.initialStar} />
|
||||
</Box>
|
||||
|
||||
<ChibiIcon id={battlesuit.character} />
|
||||
<ChibiIcon id={battlesuit.character} />
|
||||
|
||||
<Box ml={1} mr={2}>
|
||||
{getCharacterTypeLabel(battlesuit.character)}
|
||||
</Box>
|
||||
<Box ml={1} mr={2}>
|
||||
{getCharacterTypeLabel(battlesuit.character)}
|
||||
</Box>
|
||||
|
||||
<AttributeIcon attributeType={battlesuit.attributeType} size={30} />
|
||||
<Box ml={1} mr={2}>
|
||||
{getAttributeLabel(battlesuit.attributeType)}
|
||||
</Box>
|
||||
<AttributeIcon attributeType={battlesuit.attributeType} size={30} />
|
||||
<Box ml={1} mr={2}>
|
||||
{getAttributeLabel(battlesuit.attributeType)}
|
||||
</Box>
|
||||
|
||||
<WeaponTypeIcon type={battlesuit.weapon} />
|
||||
<Box ml={1}>{getWeaponTypeLabel(battlesuit.weapon)}</Box>
|
||||
<WeaponTypeIcon type={battlesuit.weapon} />
|
||||
<Box ml={1}>{getWeaponTypeLabel(battlesuit.weapon)}</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex sx={{ p: 1 }}>
|
||||
{battlesuit.tags.map(tag => {
|
||||
return (
|
||||
<Flex key={tag} sx={{ mr: 2, alignItems: 'center' }}>
|
||||
<TagIcon type={tag} />
|
||||
<Box ml={1}>{getTagTypeLabel(tag)}</Box>
|
||||
</Flex>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</Card>
|
||||
|
||||
<Heading as="h2">Skills</Heading>
|
||||
{battlesuit.skills.sort(sortBattlesuitSkill).map(skill => {
|
||||
return (
|
||||
<Card key={skill.id} mb={3}>
|
||||
<Box sx={{ borderBottom: 'default', p: 1 }}>
|
||||
<Flex sx={{ alignItems: 'center' }}>
|
||||
<AvatarSkillIcon icon={skill.icon} />
|
||||
<Heading as="h3" sx={{ ml: 1, mb: 0 }}>
|
||||
<FormattedText>{skill.name}</FormattedText>
|
||||
</Heading>
|
||||
{skill.tags.length > 0 && (
|
||||
<Flex sx={{ ml: 1 }}>
|
||||
{skill.tags.map((tag, index) => {
|
||||
return <SkillTagItem key={index} tag={tag} />
|
||||
})}
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
<Box>{getSkillTypeLabel(skill.skillType)}</Box>
|
||||
</Box>
|
||||
<Box sx={{ whiteSpace: 'pre-wrap', borderBottom: 'default', p: 1 }}>
|
||||
<FormattedText>{formatSkillInfo(skill)}</FormattedText>
|
||||
</Box>
|
||||
|
||||
{skill.subSkills.map(subSkill => {
|
||||
<Flex sx={{ p: 1 }}>
|
||||
{battlesuit.tags.map(tag => {
|
||||
return (
|
||||
<Fragment key={subSkill.id}>
|
||||
<Box sx={{ borderBottom: 'default', p: 1 }}>
|
||||
<Flex sx={{ alignItems: 'center' }}>
|
||||
<AvatarSubSkillIcon icon={subSkill.icon} />
|
||||
<Heading as="h4" sx={{ ml: 1, mb: 0 }}>
|
||||
<FormattedText>{subSkill.name}</FormattedText>
|
||||
</Heading>
|
||||
|
||||
{subSkill.unlockStar.localeCompare(battlesuit.initialStar) > 0 && (
|
||||
<Box ml={2}>
|
||||
<StarIcon star={subSkill.unlockStar} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{subSkill.tags.length > 0 && (
|
||||
<Flex sx={{ ml: 2 }}>
|
||||
{subSkill.tags.map((tag, index) => {
|
||||
return <SkillTagItem key={index} tag={tag} />
|
||||
})}
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
whiteSpace: 'pre-wrap',
|
||||
borderBottom: 'default',
|
||||
'&:last-child': { borderBottom: 'none' },
|
||||
p: 1
|
||||
}}
|
||||
>
|
||||
<FormattedText>{formatSubSkillInfo(subSkill)}</FormattedText>
|
||||
</Box>
|
||||
</Fragment>
|
||||
<Flex key={tag} sx={{ mr: 2, alignItems: 'center' }}>
|
||||
<TagIcon type={tag} />
|
||||
<Box ml={1}>{getTagTypeLabel(tag)}</Box>
|
||||
</Flex>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
{/* <pre>{JSON.stringify(battlesuit, null, 2)}</pre> */}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Card>
|
||||
|
||||
<Heading as="h2">Skills</Heading>
|
||||
{battlesuit.skills.sort(sortBattlesuitSkill).map(skill => {
|
||||
return (
|
||||
<Card key={skill.id} mb={3}>
|
||||
<Box sx={{ borderBottom: 'default', p: 1 }}>
|
||||
<Flex sx={{ alignItems: 'center' }}>
|
||||
<AvatarSkillIcon icon={skill.icon} />
|
||||
<Heading as="h3" sx={{ ml: 1, mb: 0 }}>
|
||||
<FormattedText>{skill.name}</FormattedText>
|
||||
</Heading>
|
||||
{skill.tags.length > 0 && (
|
||||
<Flex sx={{ ml: 1 }}>
|
||||
{skill.tags.map((tag, index) => {
|
||||
return <SkillTagItem key={index} tag={tag} />
|
||||
})}
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
<Box>{getSkillTypeLabel(skill.skillType)}</Box>
|
||||
</Box>
|
||||
<Box sx={{ whiteSpace: 'pre-wrap', borderBottom: 'default', p: 1 }}>
|
||||
<FormattedText>{formatSkillInfo(skill)}</FormattedText>
|
||||
</Box>
|
||||
|
||||
{skill.subSkills.map(subSkill => {
|
||||
return (
|
||||
<Fragment key={subSkill.id}>
|
||||
<Box sx={{ borderBottom: 'default', p: 1 }}>
|
||||
<Flex sx={{ alignItems: 'center' }}>
|
||||
<AvatarSubSkillIcon icon={subSkill.icon} />
|
||||
<Heading as="h4" sx={{ ml: 1, mb: 0 }}>
|
||||
<FormattedText>{subSkill.name}</FormattedText>
|
||||
</Heading>
|
||||
|
||||
{subSkill.unlockStar.localeCompare(battlesuit.initialStar) > 0 && (
|
||||
<Box ml={2}>
|
||||
<StarIcon star={subSkill.unlockStar} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{subSkill.tags.length > 0 && (
|
||||
<Flex sx={{ ml: 2 }}>
|
||||
{subSkill.tags.map((tag, index) => {
|
||||
return <SkillTagItem key={index} tag={tag} />
|
||||
})}
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
whiteSpace: 'pre-wrap',
|
||||
borderBottom: 'default',
|
||||
'&:last-child': { borderBottom: 'none' },
|
||||
p: 1
|
||||
}}
|
||||
>
|
||||
<FormattedText>{formatSubSkillInfo(subSkill)}</FormattedText>
|
||||
</Box>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
{/* <pre>{JSON.stringify(battlesuit, null, 2)}</pre> */}
|
||||
</Box>
|
||||
</Honkai3rdLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -150,7 +168,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
|
||||
const battlesuit = loadBattlesuitData(params.battlesuitId)
|
||||
|
||||
return {
|
||||
props: { battlesuit }
|
||||
props: { battlesuit, ...(await getI18NProps(locale)) }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,27 +5,49 @@ import { Flex, Link } from 'theme-ui'
|
||||
import { loadBattlesuitCatalog } from '../../../../lib/v2/server/loadData'
|
||||
import { BattlesuitCatalogItem } from '../../../../lib/v2/data/types'
|
||||
import BattlesuitCatalogItemCard from '../../../../components/v2/BattlesuitCatalogItemCard'
|
||||
import Head from '../../../../components/atoms/Head'
|
||||
import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Breadcrumb from '../../../../components/organisms/Breadcrumb'
|
||||
import { getI18NProps } from '../../../../server/i18n'
|
||||
|
||||
interface BattlesuitListPageProps {
|
||||
battlesuitCatalog: BattlesuitCatalogItem[]
|
||||
}
|
||||
|
||||
const BattlesuitListPage = ({ battlesuitCatalog }: BattlesuitListPageProps) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Box>
|
||||
<h1>Battlesuits</h1>
|
||||
<Flex sx={{ flexWrap: 'wrap' }}>
|
||||
{battlesuitCatalog.map(battlesuit => {
|
||||
return (
|
||||
<Box key={battlesuit.id}>
|
||||
<Link href={`/v2-pre/battlesuits/${battlesuit.id}`}>
|
||||
<BattlesuitCatalogItemCard battlesuit={battlesuit} />
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</Box>
|
||||
<Honkai3rdLayout>
|
||||
<Head
|
||||
title={`${t('common.battlesuits')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
|
||||
description={t('battlesuits-list.description')}
|
||||
canonicalHref={`/honkai3rd/battlesuits`}
|
||||
/>
|
||||
<Box p={2}>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
|
||||
{
|
||||
href: '/honkai3rd/v2/battlesuits',
|
||||
label: t('common.battlesuits')
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<h1>{t('battlesuits-list.heading')}</h1>
|
||||
<Flex sx={{ flexWrap: 'wrap' }}>
|
||||
{battlesuitCatalog.map(battlesuit => {
|
||||
return (
|
||||
<Box key={battlesuit.id}>
|
||||
<Link href={`/honkai3rd/v2/battlesuits/${battlesuit.id}`}>
|
||||
<BattlesuitCatalogItemCard battlesuit={battlesuit} />
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Honkai3rdLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -35,6 +57,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
|
||||
const battlesuitCatalog = loadBattlesuitCatalog()
|
||||
|
||||
return {
|
||||
props: { battlesuitCatalog }
|
||||
props: { battlesuitCatalog, ...(await getI18NProps(locale)) }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
import { NextPageContext } from 'next'
|
||||
import { Box, Card, Flex, Heading, Image } from 'theme-ui'
|
||||
import { Box, Card, Flex, Heading, Image, Link } from 'theme-ui'
|
||||
import AvatarFigureImage from '../../../../../components/v2/AvatarFigureImage'
|
||||
import { loadBattlesuitData, loadErBattlesuit, loadErBattlesuitCatalog } from '../../../../../lib/v2/server/loadData'
|
||||
import { Battlesuit, ErBattlesuit, ErSignet } from '../../../../../lib/v2/data/types'
|
||||
import { Fragment, useMemo } from 'react'
|
||||
import { assetsBucketBaseUrl } from '../../../../../lib/consts'
|
||||
import BattlesuitCatalogItemCard from '../../../../../components/v2/BattlesuitCatalogItemCard'
|
||||
import Honkai3rdLayout from '../../../../../components/layouts/Honkai3rdLayout'
|
||||
import Head from '../../../../../components/atoms/Head'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Breadcrumb from '../../../../../components/organisms/Breadcrumb'
|
||||
import { getI18NProps } from '../../../../../server/i18n'
|
||||
|
||||
interface BattlesuitShowPageProps {
|
||||
battlesuit: Battlesuit
|
||||
@@ -12,6 +18,8 @@ interface BattlesuitShowPageProps {
|
||||
}
|
||||
|
||||
const BattlesuitShowPage = ({ battlesuit, erBattlesuit }: BattlesuitShowPageProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const signetSets = useMemo(() => {
|
||||
const signetSetMap = erBattlesuit.signets
|
||||
.slice()
|
||||
@@ -36,57 +44,89 @@ const BattlesuitShowPage = ({ battlesuit, erBattlesuit }: BattlesuitShowPageProp
|
||||
}, [erBattlesuit.signets])
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Heading as="h1">{battlesuit.fullName}</Heading>
|
||||
<Honkai3rdLayout>
|
||||
<Head
|
||||
title={`${battlesuit.fullName} (${t('common.elysian-realm')}) - ${t('common.honkai-3rd')} - ${t(
|
||||
'common.abyss-lab'
|
||||
)}`}
|
||||
description={`${t('common.honkai-3rd')} ${t('common.elysian-realm')} ${t('battlesuit-show.battlesuit')}`}
|
||||
canonicalHref={`/honkai3rd/v2/er/battlesuits/${battlesuit.id}`}
|
||||
/>
|
||||
|
||||
<AvatarFigureImage battlesuitId={battlesuit.id} sx={{ height: 400 }} />
|
||||
<Box p={2}>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
|
||||
{
|
||||
href: '/honkai3rd/v2/er',
|
||||
label: t('common.elysian-realm')
|
||||
},
|
||||
{
|
||||
href: `/honkai3rd/v2/er/battlesuits/${battlesuit.id}`,
|
||||
label: battlesuit.fullName
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
<Heading as="h2">ER Adjustments</Heading>
|
||||
<Heading as="h1">{battlesuit.fullName}</Heading>
|
||||
|
||||
<Card mb={3}>
|
||||
{erBattlesuit.abilities.map(ability => {
|
||||
<AvatarFigureImage battlesuitId={battlesuit.id} sx={{ height: 400 }} />
|
||||
|
||||
<Box>
|
||||
<Link href={`/battlesuits/${battlesuit.id}`}>
|
||||
<BattlesuitCatalogItemCard battlesuit={battlesuit} />
|
||||
</Link>
|
||||
</Box>
|
||||
|
||||
<Heading as="h2">ER Adjustments</Heading>
|
||||
|
||||
<Card mb={3}>
|
||||
{erBattlesuit.abilities.map(ability => {
|
||||
return (
|
||||
<Fragment key={ability.id}>
|
||||
<Box sx={{ p: 1, borderBottom: 'default' }}>
|
||||
<Heading as="h3" m={0}>
|
||||
{ability.name}
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
|
||||
{ability.desc}
|
||||
</Box>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
|
||||
<Heading as="h2">Exclusive Signets</Heading>
|
||||
|
||||
{signetSets.map((set, index) => {
|
||||
return (
|
||||
<Fragment key={ability.id}>
|
||||
<Box sx={{ p: 1, borderBottom: 'default' }}>
|
||||
<Heading as="h3" m={0}>
|
||||
{ability.name}
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>{ability.desc}</Box>
|
||||
</Fragment>
|
||||
<Card key={index} mb={2}>
|
||||
{set.map(signet => {
|
||||
return (
|
||||
<Fragment key={signet.id}>
|
||||
<Flex sx={{ p: 1, borderBottom: 'default', alignItems: 'center' }}>
|
||||
<Image
|
||||
src={`${assetsBucketBaseUrl}/raw/supportbufficon/Elysia.png`}
|
||||
width={30}
|
||||
sx={{ flexShrink: 0 }}
|
||||
alt={'Elysia'}
|
||||
/>
|
||||
<Heading as="h3" m={0}>
|
||||
{signet.name}
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
|
||||
{signet.desc}
|
||||
</Box>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
|
||||
<Heading as="h2">Exclusive Signets</Heading>
|
||||
|
||||
{signetSets.map((set, index) => {
|
||||
return (
|
||||
<Card key={index} mb={2}>
|
||||
{set.map(signet => {
|
||||
return (
|
||||
<Fragment key={signet.id}>
|
||||
<Flex sx={{ p: 1, borderBottom: 'default', alignItems: 'center' }}>
|
||||
<Image
|
||||
src={`${assetsBucketBaseUrl}/raw/supportbufficon/Elysia.png`}
|
||||
width={30}
|
||||
sx={{ flexShrink: 0 }}
|
||||
alt={'Elysia'}
|
||||
/>
|
||||
<Heading as="h3" m={0}>
|
||||
{signet.name}
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
|
||||
{signet.desc}
|
||||
</Box>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
</Honkai3rdLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -97,7 +137,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
|
||||
const erBattlesuit = loadErBattlesuit(params.battlesuitId)
|
||||
|
||||
return {
|
||||
props: { battlesuit, erBattlesuit }
|
||||
props: { battlesuit, erBattlesuit, ...(await getI18NProps(locale)) }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -15,6 +15,11 @@ import SquareImage from '../../../../components/v2/SquareImage'
|
||||
import { signetGroups } from '../../../../lib/v2/data/er'
|
||||
import BattlesuitSmallIcon from '../../../../components/v2/BattlesuitSmallIcon'
|
||||
import MaterialIcon from '../../../../components/v2/MaterialIcon'
|
||||
import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
|
||||
import Head from '../../../../components/atoms/Head'
|
||||
import Breadcrumb from '../../../../components/organisms/Breadcrumb'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { getI18NProps } from '../../../../server/i18n'
|
||||
|
||||
interface ErPageProps {
|
||||
erBattlesuitCatalog: ErBattlesuitCatalogItem[]
|
||||
@@ -24,6 +29,8 @@ interface ErPageProps {
|
||||
}
|
||||
|
||||
const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }: ErPageProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const battlesuitCatalogMap = useMemo(() => {
|
||||
return battlesuitCatalog.reduce((map, item) => {
|
||||
map.set(item.id, item)
|
||||
@@ -32,77 +39,97 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
|
||||
}, [battlesuitCatalog])
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<h1>Elysian Realm</h1>
|
||||
<Heading as="h2">Signets</Heading>
|
||||
<Flex sx={{ flexWrap: 'wrap' }}>
|
||||
{signetGroups.map(signetGroup => {
|
||||
return (
|
||||
<Link href={`/v2-pre/er/signets/${signetGroup.id}`} key={signetGroup.id}>
|
||||
<Card p={1} m={1}>
|
||||
<Flex sx={{ alignItems: 'center' }}>
|
||||
<SquareImage
|
||||
src={`${assetsBucketBaseUrl}/raw/supportbufficon/${signetGroup.icon}.png`}
|
||||
originalSize={120}
|
||||
size={40}
|
||||
/>
|
||||
<Box p={1}>{signetGroup.name}</Box>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
<Honkai3rdLayout>
|
||||
<Head
|
||||
title={`${t('common.elysian-realm')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
|
||||
description={t('common.elysian-realm')}
|
||||
canonicalHref={`/honkai3rd/elysian-realm`}
|
||||
/>
|
||||
|
||||
<Heading as="h2">Battlesuits</Heading>
|
||||
<Flex sx={{ flexWrap: 'wrap' }}>
|
||||
{erBattlesuitCatalog.map(erBattlesuit => {
|
||||
const battlesuit = battlesuitCatalogMap.get(erBattlesuit.battlesuit)!
|
||||
return (
|
||||
<Box key={battlesuit.id}>
|
||||
<Link href={`/v2-pre/er/battlesuits/${battlesuit.id}`}>
|
||||
<BattlesuitCatalogItemCard battlesuit={battlesuit} />
|
||||
<Box p={2}>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
|
||||
{
|
||||
href: '/honkai3rd/v2/er',
|
||||
label: t('common.elysian-realm')
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<Heading as="h1">Elysian Realm</Heading>
|
||||
|
||||
<Heading as="h2">Signets</Heading>
|
||||
<Flex sx={{ flexWrap: 'wrap', mb: 3 }}>
|
||||
{signetGroups.map(signetGroup => {
|
||||
return (
|
||||
<Link href={`/honkai3rd/v2/er/signets/${signetGroup.id}`} key={signetGroup.id}>
|
||||
<Card p={1} m={1}>
|
||||
<Flex sx={{ alignItems: 'center' }}>
|
||||
<SquareImage
|
||||
src={`${assetsBucketBaseUrl}/raw/supportbufficon/${signetGroup.icon}.png`}
|
||||
originalSize={120}
|
||||
size={40}
|
||||
/>
|
||||
<Box p={1}>{signetGroup.name}</Box>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
|
||||
<Heading as="h2">Supports</Heading>
|
||||
<Heading as="h2">Battlesuits</Heading>
|
||||
<Flex sx={{ flexWrap: 'wrap', mb: 3 }}>
|
||||
{erBattlesuitCatalog.map(erBattlesuit => {
|
||||
const battlesuit = battlesuitCatalogMap.get(erBattlesuit.battlesuit)!
|
||||
return (
|
||||
<Box key={battlesuit.id}>
|
||||
<Link href={`/honkai3rd/v2/er/battlesuits/${battlesuit.id}`}>
|
||||
<BattlesuitCatalogItemCard battlesuit={battlesuit} />
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
|
||||
<Flex sx={{ flexWrap: 'wrap' }}>
|
||||
{erSupports.map(support => {
|
||||
const battlesuit = battlesuitCatalogMap.get(support)!
|
||||
return (
|
||||
<Box key={support}>
|
||||
<Link href={`/v2-pre/er/supports#${support}`}>
|
||||
<Box sx={{ p: 1, m: 1, width: 110 }}>
|
||||
<BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
|
||||
<Box sx={{ textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{battlesuit.fullName}
|
||||
<Heading as="h2">Supports</Heading>
|
||||
|
||||
<Flex sx={{ flexWrap: 'wrap' }}>
|
||||
{erSupports.map(support => {
|
||||
const battlesuit = battlesuitCatalogMap.get(support)!
|
||||
return (
|
||||
<Box key={support}>
|
||||
<Link href={`/honkai3rd/v2/er/supports#${support}`}>
|
||||
<Box sx={{ p: 1, m: 1, width: 110 }}>
|
||||
<BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
|
||||
<Box
|
||||
sx={{ textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
|
||||
>
|
||||
{battlesuit.fullName}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
{/* <BattlesuitCatalogItemCard battlesuit={battlesuit} /> */}
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
{/* <BattlesuitCatalogItemCard battlesuit={battlesuit} /> */}
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
|
||||
<Heading as="h2">Sigils</Heading>
|
||||
<Heading as="h2">Sigils</Heading>
|
||||
|
||||
<Flex sx={{ flexWrap: 'wrap' }}>
|
||||
{erSigils.map(sigil => {
|
||||
return (
|
||||
<Card key={sigil.id} p={1} m={1}>
|
||||
<Link href={`/v2-pre/er/sigils#${sigil.id}`}>
|
||||
<MaterialIcon materialId={sigil.id} />
|
||||
</Link>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</Box>
|
||||
<Flex sx={{ flexWrap: 'wrap' }}>
|
||||
{erSigils.map(sigil => {
|
||||
return (
|
||||
<Card key={sigil.id} p={1} m={1}>
|
||||
<Link href={`/honkai3rd/v2/er/sigils#${sigil.id}`}>
|
||||
<MaterialIcon materialId={sigil.id} />
|
||||
</Link>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Honkai3rdLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -123,6 +150,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
|
||||
})
|
||||
|
||||
return {
|
||||
props: { erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
|
||||
props: { erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils, ...(await getI18NProps(locale)) }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,44 +1,75 @@
|
||||
import { NextPageContext } from 'next'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { Box, Card, Flex, Heading } from 'theme-ui'
|
||||
import Head from '../../../../components/atoms/Head'
|
||||
import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
|
||||
import Breadcrumb from '../../../../components/organisms/Breadcrumb'
|
||||
import MaterialIcon from '../../../../components/v2/MaterialIcon'
|
||||
import { ErSigil } from '../../../../lib/v2/data/types'
|
||||
import { loadErSigils } from '../../../../lib/v2/server/loadData'
|
||||
import { getI18NProps } from '../../../../server/i18n'
|
||||
|
||||
interface SigilsPageProps {
|
||||
erSigils: ErSigil[]
|
||||
}
|
||||
|
||||
const SigilsPage = ({ erSigils }: SigilsPageProps) => {
|
||||
return (
|
||||
<Box>
|
||||
<Heading as="h1">ER Sigils</Heading>
|
||||
const { t } = useTranslation()
|
||||
|
||||
<Card mb={3}>
|
||||
{erSigils.map(sigil => {
|
||||
return (
|
||||
<Flex
|
||||
key={sigil.id}
|
||||
sx={{
|
||||
borderBottom: 'default',
|
||||
'&:last-child': {
|
||||
borderBottom: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box sx={{ p: 1, flexShrink: 0, borderRight: 'default' }}>
|
||||
<MaterialIcon materialId={sigil.id} />
|
||||
</Box>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Heading as="h3" sx={{ m: 0, p: 1, borderBottom: 'default' }} id={sigil.id}>
|
||||
{sigil.name}
|
||||
</Heading>
|
||||
<Box p={1}>{sigil.desc}</Box>
|
||||
</Box>
|
||||
</Flex>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
</Box>
|
||||
return (
|
||||
<Honkai3rdLayout>
|
||||
<Head
|
||||
title={`${t('elysian-realm.remembrance-sigil')} (${t('common.elysian-realm')}) - ${t(
|
||||
'common.honkai-3rd'
|
||||
)} - ${t('common.abyss-lab')}`}
|
||||
description={`${t('common.elysian-realm')} ${t('elysian-realm.supports')}`}
|
||||
canonicalHref={`/honkai3rd/v2/er/sigils`}
|
||||
/>
|
||||
|
||||
<Box p={2}>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
|
||||
{
|
||||
href: '/honkai3rd/v2/er',
|
||||
label: t('common.elysian-realm')
|
||||
},
|
||||
{
|
||||
href: '/honkai3rd/v2/er/sigils',
|
||||
label: t('elysian-realm.remembrance-sigil')
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
<Heading as="h1">ER Sigils</Heading>
|
||||
|
||||
<Card mb={3}>
|
||||
{erSigils.map(sigil => {
|
||||
return (
|
||||
<Flex
|
||||
key={sigil.id}
|
||||
sx={{
|
||||
borderBottom: 'default',
|
||||
'&:last-child': {
|
||||
borderBottom: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box sx={{ p: 1, flexShrink: 0, borderRight: 'default' }}>
|
||||
<MaterialIcon materialId={sigil.id} />
|
||||
</Box>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Heading as="h3" sx={{ m: 0, p: 1, borderBottom: 'default' }} id={sigil.id}>
|
||||
{sigil.name}
|
||||
</Heading>
|
||||
<Box p={1}>{sigil.desc}</Box>
|
||||
</Box>
|
||||
</Flex>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
</Box>
|
||||
</Honkai3rdLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -48,6 +79,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
|
||||
const erSigils = loadErSigils()
|
||||
|
||||
return {
|
||||
props: { erSigils }
|
||||
props: { erSigils, ...(await getI18NProps(locale)) }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,6 +7,11 @@ import { assetsBucketBaseUrl } from '../../../../../lib/consts'
|
||||
import { signetGroups } from '../../../../../lib/v2/data/er'
|
||||
import SquareImage from '../../../../../components/v2/SquareImage'
|
||||
import { getErSignetTypeLabel } from '../../../../../lib/v2/data/text'
|
||||
import Honkai3rdLayout from '../../../../../components/layouts/Honkai3rdLayout'
|
||||
import Head from '../../../../../components/atoms/Head'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Breadcrumb from '../../../../../components/organisms/Breadcrumb'
|
||||
import { getI18NProps } from '../../../../../server/i18n'
|
||||
|
||||
interface BattlesuitShowPageProps {
|
||||
group: ErSignetGroup
|
||||
@@ -14,6 +19,8 @@ interface BattlesuitShowPageProps {
|
||||
}
|
||||
|
||||
const BattlesuitShowPage = ({ signets, group }: BattlesuitShowPageProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const signetSets = useMemo(() => {
|
||||
const signetSetMap = signets.reduce<Map<string, ErSignet[]>>((map, signet) => {
|
||||
const [id1, _id2] = signet.id.split('-')
|
||||
@@ -28,41 +35,65 @@ const BattlesuitShowPage = ({ signets, group }: BattlesuitShowPageProps) => {
|
||||
|
||||
return [...signetSetMap.values()]
|
||||
}, [signets])
|
||||
return (
|
||||
<Box>
|
||||
<Heading as="h1">{group.name}</Heading>
|
||||
|
||||
{signetSets.map((set, index) => {
|
||||
return (
|
||||
<Card key={index} mb={2}>
|
||||
{set.map(signet => {
|
||||
return (
|
||||
<Fragment key={signet.id}>
|
||||
<Flex sx={{ p: 1, borderBottom: 'default', alignItems: 'center' }}>
|
||||
<SquareImage
|
||||
src={`${assetsBucketBaseUrl}/raw/supportbufficon/${group.icon}.png`}
|
||||
size={30}
|
||||
originalSize={120}
|
||||
/>
|
||||
<Heading as="h3" my={0} ml={1}>
|
||||
{signet.name}
|
||||
</Heading>
|
||||
<Box sx={{ ml: 12, color: 'textMuted' }}>{getErSignetTypeLabel(signet.quality)}</Box>
|
||||
</Flex>
|
||||
<Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
|
||||
{signet.desc}
|
||||
</Box>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
{/*
|
||||
return (
|
||||
<Honkai3rdLayout>
|
||||
<Head
|
||||
title={`${group.name} ${t('elysian-realm.signets')} (${t('common.elysian-realm')}) - ${t(
|
||||
'common.honkai-3rd'
|
||||
)} - ${t('common.abyss-lab')}`}
|
||||
description={`${t('common.honkai-3rd')} ${group.name} ${t('elysian-realm.signets')}`}
|
||||
canonicalHref={`/honkai3rd/elysian-realm/signets/${group.id}`}
|
||||
/>
|
||||
|
||||
<Box p={2}>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
|
||||
{
|
||||
href: '/honkai3rd/v2/er',
|
||||
label: t('common.elysian-realm')
|
||||
},
|
||||
{
|
||||
href: `/honkai3rd/v2/er/signets/${group.id}`,
|
||||
label: group.name
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<Heading as="h1">{group.name}</Heading>
|
||||
|
||||
{signetSets.map((set, index) => {
|
||||
return (
|
||||
<Card key={index} mb={2}>
|
||||
{set.map(signet => {
|
||||
return (
|
||||
<Fragment key={signet.id}>
|
||||
<Flex sx={{ p: 1, borderBottom: 'default', alignItems: 'center' }}>
|
||||
<SquareImage
|
||||
src={`${assetsBucketBaseUrl}/raw/supportbufficon/${group.icon}.png`}
|
||||
size={30}
|
||||
originalSize={120}
|
||||
/>
|
||||
<Heading as="h3" my={0} ml={1}>
|
||||
{signet.name}
|
||||
</Heading>
|
||||
<Box sx={{ ml: 12, color: 'textMuted' }}>{getErSignetTypeLabel(signet.quality)}</Box>
|
||||
</Flex>
|
||||
<Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
|
||||
{signet.desc}
|
||||
</Box>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
{/*
|
||||
<pre>
|
||||
<code>{JSON.stringify(signets, null, 2)}</code>
|
||||
</pre> */}
|
||||
</Box>
|
||||
</Box>
|
||||
</Honkai3rdLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -73,7 +104,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
|
||||
const group = signetGroups.find(group => group.id === params.groupId)
|
||||
|
||||
return {
|
||||
props: { signets, group }
|
||||
props: { signets, group, ...(await getI18NProps(locale)) }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
import { NextPageContext } from 'next'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { useMemo } from 'react'
|
||||
import { Box, Card, Flex, Heading } from 'theme-ui'
|
||||
import Head from '../../../../components/atoms/Head'
|
||||
import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
|
||||
import Breadcrumb from '../../../../components/organisms/Breadcrumb'
|
||||
import BattlesuitSmallIcon from '../../../../components/v2/BattlesuitSmallIcon'
|
||||
import { BattlesuitCatalogItem, ErSupportBattlesuit } from '../../../../lib/v2/data/types'
|
||||
import { loadBattlesuitCatalog, loadErSupports } from '../../../../lib/v2/server/loadData'
|
||||
import { getI18NProps } from '../../../../server/i18n'
|
||||
|
||||
interface SupportsPageProps {
|
||||
battlesuitCatalog: BattlesuitCatalogItem[]
|
||||
@@ -15,6 +20,8 @@ const SupportsPage = ({
|
||||
|
||||
erSupports
|
||||
}: SupportsPageProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const battlesuitCatalogMap = useMemo(() => {
|
||||
return battlesuitCatalog.reduce((map, item) => {
|
||||
map.set(item.id, item)
|
||||
@@ -22,32 +29,55 @@ const SupportsPage = ({
|
||||
}, new Map<string, BattlesuitCatalogItem>())
|
||||
}, [battlesuitCatalog])
|
||||
return (
|
||||
<Box>
|
||||
<Heading as="h1">ER Supports</Heading>
|
||||
<Honkai3rdLayout>
|
||||
<Head
|
||||
title={`${t('elysian-realm.supports')} (${t('common.elysian-realm')}) - ${t('common.honkai-3rd')} - ${t(
|
||||
'common.abyss-lab'
|
||||
)}`}
|
||||
description={`${t('common.elysian-realm')} ${t('elysian-realm.supports')}`}
|
||||
canonicalHref={`/honkai3rd/elysian-realm/support-battlesuits`}
|
||||
/>
|
||||
|
||||
<Card mb={3}>
|
||||
{erSupports.map(support => {
|
||||
const battlesuit = battlesuitCatalogMap.get(support.battlesuit)!
|
||||
return (
|
||||
<Flex key={support.battlesuit} sx={{ borderBottom: 'default' }}>
|
||||
<Box sx={{ flexShrink: 0, p: 1, borderRight: 'default' }}>
|
||||
<BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex sx={{ p: 1, borderBottom: 'default', flexGrow: 1 }}>
|
||||
<Heading as="h3" sx={{ m: 0 }} id={support.battlesuit}>
|
||||
{support.name}
|
||||
</Heading>
|
||||
<Box p={2}>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
|
||||
{
|
||||
href: '/honkai3rd/v2/er',
|
||||
label: t('common.elysian-realm')
|
||||
},
|
||||
{
|
||||
href: '/honkai3rd/v2/er/supports',
|
||||
label: t('elysian-realm.supports')
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<Heading as="h1">ER Supports</Heading>
|
||||
|
||||
<Box sx={{ ml: 1, color: 'textMuted' }}>(CD {support.cd}s)</Box>
|
||||
</Flex>
|
||||
<Box p={1}>{support.desc}</Box>
|
||||
</Box>
|
||||
</Flex>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
</Box>
|
||||
<Card mb={3}>
|
||||
{erSupports.map(support => {
|
||||
const battlesuit = battlesuitCatalogMap.get(support.battlesuit)!
|
||||
return (
|
||||
<Flex key={support.battlesuit} sx={{ borderBottom: 'default' }}>
|
||||
<Box sx={{ flexShrink: 0, p: 1, borderRight: 'default' }}>
|
||||
<BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex sx={{ p: 1, borderBottom: 'default', flexGrow: 1 }}>
|
||||
<Heading as="h3" sx={{ m: 0 }} id={support.battlesuit}>
|
||||
{support.name}
|
||||
</Heading>
|
||||
|
||||
<Box sx={{ ml: 1, color: 'textMuted' }}>(CD {support.cd}s)</Box>
|
||||
</Flex>
|
||||
<Box p={1}>{support.desc}</Box>
|
||||
</Box>
|
||||
</Flex>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
</Box>
|
||||
</Honkai3rdLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -58,6 +88,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
|
||||
const erSupports = loadErSupports()
|
||||
|
||||
return {
|
||||
props: { battlesuitCatalog, erSupports }
|
||||
props: { battlesuitCatalog, erSupports, ...(await getI18NProps(locale)) }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,6 +7,11 @@ import { RootStigma, StigmataSet } from '../../../../lib/v2/data/types'
|
||||
import { Fragment } from 'react'
|
||||
import StigmaIcon from '../../../../components/v2/StigmaIcon'
|
||||
import StigmaFigureImage from '../../../../components/v2/StigmaFigureImage'
|
||||
import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
|
||||
import Head from '../../../../components/atoms/Head'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { getI18NProps } from '../../../../server/i18n'
|
||||
import Breadcrumb from '../../../../components/organisms/Breadcrumb'
|
||||
|
||||
interface StigmataSetShowPage {
|
||||
stigmataSet: StigmataSet
|
||||
@@ -14,137 +19,167 @@ interface StigmataSetShowPage {
|
||||
}
|
||||
|
||||
const StigmataSetShowPage = ({ stigmataSet, stigmata }: StigmataSetShowPage) => {
|
||||
const { t } = useTranslation()
|
||||
const rarity = stigmata[0].stigmata[0].maxRarity
|
||||
return (
|
||||
<Box>
|
||||
<Heading as="h1">{stigmataSet.name}</Heading>
|
||||
<Card mb={3}>
|
||||
{stigmata.map(rootStigma => {
|
||||
const stigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
|
||||
return (
|
||||
<>
|
||||
<Flex sx={{ borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
|
||||
<Box sx={{ flexShrink: 0, borderRight: 'default', p: 1 }}>
|
||||
<StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.rarity} />
|
||||
</Box>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Flex sx={{ borderBottom: 'default', alignItems: 'center', p: 1 }}>
|
||||
<Heading
|
||||
as="h3"
|
||||
sx={{
|
||||
my: 1
|
||||
}}
|
||||
>
|
||||
<Link href={`/v2-pre/stigmata/${rootStigma.id}`}>{stigma.name}</Link>
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Honkai3rdLayout>
|
||||
<Head
|
||||
title={`${stigmataSet.name} ${t('stigmata-show.stigmata-set')} - ${t('common.honkai-3rd')} - ${t(
|
||||
'common.abyss-lab'
|
||||
)}`}
|
||||
description={`${t('common.honkai-3rd')} ${t('stigmata-show.stigmata-set')} / ${'⭐'.repeat(rarity)} / ${
|
||||
stigmataSet.name
|
||||
}`}
|
||||
canonicalHref={`/honkai3rd/v2/stigmata-sets/${stigmataSet.id}-set`}
|
||||
/>
|
||||
|
||||
<Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
|
||||
<Box>
|
||||
HP : {Math.floor(stigma.hpBase + stigma.hpAdd * (stigma.maxLv - 1))} / ATK :{' '}
|
||||
{Math.floor(stigma.attackBase + stigma.attackAdd * (stigma.maxLv - 1))} / DEF :{' '}
|
||||
{Math.floor(stigma.defenceBase + stigma.defenceAdd * (stigma.maxLv - 1))} / CRT :{' '}
|
||||
{Math.floor(stigma.criticalBase + stigma.criticalAdd * (stigma.maxLv - 1))} (at Max Lv{' '}
|
||||
{stigma.maxLv})
|
||||
</Box>
|
||||
</Flex>
|
||||
{stigma.skills.map(skill => {
|
||||
return (
|
||||
<Fragment key={skill.id}>
|
||||
<Box sx={{ borderBottom: 'default', p: 1 }}>
|
||||
<Heading
|
||||
as="h3"
|
||||
<Box p={2}>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
|
||||
{
|
||||
href: {
|
||||
pathname: `/honkai3rd/v2/stigmata-sets`
|
||||
},
|
||||
label: t('common.stigmata-set')
|
||||
},
|
||||
{
|
||||
href: `/honkai3rd/v2/stigmata-sets/${stigmataSet.id}-set`,
|
||||
label: stigmataSet.name
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
<Heading as="h1">{stigmataSet.name}</Heading>
|
||||
<Card mb={3}>
|
||||
{stigmata.map(rootStigma => {
|
||||
const stigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
|
||||
return (
|
||||
<>
|
||||
<Flex sx={{ borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
|
||||
<Box sx={{ flexShrink: 0, borderRight: 'default', p: 1 }}>
|
||||
<StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.rarity} />
|
||||
</Box>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Flex sx={{ borderBottom: 'default', alignItems: 'center', p: 1 }}>
|
||||
<Heading
|
||||
as="h3"
|
||||
sx={{
|
||||
my: 1
|
||||
}}
|
||||
>
|
||||
<Link href={`/honkai3rd/v2/stigmata/${rootStigma.id}`}>{stigma.name}</Link>
|
||||
</Heading>
|
||||
</Flex>
|
||||
|
||||
<Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
|
||||
<Box>
|
||||
HP : {Math.floor(stigma.hpBase + stigma.hpAdd * (stigma.maxLv - 1))} / ATK :{' '}
|
||||
{Math.floor(stigma.attackBase + stigma.attackAdd * (stigma.maxLv - 1))} / DEF :{' '}
|
||||
{Math.floor(stigma.defenceBase + stigma.defenceAdd * (stigma.maxLv - 1))} / CRT :{' '}
|
||||
{Math.floor(stigma.criticalBase + stigma.criticalAdd * (stigma.maxLv - 1))} (at Max Lv{' '}
|
||||
{stigma.maxLv})
|
||||
</Box>
|
||||
</Flex>
|
||||
{stigma.skills.map(skill => {
|
||||
return (
|
||||
<Fragment key={skill.id}>
|
||||
<Box sx={{ borderBottom: 'default', p: 1 }}>
|
||||
<Heading
|
||||
as="h3"
|
||||
sx={{
|
||||
mx: 0,
|
||||
my: 1
|
||||
}}
|
||||
>
|
||||
{skill.name}
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: 0,
|
||||
my: 1
|
||||
p: 1,
|
||||
borderBottom: 'default',
|
||||
'&:last-child': {
|
||||
borderBottom: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{skill.name}
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
p: 1,
|
||||
borderBottom: 'default',
|
||||
'&:last-child': {
|
||||
borderBottom: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FormattedText>
|
||||
{formatSubSkillInfo({
|
||||
info: skill.info,
|
||||
maxLv: stigma.maxLv,
|
||||
paramBase1: skill.param1,
|
||||
paramBase2: skill.param2,
|
||||
paramBase3: skill.param3,
|
||||
paramAdd1: skill.param1Add,
|
||||
paramAdd2: skill.param2Add,
|
||||
paramAdd3: skill.param3Add
|
||||
})}
|
||||
</FormattedText>
|
||||
</Box>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Flex>
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
<FormattedText>
|
||||
{formatSubSkillInfo({
|
||||
info: skill.info,
|
||||
maxLv: stigma.maxLv,
|
||||
paramBase1: skill.param1,
|
||||
paramBase2: skill.param2,
|
||||
paramBase3: skill.param3,
|
||||
paramAdd1: skill.param1Add,
|
||||
paramAdd2: skill.param2Add,
|
||||
paramAdd3: skill.param3Add
|
||||
})}
|
||||
</FormattedText>
|
||||
</Box>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Flex>
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
|
||||
<Card mb={3}>
|
||||
{stigmataSet.skills.map((skill, index) => {
|
||||
return (
|
||||
<Fragment key={skill.id}>
|
||||
<Box sx={{ borderBottom: 'default' }}>
|
||||
<Heading
|
||||
as="h3"
|
||||
<Card mb={3}>
|
||||
{stigmataSet.skills.map((skill, index) => {
|
||||
return (
|
||||
<Fragment key={skill.id}>
|
||||
<Box sx={{ borderBottom: 'default' }}>
|
||||
<Heading
|
||||
as="h3"
|
||||
sx={{
|
||||
p: 1,
|
||||
m: 1
|
||||
}}
|
||||
>
|
||||
{skill.name} <small>{index + 2}세트</small>
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
p: 1,
|
||||
m: 1
|
||||
borderBottom: 'default',
|
||||
'&:last-child': {
|
||||
borderBottom: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{skill.name} <small>{index + 2}세트</small>
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
p: 1,
|
||||
borderBottom: 'default',
|
||||
'&:last-child': {
|
||||
borderBottom: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FormattedText>
|
||||
{formatSubSkillInfo({
|
||||
info: skill.info,
|
||||
maxLv: 1,
|
||||
paramBase1: skill.param1,
|
||||
paramBase2: skill.param2,
|
||||
paramBase3: skill.param3,
|
||||
paramAdd1: skill.param1Add,
|
||||
paramAdd2: skill.param2Add,
|
||||
paramAdd3: skill.param3Add
|
||||
})}
|
||||
</FormattedText>
|
||||
</Box>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
<FormattedText>
|
||||
{formatSubSkillInfo({
|
||||
info: skill.info,
|
||||
maxLv: 1,
|
||||
paramBase1: skill.param1,
|
||||
paramBase2: skill.param2,
|
||||
paramBase3: skill.param3,
|
||||
paramAdd1: skill.param1Add,
|
||||
paramAdd2: skill.param2Add,
|
||||
paramAdd3: skill.param3Add
|
||||
})}
|
||||
</FormattedText>
|
||||
</Box>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
|
||||
<Heading>Images</Heading>
|
||||
<Box mb={3}>
|
||||
{stigmata.map(rootStigma => {
|
||||
const stigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
|
||||
return <StigmaFigureImage key={stigma.id} stigma={stigma} size={480} />
|
||||
})}
|
||||
<Heading>Images</Heading>
|
||||
<Box mb={3}>
|
||||
{stigmata.map(rootStigma => {
|
||||
const stigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
|
||||
return <StigmaFigureImage key={stigma.id} stigma={stigma} size={480} />
|
||||
})}
|
||||
</Box>
|
||||
|
||||
{/* <pre>{JSON.stringify(stigmataSet, null, 2)}</pre> */}
|
||||
</Box>
|
||||
|
||||
{/* <pre>{JSON.stringify(stigmataSet, null, 2)}</pre> */}
|
||||
</Box>
|
||||
</Honkai3rdLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -159,7 +194,8 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
|
||||
return {
|
||||
props: {
|
||||
stigmataSet,
|
||||
stigmata
|
||||
stigmata,
|
||||
...(await getI18NProps(locale))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,69 +1,93 @@
|
||||
/** @jsxImportSource theme-ui */
|
||||
import { Box, Card } from '@theme-ui/components'
|
||||
import { Box, Card, Heading } from '@theme-ui/components'
|
||||
import { NextPageContext } from 'next'
|
||||
import { Flex, Link } from 'theme-ui'
|
||||
|
||||
import { StigmataSetCatalogItem } from '../../../../lib/v2/data/types'
|
||||
import { loadStigmataSetCatalog } from '../../../../lib/v2/server/loadData'
|
||||
import StigmaIcon from '../../../../components/v2/StigmaIcon'
|
||||
import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
|
||||
import Head from '../../../../components/atoms/Head'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { getI18NProps } from '../../../../server/i18n'
|
||||
import Breadcrumb from '../../../../components/organisms/Breadcrumb'
|
||||
|
||||
interface StigmataSetListPageProps {
|
||||
stigmataSetCatalog: StigmataSetCatalogItem[]
|
||||
}
|
||||
|
||||
const StigmataSetListPage = ({ stigmataSetCatalog }: StigmataSetListPageProps) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Box>
|
||||
<h1>Stigmata (Set)</h1>
|
||||
<Flex sx={{ flexWrap: 'wrap' }}>
|
||||
{stigmataSetCatalog
|
||||
.sort((a, b) => {
|
||||
const aId = getId(a.id)
|
||||
const bId = getId(b.id)
|
||||
return bId - aId
|
||||
<Honkai3rdLayout>
|
||||
<Head
|
||||
title={`${t('common.stigmata')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
|
||||
description={t('stigmata-set-list.description')}
|
||||
canonicalHref={`/honkai3rd/v2/stigmata`}
|
||||
/>
|
||||
<Box p={2}>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
|
||||
{ href: '/honkai3rd/v2/stigmata-sets', label: t('common.stigmata-set') }
|
||||
]}
|
||||
/>
|
||||
<Heading as="h1">{t('stigmata-set-list.stigmata-set')}</Heading>
|
||||
|
||||
function getId(id: string): number {
|
||||
if (id === '1290') {
|
||||
return 129.5
|
||||
<Box mb={3}>
|
||||
<Link href="/honkai3rd/v2/stigmata">{t('stigmata-set-list.show-signle-list')}</Link>
|
||||
</Box>
|
||||
|
||||
<Flex sx={{ flexWrap: 'wrap' }}>
|
||||
{stigmataSetCatalog
|
||||
.sort((a, b) => {
|
||||
const aId = getId(a.id)
|
||||
const bId = getId(b.id)
|
||||
return bId - aId
|
||||
|
||||
function getId(id: string): number {
|
||||
if (id === '1290') {
|
||||
return 129.5
|
||||
}
|
||||
if (id === '132') {
|
||||
return 0.2
|
||||
}
|
||||
if (id === '120') {
|
||||
return 0.1
|
||||
}
|
||||
return parseInt(id)
|
||||
}
|
||||
if (id === '132') {
|
||||
return 0.2
|
||||
}
|
||||
if (id === '120') {
|
||||
return 0.1
|
||||
}
|
||||
return parseInt(id)
|
||||
}
|
||||
})
|
||||
.map(stigmataSet => {
|
||||
return (
|
||||
<Box key={stigmataSet.id} m={2}>
|
||||
<Link href={`/v2-pre/stigmata-sets/${stigmataSet.id}`}>
|
||||
<Card p={1}>
|
||||
<Flex sx={{ justifyContent: 'center' }}>
|
||||
{stigmataSet.stigmataList.map(stigma => {
|
||||
return <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.maxRarity} />
|
||||
})}
|
||||
</Flex>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
px: 1,
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
{stigmataSet.name}
|
||||
</Box>
|
||||
{/* {stigma.id} */}
|
||||
</Card>
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</Box>
|
||||
})
|
||||
.map(stigmataSet => {
|
||||
return (
|
||||
<Box key={stigmataSet.id} m={1}>
|
||||
<Link href={`/honkai3rd/v2/stigmata-sets/${stigmataSet.id}`}>
|
||||
<Card p={1}>
|
||||
<Flex sx={{ justifyContent: 'center' }}>
|
||||
{stigmataSet.stigmataList.map(stigma => {
|
||||
return <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.maxRarity} />
|
||||
})}
|
||||
</Flex>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
px: 1,
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
{stigmataSet.name}
|
||||
</Box>
|
||||
{/* {stigma.id} */}
|
||||
</Card>
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Honkai3rdLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -73,6 +97,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
|
||||
const stigmataSetCatalog = loadStigmataSetCatalog()
|
||||
|
||||
return {
|
||||
props: { stigmataSetCatalog }
|
||||
props: { stigmataSetCatalog, ...(await getI18NProps(locale)) }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,11 @@ import { getStigmaTypeLabel } from '../../../../lib/v2/data/text'
|
||||
import StigmaTypeIcon from '../../../../components/v2/StigmaTypeIcon'
|
||||
import StigmaIcon from '../../../../components/v2/StigmaIcon'
|
||||
import StigmaFigureImage from '../../../../components/v2/StigmaFigureImage'
|
||||
import { getI18NProps } from '../../../../server/i18n'
|
||||
import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
|
||||
import Head from '../../../../components/atoms/Head'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Breadcrumb from '../../../../components/organisms/Breadcrumb'
|
||||
|
||||
interface StigmaShowPageProps {
|
||||
rootStigma: RootStigma
|
||||
@@ -16,109 +21,135 @@ interface StigmaShowPageProps {
|
||||
}
|
||||
|
||||
const StigmaShowPage = ({ rootStigma, stigmataSetCatalogItem }: StigmaShowPageProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const stigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
|
||||
|
||||
const atk = Math.floor(stigma.attackBase + stigma.attackAdd * (stigma.maxLv - 1))
|
||||
const hp = Math.floor(stigma.hpBase + stigma.hpAdd * (stigma.maxLv - 1))
|
||||
const def = Math.floor(stigma.defenceBase + stigma.defenceAdd * (stigma.maxLv - 1))
|
||||
const crt = Math.floor(stigma.criticalBase + stigma.criticalAdd * (stigma.maxLv - 1))
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Heading as="h1">{stigma.name}</Heading>
|
||||
<Honkai3rdLayout>
|
||||
<Head
|
||||
title={`${stigma.name} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
|
||||
description={`${t('common.honkai-3rd')} ${t('stigmata-show.stigmata')} /
|
||||
${'⭐'.repeat(stigma.rarity)} / ${t(
|
||||
`stigmata-show.${stigma.type}`
|
||||
)} / HP : ${hp} / ATK : ${atk} / DEF : ${def} / CRT : ${crt}`}
|
||||
canonicalHref={`/honkai3rd/stigmata/${stigma.id}`}
|
||||
/>
|
||||
<Box p={2}>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
|
||||
{ href: '/honkai3rd/v2/stigmata', label: t('common.stigmata') },
|
||||
{
|
||||
href: `/honkai3rd/v2/stigmata/${stigma.id}`,
|
||||
label: stigma.name
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
<Box sx={{ display: ['none', 'none', 'block'] }}>
|
||||
<StigmaFigureImage stigma={stigma} size={720} />
|
||||
</Box>
|
||||
<Box sx={{ display: ['block', 'block', 'none'] }}>
|
||||
<StigmaFigureImage stigma={stigma} size={480} />
|
||||
</Box>
|
||||
<Heading as="h1">{stigma.name}</Heading>
|
||||
|
||||
<Box mb={3}>
|
||||
<StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.rarity} />
|
||||
</Box>
|
||||
|
||||
<Card mb={3}>
|
||||
<Box sx={{ p: 1, borderBottom: 'default' }}>{replaceNewLine(stigma.description)}</Box>
|
||||
<Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
|
||||
<StigmaTypeIcon type={stigma.type} />
|
||||
<Box ml={1}>{getStigmaTypeLabel(stigma.type)}</Box>
|
||||
</Flex>
|
||||
<Box sx={{ p: 1 }}>
|
||||
HP : {Math.floor(stigma.hpBase + stigma.hpAdd * (stigma.maxLv - 1))} / ATK :{' '}
|
||||
{Math.floor(stigma.attackBase + stigma.attackAdd * (stigma.maxLv - 1))} / DEF :{' '}
|
||||
{Math.floor(stigma.defenceBase + stigma.defenceAdd * (stigma.maxLv - 1))} / CRT :{' '}
|
||||
{Math.floor(stigma.criticalBase + stigma.criticalAdd * (stigma.maxLv - 1))} (at Max Lv {stigma.maxLv})
|
||||
<Box sx={{ display: ['none', 'none', 'block'] }}>
|
||||
<StigmaFigureImage stigma={stigma} size={720} />
|
||||
</Box>
|
||||
<Box sx={{ display: ['block', 'block', 'none'] }}>
|
||||
<StigmaFigureImage stigma={stigma} size={480} />
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
<Heading as="h2">Skills</Heading>
|
||||
<Card mb={3}>
|
||||
{stigma.skills.map(skill => {
|
||||
return (
|
||||
<Fragment key={skill.id}>
|
||||
<Box sx={{ borderBottom: 'default' }}>
|
||||
<Heading
|
||||
as="h3"
|
||||
sx={{
|
||||
p: 1,
|
||||
m: 1
|
||||
}}
|
||||
>
|
||||
{skill.name}
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
p: 1,
|
||||
borderBottom: 'default',
|
||||
'&:last-child': {
|
||||
borderBottom: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FormattedText>
|
||||
{formatSubSkillInfo({
|
||||
info: skill.info,
|
||||
maxLv: stigma.maxLv,
|
||||
paramBase1: skill.param1,
|
||||
paramBase2: skill.param2,
|
||||
paramBase3: skill.param3,
|
||||
paramAdd1: skill.param1Add,
|
||||
paramAdd2: skill.param2Add,
|
||||
paramAdd3: skill.param3Add
|
||||
})}
|
||||
</FormattedText>
|
||||
</Box>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
<Box mb={3}>
|
||||
<StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.rarity} />
|
||||
</Box>
|
||||
|
||||
{stigmataSetCatalogItem != null && (
|
||||
<>
|
||||
<Heading as="h2">Set</Heading>
|
||||
<Flex key={stigmataSetCatalogItem.id}>
|
||||
<Link href={`/v2-pre/stigmata-sets/${stigmataSetCatalogItem.id}`}>
|
||||
<Card p={1}>
|
||||
<Flex sx={{ justifyContent: 'center' }}>
|
||||
{stigmataSetCatalogItem.stigmataList.map(stigma => {
|
||||
return <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.maxRarity} />
|
||||
})}
|
||||
</Flex>
|
||||
<Card mb={3}>
|
||||
<Box sx={{ p: 1, borderBottom: 'default' }}>{replaceNewLine(stigma.description)}</Box>
|
||||
<Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
|
||||
<StigmaTypeIcon type={stigma.type} />
|
||||
<Box ml={1}>{getStigmaTypeLabel(stigma.type)}</Box>
|
||||
</Flex>
|
||||
<Box sx={{ p: 1 }}>
|
||||
HP : {hp} / ATK : {atk} / DEF : {def} / CRT : {crt} (at Max Lv {stigma.maxLv})
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
<Heading as="h2">Skills</Heading>
|
||||
<Card mb={3}>
|
||||
{stigma.skills.map(skill => {
|
||||
return (
|
||||
<Fragment key={skill.id}>
|
||||
<Box sx={{ borderBottom: 'default' }}>
|
||||
<Heading
|
||||
as="h3"
|
||||
sx={{
|
||||
p: 1,
|
||||
m: 1
|
||||
}}
|
||||
>
|
||||
{skill.name}
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
px: 1,
|
||||
textAlign: 'center'
|
||||
p: 1,
|
||||
borderBottom: 'default',
|
||||
'&:last-child': {
|
||||
borderBottom: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{stigmataSetCatalogItem.name}
|
||||
<FormattedText>
|
||||
{formatSubSkillInfo({
|
||||
info: skill.info,
|
||||
maxLv: stigma.maxLv,
|
||||
paramBase1: skill.param1,
|
||||
paramBase2: skill.param2,
|
||||
paramBase3: skill.param3,
|
||||
paramAdd1: skill.param1Add,
|
||||
paramAdd2: skill.param2Add,
|
||||
paramAdd3: skill.param3Add
|
||||
})}
|
||||
</FormattedText>
|
||||
</Box>
|
||||
{/* {stigma.id} */}
|
||||
</Card>
|
||||
</Link>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
{/* <pre>{JSON.stringify(weapon, null, 2)}</pre> */}
|
||||
</Box>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
|
||||
{stigmataSetCatalogItem != null && (
|
||||
<>
|
||||
<Heading as="h2">Set</Heading>
|
||||
<Flex key={stigmataSetCatalogItem.id}>
|
||||
<Link href={`/v2-pre/stigmata-sets/${stigmataSetCatalogItem.id}`}>
|
||||
<Card p={1}>
|
||||
<Flex sx={{ justifyContent: 'center' }}>
|
||||
{stigmataSetCatalogItem.stigmataList.map(stigma => {
|
||||
return <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.maxRarity} />
|
||||
})}
|
||||
</Flex>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
px: 1,
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
{stigmataSetCatalogItem.name}
|
||||
</Box>
|
||||
{/* {stigma.id} */}
|
||||
</Card>
|
||||
</Link>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
{/* <pre>{JSON.stringify(weapon, null, 2)}</pre> */}
|
||||
</Box>
|
||||
</Honkai3rdLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -148,7 +179,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
|
||||
}
|
||||
|
||||
return {
|
||||
props: { rootStigma, stigmataSetCatalogItem }
|
||||
props: { rootStigma, stigmataSetCatalogItem, ...(await getI18NProps(locale)) }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
/** @jsxImportSource theme-ui */
|
||||
import { Box, Card } from '@theme-ui/components'
|
||||
import { Box, Card, Heading } from '@theme-ui/components'
|
||||
import { NextPageContext } from 'next'
|
||||
import { Flex, Link } from 'theme-ui'
|
||||
|
||||
import { StigmataCatalogItem } from '../../../../lib/v2/data/types'
|
||||
import { loadStigmataCatalog } from '../../../../lib/v2/server/loadData'
|
||||
import StigmaIcon from '../../../../components/v2/StigmaIcon'
|
||||
import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
|
||||
import { getI18NProps } from '../../../../server/i18n'
|
||||
|
||||
interface StigmataListPageProps {
|
||||
stigmataCatalog: StigmataCatalogItem[]
|
||||
@@ -13,40 +15,43 @@ interface StigmataListPageProps {
|
||||
|
||||
const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => {
|
||||
return (
|
||||
<Box>
|
||||
<h1>Stigmata (Single)</h1>
|
||||
<Flex sx={{ flexWrap: 'wrap' }}>
|
||||
{stigmataCatalog
|
||||
.filter(filterStigmata)
|
||||
.sort(sortStigmata)
|
||||
.map(stigma => {
|
||||
return (
|
||||
<Box key={stigma.id} m={2}>
|
||||
<Link href={`/v2-pre/stigmata/${stigma.id}`}>
|
||||
<Card p={1}>
|
||||
<Flex sx={{ justifyContent: 'center' }}>
|
||||
<StigmaIcon icon={stigma.icon} rarity={stigma.maxRarity} />
|
||||
</Flex>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
px: 1,
|
||||
width: 112,
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
{stigma.name}
|
||||
</Box>
|
||||
{/* {stigma.id} */}
|
||||
</Card>
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</Box>
|
||||
<Honkai3rdLayout>
|
||||
<Box>
|
||||
<Heading as="h1">Stigmata (Single)</Heading>
|
||||
|
||||
<Flex sx={{ flexWrap: 'wrap' }}>
|
||||
{stigmataCatalog
|
||||
.filter(filterStigmata)
|
||||
.sort(sortStigmata)
|
||||
.map(stigma => {
|
||||
return (
|
||||
<Box key={stigma.id} m={2}>
|
||||
<Link href={`/v2-pre/stigmata/${stigma.id}`}>
|
||||
<Card p={1}>
|
||||
<Flex sx={{ justifyContent: 'center' }}>
|
||||
<StigmaIcon icon={stigma.icon} rarity={stigma.maxRarity} />
|
||||
</Flex>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
px: 1,
|
||||
width: 112,
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
{stigma.name}
|
||||
</Box>
|
||||
{/* {stigma.id} */}
|
||||
</Card>
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Honkai3rdLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -56,7 +61,7 @@ export async function getStaticProps({ locale }: NextPageContext) {
|
||||
const stigmataCatalog = loadStigmataCatalog()
|
||||
|
||||
return {
|
||||
props: { stigmataCatalog }
|
||||
props: { stigmataCatalog, ...(await getI18NProps(locale)) }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -8,77 +8,104 @@ import { Fragment } from 'react'
|
||||
import { getWeaponTypeLabel } from '../../../../lib/v2/data/text'
|
||||
import WeaponTypeIcon from '../../../../components/v2/WeaponTypeIcon'
|
||||
import WeaponIcon from '../../../../components/v2/WeaponIcon'
|
||||
import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
|
||||
import Head from '../../../../components/atoms/Head'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { getI18NProps } from '../../../../server/i18n'
|
||||
import Breadcrumb from '../../../../components/organisms/Breadcrumb'
|
||||
|
||||
interface WeaponShowPageProps {
|
||||
rootWeapon: RootWeaponData
|
||||
}
|
||||
|
||||
const WeaponShowPage = ({ rootWeapon }: WeaponShowPageProps) => {
|
||||
const { t } = useTranslation()
|
||||
const weapon = rootWeapon.weapons[rootWeapon.weapons.length - 1]
|
||||
|
||||
const weaponTypeLabel = getWeaponTypeLabel(weapon.type)
|
||||
const atk = Math.floor(weapon.attackBase + weapon.attackAdd * (weapon.maxLv - 1))
|
||||
const crt = Math.floor(weapon.criticalBase + weapon.criticalAdd * (weapon.maxLv - 1))
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Heading as="h1">{weapon.name}</Heading>
|
||||
<Honkai3rdLayout>
|
||||
<Head
|
||||
title={`${weapon.name} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
|
||||
description={`${t('common.honkai-3rd')} ${t('weapons-show.weapon')} / ${'⭐'.repeat(
|
||||
weapon.rarity
|
||||
)} / ${weaponTypeLabel} / ATK : ${atk} / CRT : ${crt}`}
|
||||
canonicalHref={`/honkai3rd/v2/weapons/${weapon.id}`}
|
||||
/>
|
||||
<Box p={2}>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
|
||||
{ href: '/honkai3rd/v2/weapons', label: t('common.weapons') },
|
||||
{ href: `/honkai3rd/v2/weapons/${weapon.id}`, label: weapon.name }
|
||||
]}
|
||||
/>
|
||||
|
||||
<Box mb={3}>
|
||||
<WeaponIcon key={weapon.id} icon={weapon.icon} rarity={weapon.rarity} />
|
||||
</Box>
|
||||
<Heading as="h1">{weapon.name}</Heading>
|
||||
|
||||
<Card mb={3}>
|
||||
<Box sx={{ p: 1, borderBottom: 'default' }}>{replaceNewLine(weapon.description)}</Box>
|
||||
<Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
|
||||
<WeaponTypeIcon type={weapon.type} />
|
||||
<Box ml={1}>{getWeaponTypeLabel(weapon.type)}</Box>
|
||||
</Flex>
|
||||
<Box sx={{ p: 1 }}>
|
||||
ATK : {Math.floor(weapon.attackBase + weapon.attackAdd * (weapon.maxLv - 1))} / CRT :{' '}
|
||||
{Math.floor(weapon.criticalBase + weapon.criticalAdd * (weapon.maxLv - 1))} (at Max Lv {weapon.maxLv})
|
||||
<Box mb={3}>
|
||||
<WeaponIcon key={weapon.id} icon={weapon.icon} rarity={weapon.rarity} />
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
<Heading as="h2">Skills</Heading>
|
||||
<Card>
|
||||
{weapon.skills.map(skill => {
|
||||
return (
|
||||
<Fragment key={skill.id}>
|
||||
<Box sx={{ borderBottom: 'default' }}>
|
||||
<Heading
|
||||
as="h3"
|
||||
<Card mb={3}>
|
||||
<Box sx={{ p: 1, borderBottom: 'default' }}>{replaceNewLine(weapon.description)}</Box>
|
||||
<Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
|
||||
<WeaponTypeIcon type={weapon.type} />
|
||||
<Box ml={1}>{getWeaponTypeLabel(weapon.type)}</Box>
|
||||
</Flex>
|
||||
<Box sx={{ p: 1 }}>
|
||||
ATK : {atk} / CRT : {crt} (at Max Lv {weapon.maxLv})
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
<Heading as="h2">Skills</Heading>
|
||||
<Card>
|
||||
{weapon.skills.map(skill => {
|
||||
return (
|
||||
<Fragment key={skill.id}>
|
||||
<Box sx={{ borderBottom: 'default' }}>
|
||||
<Heading
|
||||
as="h3"
|
||||
sx={{
|
||||
p: 1,
|
||||
m: 1
|
||||
}}
|
||||
>
|
||||
{skill.name}
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
p: 1,
|
||||
m: 1
|
||||
borderBottom: 'default',
|
||||
'&:last-child': {
|
||||
borderBottom: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{skill.name}
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
p: 1,
|
||||
borderBottom: 'default',
|
||||
'&:last-child': {
|
||||
borderBottom: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FormattedText>
|
||||
{formatSubSkillInfo({
|
||||
info: skill.info,
|
||||
maxLv: weapon.maxLv,
|
||||
paramBase1: skill.param1,
|
||||
paramBase2: skill.param2,
|
||||
paramBase3: skill.param3,
|
||||
paramAdd1: skill.param1Add,
|
||||
paramAdd2: skill.param2Add,
|
||||
paramAdd3: skill.param3Add
|
||||
})}
|
||||
</FormattedText>
|
||||
</Box>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
{/* <pre>{JSON.stringify(weapon, null, 2)}</pre> */}
|
||||
</Box>
|
||||
<FormattedText>
|
||||
{formatSubSkillInfo({
|
||||
info: skill.info,
|
||||
maxLv: weapon.maxLv,
|
||||
paramBase1: skill.param1,
|
||||
paramBase2: skill.param2,
|
||||
paramBase3: skill.param3,
|
||||
paramAdd1: skill.param1Add,
|
||||
paramAdd2: skill.param2Add,
|
||||
paramAdd3: skill.param3Add
|
||||
})}
|
||||
</FormattedText>
|
||||
</Box>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
{/* <pre>{JSON.stringify(weapon, null, 2)}</pre> */}
|
||||
</Box>
|
||||
</Honkai3rdLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -88,7 +115,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
|
||||
const rootWeapon = loadWeaponData(params.weaponId)
|
||||
|
||||
return {
|
||||
props: { rootWeapon }
|
||||
props: { rootWeapon, ...(await getI18NProps(locale)) }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,51 +1,70 @@
|
||||
/** @jsxImportSource theme-ui */
|
||||
import { Box, Card } from '@theme-ui/components'
|
||||
import { NextPageContext } from 'next'
|
||||
import { Flex, Link } from 'theme-ui'
|
||||
import { Flex, Heading, Link } from 'theme-ui'
|
||||
import { loadWeaponCatalog } from '../../../../lib/v2/server/loadData'
|
||||
import { WeaponCatalogItem } from '../../../../lib/v2/data/types'
|
||||
import WeaponIcon from '../../../../components/v2/WeaponIcon'
|
||||
import Head from '../../../../components/atoms/Head'
|
||||
import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { getI18NProps } from '../../../../server/i18n'
|
||||
import Breadcrumb from '../../../../components/organisms/Breadcrumb'
|
||||
|
||||
interface WeaponListPageProps {
|
||||
weaponCatalog: WeaponCatalogItem[]
|
||||
}
|
||||
|
||||
const WeaponListPage = ({ weaponCatalog }: WeaponListPageProps) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Box>
|
||||
<h1>Weapons</h1>
|
||||
<Flex sx={{ flexWrap: 'wrap' }}>
|
||||
{weaponCatalog
|
||||
.filter(filterWeapons)
|
||||
.sort(sortWeapons)
|
||||
.map(weapon => {
|
||||
return (
|
||||
<Box key={weapon.id} m={2}>
|
||||
<Link href={`/v2-pre/weapons/${weapon.id}`}>
|
||||
<Card p={1}>
|
||||
<Flex sx={{ justifyContent: 'center' }}>
|
||||
<WeaponIcon icon={weapon.icon} rarity={weapon.maxRarity} />
|
||||
</Flex>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
px: 1,
|
||||
width: 112,
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
{weapon.name}
|
||||
</Box>
|
||||
{/* {weapon.id} */}
|
||||
</Card>
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</Box>
|
||||
<Honkai3rdLayout>
|
||||
<Head
|
||||
title={`${t('common.weapons')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
|
||||
description={t('weapons-list.description')}
|
||||
canonicalHref={`/honkai3rd/v2/weapons`}
|
||||
/>
|
||||
<Box p={2}>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
|
||||
{ href: '/honkai3rd/v2/weapons', label: t('common.weapons') }
|
||||
]}
|
||||
/>
|
||||
<Heading as="h1">{t('common.weapons')}</Heading>
|
||||
<Flex sx={{ flexWrap: 'wrap' }}>
|
||||
{weaponCatalog
|
||||
.filter(filterWeapons)
|
||||
.sort(sortWeapons)
|
||||
.map(weapon => {
|
||||
return (
|
||||
<Box key={weapon.id} m={1}>
|
||||
<Link href={`/honkai3rd/v2/weapons/${weapon.id}`}>
|
||||
<Card p={1}>
|
||||
<Flex sx={{ justifyContent: 'center' }}>
|
||||
<WeaponIcon icon={weapon.icon} rarity={weapon.maxRarity} />
|
||||
</Flex>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
px: 1,
|
||||
width: 112,
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
{weapon.name}
|
||||
</Box>
|
||||
{/* {weapon.id} */}
|
||||
</Card>
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Honkai3rdLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -55,7 +74,7 @@ export async function getStaticProps({ locale }: NextPageContext) {
|
||||
const weaponCatalog = loadWeaponCatalog()
|
||||
|
||||
return {
|
||||
props: { weaponCatalog }
|
||||
props: { weaponCatalog, ...(await getI18NProps(locale)) }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user