Add stigmata pages

This commit is contained in:
Sakura Knoll
2023-07-11 02:39:32 +09:00 Unverified
parent 4c875ecb8b
commit 95fd4af7cf
17 changed files with 716 additions and 38 deletions
@@ -139,7 +139,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
</Card>
)
})}
<pre>{JSON.stringify(battlesuit, null, 2)}</pre>
{/* <pre>{JSON.stringify(battlesuit, null, 2)}</pre> */}
</Box>
)
}
+1
View File
@@ -4,6 +4,7 @@ const HomePage = () => {
<h1>V2 Pre</h1>
<a href="/v2-pre/battlesuits">Battlesuits</a>
<a href="/v2-pre/weapons">Weapons</a>
<a href="/v2-pre/stigmata">Stigmata</a>
</div>
)
}
+122
View File
@@ -0,0 +1,122 @@
import { NextPageContext } from 'next'
import { Box, Card, Flex, Heading } from 'theme-ui'
import FormattedText from '../../../components/v2-pre/FormattedText'
import { formatSubSkillInfo, replaceNewLine } from '../../../lib/v2-pre/data/formatText'
import { loadStigmaData, loadStigmataCatalog } from '../../../lib/v2-pre/server/loadData'
import { RootStigma, SkillTagItem } from '../../../lib/v2-pre/data/types'
import { Fragment } from 'react'
import TagIcon from '../../../components/v2-pre/TagIcon'
import { getStigmaTypeLabel } from '../../../lib/v2-pre/data/text'
import StigmaTypeIcon from '../../../components/v2-pre/StigmaTypeIcon'
import StigmaIcon from '../../../components/v2-pre/StigmaIcon'
import StigmaFigureImage from '../../../components/v2-pre/StigmaFigureImage'
interface WeaponShowPageProps {
rootStigma: RootStigma
}
const StigmaShowPage = ({ rootStigma }: WeaponShowPageProps) => {
const stigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
return (
<Box>
<Heading as="h1">{stigma.name}</Heading>
<Box>
<StigmaFigureImage stigma={stigma} size={720} />
</Box>
<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>
</Card>
<Heading as="h2">Skills</Heading>
<Card>
{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>
{/* <pre>{JSON.stringify(weapon, null, 2)}</pre> */}
</Box>
)
}
export default StigmaShowPage
export async function getStaticProps({ locale, params }: NextPageContext & { params: { stigmaId: string } }) {
const rootStigma = loadStigmaData(params.stigmaId)
return {
props: { rootStigma }
}
}
export async function getStaticPaths() {
const stigmataCatalog = loadStigmataCatalog()
return {
paths: stigmataCatalog.map(catalogItem => {
return {
params: { stigmaId: catalogItem.id }
}
}),
fallback: false
}
}
interface SkillTagBoxProps {
tag: SkillTagItem
}
const SkillTagItem = ({ tag }: SkillTagBoxProps) => {
return <TagIcon type={tag.type} strength={tag.strength} comment={tag.comment} size="sm" />
}
+73
View File
@@ -0,0 +1,73 @@
/** @jsxImportSource theme-ui */
import { Box, Card } from '@theme-ui/components'
import { NextPageContext } from 'next'
import { Flex, Link } from 'theme-ui'
import { StigmataCatalogItem } from '../../../lib/v2-pre/data/types'
import { loadStigmataCatalog } from '../../../lib/v2-pre/server/loadData'
import StigmaIcon from '../../../components/v2-pre/StigmaIcon'
interface StigmataListPageProps {
stigmataCatalog: StigmataCatalogItem[]
}
const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => {
return (
<Box>
<h1>Stigmata</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>
)
}
export default StigmataListPage
export async function getStaticProps({ locale }: NextPageContext) {
const stigmataCatalog = loadStigmataCatalog()
return {
props: { stigmataCatalog }
}
}
function filterStigmata(weapon: StigmataCatalogItem) {
return true
}
function sortStigmata(a: StigmataCatalogItem, b: StigmataCatalogItem) {
let aId = parseInt(a.id)
let bId = parseInt(b.id)
return bId - aId
}
+2 -2
View File
@@ -1,7 +1,7 @@
import { NextPageContext } from 'next'
import { Box, Card, Flex, Heading } from 'theme-ui'
import FormattedText from '../../../components/v2-pre/FormattedText'
import { formatSubSkillInfo } from '../../../lib/v2-pre/data/formatText'
import { formatSubSkillInfo, replaceNewLine } from '../../../lib/v2-pre/data/formatText'
import { loadWeaponCatalog, loadWeaponData } from '../../../lib/v2-pre/server/loadData'
import { RootWeaponData, SkillTagItem } from '../../../lib/v2-pre/data/types'
import { Fragment } from 'react'
@@ -25,7 +25,7 @@ const WeaponShowPage = ({ rootWeapon }: WeaponShowPageProps) => {
</Box>
<Card mb={3}>
<Box sx={{ p: 1, borderBottom: 'default' }}>{weapon.description}</Box>
<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>
+3 -3
View File
@@ -6,11 +6,11 @@ import { loadWeaponCatalog } from '../../../lib/v2-pre/server/loadData'
import { WeaponCatalogItem } from '../../../lib/v2-pre/data/types'
import WeaponIcon from '../../../components/v2-pre/WeaponIcon'
interface BattlesuitListPageProps {
interface WeaponListPageProps {
weaponCatalog: WeaponCatalogItem[]
}
const BattlesuitListPage = ({ weaponCatalog }: BattlesuitListPageProps) => {
const WeaponListPage = ({ weaponCatalog }: WeaponListPageProps) => {
return (
<Box>
<h1>Weapons</h1>
@@ -49,7 +49,7 @@ const BattlesuitListPage = ({ weaponCatalog }: BattlesuitListPageProps) => {
)
}
export default BattlesuitListPage
export default WeaponListPage
export async function getStaticProps({ locale }: NextPageContext) {
const weaponCatalog = loadWeaponCatalog()