Add support battlesuits page

public/data/honkai3rd/elysianRealm/supportBattlesuits/ae.json

@@ -0,0 +1,6 @@
+{
+  "id": "ae",
+  "skillName": "Empyrean Sunder",
+  "cooldown": 50,
+  "description": "Summons Azure Empyrea, which gathers enemies and deals 1500% of ATK as Fire DMG to all enemies for 15s (this DMG decays below 85 difficulty), as well as increasing elemental DMG by 30% against all target enemies. Valkyries regain 1 SP every 1 second, have a large increase in Ignore Interrupt, and have a 16% increase in Elemental Breach."
+}

public/data/honkai3rd/elysianRealm/supportBattlesuits/bke.json

@@ -0,0 +1,6 @@
+{
+  "id": "bke",
+  "skillName": "Knightly Bulwark",
+  "cooldown": 30,
+  "description": "Summons Bright Knight: Excelsis, who swings her lance and unleashes an Ultimate, dealing 930% of ATK as physical DMG (the DMG decays below 85 difficulty), and blocking all attacks against the Valkyrie for a short period."
+}

public/data/honkai3rd/elysianRealm/supportBattlesuits/br.json

@@ -0,0 +1,6 @@
+{
+  "id": "br",
+  "skillName": "Blood Boost",
+  "cooldown": 40,
+  "description": "The Blood Rose reduces the HP of the deployed Valkyrie by 30%, and increases the Total DMG dealt by the Valkyrie by 60% for 10s."
+}

public/data/honkai3rd/elysianRealm/supportBattlesuits/dp.json

@@ -0,0 +1,6 @@
+{
+  "id": "dp",
+  "skillName": "Divine Retribution",
+  "cooldown": 40,
+  "description": "Triggers Time Fracture for 12s, during which, Falling Thunder is triggered every 2s, dealing 100% of ATK as Lightning DMG to all enemies and imparing them, and DEF is reduced by 80% for 5s."
+}

public/data/honkai3rd/elysianRealm/supportBattlesuits/le.json

@@ -0,0 +1,6 @@
+{
+  "id": "le",
+  "skillName": "Lightning Charge",
+  "cooldown": 40,
+  "description": "Lightning Empress restores 50 SP for the deployed Valkyrie."
+}

public/data/honkai3rd/elysianRealm/supportBattlesuits/ss.json

@@ -0,0 +1,6 @@
+{
+  "id": "ss",
+  "skillName": "Arctic Snow",
+  "cooldown": 60,
+  "description": "Summons Snowy Sniper, freezing enemies across the battlefield and increasing their physical DMG taken by 35% for 12s. Deals 150% of ATK as Ice DMG after the freeze ends."
+}

public/data/honkai3rd/elysianRealm/supportBattlesuits/vc.json

@@ -0,0 +1,6 @@
+{
+  "id": "vc",
+  "skillName": "Black Hole",
+  "cooldown": 30,
+  "description": "Summons Valkyrie Chariot, which unleashes a Black Hole that lasts 10s, sucking in enemies and causing Bleed. The ranged physical DMG taken by the sucked in enemies is increased by 27%, the total DMG dealt is reduced by 50%, the Ignore Interrupt is significantly reduced, and the enemies are Stunned for 6s after the Black Hole vanishes."
+}

public/data/honkai3rd/elysianRealm/supportBattlesuits/vke.json

@@ -0,0 +1,6 @@
+{
+  "id": "vke",
+  "skillName": "Ravaging Flame",
+  "cooldown": 60,
+  "description": "Summons Vermilion Knight: Eclipse, with a devastating ATK that deals a total of 2650% of ATK as Fire DMG + 350% of ATK as Physical DMG. After that, Might of An-Utu is unleashed, dealing a total of 2600% of ATK as Fire DMG and inflicting a 20% Fire Vulnerability on the target enemies for 10s (this support skill's DMG decays below 85 difficulty)."
+}

public/data/honkai3rd/ko-KR/elysianRealm/supportBattlesuits/ae.md

@@ -0,0 +1,3 @@
+# 분천지
+
+단심의 먹구름을 소환해 적을 모아 모든 적에게 공격력 1500%의 화염 원소 대미지를 가하고(난이도 85 이하일 경우 대미지 감소), 15초간 적중한 적에게 가하는 모든 원소 대미지가 30% 증가한다. 전장의 캐릭터가 1초마다 SP를 1pt 회복하고, 경직 저항력이 대폭 증가하며, 16%의 원소 관통을 획득한다.

public/data/honkai3rd/ko-KR/elysianRealm/supportBattlesuits/bke.md

@@ -0,0 +1,3 @@
+# 기사의 수호
+
+성휘의 기사 월백을 소환해 랜스를 휘두르고 필살기를 발동해 총 공격력 930%의 물리 대미지(난이도 85 이하일 경우 대미지 감소)를 가하고, 짧은 시간 출전 발키리가 받는 모든 공격을 막는다.

public/data/honkai3rd/ko-KR/elysianRealm/supportBattlesuits/br.md

@@ -0,0 +1,3 @@
+# 선혈 폭발
+
+핏빛 장미의 힘을 빌려 출전 발키리의 HP가 30% 감소하고, 10초간 출전 발키리가 가하는 모든 대미지가 60% 증가한다.

public/data/honkai3rd/ko-KR/elysianRealm/supportBattlesuits/dp.md

@@ -0,0 +1,3 @@
+# 신성한 빛의 심판
+
+12초간 시공을 발동한다. 발동 기간 2초마다 낙뢰를 발동해 모든 적에게 공격력 100%의 뇌전 원소 대미지를 가하고, 적을 취약 상태로 만들어 방어력을 80% 감소시킨다. 지속 시간: 5초

public/data/honkai3rd/ko-KR/elysianRealm/supportBattlesuits/le.md

@@ -0,0 +1,3 @@
+# 뇌전 충전
+
+뇌전여왕의 귀신갑주의 힘을 빌려 즉시 출전 발키리의 SP를 50pt 회복한다.

public/data/honkai3rd/ko-KR/elysianRealm/supportBattlesuits/ss.md

@@ -0,0 +1,3 @@
+# 북극의 눈
+
+설원 저격수를 소환해 모든 적을 빙결시키고, 적이 받는 물리 대미지를 12초간 35% 증가시킨다. 빙결 종료 후 공격력 150%의 빙결 대미지를 가한다.

public/data/honkai3rd/ko-KR/elysianRealm/supportBattlesuits/vc.md

@@ -0,0 +1,3 @@
+# 인력의 블랙홀
+
+발키리 채리엇을 소환해 10초간 블랙홀을 발동하고 적을 끌어당기며, 출혈 효과를 부여한다. 끌어당겨진 적은 받는 원거리 물리 대미지가 27% 증가하고, 가하는 모든 대미지가 50% 감소하며, 경직 저항력이 대폭 감소한다. 블랙홀 종료 후 기절을 6초간 부여한다.

public/data/honkai3rd/ko-KR/elysianRealm/supportBattlesuits/vke.md

@@ -0,0 +1,3 @@
+# 영원한 불꽃
+
+진홍의 기사·월식을 소환해 파멸 공격을 발동하고 총 공격력 2650%의 화염 원소 대미지+공격력 350%의 물리 대미지를 가한다. 그 후 겁멸을 발동해 총 공격력 2600%의 화염 원소 대미지를 가하고, 적중한 적에게 20%의 화염 피해 심화를 부여한다. 지속 시간: 10초(난이도 85 이하일 경우 해당 지원 스킬 대미지 감소).

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[] = []