From 625f578886c1e3fba7f62f7eb552667c8fc6ed5f Mon Sep 17 00:00:00 2001
From: Sakura Knoll <s4kura.knoll@gmail.com>
Date: Thu, 16 Jun 2022 18:56:23 +0900
Subject: [PATCH] Add stigmata and weapon print page

---
 .../prints/stigmata/[stigmataId].tsx          | 195 ++++++++++++++++++
 .../honkai3rd/prints/weapons/[weaponId].tsx   | 185 +++++++++++++++++
 2 files changed, 380 insertions(+)
 create mode 100644 src/pages/honkai3rd/prints/stigmata/[stigmataId].tsx
 create mode 100644 src/pages/honkai3rd/prints/weapons/[weaponId].tsx

diff --git a/src/pages/honkai3rd/prints/stigmata/[stigmataId].tsx b/src/pages/honkai3rd/prints/stigmata/[stigmataId].tsx
new file mode 100644
index 00000000..359e13db
--- /dev/null
+++ b/src/pages/honkai3rd/prints/stigmata/[stigmataId].tsx
@@ -0,0 +1,195 @@
+/** @jsxImportSource theme-ui */
+import { NextPageContext } from 'next'
+import React from 'react'
+import PageLink from '../../../../components/atoms/PageLink'
+import { StigmataSetProps } from '../../../../components/pages/StigmataSetPage'
+import { generateI18NPaths, getI18NProps } from '../../../../server/i18n'
+import {
+  listStigmata,
+  getStigmataById,
+  getStigmataListBySetId,
+  getStigmataSetBySetId,
+  listStigmataSet,
+} from '../../../../server/data/honkai3rd/stigmata'
+import { Box, Card, Flex, Heading, Paragraph } from 'theme-ui'
+import SecondaryLabel from '../../../../components/atoms/SecondaryLabel'
+import StigmataCard from '../../../../components/molecules/StigmataCard'
+import { translate, useTranslation } from '../../../../lib/i18n'
+import { useRouter } from 'next/router'
+
+type StigmataShowPageProps = StigmataSetProps
+
+const StigmataListPage = ({
+  stigmataSet,
+  stigmataSetList,
+}: StigmataShowPageProps) => {
+  const { t } = useTranslation()
+  const { locale } = useRouter()
+
+  const stigmataSetName = translate(
+    locale,
+    { 'ko-KR': stigmataSet.krName },
+    stigmataSet.name
+  )
+  const stigmataSetAltName = translate(
+    locale,
+    { 'ko-KR': stigmataSet.krAltName },
+    stigmataSet.altName
+  )
+
+  return (
+    <Box p={3}>
+      <Box mb={3}>
+        <Heading as='h1' mb={0}>
+          {stigmataSetName}
+        </Heading>
+        <SecondaryLabel>{stigmataSetAltName}</SecondaryLabel>
+      </Box>
+
+      <Card mb={3}>
+        <Flex
+          p={2}
+          sx={{
+            borderBottom: 'default',
+            justifyContent: 'space-around',
+            flexWrap: 'wrap',
+          }}
+        >
+          {stigmataSetList.map((stigmataSetItem) => {
+            return (
+              <StigmataCard
+                key={stigmataSetItem.id}
+                stigmata={stigmataSetItem}
+              />
+            )
+          })}
+        </Flex>
+        {stigmataSetList.map((stigmataSetItem) => {
+          const stigmataName = translate(
+            locale,
+            { 'ko-KR': stigmataSetItem.krName },
+            stigmataSetItem.name
+          )
+          const stigmataSkillDescrpition = translate(
+            locale,
+            { 'ko-KR': stigmataSetItem.skill.krDescription },
+            stigmataSetItem.skill.description
+          )
+          return (
+            <React.Fragment key={stigmataSetItem.id}>
+              <Box sx={{ p: 2, borderBottom: 'default' }}>
+                <Heading as='h2' mb={1}>
+                  <PageLink href={`/honkai3rd/stigmata/${stigmataSetItem.id}`}>
+                    {stigmataName}
+                  </PageLink>
+                </Heading>
+                <SecondaryLabel>
+                  {t(`stigmata-show.${stigmataSetItem.type}`)}
+                </SecondaryLabel>
+              </Box>
+              <Box p={2} sx={{ borderBottom: 'default' }}>
+                HP : {stigmataSetItem.hp} / ATK : {stigmataSetItem.atk} / DEF :{' '}
+                {stigmataSetItem.def} / CRT : {stigmataSetItem.crt}
+              </Box>
+              <Paragraph
+                m={0}
+                p={2}
+                sx={{
+                  borderBottom: 'default',
+                  '&:last-child': { borderBottom: 'none' },
+                }}
+              >
+                {stigmataSkillDescrpition}
+              </Paragraph>
+            </React.Fragment>
+          )
+        })}
+      </Card>
+
+      <Card>
+        <Heading as='h2' m={0} p={2} sx={{ borderBottom: 'default' }}>
+          {translate(
+            locale,
+            { 'ko-KR': stigmataSet.twoSetSkill.krName },
+            stigmataSet.twoSetSkill.name
+          )}
+        </Heading>
+        <Paragraph m={0} p={2} sx={{ borderBottom: 'default' }}>
+          {translate(
+            locale,
+            { 'ko-KR': stigmataSet.twoSetSkill.krDescription },
+            stigmataSet.twoSetSkill.description
+          )}
+        </Paragraph>
+        <Heading as='h2' m={0} p={2} sx={{ borderBottom: 'default' }}>
+          {translate(
+            locale,
+            {
+              'ko-KR': stigmataSet.threeSetSkill.krName,
+            },
+            stigmataSet.threeSetSkill.name
+          )}
+        </Heading>
+        <Paragraph m={0} p={2}>
+          {translate(
+            locale,
+            { 'ko-KR': stigmataSet.threeSetSkill.krDescription },
+            stigmataSet.threeSetSkill.description
+          )}
+        </Paragraph>
+      </Card>
+    </Box>
+  )
+}
+
+export default StigmataListPage
+
+export async function getStaticProps({
+  params,
+  locale,
+}: NextPageContext & { params: { stigmataId: string } }) {
+  const stigmataData = getStigmataById(params.stigmataId)!
+  if (stigmataData != null) {
+    return {
+      props: {
+        type: 'single',
+        stigmataData: stigmataData,
+        stigmataSetList: (getStigmataListBySetId(stigmataData.set!) || []).sort(
+          (a, b) => -a.type.localeCompare(b.type)
+        ),
+        stigmataSet: getStigmataSetBySetId(stigmataData.set!) || null,
+        ...(await getI18NProps(locale)),
+      },
+    }
+  }
+  const [stigmataSetId] = params.stigmataId.split('-set')
+  const stigmataSet = getStigmataSetBySetId(stigmataSetId)!
+  return {
+    props: {
+      type: 'set',
+      stigmataSet,
+      stigmataSetList: (getStigmataListBySetId(stigmataSet.id) || []).sort(
+        (a, b) => -a.type.localeCompare(b.type)
+      ),
+      ...(await getI18NProps(locale)),
+    },
+  }
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: generateI18NPaths([
+      ...listStigmata().map((stigmata) => {
+        return {
+          params: { stigmataId: stigmata.id },
+        }
+      }),
+      ...listStigmataSet().map((stigmataSet) => {
+        return {
+          params: { stigmataId: `${stigmataSet.id}-set` },
+        }
+      }),
+    ]),
+    fallback: false,
+  }
+}
diff --git a/src/pages/honkai3rd/prints/weapons/[weaponId].tsx b/src/pages/honkai3rd/prints/weapons/[weaponId].tsx
new file mode 100644
index 00000000..404ec948
--- /dev/null
+++ b/src/pages/honkai3rd/prints/weapons/[weaponId].tsx
@@ -0,0 +1,185 @@
+/** @jsxImportSource theme-ui */
+import { Box, Card, Heading, Paragraph } from '@theme-ui/components'
+import { NextPageContext } from 'next'
+import SquareImageBox from '../../../../components/atoms/SquareImageBox'
+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'
+import { useTranslation, translate } from '../../../../lib/i18n'
+import PageLink from '../../../../components/atoms/PageLink'
+import { assetsBucketBaseUrl } from '../../../../lib/consts'
+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'
+
+interface WeaponShowPageProps {
+  weapon: WeaponData
+  battlesuitMap: { [key: string]: BattlesuitData }
+  weaponMap: { [key: string]: WeaponData }
+}
+
+const WeaponShowPage = ({
+  weapon,
+  battlesuitMap,
+  weaponMap,
+}: WeaponShowPageProps) => {
+  const { locale } = useRouter()
+  const { t } = useTranslation()
+
+  const weaponName = translate(locale, { 'ko-KR': weapon.krName }, weapon.name)
+  const weaponCategory = t(`weapons-show.${weapon.category}`)
+
+  return (
+    <Box p={3}>
+      <Heading as='h1'>{weaponName}</Heading>
+
+      <Box mb={3}>
+        <SquareImageBox
+          size={100}
+          alt={weaponName}
+          src={`${assetsBucketBaseUrl}/honkai3rd/weapons/${weapon.id}.png`}
+        />
+      </Box>
+
+      <Card mb={3}>
+        <Box p={2} sx={{ borderBottom: 'default' }}>
+          <PageLink
+            href={{
+              pathname: '/honkai3rd/weapons',
+              query: { filter: weapon.category },
+            }}
+          >
+            {weaponCategory}
+          </PageLink>
+        </Box>
+        <Box p={2} sx={{ borderBottom: 'default' }}>
+          {'⭐'.repeat(weapon.rarity)}
+        </Box>
+        <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>
+        {weapon.skills.map((skill) => {
+          return (
+            <Card key={skill.name} mb={3}>
+              <Heading as='h3' p={2} m={0} sx={{ borderBottom: 'default' }}>
+                {translate(locale, { 'ko-KR': skill.krName }, skill.name)}
+              </Heading>
+              <Paragraph
+                p={2}
+                sx={{
+                  whiteSpace: 'pre-wrap',
+                }}
+              >
+                {translate(
+                  locale,
+                  { 'ko-KR': skill.krDescription },
+                  skill.description
+                )}
+              </Paragraph>
+            </Card>
+          )
+        })}
+      </Box>
+    </Box>
+  )
+}
+
+export default WeaponShowPage
+
+export async function getStaticProps({
+  params,
+  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,
+      battlesuitMap,
+      weaponMap,
+      ...(await getI18NProps(locale)),
+    },
+  }
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: generateI18NPaths(
+      listWeapons().map((weapon) => {
+        return {
+          params: { weaponId: weapon.id },
+        }
+      })
+    ),
+    fallback: false,
+  }
+}