Move current version data to index page

This commit is contained in:
Sakura Knoll
2022-07-23 00:36:17 +09:00 Unverified
parent 81a336985d
commit 64305bd2dc
4 changed files with 244 additions and 335 deletions
+5 -199
View File
@@ -1,17 +1,8 @@
/** @jsxImportSource theme-ui */
import { Box, Flex, Heading, Link, Text, Paragraph } from '@theme-ui/components'
import { Box, Heading, Link } from '@theme-ui/components'
import NextLink from 'next/link'
import SquareImageBox from '../../../components/atoms/SquareImageBox'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import GanttChart from '../../../components/organisms/GanttChart'
import { getBattlesuitById } from '../../../server/data/honkai3rd/battlesuits'
import {
getCurrentVersion,
listVersionData,
} from '../../../server/data/honkai3rd/versions'
import { getWeaponById } from '../../../server/data/honkai3rd/weapons'
import { addDateToDateString, getDateString } from '../../../lib/string'
import ScrollContainer from 'react-indiana-drag-scroll'
import { listVersionData } from '../../../server/data/honkai3rd/versions'
import { format as formatDate } from 'date-fns'
import { BattlesuitData } from '../../../lib/honkai3rd/battlesuits'
import { WeaponData } from '../../../lib/honkai3rd/weapons'
@@ -20,16 +11,8 @@ import { getI18NProps } from '../../../server/i18n'
import { NextPageContext } from 'next'
import { useTranslation } from '../../../lib/i18n'
import Head from '../../../components/atoms/Head'
import PageLink from '../../../components/atoms/PageLink'
import { assetsBucketBaseUrl } from '../../../lib/consts'
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
import WeaponCard from '../../../components/molecules/WeaponCard'
import BattlesuitCard from '../../../components/molecules/BattlesuitCard'
import { useEffect, useState } from 'react'
import BossTable from '../../../components/organisms/BossTable'
import { getStigmataSetBySetId } from '../../../server/data/honkai3rd/stigmata'
import { StigmataSet } from '../../../lib/honkai3rd/stigmata'
import StigmataSetCard from '../../../components/molecules/StigmataSetCard'
interface VersionIndexPageProps {
versionDataList: VersionData[]
@@ -39,18 +22,8 @@ interface VersionIndexPageProps {
currentVersionNewStigmataSets: StigmataSet[]
}
const VersionIndexPage = ({
currentVersionData,
currentVersionNewBattlesuits,
versionDataList,
currentVersionNewWeapons,
currentVersionNewStigmataSets,
}: VersionIndexPageProps) => {
const VersionIndexPage = ({ versionDataList }: VersionIndexPageProps) => {
const { t } = useTranslation()
const [today, setToday] = useState<Date | null>(null)
useEffect(() => {
setToday(new Date(getDateString(new Date())))
}, [])
return (
<Honkai3rdLayout>
@@ -68,137 +41,9 @@ const VersionIndexPage = ({
{ href: '/honkai3rd/versions', label: t('common.versions') },
]}
/>
<Box mb={4}>
<Box mb={2}>
{currentVersionData.previousVersion != null && (
<PageLink
href={`/honkai3rd/versions/${currentVersionData.previousVersion}`}
mr={2}
>
{t('versions.previous')} (v
{currentVersionData.previousVersion})
</PageLink>
)}
{currentVersionData.nextVersion != null && (
<PageLink
href={`/honkai3rd/versions/${currentVersionData.nextVersion}`}
>
{t('versions.next')} (v{currentVersionData.nextVersion})
</PageLink>
)}
</Box>
<Heading as='h1'>
v{currentVersionData.version} : {currentVersionData.name}{' '}
<small>({t('versions.current')})</small>
</Heading>
<Box mb={4}>
{formatDate(new Date(currentVersionData.duration[0]), 'PP')} -{' '}
{currentVersionData.duration[1] != null
? formatDate(new Date(currentVersionData.duration[1]), 'PP')
: ''}
</Box>
<Box>
<Heading as='h3' mb={2}>
{t('versions.new-battlesuits')}
</Heading>
<Box mb={2} sx={{ display: 'inline-block' }}>
{currentVersionNewBattlesuits.map((battlesuit) => {
return (
<BattlesuitCard
key={battlesuit.id}
battlesuit={battlesuit}
size='sm'
/>
)
})}
</Box>
<Heading as='h3' mb={2}>
{t('versions.new-weapons')}
</Heading>
<Box mb={2} sx={{ display: 'inline-block' }}>
{currentVersionNewWeapons.map((weapon) => {
return <WeaponCard key={weapon.id} weapon={weapon} size='sm' />
})}
</Box>
<Heading as='h3' mb={2}>
{t('versions.new-stigmata-sets')}
</Heading>
<Box mb={2} sx={{ display: 'inline-block' }}>
{currentVersionNewStigmataSets.map((stigmataSet) => {
return (
<StigmataSetCard
key={stigmataSet.id}
stigmataSet={stigmataSet}
size='sm'
/>
)
})}
</Box>
</Box>
<Heading as='h3' mb={2}>
{t('versions.weekly-bosses')}
</Heading>
<Box sx={{ mb: 3 }}>
<BossTable versionData={currentVersionData} today={today} />
</Box>
<Heading as='h3' mb={2}>
{t('versions.supply-events')}
</Heading>
<Box mb={2}>
<ScrollContainer vertical={false}>
<GanttChart
items={currentVersionData.supplyEvents.map(
(supplyEventData) => {
const imgSrc = getIconSrcFromItem(
supplyEventData.featured[0]
)
return {
id: `${supplyEventData.duration[0]}/${supplyEventData.duration[1]}/${supplyEventData.name}`,
label: (
<Flex sx={{ alignItems: 'center' }}>
{!supplyEventData.verified && (
<Text sx={{ flexShrink: 0 }}></Text>
)}
{imgSrc != null && (
<SquareImageBox
size={20}
src={imgSrc}
alt={supplyEventData.featured[0].id}
mr={1}
/>
)}
<Text>{supplyEventData.name}</Text>
</Flex>
),
duration: supplyEventData.duration,
row: supplyEventData.track,
}
}
)}
today={today}
startDate={currentVersionData.duration[0]}
endDate={
currentVersionData.duration[1] != null
? currentVersionData.duration[1]
: addDateToDateString(currentVersionData.duration[0], {
weeks: 6,
})
}
/>
</ScrollContainer>
</Box>
<Paragraph mb={4}>{t('versions.supply-events-disclaimer')}</Paragraph>
</Box>
<Heading as='h2' mb={3}>
{t('versions.all-versions')}
<Heading as='h1' mb={3}>
{t('versions.versions')}
</Heading>
<Box>
{versionDataList.map((versionData) => {
@@ -229,31 +74,8 @@ const VersionIndexPage = ({
}
export async function getStaticProps({ locale }: NextPageContext) {
const currentVersionData = getCurrentVersion(locale)!
const currentVersionNewBattlesuits = currentVersionData.newBattlesuits.map(
(battlesuitId) => {
return getBattlesuitById(battlesuitId, locale)
}
)
const currentVersionNewWeapons = currentVersionData.newWeapons.map(
(weaponId) => {
return getWeaponById(weaponId, locale)
}
)
const currentVersionNewStigmataSets = currentVersionData.newStigmataSets.map(
(stigmataSetId) => {
return getStigmataSetBySetId(stigmataSetId, locale)
}
)
return {
props: {
currentVersionData,
currentVersionNewBattlesuits,
currentVersionNewWeapons,
currentVersionNewStigmataSets,
versionDataList: listVersionData(locale),
...(await getI18NProps(locale)),
},
@@ -261,19 +83,3 @@ export async function getStaticProps({ locale }: NextPageContext) {
}
export default VersionIndexPage
function getIconSrcFromItem(item: { type: string; id: string }): string | null {
switch (item.type) {
case 'battlesuit':
return `${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${item.id}.png`
case 'weapon':
return `${assetsBucketBaseUrl}/honkai3rd/weapons/${item.id}.png`
case 'stigmata':
return `${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${item.id}.png`
case 'elf':
return `${assetsBucketBaseUrl}/honkai3rd/elfs/icon-${item.id}.png`
case 'outfit':
return `${assetsBucketBaseUrl}/honkai3rd/outfits/portrait-${item.id}.webp`
}
return null
}