/** @jsxImportSource theme-ui */ import { Box, Flex, Heading, Link, Text, Paragraph } 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 { format as formatDate } from 'date-fns' import { BattlesuitData } from '../../lib/honkai3rd/battlesuits' import { WeaponData } from '../../lib/honkai3rd/weapons' import { VersionData } from '../../lib/honkai3rd/versions' 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 { useCallback, useEffect, useRef, 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[] currentVersionData: VersionData currentVersionNewBattlesuits: BattlesuitData[] currentVersionNewWeapons: WeaponData[] currentVersionNewStigmataSets: StigmataSet[] } const VersionIndexPage = ({ currentVersionData, currentVersionNewBattlesuits, versionDataList, currentVersionNewWeapons, currentVersionNewStigmataSets, }: VersionIndexPageProps) => { const { t } = useTranslation() const [today, setToday] = useState(null) const supplyGanttChartScrollContainerRef = useRef(null) useEffect(() => { setToday(new Date(getDateString(new Date()))) }, []) const scrollSupplyGanttChart = useCallback((to: number) => { if (supplyGanttChartScrollContainerRef.current == null) { return null } supplyGanttChartScrollContainerRef.current.scrollTo(to, 0) }, []) return ( {currentVersionData.previousVersion != null && ( {t('versions.previous')} (v {currentVersionData.previousVersion}) )} {currentVersionData.nextVersion != null && ( {t('versions.next')} (v{currentVersionData.nextVersion}) )} v{currentVersionData.version} : {currentVersionData.name}{' '} ({t('versions.current')}) {formatDate(new Date(currentVersionData.duration[0]), 'PP')} -{' '} {currentVersionData.duration[1] != null ? formatDate(new Date(currentVersionData.duration[1]), 'PP') : ''} {t('versions.new-battlesuits')} {currentVersionNewBattlesuits.map((battlesuit) => { return ( ) })} {t('versions.new-weapons')} {currentVersionNewWeapons.map((weapon) => { return })} {t('versions.new-stigmata-sets')} {currentVersionNewStigmataSets.map((stigmataSet) => { return ( ) })} {t('versions.weekly-bosses')} {t('versions.supply-events')} { const imgSrc = getIconSrcFromItem( supplyEventData.featured[0] ) return { id: `${supplyEventData.duration[0]}/${supplyEventData.duration[1]}/${supplyEventData.name}`, label: ( {!supplyEventData.verified && ( ❓ )} {imgSrc != null && ( )} {supplyEventData.name} ), 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, }) } /> {t('versions.supply-events-disclaimer')} {t('versions.all-versions')} {versionDataList.map((versionData) => { return ( {versionData.version} : {versionData.name} ( {formatDate(new Date(versionData.duration[0]), 'PP')} -{' '} {versionData.duration[1] != null ? formatDate(new Date(versionData.duration[1]), 'PP') : ''} ) ) })} ) } 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)), }, } } 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 }