Improve weapons.show and battlesuits.show pages

src/components/molecules/SourceCard.tsx

@@ -0,0 +1,124 @@
+/** @jsxImportSource theme-ui */
+import { Card, Paragraph, Heading } from '@theme-ui/components'
+import { SourceData } from '../../lib/honkai3rd/sources'
+
+import { useTranslation } from '../../lib/i18n'
+
+interface SourceCardProps {
+  source: SourceData
+}
+
+const SourceCard = ({ source }: SourceCardProps) => {
+  const { t } = useTranslation()
+  switch (source.type) {
+    case 'spirit-weapon-foundry':
+      return (
+        <SourceCardConatiner>
+          <SourceCardHeading>
+            {t('sources.sprit-weapon-foundry.label')}
+          </SourceCardHeading>
+          <SourceCardDescription>
+            {t('sources.sprit-weapon-foundry.description')}
+          </SourceCardDescription>
+        </SourceCardConatiner>
+      )
+    case 'dorm-equipment-supply':
+      return (
+        <SourceCardConatiner>
+          <SourceCardHeading>
+            {t('sources.dorm-equipment-supply.label')}
+          </SourceCardHeading>
+          <SourceCardDescription>
+            {t('sources.dorm-equipment-supply.description')}
+          </SourceCardDescription>
+        </SourceCardConatiner>
+      )
+    case 'focused-supply':
+      return (
+        <SourceCardConatiner>
+          <SourceCardHeading>
+            {t('sources.focused-supply.label')}
+          </SourceCardHeading>
+          <SourceCardDescription>
+            {t('sources.focused-supply.description')}
+          </SourceCardDescription>
+        </SourceCardConatiner>
+      )
+    case 'pri-weapon-foundry':
+      return (
+        <SourceCardConatiner>
+          <SourceCardHeading>
+            {t('sources.pri-weapon-foundry.label')}
+          </SourceCardHeading>
+          <SourceCardDescription>
+            {t('sources.pri-weapon-foundry.description')}
+          </SourceCardDescription>
+        </SourceCardConatiner>
+      )
+    case 'weapon-exchange':
+      return (
+        <SourceCardConatiner>
+          <SourceCardHeading>
+            {t('sources.weapon-exchange.label')}
+          </SourceCardHeading>
+          <SourceCardDescription>
+            {t('sources.weapon-exchange.description')}
+          </SourceCardDescription>
+        </SourceCardConatiner>
+      )
+    case 'stigmata-exchange':
+      return (
+        <SourceCardConatiner>
+          <SourceCardHeading>
+            {t('sources.stigmata-exchange.label')}
+          </SourceCardHeading>
+          <SourceCardDescription>
+            {t('sources.stigmata-exchange.description')}
+          </SourceCardDescription>
+        </SourceCardConatiner>
+      )
+    case 'special-divine-key-supply':
+      return (
+        <SourceCardConatiner>
+          <SourceCardHeading>
+            {t('sources.special-divine-key-supply.label')}
+          </SourceCardHeading>
+          <SourceCardDescription>
+            {t('sources.special-divine-key-supply.description')}
+          </SourceCardDescription>
+        </SourceCardConatiner>
+      )
+    default:
+      return (
+        <SourceCardConatiner>
+          <SourceCardDescription>Unknown: {source.type}</SourceCardDescription>
+        </SourceCardConatiner>
+      )
+  }
+}
+
+export default SourceCard
+
+const SourceCardConatiner: React.FC = ({ children }) => {
+  return (
+    <Card
+      sx={{
+        m: 1,
+      }}
+    >
+      {children}
+    </Card>
+  )
+}
+
+const SourceCardHeading: React.FC = ({ children }) => {
+  return (
+    <Heading as='h4' sx={{ borderBottom: 'default', p: 1, m: 0 }}>
+      {children}
+    </Heading>
+  )
+}
+
+const SourceCardDescription: React.FC = ({ children }) => {
+  return <Paragraph sx={{ p: 1 }}>{children}</Paragraph>
+}

src/lib/honkai3rd/sources.ts

@@ -0,0 +1,12 @@
+export type SourceType =
+  | 'pri-weapon-foundry'
+  | 'focused-supply'
+  | 'spirit-weapon-foundry'
+  | 'weapon-exchange'
+  | 'stigmata-exchange'
+  | 'dorm-equipment-supply'
+  | 'special-divine-key-supply'
+
+export interface SourceData {
+  type: SourceType
+}

src/lib/honkai3rd/weapons.ts

@@ -1,3 +1,5 @@
+import { SourceData } from './sources'
+
 export interface WeaponSkill {
   name: string
   krName?: string
@@ -25,4 +27,13 @@ export interface WeaponData {
   rarity: number
   skills: WeaponSkill[]
   version?: string
+  battlesuits?: {
+    id: string
+    suitability?: number
+    description?: string
+    descriptionKr?: string
+  }[]
+  priWeapon?: string
+  originalWeapons?: string[]
+  sources?: SourceData[]
 }

src/pages/honkai3rd/battlesuits/[battlesuitId].tsx

@@ -189,6 +189,7 @@ const BattlesuitShowPage = ({
           <Card
             sx={{
               mb: 3,
+              p: 2,
               overflow: 'hidden',
             }}
           >
@@ -198,29 +199,33 @@ const BattlesuitShowPage = ({
                   <Heading
                     as='h3'
                     sx={{
-                      pt: 2,
-                      px: 2,
                       mb: 1,
                     }}
                   >
                     {t(`battlesuit-show.equipmentTypes.${equipmentItem.type}`)}
                   </Heading>
-                  <Flex>
+                  <Flex sx={{ mx: -1 }}>
                     {equipmentItem.weapon != null && (
-                      <WeaponCard weapon={weaponMap[equipmentItem.weapon]} />
+                      <WeaponCard
+                        size='sm'
+                        weapon={weaponMap[equipmentItem.weapon]}
+                      />
                     )}
                     {equipmentItem.stigmataTop != null && (
                       <StigmataCard
+                        size='sm'
                         stigmata={stigmataMap[equipmentItem.stigmataTop]}
                       />
                     )}
                     {equipmentItem.stigmataMid != null && (
                       <StigmataCard
+                        size='sm'
                         stigmata={stigmataMap[equipmentItem.stigmataMid]}
                       />
                     )}
                     {equipmentItem.stigmataBot != null && (
                       <StigmataCard
+                        size='sm'
                         stigmata={stigmataMap[equipmentItem.stigmataBot]}
                       />
                     )}

src/pages/honkai3rd/weapons/[weaponId].tsx

@@ -7,6 +7,7 @@ import { WeaponData } from '../../../lib/honkai3rd/weapons'
 import { generateI18NPaths, getI18NProps } from '../../../server/i18n'
 import {
   getWeaponById,
+  getWeaponMapByIds,
   listWeapons,
 } from '../../../server/data/honkai3rd/weapons'
 import { useRouter } from 'next/router'
@@ -15,12 +16,23 @@ import Head from '../../../components/atoms/Head'
 import PageLink from '../../../components/atoms/PageLink'
 import { assetsBucketBaseUrl } from '../../../lib/consts'
 import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
+import { getBattlesuitMapByIds } from '../../../server/data/honkai3rd/battlesuits'
+import { BattlesuitData } from '../../../lib/honkai3rd/battlesuits'
+import BattlesuitCard from '../../../components/molecules/BattlesuitCard'
+import WeaponCard from '../../../components/molecules/WeaponCard'
+import SourceCard from '../../../components/molecules/SourceCard'
 
 interface WeaponShowPageProps {
   weapon: WeaponData
+  battlesuitMap: { [key: string]: BattlesuitData }
+  weaponMap: { [key: string]: WeaponData }
 }
 
-const WeaponShowPage = ({ weapon }: WeaponShowPageProps) => {
+const WeaponShowPage = ({
+  weapon,
+  battlesuitMap,
+  weaponMap,
+}: WeaponShowPageProps) => {
   const { locale } = useRouter()
   const { t } = useTranslation()
 
@@ -79,6 +91,50 @@ const WeaponShowPage = ({ weapon }: WeaponShowPageProps) => {
           <Box p={2}>
             ATK : {weapon.atk} / CRT : {weapon.crt}
           </Box>
+          {weapon.battlesuits != null && weapon.battlesuits.length > 0 && (
+            <Box sx={{ p: 2, borderTop: 'default' }}>
+              <Heading as='h4'>{t('weapons-show.best-on')}</Heading>
+              {weapon.battlesuits.map(({ id: battlesuitId }) => {
+                return (
+                  <BattlesuitCard
+                    key={battlesuitId}
+                    size='sm'
+                    battlesuit={battlesuitMap[battlesuitId]}
+                  />
+                )
+              })}
+            </Box>
+          )}
+          {weapon.priWeapon != null && (
+            <Box sx={{ p: 2, borderTop: 'default' }}>
+              <Heading as='h4'>{t('weapons-show.pri-weapon')}</Heading>
+              <WeaponCard size='sm' weapon={weaponMap[weapon.priWeapon]} />
+            </Box>
+          )}
+          {weapon.originalWeapons != null && weapon.originalWeapons.length > 0 && (
+            <Box sx={{ p: 2, borderTop: 'default' }}>
+              <Heading as='h4'>{t('weapons-show.original-weapon')}</Heading>
+              {weapon.originalWeapons.map((originalWeaponId) => {
+                return (
+                  <WeaponCard
+                    key={originalWeaponId}
+                    size='sm'
+                    weapon={weaponMap[originalWeaponId]}
+                  />
+                )
+              })}
+            </Box>
+          )}
+          {weapon.sources != null && (
+            <Box sx={{ p: 2, borderTop: 'default' }}>
+              <Heading as='h4'>{t('weapons-show.sources')}</Heading>
+              {weapon.sources
+                .sort((a, b) => a.type.localeCompare(b.type))
+                .map((source) => {
+                  return <SourceCard key={source.type} source={source} />
+                })}
+            </Box>
+          )}
         </Card>
 
         <Box>
@@ -116,9 +172,30 @@ export async function getStaticProps({
   locale,
 }: NextPageContext & { params: { weaponId: string } }) {
   const weapon = getWeaponById(params.weaponId)
+  const battlesuitMap = getBattlesuitMapByIds(
+    weapon != null && weapon.battlesuits != null
+      ? weapon.battlesuits.map(({ id }) => id)
+      : []
+  )
+
+  const weaponIds = []
+  if (weapon != null) {
+    if (weapon.priWeapon != null) {
+      weaponIds.push(weapon.priWeapon)
+    }
+    if (weapon.originalWeapons != null) {
+      weaponIds.push(...weapon.originalWeapons)
+    }
+  }
+  const weaponMap = getWeaponMapByIds(weaponIds)
 
   return {
-    props: { weapon, ...(await getI18NProps(locale)) },
+    props: {
+      weapon,
+      battlesuitMap,
+      weaponMap,
+      ...(await getI18NProps(locale)),
+    },
   }
 }