Translate version pages

2022-01-09 18:11:10 +09:00
parent b704188b19
commit c668b36a36
7 changed files with 115 additions and 40 deletions
@@ -2,6 +2,7 @@
  "version": "5.3",
  "nextVersion": "5.4",
  "name": "Post Dusk Odyssey",
+  "krName": "황혼후서",
  "duration": ["2021-12-02", "2022-01-13"],
  "newBattlesuits": ["sns"],
  "newWeapons": ["hekate-s-sombre", "miracle-kissy-pillow"],
@@ -2,6 +2,7 @@
  "version": "5.4",
  "previousVersion": "5.3",
  "name": "Silverwing Beyond",
+  "krName": "피안의 은익",
  "duration": ["2022-01-13"],
  "newBattlesuits": ["sw"],
  "newWeapons": ["falcon-flare-0019", "falcon-flare-final"],
@@ -12,7 +12,8 @@
    "battlesuits": "Battlesuits",
    "stigmata": "Stigmata",
    "weapons": "Weapons",
-    "elfs": "ELFs"
+    "elfs": "ELFs",
+    "versions": "Versions"
  },
  "battlesuits-list": {
    "heading": "Battlesuits",
@@ -60,5 +61,15 @@
    "basic": "Basic",
    "ultimate": "Ultimate",
    "team": "Team"
+  },
+  "versions": {
+    "all-versions": "All Versions",
+    "previous": "Previous Version",
+    "next": "Next Version",
+    "current": "Current Version",
+    "new-battlesuits": "New Battlesuits",
+    "new-weapons": "New Weapons",
+    "supply-events": "Supply Events",
+    "supply-events-disclaimer": "DISCLAIMER: The schedule is based on Global - Americas Server. It may not be accurate since we update this manually. Please check the actual in-game information again before pulling supplies."
  }
 }
@@ -15,7 +15,8 @@
    "mid": "(중)",
    "bot": "(하)",
    "weapons": "무기",
-    "elfs": "무장인형"
+    "elfs": "무장인형",
+    "versions": "업데이트"
  },
  "battlesuits-list": {
    "heading": "발키리",
@@ -63,5 +64,15 @@
    "basic": "기본 공격",
    "ultimate": "필살기",
    "team": "팀"
+  },
+  "versions": {
+    "all-versions": "모든 업데이트",
+    "previous": "이전 버전",
+    "next": "다음 버전",
+    "current": "현재 버전",
+    "new-battlesuits": "신규 발키리",
+    "new-weapons": "신규 무기",
+    "supply-events": "보급 이벤트",
+    "supply-events-disclaimer": "주의: 보급 일정은 글로벌 아메리카 서버 기준으로 작성되어 있습니다. 수작업으로 갱신하기에 정확하지 않은 부분이 있을 수도 있습니다. 보급 가차를 돌리기 전에 게임 내 정보를 꼭 다시 한번 확인해주세요."
  }
 }
@@ -3,6 +3,7 @@ export interface VersionData {
  previousVersion?: string
  nextVersion?: string
  name: string
+  krName?: string
  duration: [string, string]
  verified: boolean
  newBattlesuits: string[]
@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
-import { Box, Heading, Link, Flex, Text } from '@theme-ui/components'
+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'
@@ -21,6 +21,8 @@ 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'

 interface VersionShowPageProps {
  versionData: VersionData
@@ -35,6 +37,9 @@ const VersionShowPage = ({
  weapons,
  supplyEvents,
 }: VersionShowPageProps) => {
+  const { t } = useTranslation()
+  const { locale } = useRouter()
+
  return (
    <Box>
      <Honkai3rdNavigator />
@@ -42,8 +47,8 @@ const VersionShowPage = ({
      <Box p={3}>
        <Breadcrumb
          items={[
-            { href: '/honkai3rd', label: 'Honkai 3rd' },
-            { href: '/honkai3rd/versions', label: 'Versions' },
+            { href: '/honkai3rd', label: t('breadcrumb.honkai-3rd') },
+            { href: '/honkai3rd/versions', label: t('breadcrumb.versions') },
            {
              href: `/honkai3rd/versions/${versionData.version}`,
              label: versionData.version,
@@ -57,7 +62,9 @@ const VersionShowPage = ({
                href={`/honkai3rd/versions/${versionData.previousVersion}`}
                passHref
              >
-                <Link>Previous (v{versionData.previousVersion})</Link>
+                <Link>
+                  {t('versions.previous')} (v{versionData.previousVersion})
+                </Link>
              </NextLink>
            )}
            {versionData.nextVersion != null && (
@@ -65,12 +72,19 @@ const VersionShowPage = ({
                href={`/honkai3rd/versions/${versionData.nextVersion}`}
                passHref
              >
-                <Link>Next (v{versionData.nextVersion})</Link>
+                <Link>
+                  {t('versions.next')} (v{versionData.nextVersion})
+                </Link>
              </NextLink>
            )}
          </Box>
          <Heading as='h1'>
-            v{versionData.version} : {versionData.name}
+            v{versionData.version} :{' '}
+            {translate(
+              locale,
+              { 'ko-KR': versionData.krName },
+              versionData.name
+            )}
          </Heading>
          <Box mb={4}>
            {formatDate(new Date(versionData.duration[0]), 'PP')} -{' '}
@@ -81,10 +95,16 @@ const VersionShowPage = ({

          <Box>
            <Heading as='h3' mb={2}>
-              New Battlesuits
+              {t('versions.new-battlesuits')}
            </Heading>
            <Box mb={3} sx={{ display: 'inline-block' }}>
              {battlesuits.map((battlesuit) => {
+                const battlesuitName = translate(
+                  locale,
+                  { 'ko-KR': battlesuit.krName },
+                  battlesuit.name
+                )
+
                return (
                  <NextLink
                    key={battlesuit.id}
@@ -96,10 +116,10 @@ const VersionShowPage = ({
                        <SquareImageBox
                          size={40}
                          src={`/assets/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
-                          alt={`${battlesuit.name}`}
+                          alt={`${battlesuitName}`}
                          mr={2}
                        />
-                        <Text>{battlesuit.name}</Text>
+                        <Text>{battlesuitName}</Text>
                      </Flex>
                    </Link>
                  </NextLink>
@@ -108,10 +128,15 @@ const VersionShowPage = ({
            </Box>

            <Heading as='h3' mb={2}>
-              New Weapons
+              {t('versions.new-weapons')}
            </Heading>
            <Box mb={3} sx={{ display: 'inline-block' }}>
              {weapons.map((weapon) => {
+                const weaponName = translate(
+                  locale,
+                  { 'ko-KR': weapon.krName },
+                  weapon.name
+                )
                return (
                  <NextLink
                    key={weapon.id}
@@ -123,10 +148,10 @@ const VersionShowPage = ({
                        <SquareImageBox
                          size={40}
                          src={`/assets/honkai3rd/weapons/${weapon.id}.png`}
-                          alt={`${weapon.name}`}
+                          alt={`${weaponName}`}
                          mr={2}
                        />
-                        <Text>{weapon.name}</Text>
+                        <Text>{weaponName}</Text>
                      </Flex>
                    </Link>
                  </NextLink>
@@ -136,9 +161,9 @@ const VersionShowPage = ({
          </Box>

          <Heading as='h3' mb={2}>
-            Supply Events
+            {t('versions.supply-events')}
          </Heading>
-          <Box mb={4}>
+          <Box mb={2}>
            <ScrollContainer vertical={false}>
              <GanttChart
                items={supplyEvents.map((supplyEventData) => {
@@ -177,6 +202,7 @@ const VersionShowPage = ({
              />
            </ScrollContainer>
          </Box>
+          <Paragraph mb={4}>{t('versions.supply-events-disclaimer')}</Paragraph>
        </Box>
      </Box>
    </Box>
@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
-import { Box, Flex, Heading, Link, Text } from '@theme-ui/components'
+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'
@@ -21,6 +21,8 @@ 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'

 interface VersionIndexPageProps {
  versionDataList: VersionData[]
@@ -37,6 +39,9 @@ const VersionIndexPage = ({
  currentVersionNewWeapons,
  currentVersionSupplyEvents,
 }: VersionIndexPageProps) => {
+  const { t } = useTranslation()
+  const { locale } = useRouter()
+
  return (
    <Box>
      <Honkai3rdNavigator />
@@ -55,7 +60,10 @@ const VersionIndexPage = ({
                href={`/honkai3rd/versions/${currentVersionData.previousVersion}`}
                passHref
              >
-                <Link>Previous (v{currentVersionData.previousVersion})</Link>
+                <Link>
+                  {t('versions.previous')} (v
+                  {currentVersionData.previousVersion})
+                </Link>
              </NextLink>
            )}
            {currentVersionData.nextVersion != null && (
@@ -63,14 +71,21 @@ const VersionIndexPage = ({
                href={`/honkai3rd/versions/${currentVersionData.nextVersion}`}
                passHref
              >
-                <Link>Next (v{currentVersionData.nextVersion})</Link>
+                <Link>
+                  {t('versions.next')} (v{currentVersionData.nextVersion})
+                </Link>
              </NextLink>
            )}
          </Box>

          <Heading as='h1'>
-            v{currentVersionData.version} : {currentVersionData.name}{' '}
-            <small>(Current Version)</small>
+            v{currentVersionData.version} :{' '}
+            {translate(
+              locale,
+              { 'ko-KR': currentVersionData.krName },
+              currentVersionData.name
+            )}{' '}
+            <small>({t('versions.current')})</small>
          </Heading>
          <Box mb={4}>
            {formatDate(new Date(currentVersionData.duration[0]), 'PP')} -{' '}
@@ -81,10 +96,16 @@ const VersionIndexPage = ({

          <Box>
            <Heading as='h3' mb={2}>
-              New Battlesuits
+              {t('versions.new-battlesuits')}
            </Heading>
            <Box mb={3} sx={{ display: 'inline-block' }}>
              {currentVersionNewBattlesuits.map((battlesuit) => {
+                const battlesuitName = translate(
+                  locale,
+                  { 'ko-KR': battlesuit.krName },
+                  battlesuit.name
+                )
+
                return (
                  <NextLink
                    key={battlesuit.id}
@@ -96,10 +117,10 @@ const VersionIndexPage = ({
                        <SquareImageBox
                          size={40}
                          src={`/assets/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
-                          alt={`${battlesuit.name}`}
+                          alt={`${battlesuitName}`}
                          mr={2}
                        />
-                        <Text>{battlesuit.name}</Text>
+                        <Text>{battlesuitName}</Text>
                      </Flex>
                    </Link>
                  </NextLink>
@@ -108,10 +129,15 @@ const VersionIndexPage = ({
            </Box>

            <Heading as='h3' mb={2}>
-              New Weapons
+              {t('versions.new-weapons')}
            </Heading>
            <Box mb={3} sx={{ display: 'inline-block' }}>
              {currentVersionNewWeapons.map((weapon) => {
+                const weaponName = translate(
+                  locale,
+                  { 'ko-KR': weapon.krName },
+                  weapon.name
+                )
                return (
                  <NextLink
                    key={weapon.id}
@@ -123,10 +149,10 @@ const VersionIndexPage = ({
                        <SquareImageBox
                          size={40}
                          src={`/assets/honkai3rd/weapons/${weapon.id}.png`}
-                          alt={`${weapon.name}`}
+                          alt={`${weaponName}`}
                          mr={2}
                        />
-                        <Text>{weapon.name}</Text>
+                        <Text>{weaponName}</Text>
                      </Flex>
                    </Link>
                  </NextLink>
@@ -136,9 +162,9 @@ const VersionIndexPage = ({
          </Box>

          <Heading as='h3' mb={2}>
-            Supply Events
+            {t('versions.supply-events')}
          </Heading>
-          <Box mb={4}>
+          <Box mb={2}>
            <ScrollContainer vertical={false}>
              <GanttChart
                items={currentVersionSupplyEvents.map((supplyEventData) => {
@@ -177,18 +203,11 @@ const VersionIndexPage = ({
              />
            </ScrollContainer>
          </Box>
-          <Box>
-            <NextLink
-              href={`/honkai3rd/versions/${currentVersionData.version}`}
-              passHref
-            >
-              <Link>Learn more...</Link>
-            </NextLink>
-          </Box>
+          <Paragraph mb={4}>{t('versions.supply-events-disclaimer')}</Paragraph>
        </Box>

        <Heading as='h2' mb={3}>
-          All Versions
+          {t('versions.all-versions')}
        </Heading>
        <Box>
          {versionDataList.map((versionData) => {
@@ -200,8 +219,13 @@ const VersionIndexPage = ({
                    passHref
                  >
                    <Link>
-                      {versionData.version} : {versionData.name} (
-                      {formatDate(new Date(versionData.duration[0]), 'PP')} -{' '}
+                      {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')
                        : ''}