167 lines
4.4 KiB
TypeScript
167 lines
4.4 KiB
TypeScript
import { addDays } from 'date-fns'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { Box, Flex, Image, Text } from 'theme-ui'
|
|
import { assetsBucketBaseUrl } from '../../lib/consts'
|
|
import { VersionData } from '../../lib/honkai3rd/versions'
|
|
|
|
interface BossTableProps {
|
|
versionData: VersionData
|
|
today: Date | null
|
|
}
|
|
|
|
const BossTable = ({ versionData, today }: BossTableProps) => {
|
|
const { t } = useTranslation()
|
|
const versionStartDate = new Date(versionData.duration[0])
|
|
return (
|
|
<Flex>
|
|
<Box
|
|
sx={{
|
|
borderLeft: 'default',
|
|
borderTop: 'default',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
fontWeight: 700,
|
|
borderRight: 'default',
|
|
px: 2,
|
|
borderBottom: 'default',
|
|
}}
|
|
>
|
|
{t('versions.super-string')}
|
|
</Box>
|
|
{versionData.superstring.map(([first, second], index) => {
|
|
const firstDuration = [
|
|
addDays(versionStartDate, index * 7 + 0),
|
|
addDays(versionStartDate, index * 7 + 3),
|
|
]
|
|
const secondDuration = [
|
|
addDays(versionStartDate, index * 7 + 4),
|
|
addDays(versionStartDate, index * 7 + 6),
|
|
]
|
|
|
|
return (
|
|
<Flex key={`superstring-${index}`} sx={{ borderBottom: 'default' }}>
|
|
<Box sx={{ borderRight: 'default' }}>
|
|
<BossCard
|
|
boss={first.boss}
|
|
label={first.label}
|
|
active={
|
|
today != null &&
|
|
today >= firstDuration[0] &&
|
|
today <= firstDuration[1]
|
|
}
|
|
/>
|
|
</Box>
|
|
<Box sx={{ borderRight: 'default' }}>
|
|
<BossCard
|
|
boss={second.boss}
|
|
label={second.label}
|
|
active={
|
|
today != null &&
|
|
today >= secondDuration[0] &&
|
|
today <= secondDuration[1]
|
|
}
|
|
/>
|
|
</Box>
|
|
</Flex>
|
|
)
|
|
})}
|
|
</Box>
|
|
<Box sx={{ borderTop: 'default' }}>
|
|
<Box
|
|
sx={{
|
|
fontWeight: 700,
|
|
px: 2,
|
|
borderRight: 'default',
|
|
borderBottom: 'default',
|
|
}}
|
|
>
|
|
{t('versions.memorial-arena')}
|
|
</Box>
|
|
{versionData.ma.map(([first, second, third], index) => {
|
|
const durations = [
|
|
addDays(versionStartDate, index * 7 + 4),
|
|
addDays(versionStartDate, (index + 1) * 7 + 3),
|
|
]
|
|
const active =
|
|
today != null && today >= durations[0] && today <= durations[1]
|
|
return (
|
|
<Flex key={`superstring-${index}`} sx={{ borderBottom: 'default' }}>
|
|
<Box sx={{ borderRight: 'default' }}>
|
|
<BossCard
|
|
boss={first.boss}
|
|
label={first.label}
|
|
active={active}
|
|
/>
|
|
</Box>
|
|
<Box sx={{ borderRight: 'default' }}>
|
|
<BossCard
|
|
boss={second.boss}
|
|
label={second.label}
|
|
active={active}
|
|
/>
|
|
</Box>
|
|
<Box sx={{ borderRight: 'default' }}>
|
|
<BossCard
|
|
boss={third.boss}
|
|
label={third.label}
|
|
active={active}
|
|
/>
|
|
</Box>
|
|
</Flex>
|
|
)
|
|
})}
|
|
</Box>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
const BossCard = ({
|
|
label,
|
|
boss,
|
|
active,
|
|
}: {
|
|
label?: string
|
|
boss: string
|
|
active?: boolean
|
|
}) => {
|
|
return (
|
|
<Box
|
|
sx={{ position: 'relative', '&.active': { bg: 'primary' } }}
|
|
className={active ? 'active' : ''}
|
|
>
|
|
{label != null && (
|
|
<Flex
|
|
sx={{
|
|
background: 'rgba(0,0,0,0.7)',
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<Text
|
|
sx={{
|
|
lineHeight: '14px',
|
|
fontWeight: 700,
|
|
py: 0,
|
|
px: 1,
|
|
fontSize: '14px',
|
|
color: 'white',
|
|
}}
|
|
>
|
|
{label?.toUpperCase()}
|
|
</Text>
|
|
</Flex>
|
|
)}
|
|
<Image
|
|
width={140}
|
|
alt={boss}
|
|
src={`${assetsBucketBaseUrl}/honkai3rd/bosses/${boss}.png`}
|
|
/>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default BossTable
|