/** @jsxImportSource theme-ui */ import { Box, Heading, Link, Flex, Text, Paragraph } from '@theme-ui/components' import { NextPageContext } from 'next' import Breadcrumb from '../../../components/organisms/Breadcrumb' import GanttChart from '../../../components/organisms/GanttChart' import { getVersion, listVersionData, } from '../../../server/data/honkai3rd/versions' import { format as formatDate } from 'date-fns' import { getBattlesuitById } from '../../../server/data/honkai3rd/battlesuits' import NextLink from 'next/link' import SquareImageBox from '../../../components/atoms/SquareImageBox' import { getWeaponById } from '../../../server/data/honkai3rd/weapons' import ScrollContainer from 'react-indiana-drag-scroll' import { listSupplyEventsByVersion } from '../../../server/data/honkai3rd/supplyEvents' import { addDateToDateString, getDateString } from '../../../lib/string' import { BattlesuitData } from '../../../lib/honkai3rd/battlesuits' import { WeaponData } from '../../../lib/honkai3rd/weapons' import { SupplyEventData } from '../../../lib/honkai3rd/supplyEvents' import { VersionData } from '../../../lib/honkai3rd/versions' import { generateI18NPaths, getI18NProps } from '../../../server/i18n' import { translate, useTranslation } from '../../../lib/i18n' import { useRouter } from 'next/router' import Head from '../../../components/atoms/Head' import PageLink from '../../../components/atoms/PageLink' import { assetsBucketBaseUrl } from '../../../lib/consts' import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout' interface VersionShowPageProps { versionData: VersionData battlesuits: BattlesuitData[] weapons: WeaponData[] supplyEvents: SupplyEventData[] } const VersionShowPage = ({ versionData, battlesuits, weapons, supplyEvents, }: VersionShowPageProps) => { const { t } = useTranslation() const { locale } = useRouter() const versionName = translate( locale, { 'ko-KR': versionData.krName }, versionData.name ) return ( { return translate( locale, { 'ko-KR': battlesuit.krName }, battlesuit.name ) }) .join(',')} / ${t('versions.new-weapons')}: ${weapons .map((weapon) => { return translate(locale, { 'ko-KR': weapon.krName }, weapon.name) }) .join(',')}`} /> {versionData.previousVersion != null && ( {t('versions.previous')} (v{versionData.previousVersion}) )} {versionData.nextVersion != null && ( {t('versions.next')} (v{versionData.nextVersion}) )} v{versionData.version} : {versionName} {formatDate(new Date(versionData.duration[0]), 'PP')} -{' '} {versionData.duration[1] != null ? formatDate(new Date(versionData.duration[1]), 'PP') : ''} {t('versions.new-battlesuits')} {battlesuits.map((battlesuit) => { const battlesuitName = translate( locale, { 'ko-KR': battlesuit.krName }, battlesuit.name ) return ( {battlesuitName} ) })} {t('versions.new-weapons')} {weapons.map((weapon) => { const weaponName = translate( locale, { 'ko-KR': weapon.krName }, weapon.name ) return ( {weaponName} ) })} {t('versions.supply-events')} { const imgSrc = getIconSrcFromItem(supplyEventData.featured[0]) return { id: supplyEventData.id, label: ( {!supplyEventData.verified && ( ❓ )} {imgSrc != null && ( )} {supplyEventData.name} ), duration: supplyEventData.duration, row: supplyEventData.track, } })} today={getDateString(new Date())} startDate={versionData.duration[0]} endDate={ versionData.duration[1] != null ? versionData.duration[1] : addDateToDateString(versionData.duration[0], { weeks: 6, }) } /> {t('versions.supply-events-disclaimer')} ) } export default VersionShowPage export async function getStaticProps({ params, locale, }: NextPageContext & { params: { versionId: string } }) { const versionData = getVersion(params.versionId)! const battlesuits = versionData.newBattlesuits.map((battlesuitId) => { return getBattlesuitById(battlesuitId) }) const weapons = versionData.newWeapons.map((weaponId) => { return getWeaponById(weaponId) }) const supplyEvents = listSupplyEventsByVersion(versionData.version) return { props: { versionData, battlesuits, weapons, supplyEvents, ...(await getI18NProps(locale)), }, } } export async function getStaticPaths() { return { paths: generateI18NPaths( listVersionData().map((versionData) => { return { params: { versionId: versionData.version.toString(), }, } }) ), fallback: false, } } 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/${item.id}.png` } return null }