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