/** @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 Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import { getBattlesuitById } from '../../../server/data/honkai3rd/battlesuits'
import { listSupplyEventsByVersion } from '../../../server/data/honkai3rd/supplyEvents'
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 { SupplyEventData } from '../../../lib/honkai3rd/supplyEvents'
import { getI18NProps } from '../../../server/i18n'
import { NextPageContext } from 'next'
import { useTranslation, translate } from '../../../lib/i18n'
import { useRouter } from 'next/router'
import Head from '../../../components/atoms/Head'
interface VersionIndexPageProps {
versionDataList: VersionData[]
currentVersionData: VersionData
currentVersionNewBattlesuits: BattlesuitData[]
currentVersionNewWeapons: WeaponData[]
currentVersionSupplyEvents: SupplyEventData[]
}
const VersionIndexPage = ({
currentVersionData,
currentVersionNewBattlesuits,
versionDataList,
currentVersionNewWeapons,
currentVersionSupplyEvents,
}: VersionIndexPageProps) => {
const { t } = useTranslation()
const { locale } = useRouter()
return (
{currentVersionData.previousVersion != null && (
{t('versions.previous')} (v
{currentVersionData.previousVersion})
)}
{currentVersionData.nextVersion != null && (
{t('versions.next')} (v{currentVersionData.nextVersion})
)}
v{currentVersionData.version} :{' '}
{translate(
locale,
{ 'ko-KR': currentVersionData.krName },
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) => {
const battlesuitName = translate(
locale,
{ 'ko-KR': battlesuit.krName },
battlesuit.name
)
return (
{battlesuitName}
)
})}
{t('versions.new-weapons')}
{currentVersionNewWeapons.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={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} :{' '}
{translate(
locale,
{ 'ko-KR': versionData.krName },
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()!
const currentVersionNewBattlesuits = currentVersionData.newBattlesuits.map(
(battlesuitId) => {
return getBattlesuitById(battlesuitId)
}
)
const currentVersionNewWeapons = currentVersionData.newWeapons.map(
(weaponId) => {
return getWeaponById(weaponId)
}
)
const currentVersionSupplyEvents = listSupplyEventsByVersion(
currentVersionData.version
)
return {
props: {
currentVersionData,
currentVersionNewBattlesuits,
currentVersionNewWeapons,
currentVersionSupplyEvents,
versionDataList: listVersionData(),
...(await getI18NProps(locale)),
},
}
}
export default VersionIndexPage
function getIconSrcFromItem(item: { type: string; id: string }): string | null {
switch (item.type) {
case 'battlesuit':
return `/assets/honkai3rd/battlesuits/portrait-${item.id}.png`
case 'weapon':
return `/assets/honkai3rd/weapons/${item.id}.png`
case 'stigmata':
return `/assets/honkai3rd/stigmata/icon-${item.id}.png`
case 'elf':
return `/assets/honkai3rd/elfs/icon-${item.id}.png`
case 'outfit':
return `/assets/honkai3rd/outfits/${item.id}.png`
}
return null
}