Add stigmata and weapon print page
This commit is contained in:
Sakura Knoll
@@ -0,0 +1,195 @@
|
||||
/** @jsxImportSource theme-ui */
|
||||
import { NextPageContext } from 'next'
|
||||
import React from 'react'
|
||||
import PageLink from '../../../../components/atoms/PageLink'
|
||||
import { StigmataSetProps } from '../../../../components/pages/StigmataSetPage'
|
||||
import { generateI18NPaths, getI18NProps } from '../../../../server/i18n'
|
||||
import {
|
||||
listStigmata,
|
||||
getStigmataById,
|
||||
getStigmataListBySetId,
|
||||
getStigmataSetBySetId,
|
||||
listStigmataSet,
|
||||
} from '../../../../server/data/honkai3rd/stigmata'
|
||||
import { Box, Card, Flex, Heading, Paragraph } from 'theme-ui'
|
||||
import SecondaryLabel from '../../../../components/atoms/SecondaryLabel'
|
||||
import StigmataCard from '../../../../components/molecules/StigmataCard'
|
||||
import { translate, useTranslation } from '../../../../lib/i18n'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
type StigmataShowPageProps = StigmataSetProps
|
||||
|
||||
const StigmataListPage = ({
|
||||
stigmataSet,
|
||||
stigmataSetList,
|
||||
}: StigmataShowPageProps) => {
|
||||
const { t } = useTranslation()
|
||||
const { locale } = useRouter()
|
||||
|
||||
const stigmataSetName = translate(
|
||||
locale,
|
||||
{ 'ko-KR': stigmataSet.krName },
|
||||
stigmataSet.name
|
||||
)
|
||||
const stigmataSetAltName = translate(
|
||||
locale,
|
||||
{ 'ko-KR': stigmataSet.krAltName },
|
||||
stigmataSet.altName
|
||||
)
|
||||
|
||||
return (
|
||||
<Box p={3}>
|
||||
<Box mb={3}>
|
||||
<Heading as='h1' mb={0}>
|
||||
{stigmataSetName}
|
||||
</Heading>
|
||||
<SecondaryLabel>{stigmataSetAltName}</SecondaryLabel>
|
||||
</Box>
|
||||
|
||||
<Card mb={3}>
|
||||
<Flex
|
||||
p={2}
|
||||
sx={{
|
||||
borderBottom: 'default',
|
||||
justifyContent: 'space-around',
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
{stigmataSetList.map((stigmataSetItem) => {
|
||||
return (
|
||||
<StigmataCard
|
||||
key={stigmataSetItem.id}
|
||||
stigmata={stigmataSetItem}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
{stigmataSetList.map((stigmataSetItem) => {
|
||||
const stigmataName = translate(
|
||||
locale,
|
||||
{ 'ko-KR': stigmataSetItem.krName },
|
||||
stigmataSetItem.name
|
||||
)
|
||||
const stigmataSkillDescrpition = translate(
|
||||
locale,
|
||||
{ 'ko-KR': stigmataSetItem.skill.krDescription },
|
||||
stigmataSetItem.skill.description
|
||||
)
|
||||
return (
|
||||
<React.Fragment key={stigmataSetItem.id}>
|
||||
<Box sx={{ p: 2, borderBottom: 'default' }}>
|
||||
<Heading as='h2' mb={1}>
|
||||
<PageLink href={`/honkai3rd/stigmata/${stigmataSetItem.id}`}>
|
||||
{stigmataName}
|
||||
</PageLink>
|
||||
</Heading>
|
||||
<SecondaryLabel>
|
||||
{t(`stigmata-show.${stigmataSetItem.type}`)}
|
||||
</SecondaryLabel>
|
||||
</Box>
|
||||
<Box p={2} sx={{ borderBottom: 'default' }}>
|
||||
HP : {stigmataSetItem.hp} / ATK : {stigmataSetItem.atk} / DEF :{' '}
|
||||
{stigmataSetItem.def} / CRT : {stigmataSetItem.crt}
|
||||
</Box>
|
||||
<Paragraph
|
||||
m={0}
|
||||
p={2}
|
||||
sx={{
|
||||
borderBottom: 'default',
|
||||
'&:last-child': { borderBottom: 'none' },
|
||||
}}
|
||||
>
|
||||
{stigmataSkillDescrpition}
|
||||
</Paragraph>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Heading as='h2' m={0} p={2} sx={{ borderBottom: 'default' }}>
|
||||
{translate(
|
||||
locale,
|
||||
{ 'ko-KR': stigmataSet.twoSetSkill.krName },
|
||||
stigmataSet.twoSetSkill.name
|
||||
)}
|
||||
</Heading>
|
||||
<Paragraph m={0} p={2} sx={{ borderBottom: 'default' }}>
|
||||
{translate(
|
||||
locale,
|
||||
{ 'ko-KR': stigmataSet.twoSetSkill.krDescription },
|
||||
stigmataSet.twoSetSkill.description
|
||||
)}
|
||||
</Paragraph>
|
||||
<Heading as='h2' m={0} p={2} sx={{ borderBottom: 'default' }}>
|
||||
{translate(
|
||||
locale,
|
||||
{
|
||||
'ko-KR': stigmataSet.threeSetSkill.krName,
|
||||
},
|
||||
stigmataSet.threeSetSkill.name
|
||||
)}
|
||||
</Heading>
|
||||
<Paragraph m={0} p={2}>
|
||||
{translate(
|
||||
locale,
|
||||
{ 'ko-KR': stigmataSet.threeSetSkill.krDescription },
|
||||
stigmataSet.threeSetSkill.description
|
||||
)}
|
||||
</Paragraph>
|
||||
</Card>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default StigmataListPage
|
||||
|
||||
export async function getStaticProps({
|
||||
params,
|
||||
locale,
|
||||
}: NextPageContext & { params: { stigmataId: string } }) {
|
||||
const stigmataData = getStigmataById(params.stigmataId)!
|
||||
if (stigmataData != null) {
|
||||
return {
|
||||
props: {
|
||||
type: 'single',
|
||||
stigmataData: stigmataData,
|
||||
stigmataSetList: (getStigmataListBySetId(stigmataData.set!) || []).sort(
|
||||
(a, b) => -a.type.localeCompare(b.type)
|
||||
),
|
||||
stigmataSet: getStigmataSetBySetId(stigmataData.set!) || null,
|
||||
...(await getI18NProps(locale)),
|
||||
},
|
||||
}
|
||||
}
|
||||
const [stigmataSetId] = params.stigmataId.split('-set')
|
||||
const stigmataSet = getStigmataSetBySetId(stigmataSetId)!
|
||||
return {
|
||||
props: {
|
||||
type: 'set',
|
||||
stigmataSet,
|
||||
stigmataSetList: (getStigmataListBySetId(stigmataSet.id) || []).sort(
|
||||
(a, b) => -a.type.localeCompare(b.type)
|
||||
),
|
||||
...(await getI18NProps(locale)),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export async function getStaticPaths() {
|
||||
return {
|
||||
paths: generateI18NPaths([
|
||||
...listStigmata().map((stigmata) => {
|
||||
return {
|
||||
params: { stigmataId: stigmata.id },
|
||||
}
|
||||
}),
|
||||
...listStigmataSet().map((stigmataSet) => {
|
||||
return {
|
||||
params: { stigmataId: `${stigmataSet.id}-set` },
|
||||
}
|
||||
}),
|
||||
]),
|
||||
fallback: false,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
/** @jsxImportSource theme-ui */
|
||||
import { Box, Card, Heading, Paragraph } from '@theme-ui/components'
|
||||
import { NextPageContext } from 'next'
|
||||
import SquareImageBox from '../../../../components/atoms/SquareImageBox'
|
||||
import { WeaponData } from '../../../../lib/honkai3rd/weapons'
|
||||
import { generateI18NPaths, getI18NProps } from '../../../../server/i18n'
|
||||
import {
|
||||
getWeaponById,
|
||||
getWeaponMapByIds,
|
||||
listWeapons,
|
||||
} from '../../../../server/data/honkai3rd/weapons'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslation, translate } from '../../../../lib/i18n'
|
||||
import PageLink from '../../../../components/atoms/PageLink'
|
||||
import { assetsBucketBaseUrl } from '../../../../lib/consts'
|
||||
import { getBattlesuitMapByIds } from '../../../../server/data/honkai3rd/battlesuits'
|
||||
import { BattlesuitData } from '../../../../lib/honkai3rd/battlesuits'
|
||||
import BattlesuitCard from '../../../../components/molecules/BattlesuitCard'
|
||||
import WeaponCard from '../../../../components/molecules/WeaponCard'
|
||||
|
||||
interface WeaponShowPageProps {
|
||||
weapon: WeaponData
|
||||
battlesuitMap: { [key: string]: BattlesuitData }
|
||||
weaponMap: { [key: string]: WeaponData }
|
||||
}
|
||||
|
||||
const WeaponShowPage = ({
|
||||
weapon,
|
||||
battlesuitMap,
|
||||
weaponMap,
|
||||
}: WeaponShowPageProps) => {
|
||||
const { locale } = useRouter()
|
||||
const { t } = useTranslation()
|
||||
|
||||
const weaponName = translate(locale, { 'ko-KR': weapon.krName }, weapon.name)
|
||||
const weaponCategory = t(`weapons-show.${weapon.category}`)
|
||||
|
||||
return (
|
||||
<Box p={3}>
|
||||
<Heading as='h1'>{weaponName}</Heading>
|
||||
|
||||
<Box mb={3}>
|
||||
<SquareImageBox
|
||||
size={100}
|
||||
alt={weaponName}
|
||||
src={`${assetsBucketBaseUrl}/honkai3rd/weapons/${weapon.id}.png`}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Card mb={3}>
|
||||
<Box p={2} sx={{ borderBottom: 'default' }}>
|
||||
<PageLink
|
||||
href={{
|
||||
pathname: '/honkai3rd/weapons',
|
||||
query: { filter: weapon.category },
|
||||
}}
|
||||
>
|
||||
{weaponCategory}
|
||||
</PageLink>
|
||||
</Box>
|
||||
<Box p={2} sx={{ borderBottom: 'default' }}>
|
||||
{'⭐'.repeat(weapon.rarity)}
|
||||
</Box>
|
||||
<Box p={2}>
|
||||
ATK : {weapon.atk} / CRT : {weapon.crt}
|
||||
</Box>
|
||||
{weapon.battlesuits != null && weapon.battlesuits.length > 0 && (
|
||||
<Box sx={{ p: 2, borderTop: 'default' }}>
|
||||
<Heading as='h4'>{t('weapons-show.best-on')}</Heading>
|
||||
{weapon.battlesuits.map(({ id: battlesuitId }) => {
|
||||
return (
|
||||
<BattlesuitCard
|
||||
key={battlesuitId}
|
||||
size='sm'
|
||||
battlesuit={battlesuitMap[battlesuitId]}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
{weapon.priWeapon != null && (
|
||||
<Box sx={{ p: 2, borderTop: 'default' }}>
|
||||
<Heading as='h4'>{t('weapons-show.pri-weapon')}</Heading>
|
||||
<WeaponCard size='sm' weapon={weaponMap[weapon.priWeapon]} />
|
||||
</Box>
|
||||
)}
|
||||
{weapon.originalWeapons != null && weapon.originalWeapons.length > 0 && (
|
||||
<Box sx={{ p: 2, borderTop: 'default' }}>
|
||||
<Heading as='h4'>{t('weapons-show.original-weapon')}</Heading>
|
||||
{weapon.originalWeapons.map((originalWeaponId) => {
|
||||
return (
|
||||
<WeaponCard
|
||||
key={originalWeaponId}
|
||||
size='sm'
|
||||
weapon={weaponMap[originalWeaponId]}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
{/* {weapon.sources != null && (
|
||||
<Box sx={{ p: 2, borderTop: 'default' }}>
|
||||
<Heading as='h4'>{t('weapons-show.sources')}</Heading>
|
||||
{weapon.sources
|
||||
.sort((a, b) => a.type.localeCompare(b.type))
|
||||
.map((source) => {
|
||||
return <SourceCard key={source.type} source={source} />
|
||||
})}
|
||||
</Box>
|
||||
)} */}
|
||||
</Card>
|
||||
|
||||
<Box>
|
||||
{weapon.skills.map((skill) => {
|
||||
return (
|
||||
<Card key={skill.name} mb={3}>
|
||||
<Heading as='h3' p={2} m={0} sx={{ borderBottom: 'default' }}>
|
||||
{translate(locale, { 'ko-KR': skill.krName }, skill.name)}
|
||||
</Heading>
|
||||
<Paragraph
|
||||
p={2}
|
||||
sx={{
|
||||
whiteSpace: 'pre-wrap',
|
||||
}}
|
||||
>
|
||||
{translate(
|
||||
locale,
|
||||
{ 'ko-KR': skill.krDescription },
|
||||
skill.description
|
||||
)}
|
||||
</Paragraph>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default WeaponShowPage
|
||||
|
||||
export async function getStaticProps({
|
||||
params,
|
||||
locale,
|
||||
}: NextPageContext & { params: { weaponId: string } }) {
|
||||
const weapon = getWeaponById(params.weaponId)
|
||||
const battlesuitMap = getBattlesuitMapByIds(
|
||||
weapon != null && weapon.battlesuits != null
|
||||
? weapon.battlesuits.map(({ id }) => id)
|
||||
: []
|
||||
)
|
||||
|
||||
const weaponIds = []
|
||||
if (weapon != null) {
|
||||
if (weapon.priWeapon != null) {
|
||||
weaponIds.push(weapon.priWeapon)
|
||||
}
|
||||
if (weapon.originalWeapons != null) {
|
||||
weaponIds.push(...weapon.originalWeapons)
|
||||
}
|
||||
}
|
||||
const weaponMap = getWeaponMapByIds(weaponIds)
|
||||
|
||||
return {
|
||||
props: {
|
||||
weapon,
|
||||
battlesuitMap,
|
||||
weaponMap,
|
||||
...(await getI18NProps(locale)),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export async function getStaticPaths() {
|
||||
return {
|
||||
paths: generateI18NPaths(
|
||||
listWeapons().map((weapon) => {
|
||||
return {
|
||||
params: { weaponId: weapon.id },
|
||||
}
|
||||
})
|
||||
),
|
||||
fallback: false,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user