Improve stigma page to show set info

src/lib/v2-pre/server/loadData.ts

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 import YAML from 'yaml'
-import { BattlesuitCatalogItem, Stigma, StigmataSet, WeaponCatalogItem } from '../data/types'
+import { BattlesuitCatalogItem, RootStigma, StigmataSet, WeaponCatalogItem } from '../data/types'
 
 export const dataDir = path.join(process.cwd(), 'data/v2-pre')
 
@@ -39,7 +39,7 @@ export function loadStigmataCatalog(): WeaponCatalogItem[] {
   return readYamlFile(stigmataCatalogPath)
 }
 
-export function loadStigmaData(id: string): Stigma {
+export function loadStigmaData(id: string): RootStigma {
   const stigmaDataPath = path.join(stigmataDir, `${id}.yaml`)
   return readYamlFile(stigmaDataPath)
 }

src/pages/v2-pre/stigmata/[stigmaId].tsx

@@ -1,9 +1,9 @@
 import { NextPageContext } from 'next'
-import { Box, Card, Flex, Heading } from 'theme-ui'
+import { Box, Card, Flex, Heading, Link } from 'theme-ui'
 import FormattedText from '../../../components/v2-pre/FormattedText'
 import { formatSubSkillInfo, replaceNewLine } from '../../../lib/v2-pre/data/formatText'
-import { loadStigmaData, loadStigmataCatalog } from '../../../lib/v2-pre/server/loadData'
-import { RootStigma, SkillTagItem } from '../../../lib/v2-pre/data/types'
+import { loadStigmaData, loadStigmataCatalog, loadStigmataSetData } from '../../../lib/v2-pre/server/loadData'
+import { RootStigma, SkillTagItem, StigmataSetCatalogItem } from '../../../lib/v2-pre/data/types'
 import { Fragment } from 'react'
 import TagIcon from '../../../components/v2-pre/TagIcon'
 import { getStigmaTypeLabel } from '../../../lib/v2-pre/data/text'
@@ -11,19 +11,23 @@ import StigmaTypeIcon from '../../../components/v2-pre/StigmaTypeIcon'
 import StigmaIcon from '../../../components/v2-pre/StigmaIcon'
 import StigmaFigureImage from '../../../components/v2-pre/StigmaFigureImage'
 
-interface WeaponShowPageProps {
+interface StigmaShowPageProps {
   rootStigma: RootStigma
+  stigmataSetCatalogItem: StigmataSetCatalogItem | null
 }
 
-const StigmaShowPage = ({ rootStigma }: WeaponShowPageProps) => {
+const StigmaShowPage = ({ rootStigma, stigmataSetCatalogItem }: StigmaShowPageProps) => {
   const stigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
   return (
     <Box>
       <Heading as="h1">{stigma.name}</Heading>
 
-      <Box>
+      <Box sx={{ display: ['none', 'none', 'block'] }}>
         <StigmaFigureImage stigma={stigma} size={720} />
       </Box>
+      <Box sx={{ display: ['block', 'block', 'none'] }}>
+        <StigmaFigureImage stigma={stigma} size={480} />
+      </Box>
 
       <Box mb={3}>
         <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.rarity} />
@@ -44,7 +48,7 @@ const StigmaShowPage = ({ rootStigma }: WeaponShowPageProps) => {
       </Card>
 
       <Heading as="h2">Skills</Heading>
-      <Card>
+      <Card mb={3}>
         {stigma.skills.map(skill => {
           return (
             <Fragment key={skill.id}>
@@ -85,6 +89,35 @@ const StigmaShowPage = ({ rootStigma }: WeaponShowPageProps) => {
           )
         })}
       </Card>
+
+      {stigmataSetCatalogItem != null && (
+        <>
+          <Heading as="h2">Set</Heading>
+          <Flex key={stigmataSetCatalogItem.id}>
+            <Link href={`/v2-pre/stigmata-sets/${stigmataSetCatalogItem.id}`}>
+              <Card p={1}>
+                <Flex sx={{ justifyContent: 'center' }}>
+                  {stigmataSetCatalogItem.stigmataList.map(stigma => {
+                    return <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.maxRarity} />
+                  })}
+                </Flex>
+                <Box
+                  sx={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    px: 1,
+                    textAlign: 'center'
+                  }}
+                >
+                  {stigmataSetCatalogItem.name}
+                </Box>
+                {/* {stigma.id} */}
+              </Card>
+            </Link>
+          </Flex>
+        </>
+      )}
       {/* <pre>{JSON.stringify(weapon, null, 2)}</pre> */}
     </Box>
   )
@@ -94,9 +127,29 @@ export default StigmaShowPage
 
 export async function getStaticProps({ locale, params }: NextPageContext & { params: { stigmaId: string } }) {
   const rootStigma = loadStigmaData(params.stigmaId)
+  const setId = rootStigma.stigmata[0].setId
+
+  let stigmataSetCatalogItem: StigmataSetCatalogItem | null = null
+  if (setId !== '0') {
+    const stigmataSet = loadStigmataSetData(setId)
+    const setStigmataList = stigmataSet.stigmaIdList.map(id => {
+      const targetRootStigma = params.stigmaId === id ? rootStigma : loadStigmaData(id)
+      const maxedStigma = targetRootStigma.stigmata[targetRootStigma.stigmata.length - 1]
+      return {
+        id: targetRootStigma.id,
+        icon: maxedStigma.icon,
+        maxRarity: maxedStigma.maxRarity
+      }
+    })
+    stigmataSetCatalogItem = {
+      id: setId,
+      name: stigmataSet.name,
+      stigmataList: setStigmataList
+    }
+  }
 
   return {
-    props: { rootStigma }
+    props: { rootStigma, stigmataSetCatalogItem }
   }
 }
 

src/pages/v2-pre/stigmata/index.tsx

@@ -14,7 +14,7 @@ interface StigmataListPageProps {
 const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => {
   return (
     <Box>
-      <h1>Stigmata</h1>
+      <h1>Stigmata (Single)</h1>
       <Flex sx={{ flexWrap: 'wrap' }}>
         {stigmataCatalog
           .filter(filterStigmata)