Add support battlesuits page

src/lib/honkai3rd/elysianRealm.ts

@@ -150,3 +150,11 @@ export interface PopulatedSignetGroup {
   name: string
   sets: SignetSet[]
 }
+
+export interface SupportBattlesuit {
+  id: string
+  name: string
+  skillName: string
+  description: string
+  cooldown: number
+}

src/lib/theme.ts

@@ -240,4 +240,12 @@ export const theme: Theme = {
       borderStyle: 'solid',
     },
   },
+  badges: {
+    primary: {
+      backgroundColor: 'primary',
+    },
+    secondary: {
+      backgroundColor: 'secondary',
+    },
+  },
 }

src/pages/honkai3rd/elysian-realm/index.tsx

@@ -13,12 +13,12 @@ import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 import {
   erVersions,
   rememberanceSigilIds,
-  supportBattlesuitIds,
 } from '../../../lib/honkai3rd/elysianRealm'
 import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import { assetsBucketBaseUrl } from '../../../lib/consts'
 import PageLink from '../../../components/atoms/PageLink'
 import SignetGroupNavigator from '../../../components/organisms/SignetGroupNavigator'
+import { getSupportBattlesuits } from '../../../server/data/honkai3rd/elysianRealm'
 
 type BattlesuitListItemData = Pick<
   BattlesuitData,
@@ -27,9 +27,13 @@ type BattlesuitListItemData = Pick<
 
 interface BattlesuitListPageProps {
   battlesuitMap: { [id: string]: BattlesuitListItemData }
+  supportBattlesuits: { id: string; name: string }[]
 }
 
-const ElysianRealmIndexPage = ({ battlesuitMap }: BattlesuitListPageProps) => {
+const ElysianRealmIndexPage = ({
+  battlesuitMap,
+  supportBattlesuits,
+}: BattlesuitListPageProps) => {
   const { t } = useTranslation()
 
   return (
@@ -90,15 +94,16 @@ const ElysianRealmIndexPage = ({ battlesuitMap }: BattlesuitListPageProps) => {
           <Heading as='h2'>{t('elysian-realm.supports')}</Heading>
 
           <Flex sx={{ flexWrap: 'wrap' }}>
-            {supportBattlesuitIds.map((battlesuitId) => {
+            {supportBattlesuits.map(({ id, name }) => {
               return (
-                <Card key={battlesuitId} sx={{ p: 1, m: 1 }}>
+                <Card key={id} sx={{ p: 1, m: 1 }} title={name}>
                   <PageLink
-                    href={`/honkai3rd/elysian-realm/support-battlesuits#${battlesuitId}`}
+                    href={`/honkai3rd/elysian-realm/support-battlesuits#${id}`}
                   >
                     <SquareImageBox
                       size={70}
-                      src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${battlesuitId}.png`}
+                      alt={name}
+                      src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${id}.png`}
                     />
                   </PageLink>
                 </Card>
@@ -139,9 +144,19 @@ export async function getStaticProps({ locale }: NextPageContext) {
     list.push(...version.battlesuits)
     return list
   }, [])
+
+  const supportBattlesuits = getSupportBattlesuits(locale).map(
+    ({ id, name }) => {
+      return {
+        id,
+        name,
+      }
+    }
+  )
   return {
     props: {
       battlesuitMap: getBattlesuitMapByIds(erBattlesuitIds),
+      supportBattlesuits,
       ...(await getI18NProps(locale)),
     },
   }

src/pages/honkai3rd/elysian-realm/support-battlesuits.tsx

@@ -0,0 +1,101 @@
+/** @jsxImportSource theme-ui */
+import {
+  Box,
+  Heading,
+  Flex,
+  Card,
+  Paragraph,
+  Badge,
+} from '@theme-ui/components'
+import Breadcrumb from '../../../components/organisms/Breadcrumb'
+
+import { NextPageContext } from 'next'
+import { getI18NProps } from '../../../server/i18n'
+import { useTranslation } from '../../../lib/i18n'
+import Head from '../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
+import { SupportBattlesuit } from '../../../lib/honkai3rd/elysianRealm'
+import SquareImageBox from '../../../components/atoms/SquareImageBox'
+import { assetsBucketBaseUrl } from '../../../lib/consts'
+import { getSupportBattlesuits } from '../../../server/data/honkai3rd/elysianRealm'
+
+interface BattlesuitListPageProps {
+  supportBattlesuits: SupportBattlesuit[]
+}
+
+const ElysianRealmIndexPage = ({
+  supportBattlesuits,
+}: BattlesuitListPageProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Honkai3rdLayout>
+      <Head
+        title={`${t('common.honkai-3rd')}: ${t('common.elysian-realm')} ${t(
+          'elysian-realm.supports'
+        )} - ${t('common.abyss-lab')}`}
+        description={`${t('common.elysian-realm')} ${t(
+          'elysian-realm.supports'
+        )}`}
+      />
+
+      <Box p={3}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/elysian-realm',
+              label: t('common.elysian-realm'),
+            },
+            {
+              href: '/honkai3rd/elysian-realm/support-battlesuits',
+              label: t('elysian-realm.supports'),
+            },
+          ]}
+        />
+
+        <Heading as='h1'>{t('elysian-realm.supports')}</Heading>
+
+        <Box sx={{ mb: 3 }}>
+          {supportBattlesuits.map(
+            ({ id, name, skillName, description, cooldown }) => {
+              return (
+                <Card key={id} sx={{ p: 2, mb: 2 }} id={id}>
+                  <Flex>
+                    <SquareImageBox
+                      size={50}
+                      alt={name}
+                      src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${id}.png`}
+                      mr={2}
+                    />
+
+                    <Box>
+                      <Heading as='h3' mb={0}>
+                        {name} - {skillName}
+                      </Heading>
+                      <Badge variant='secondary'>Cooldown: {cooldown}s</Badge>
+                      <Paragraph>{description}</Paragraph>
+                    </Box>
+                  </Flex>
+                </Card>
+              )
+            }
+          )}
+        </Box>
+      </Box>
+    </Honkai3rdLayout>
+  )
+}
+
+export default ElysianRealmIndexPage
+
+export async function getStaticProps({ locale }: NextPageContext) {
+  const supportBattlesuits = getSupportBattlesuits(locale)
+
+  return {
+    props: {
+      supportBattlesuits,
+      ...(await getI18NProps(locale)),
+    },
+  }
+}

src/server/data/honkai3rd/elysianRealm.ts

@@ -1,9 +1,11 @@
-import { readFileSync } from '../fs'
+import { readFileSync, readJsonFileSync } from '../fs'
 import {
   PopulatedSignetGroup,
   SignetData,
   signetGroups,
   SignetSet,
+  SupportBattlesuit,
+  supportBattlesuitIds,
 } from '../../../lib/honkai3rd/elysianRealm'
 import { getBattlesuitById } from './battlesuits'
 
@@ -106,6 +108,46 @@ export function getSignetGroupById(id: string, locale = 'en-US') {
   return signetGroupMap[id]
 }
 
+export function getSupportBattlesuits(locale?: string) {
+  return supportBattlesuitIds.map<SupportBattlesuit>((battlesuitId) => {
+    const battlesuit = getBattlesuitById(battlesuitId)!
+    const {
+      skillName,
+      description,
+      cooldown,
+    }: { skillName: string; description: string; cooldown: number } =
+      readJsonFileSync(
+        `honkai3rd/elysianRealm/supportBattlesuits/${battlesuitId}.json`
+      )
+
+    let localizedName = battlesuit.name
+    let localizedSkillName = skillName
+    let localizedDescription = description
+
+    if (locale === 'ko-KR') {
+      const [krSkillName, ...krDescriptionLines] = readFileSync(
+        `honkai3rd/ko-KR/elysianRealm/supportBattlesuits/${battlesuitId}.md`
+      )
+        .toString()
+        .trim()
+        .slice(2)
+        .split('\n\n')
+
+      localizedName = battlesuit.krName!
+      localizedSkillName = krSkillName
+      localizedDescription = krDescriptionLines.join('\n').trim()
+    }
+
+    return {
+      id: battlesuitId,
+      name: localizedName,
+      skillName: localizedSkillName,
+      description: localizedDescription,
+      cooldown,
+    }
+  })
+}
+
 function parseNormalSignetsRawData(setId: string, data: string) {
   const signetSections = data.replace(/\\\*/g, '*').slice(2).split('\n# ')
   const signets: SignetData[] = []