diff --git a/public/locales/en-US/common.json b/public/locales/en-US/common.json index 28a65e97..81a275b6 100644 --- a/public/locales/en-US/common.json +++ b/public/locales/en-US/common.json @@ -91,6 +91,7 @@ "version": "Version", "list-page-description": "Version info list of Honkai 3rd", "all-versions": "All Versions", + "versions": "Versions", "previous": "Previous Version", "next": "Next Version", "current": "Current Version", diff --git a/public/locales/ko-KR/common.json b/public/locales/ko-KR/common.json index 60c17abb..c503ba87 100644 --- a/public/locales/ko-KR/common.json +++ b/public/locales/ko-KR/common.json @@ -81,6 +81,7 @@ "version": "업데이트", "list-page-description": "붕괴 3rd 업데이트 정보 목록", "all-versions": "모든 업데이트", + "versions": "업데이트", "previous": "이전 버전", "next": "다음 버전", "current": "현재 버전", diff --git a/src/pages/honkai3rd/index.tsx b/src/pages/honkai3rd/index.tsx index 8ad0c08a..7e6c2df9 100644 --- a/src/pages/honkai3rd/index.tsx +++ b/src/pages/honkai3rd/index.tsx @@ -1,96 +1,223 @@ /** @jsxImportSource theme-ui */ -import { Box, Heading, Text, Flex, Link } from '@theme-ui/components' -import { useCallback, useEffect, useState } from 'react' -import Breadcrumb from '../../components/organisms/Breadcrumb' -import { NextPageContext } from 'next' -import { getI18NProps } from '../../server/i18n' -import { useTranslation } from '../../lib/i18n' -import PageLink from '../../components/atoms/PageLink' +import { Box, Flex, Heading, Link, Text, Paragraph } from '@theme-ui/components' +import NextLink from 'next/link' import SquareImageBox from '../../components/atoms/SquareImageBox' -import { mdiGithub } from '@mdi/js' -import { Icon } from '@mdi/react' +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 { 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' -const bannerValkyries = [ - 'kiana', - 'mei', - 'bronya', - 'theresa', - 'fuhua', - 'bianka', - 'rita', - 'carole', -] +interface VersionIndexPageProps { + versionDataList: VersionData[] + currentVersionData: VersionData + currentVersionNewBattlesuits: BattlesuitData[] + currentVersionNewWeapons: WeaponData[] + currentVersionNewStigmataSets: StigmataSet[] +} -const Honkai3rdIndexPage = () => { +const VersionIndexPage = ({ + currentVersionData, + currentVersionNewBattlesuits, + versionDataList, + currentVersionNewWeapons, + currentVersionNewStigmataSets, +}: VersionIndexPageProps) => { const { t } = useTranslation() - const [bannerIndex, setBannerIndex] = useState(0) - - const switchBanner = useCallback(() => { - setBannerIndex((previousBannerIndex) => { - return (previousBannerIndex + 1) % bannerValkyries.length - }) - }, []) - + const [today, setToday] = useState(null) useEffect(() => { - const timer = setTimeout(() => { - switchBanner() - }, 5000) - return () => { - clearTimeout(timer) - } - }, [bannerIndex, switchBanner]) + setToday(new Date(getDateString(new Date()))) + }, []) return ( - {t('common.honkai-3rd')} + + + {currentVersionData.previousVersion != null && ( + + {t('versions.previous')} (v + {currentVersionData.previousVersion}) + + )} + {currentVersionData.nextVersion != null && ( + + {t('versions.next')} (v{currentVersionData.nextVersion}) + + )} + - - {bannerValkyries.map((valkyrie, index) => ( - - ))} - + + 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 ( + + ) + })} - Source Code - + + + {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') + : ''} + ) + + + + + ) + })} @@ -98,77 +225,51 @@ const Honkai3rdIndexPage = () => { } 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 Honkai3rdIndexPage +export default VersionIndexPage -interface NavItemProps { - target: - | 'versions' - | 'battlesuits' - | 'stigmata' - | 'weapons' - | 'elfs' - | 'elysian-realm' - | 'media' -} - -const NavItem = ({ target }: NavItemProps) => { - const { t } = useTranslation() - return ( - - - - - - {t(`common.${target}`)} - - - - - ) -} - -interface BannerItemProps { - valkyrie: string - active: boolean -} - -const BannerItem = ({ valkyrie, active }: BannerItemProps) => { - return ( - - - - ) -} - -function getIconByTarget(target: string) { - switch (target) { - case 'versions': - return `${assetsBucketBaseUrl}/honkai3rd/nav-icons/versions.webp` - case 'media': - return `${assetsBucketBaseUrl}/honkai3rd/nav-icons/grand-instructor.webp` - default: - return `${assetsBucketBaseUrl}/honkai3rd/nav-icons/${target}.png` +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 } diff --git a/src/pages/honkai3rd/versions/index.tsx b/src/pages/honkai3rd/versions/index.tsx index eb073b3f..1f5ddb70 100644 --- a/src/pages/honkai3rd/versions/index.tsx +++ b/src/pages/honkai3rd/versions/index.tsx @@ -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(null) - useEffect(() => { - setToday(new Date(getDateString(new Date()))) - }, []) return ( @@ -68,137 +41,9 @@ const VersionIndexPage = ({ { href: '/honkai3rd/versions', label: t('common.versions') }, ]} /> - - - {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')} + + {t('versions.versions')} {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 -}