Add stigmata pages

src/components/v2-pre/StigmaFigureImage.tsx

@@ -0,0 +1,78 @@
+import { Box, Flex, Image } from 'theme-ui'
+import { assetsBucketBaseUrl } from '../../lib/consts'
+
+interface StigmaFigureImageProps {
+  stigma: {
+    name: string
+    image: string
+  }
+  size?: number
+}
+
+const StigmaFigureImage = ({ size = 720, stigma }: StigmaFigureImageProps) => {
+  const ratio = size / 720
+
+  return (
+    <Box sx={{ width: size, height: size, position: 'relative' }}>
+      <Box
+        sx={{
+          position: 'absolute',
+          left: (size - 720) / 2,
+          top: (size - 720) / 2
+        }}
+      >
+        <Flex
+          sx={{
+            position: 'absolute',
+            width: 720,
+            height: 720,
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1,
+            transform: `scale(${ratio})`
+          }}
+        >
+          <Image src={getStigmaFigureImageSrc(stigma.image)} />
+        </Flex>
+        <Flex
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: 720,
+            height: 720,
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: `scale(${ratio})`
+          }}
+        >
+          <Image src={getStigmaFigureTattooImageSrc(stigma.image)} />
+        </Flex>
+      </Box>
+    </Box>
+  )
+  return (
+    <Box
+      sx={{
+        transform: 'scale(1)',
+        width: 720,
+        height: 720,
+        background: `no-repeat 50% url(${getStigmaFigureImageSrc(
+          stigma.image
+        )}), no-repeat 50% url(${getStigmaFigureTattooImageSrc(stigma.image)})`
+      }}
+    />
+  )
+}
+
+export default StigmaFigureImage
+
+function getStigmaFigureImageSrc(image: string) {
+  const [set, type] = image.split('_')
+  return `${assetsBucketBaseUrl}/raw/stigmatafigures/${set}_${type}.png`
+}
+
+function getStigmaFigureTattooImageSrc(image: string) {
+  const [set] = image.split('_')
+  return `${assetsBucketBaseUrl}/raw/stigmatafigures/${set}_Tattoo.png`
+}

src/components/v2-pre/StigmaIcon.tsx

@@ -0,0 +1,59 @@
+import { Box, Flex } from 'theme-ui'
+import { assetsBucketBaseUrl } from '../../lib/consts'
+import { repeat } from '../../lib/utils'
+
+interface StigmaIconProps {
+  icon: string
+  rarity?: number
+}
+
+const starSize = 16
+
+const StigmaIcon = ({ icon: fileName, rarity }: StigmaIconProps) => {
+  return (
+    <Box sx={{ width: 112 }}>
+      <Box
+        sx={{
+          borderRadius: 4,
+          width: (128 / 8) * 7,
+          height: (112 / 8) * 7,
+          background: ` no-repeat 100% 100% /100% url(${assetsBucketBaseUrl}/raw/stigmataicons/${fileName}.png), ${getBackgroundByRarity(
+            rarity
+          )}`
+        }}
+      />
+      {rarity != null && (
+        <Flex sx={{ marginTop: -starSize / 2, justifyContent: 'center', width: '100%' }}>
+          {repeat(rarity, index => (
+            <Box
+              key={index}
+              sx={{
+                width: starSize,
+                height: starSize,
+                background: `no-repeat 50% / 100% url(${assetsBucketBaseUrl}/raw-misc/StarBig.png)`
+              }}
+            />
+          ))}
+        </Flex>
+      )}
+    </Box>
+  )
+}
+
+export default StigmaIcon
+
+function getBackgroundByRarity(rarity?: number) {
+  switch (rarity) {
+    case 6:
+      return 'linear-gradient(180deg, #e18434, #fbd977)'
+    case 5:
+      return 'linear-gradient(transparent, #c86de0),#7630a3'
+    case 4:
+    case 3:
+      return 'linear-gradient(transparent, #0ec1eb), #2368b1'
+    case 2:
+      return `linear-gradient(transparent, #52c389),#31756c`
+    default:
+      return 'transparent'
+  }
+}

src/components/v2-pre/StigmaTypeIcon.tsx

@@ -0,0 +1,34 @@
+import { Box } from 'theme-ui'
+import { assetsBucketBaseUrl } from '../../lib/consts'
+import { StigmaType } from '../../lib/v2-pre/data/types'
+
+interface StigmaTypeIconProps {
+  type: StigmaType
+}
+
+const StigmaTypeIcon = ({ type }: StigmaTypeIconProps) => {
+  return (
+    <Box
+      sx={{
+        borderRadius: 5,
+        width: 30,
+        height: 30,
+        background: `no-repeat 50% 50% / 24px url(${assetsBucketBaseUrl}/raw/weapontypeicons/${getStigmaTypeIcon(
+          type
+        )}.png), #5a8cb0`
+      }}
+    ></Box>
+  )
+}
+export default StigmaTypeIcon
+
+function getStigmaTypeIcon(type: StigmaType) {
+  switch (type) {
+    case 'top':
+      return 'Up'
+    case 'mid':
+      return 'Middle'
+    case 'bot':
+      return 'Down'
+  }
+}

src/lib/v2-pre/data/text.ts

@@ -1,4 +1,4 @@
-import { AttributeType, CharacterType, SkillType, TagType, WeaponType } from './types'
+import { AttributeType, CharacterType, SkillType, StigmaType, TagType, WeaponType } from './types'
 
 export function getAttributeLabel(type: AttributeType) {
   switch (type) {
@@ -48,6 +48,19 @@ export function getWeaponTypeLabel(type: WeaponType) {
   }
 }
 
+export function getStigmaTypeLabel(type: StigmaType) {
+  switch (type) {
+    case 'top':
+      return '상단'
+    case 'mid':
+      return '중단'
+    case 'bot':
+      return '하단'
+    default:
+      return `Unknown Stigma Type (${type})`
+  }
+}
+
 export function getSkillTypeLabel(type: SkillType) {
   switch (type) {
     case 'leader':

src/lib/v2-pre/data/types.ts

@@ -176,7 +176,7 @@ export interface WeaponData {
   criticalAdd: number
   resistanceBase: number
   resistanceAdd: number
-  skills: WeaponSkill[]
+  skills: EquipmentSkill[]
   rankUpMaterials: {
     id: string
     amount: number
@@ -184,7 +184,7 @@ export interface WeaponData {
   powerType: number
 }
 
-export interface WeaponSkill {
+export interface EquipmentSkill {
   id: string
   name: string
   info: string
@@ -203,3 +203,46 @@ export interface WeaponSkill {
   param3: number
   param3Add: number
 }
+
+export type StigmaType = 'top' | 'mid' | 'bot'
+
+export interface Stigma {
+  id: string
+  rarity: 1 | 2 | 3 | 4 | 5
+  maxRarity: 1 | 2 | 3 | 4 | 5
+  maxLv: number
+  type: StigmaType
+  hpBase: number
+  hpAdd: number
+  attackBase: number
+  attackAdd: number
+  defenceBase: number
+  defenceAdd: number
+  criticalBase: number
+  criticalAdd: number
+  icon: string
+  image: string
+  smallIcon: string
+  name: string
+  description: string
+  shortName: string
+  mainId: string
+  skills: EquipmentSkill[]
+  rankUpMaterials: {
+    id: string
+    amount: number
+  }[]
+}
+
+export interface RootStigma {
+  id: string
+  stigmata: Stigma[]
+}
+
+export interface StigmataCatalogItem {
+  id: string
+  name: string
+  icon: string
+  type: StigmaType
+  maxRarity: 1 | 2 | 3 | 4 | 5
+}

src/lib/v2-pre/server/compileData/compileStigmataData.ts

@@ -0,0 +1,115 @@
+import { RootStigma, StigmaType } from '../../data/types'
+import { getRawEquipmentSkillDataMap } from '../raw/equipmentSkillData'
+import { getRawStigmataDataMap } from '../raw/stigmataData'
+import { convertEquipmentSkill, getText } from './utils'
+
+export function compileStigmataData() {
+  const rawStigmataDataMap = getRawStigmataDataMap()
+  const rawStigmataDataMapEntries = Object.entries(rawStigmataDataMap)
+  const rawEquipmentSkillDataMap = getRawEquipmentSkillDataMap()
+
+  const stigmataMainIdStigmataMap = rawStigmataDataMapEntries.reduce((map, [id, rawData]) => {
+    const mainId = rawData.StigmataMainID.toString()
+    let rootStigma = map.get(mainId)
+    if (rootStigma == null) {
+      rootStigma = {
+        id: mainId,
+        stigmata: []
+      }
+      map.set(mainId, rootStigma)
+    }
+    const [, , icon] = rawData.IconPath.split('/')
+    const [, , smallIcon] = rawData.SmallIcon.split('/')
+
+    const skills = []
+    if (rawData.Prop1ID !== 0) {
+      const skillId = rawData.Prop1ID.toString()
+      const rawSkill = rawEquipmentSkillDataMap[skillId]
+      skills.push({
+        id: skillId,
+        ...convertEquipmentSkill(rawSkill),
+        param1: rawData.Prop1Param1,
+        param1Add: rawData.Prop1Param1Add,
+        param2: rawData.Prop1Param2,
+        param2Add: rawData.Prop1Param2Add,
+        param3: rawData.Prop1Param3,
+        param3Add: rawData.Prop1Param3Add
+      })
+    }
+    if (rawData.Prop2ID !== 0) {
+      const skillId = rawData.Prop2ID.toString()
+      const rawSkill = rawEquipmentSkillDataMap[skillId]
+      skills.push({
+        id: skillId,
+        ...convertEquipmentSkill(rawSkill),
+        param1: rawData.Prop2Param1,
+        param1Add: rawData.Prop2Param1Add,
+        param2: rawData.Prop2Param2,
+        param2Add: rawData.Prop2Param2Add,
+        param3: rawData.Prop2Param3,
+        param3Add: rawData.Prop2Param3Add
+      })
+    }
+    if (rawData.Prop3ID !== 0) {
+      const skillId = rawData.Prop3ID.toString()
+      const rawSkill = rawEquipmentSkillDataMap[skillId]
+      skills.push({
+        id: skillId,
+        ...convertEquipmentSkill(rawSkill),
+        param1: rawData.Prop3Param1,
+        param1Add: rawData.Prop3Param1Add,
+        param2: rawData.Prop3Param2,
+        param2Add: rawData.Prop3Param2Add,
+        param3: rawData.Prop3Param3,
+        param3Add: rawData.Prop3Param3Add
+      })
+    }
+
+    rootStigma.stigmata.push({
+      id,
+      rarity: rawData.Rarity,
+      maxRarity: rawData.MaxRarity,
+      maxLv: rawData.MaxLv,
+      type: convertStigmataType(rawData.BaseType),
+      hpBase: rawData.HPBase,
+      hpAdd: rawData.HPAdd,
+      attackBase: rawData.AttackBase,
+      attackAdd: rawData.AttackAdd,
+      defenceBase: rawData.DefenceBase,
+      defenceAdd: rawData.DefenceAdd,
+      criticalBase: rawData.CriticalBase,
+      criticalAdd: rawData.CriticalAdd,
+      icon,
+      image: rawData.ImagePath,
+      smallIcon,
+      name: getText(rawData.DisplayTitle),
+      description: getText(rawData.DisplayDescription),
+      shortName: getText(rawData.ShortName),
+      skills,
+      rankUpMaterials: rawData.EvoMaterial.map(({ ID, Num }) => {
+        return {
+          id: ID.toString(),
+          amount: Num
+        }
+      }),
+      mainId
+    })
+
+    return map
+  }, new Map<string, RootStigma>())
+
+  return [...stigmataMainIdStigmataMap.values()]
+}
+
+function convertStigmataType(rawType: number): StigmaType {
+  switch (rawType) {
+    case 1:
+      return 'top'
+    case 2:
+      return 'mid'
+    case 3:
+      return 'bot'
+    default:
+      throw new Error(`Unknown Raw Stigmata Base Type (${rawType})`)
+  }
+}

src/lib/v2-pre/server/compileData/compileWeaponData.ts

@@ -1,7 +1,7 @@
 import { RootWeaponData, WeaponData } from '../../data/types'
-import { getRawEquipmentSkillDataMap, RawEquipmentSkillData } from '../raw/equipmentSkillData'
+import { getRawEquipmentSkillDataMap } from '../raw/equipmentSkillData'
 import { getRawWeaponDataMap } from '../raw/weaponData'
-import { convertTagType, convertWeaponType, getText } from './utils'
+import { convertEquipmentSkill, convertWeaponType, getText } from './utils'
 
 export function compileWeaponData(): RootWeaponData[] {
   const rawWeaponDataMap = getRawWeaponDataMap()
@@ -21,7 +21,7 @@ export function compileWeaponData(): RootWeaponData[] {
       const rawSkill = rawEquipmentSkillDataMap[skillId]
       skills.push({
         id: skillId,
-        ...convertWeaponSkill(rawSkill),
+        ...convertEquipmentSkill(rawSkill),
         param1: rawData.Prop1Param1,
         param1Add: rawData.Prop1Param1Add,
         param2: rawData.Prop1Param2,
@@ -35,7 +35,7 @@ export function compileWeaponData(): RootWeaponData[] {
       const rawSkill = rawEquipmentSkillDataMap[skillId]
       skills.push({
         id: skillId,
-        ...convertWeaponSkill(rawSkill),
+        ...convertEquipmentSkill(rawSkill),
         param1: rawData.Prop2Param1,
         param1Add: rawData.Prop2Param1Add,
         param2: rawData.Prop2Param2,
@@ -49,7 +49,7 @@ export function compileWeaponData(): RootWeaponData[] {
       const rawSkill = rawEquipmentSkillDataMap[skillId]
       skills.push({
         id: skillId,
-        ...convertWeaponSkill(rawSkill),
+        ...convertEquipmentSkill(rawSkill),
         param1: rawData.Prop3Param1,
         param1Add: rawData.Prop3Param1Add,
         param2: rawData.Prop3Param2,
@@ -100,22 +100,4 @@ export function compileWeaponData(): RootWeaponData[] {
       weapons: rawWeaponMainIdWeaponDataMap.get(weaponId) || []
     }
   })
-
-  function convertWeaponSkill(rawSkill: RawEquipmentSkillData) {
-    const iconName = rawSkill.SkillIconPath.split('/').pop()
-    return {
-      name: getText(rawSkill.SkillName),
-      info: getText(rawSkill.SkillDisplay),
-      icon: iconName != null && iconName.length > 0 ? iconName : undefined,
-      skillCd: rawSkill.SkillCD,
-      skillSpCost: rawSkill.SPCost,
-      skillSpNeed: rawSkill.SPNeed,
-      tags: rawSkill.TagList.map(rawEquipmentSkillTag => {
-        return {
-          type: convertTagType(rawEquipmentSkillTag.TagID),
-          comment: getText(rawEquipmentSkillTag.TagComment)
-        }
-      })
-    }
-  }
 }

src/lib/v2-pre/server/compileData/utils.ts

@@ -1,4 +1,5 @@
 import { TagType, WeaponType } from '../../data/types'
+import { RawEquipmentSkillData } from '../raw/equipmentSkillData'
 import { getRawTextMap } from '../raw/textMap'
 
 export function getText(id: string | number) {
@@ -91,3 +92,21 @@ export function convertTagType(rawTagId: number): TagType {
 
   throw new Error(`Unsupported raw show order(Skill) (${rawTagId})`)
 }
+
+export function convertEquipmentSkill(rawSkill: RawEquipmentSkillData) {
+  const iconName = rawSkill.SkillIconPath.split('/').pop()
+  return {
+    name: getText(rawSkill.SkillName),
+    info: getText(rawSkill.SkillDisplay),
+    icon: iconName != null && iconName.length > 0 ? iconName : undefined,
+    skillCd: rawSkill.SkillCD,
+    skillSpCost: rawSkill.SPCost,
+    skillSpNeed: rawSkill.SPNeed,
+    tags: rawSkill.TagList.map(rawEquipmentSkillTag => {
+      return {
+        type: convertTagType(rawEquipmentSkillTag.TagID),
+        comment: getText(rawEquipmentSkillTag.TagComment)
+      }
+    })
+  }
+}

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

@@ -11,6 +11,9 @@ export const battlesuitCatalogPath = path.join(dataDir, 'battlesuit-catalog.yaml
 export const weaponsDir = path.join(dataDir, 'weapons')
 export const weaopnCatalogPath = path.join(dataDir, 'weapon-catalog.yaml')
 
+export const stigmataDir = path.join(dataDir, 'stigmata')
+export const stigmataCatalogPath = path.join(dataDir, 'stigmata-catalog.yaml')
+
 export function loadBattlesuitCatalog(): BattlesuitCatalogItem[] {
   return readYamlFile(battlesuitCatalogPath)
 }
@@ -29,6 +32,15 @@ export function loadWeaponData(id: string) {
   return readYamlFile(weaponDataPath)
 }
 
+export function loadStigmataCatalog(): WeaponCatalogItem[] {
+  return readYamlFile(stigmataCatalogPath)
+}
+
+export function loadStigmaData(id: string) {
+  const stigmaDataPath = path.join(stigmataDir, `${id}.yaml`)
+  return readYamlFile(stigmaDataPath)
+}
+
 function readYamlFile(pathname: string) {
   return YAML.parse(fs.readFileSync(pathname).toString())
 }

src/lib/v2-pre/server/raw/stigmataData.ts

@@ -0,0 +1,99 @@
+import { loadRawData } from './loadRawData'
+
+export function getRawStigmataDataMap(): RawStigmataDataMap {
+  return loadRawData('StigmataData.json')
+}
+
+export type RawStigmataDataMap = {
+  [key: string]: RawStigmaData
+}
+
+export interface RawStigmaData {
+  Rarity: 1 | 2 | 3 | 4 | 5
+  MaxRarity: 1 | 2 | 3 | 4 | 5
+  SubRarity: number
+  SubMaxRarity: number
+  Cost: number
+  PowerType: number
+  MaxLv: number
+  ExpType: number
+  SellPriceBase: number
+  SellPriceAdd: number
+  GearExpProvideBase: number
+  GearExpPorvideAdd: number
+  BaseType: number
+  LabelPath: string
+  DisplayTitle: number
+  DisplayDescription: number
+  DisplayNumber: number
+  IconPath: string // 'SpriteOutput/StigmataIcons/S1A_1'
+  ImagePath: string // 'S1A_1'
+  HPBase: number
+  HPAdd: number
+  SPBase: number
+  SPAdd: number
+  AttackBase: number
+  AttackAdd: number
+  DefenceBase: number
+  DefenceAdd: number
+  CriticalBase: number
+  CriticalAdd: number
+  DurabilityMax: number
+  EvoMaterial: [
+    {
+      ID: number
+      Num: number
+    }
+  ]
+  EvoID: number
+  Prop1ID: number
+  Prop1Param1: number
+  Prop1Param2: number
+  Prop1Param3: number
+  Prop1Param1Add: number
+  Prop1Param2Add: number
+  Prop1Param3Add: number
+  Prop2ID: number
+  Prop2Param1: number
+  Prop2Param2: number
+  Prop2Param3: number
+  Prop2Param1Add: number
+  Prop2Param2Add: number
+  Prop2Param3Add: number
+  Prop3ID: number
+  Prop3Param1: number
+  Prop3Param2: number
+  Prop3Param3: number
+  Prop3Param1Add: number
+  Prop3Param2Add: number
+  Prop3Param3Add: number
+  Protect: boolean
+  SetID: number
+  SmallIcon: string
+  TattooPath: string
+  OffsetX: number
+  OffsetY: number
+  Scale: number
+  AffixTreeId: number
+  CanRefine: boolean
+  RecycleID: number
+  DisjoinScoinCost: number
+  DisjoinAddMaterial: [
+    {
+      ID: number
+      Num: number
+    }
+  ]
+  LinkIDList: number[]
+  Quality: number
+  StigmataMainID: number
+  ShortName: number
+  SellPriceID: number
+  Transcendent: boolean
+  Target: number
+  IsSecurityProtect: boolean
+  GachaMainDropDisplayConfig: number[]
+  GachaGiftDropDisplayConfig: number[]
+  StigmataFilterList: number[]
+  CollaborationSetID: number
+}

src/pages/v2-pre/battlesuits/[battlesuitId].tsx

@@ -139,7 +139,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
           </Card>
         )
       })}
-      <pre>{JSON.stringify(battlesuit, null, 2)}</pre>
+      {/* <pre>{JSON.stringify(battlesuit, null, 2)}</pre> */}
     </Box>
   )
 }

src/pages/v2-pre/index.tsx

@@ -4,6 +4,7 @@ const HomePage = () => {
       <h1>V2 Pre</h1>
       <a href="/v2-pre/battlesuits">Battlesuits</a>
       <a href="/v2-pre/weapons">Weapons</a>
+      <a href="/v2-pre/stigmata">Stigmata</a>
     </div>
   )
 }

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

@@ -0,0 +1,122 @@
+import { NextPageContext } from 'next'
+import { Box, Card, Flex, Heading } 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 { Fragment } from 'react'
+import TagIcon from '../../../components/v2-pre/TagIcon'
+import { getStigmaTypeLabel } from '../../../lib/v2-pre/data/text'
+import StigmaTypeIcon from '../../../components/v2-pre/StigmaTypeIcon'
+import StigmaIcon from '../../../components/v2-pre/StigmaIcon'
+import StigmaFigureImage from '../../../components/v2-pre/StigmaFigureImage'
+
+interface WeaponShowPageProps {
+  rootStigma: RootStigma
+}
+
+const StigmaShowPage = ({ rootStigma }: WeaponShowPageProps) => {
+  const stigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
+  return (
+    <Box>
+      <Heading as="h1">{stigma.name}</Heading>
+
+      <Box>
+        <StigmaFigureImage stigma={stigma} size={720} />
+      </Box>
+
+      <Box mb={3}>
+        <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.rarity} />
+      </Box>
+
+      <Card mb={3}>
+        <Box sx={{ p: 1, borderBottom: 'default' }}>{replaceNewLine(stigma.description)}</Box>
+        <Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
+          <StigmaTypeIcon type={stigma.type} />
+          <Box ml={1}>{getStigmaTypeLabel(stigma.type)}</Box>
+        </Flex>
+        <Box sx={{ p: 1 }}>
+          HP : {Math.floor(stigma.hpBase + stigma.hpAdd * (stigma.maxLv - 1))} / ATK :{' '}
+          {Math.floor(stigma.attackBase + stigma.attackAdd * (stigma.maxLv - 1))} / DEF :{' '}
+          {Math.floor(stigma.defenceBase + stigma.defenceAdd * (stigma.maxLv - 1))} / CRT :{' '}
+          {Math.floor(stigma.criticalBase + stigma.criticalAdd * (stigma.maxLv - 1))} (at Max Lv {stigma.maxLv})
+        </Box>
+      </Card>
+
+      <Heading as="h2">Skills</Heading>
+      <Card>
+        {stigma.skills.map(skill => {
+          return (
+            <Fragment key={skill.id}>
+              <Box sx={{ borderBottom: 'default' }}>
+                <Heading
+                  as="h3"
+                  sx={{
+                    p: 1,
+                    m: 1
+                  }}
+                >
+                  {skill.name}
+                </Heading>
+              </Box>
+              <Box
+                sx={{
+                  p: 1,
+                  borderBottom: 'default',
+                  '&:last-child': {
+                    borderBottom: 'none'
+                  }
+                }}
+              >
+                <FormattedText>
+                  {formatSubSkillInfo({
+                    info: skill.info,
+                    maxLv: stigma.maxLv,
+                    paramBase1: skill.param1,
+                    paramBase2: skill.param2,
+                    paramBase3: skill.param3,
+                    paramAdd1: skill.param1Add,
+                    paramAdd2: skill.param2Add,
+                    paramAdd3: skill.param3Add
+                  })}
+                </FormattedText>
+              </Box>
+            </Fragment>
+          )
+        })}
+      </Card>
+      {/* <pre>{JSON.stringify(weapon, null, 2)}</pre> */}
+    </Box>
+  )
+}
+
+export default StigmaShowPage
+
+export async function getStaticProps({ locale, params }: NextPageContext & { params: { stigmaId: string } }) {
+  const rootStigma = loadStigmaData(params.stigmaId)
+
+  return {
+    props: { rootStigma }
+  }
+}
+
+export async function getStaticPaths() {
+  const stigmataCatalog = loadStigmataCatalog()
+
+  return {
+    paths: stigmataCatalog.map(catalogItem => {
+      return {
+        params: { stigmaId: catalogItem.id }
+      }
+    }),
+    fallback: false
+  }
+}
+
+interface SkillTagBoxProps {
+  tag: SkillTagItem
+}
+
+const SkillTagItem = ({ tag }: SkillTagBoxProps) => {
+  return <TagIcon type={tag.type} strength={tag.strength} comment={tag.comment} size="sm" />
+}

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

@@ -0,0 +1,73 @@
+/** @jsxImportSource theme-ui */
+import { Box, Card } from '@theme-ui/components'
+import { NextPageContext } from 'next'
+import { Flex, Link } from 'theme-ui'
+
+import { StigmataCatalogItem } from '../../../lib/v2-pre/data/types'
+import { loadStigmataCatalog } from '../../../lib/v2-pre/server/loadData'
+import StigmaIcon from '../../../components/v2-pre/StigmaIcon'
+
+interface StigmataListPageProps {
+  stigmataCatalog: StigmataCatalogItem[]
+}
+
+const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => {
+  return (
+    <Box>
+      <h1>Stigmata</h1>
+      <Flex sx={{ flexWrap: 'wrap' }}>
+        {stigmataCatalog
+          .filter(filterStigmata)
+          .sort(sortStigmata)
+          .map(stigma => {
+            return (
+              <Box key={stigma.id} m={2}>
+                <Link href={`/v2-pre/stigmata/${stigma.id}`}>
+                  <Card p={1}>
+                    <Flex sx={{ justifyContent: 'center' }}>
+                      <StigmaIcon icon={stigma.icon} rarity={stigma.maxRarity} />
+                    </Flex>
+                    <Box
+                      sx={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        px: 1,
+                        width: 112,
+                        textAlign: 'center'
+                      }}
+                    >
+                      {stigma.name}
+                    </Box>
+                    {/* {stigma.id} */}
+                  </Card>
+                </Link>
+              </Box>
+            )
+          })}
+      </Flex>
+    </Box>
+  )
+}
+
+export default StigmataListPage
+
+export async function getStaticProps({ locale }: NextPageContext) {
+  const stigmataCatalog = loadStigmataCatalog()
+
+  return {
+    props: { stigmataCatalog }
+  }
+}
+
+function filterStigmata(weapon: StigmataCatalogItem) {
+  return true
+}
+
+function sortStigmata(a: StigmataCatalogItem, b: StigmataCatalogItem) {
+  let aId = parseInt(a.id)
+
+  let bId = parseInt(b.id)
+
+  return bId - aId
+}

src/pages/v2-pre/weapons/[weaponId].tsx

@@ -1,7 +1,7 @@
 import { NextPageContext } from 'next'
 import { Box, Card, Flex, Heading } from 'theme-ui'
 import FormattedText from '../../../components/v2-pre/FormattedText'
-import { formatSubSkillInfo } from '../../../lib/v2-pre/data/formatText'
+import { formatSubSkillInfo, replaceNewLine } from '../../../lib/v2-pre/data/formatText'
 import { loadWeaponCatalog, loadWeaponData } from '../../../lib/v2-pre/server/loadData'
 import { RootWeaponData, SkillTagItem } from '../../../lib/v2-pre/data/types'
 import { Fragment } from 'react'
@@ -25,7 +25,7 @@ const WeaponShowPage = ({ rootWeapon }: WeaponShowPageProps) => {
       </Box>
 
       <Card mb={3}>
-        <Box sx={{ p: 1, borderBottom: 'default' }}>{weapon.description}</Box>
+        <Box sx={{ p: 1, borderBottom: 'default' }}>{replaceNewLine(weapon.description)}</Box>
         <Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
           <WeaponTypeIcon type={weapon.type} />
           <Box ml={1}>{getWeaponTypeLabel(weapon.type)}</Box>

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

@@ -6,11 +6,11 @@ import { loadWeaponCatalog } from '../../../lib/v2-pre/server/loadData'
 import { WeaponCatalogItem } from '../../../lib/v2-pre/data/types'
 import WeaponIcon from '../../../components/v2-pre/WeaponIcon'
 
-interface BattlesuitListPageProps {
+interface WeaponListPageProps {
   weaponCatalog: WeaponCatalogItem[]
 }
 
-const BattlesuitListPage = ({ weaponCatalog }: BattlesuitListPageProps) => {
+const WeaponListPage = ({ weaponCatalog }: WeaponListPageProps) => {
   return (
     <Box>
       <h1>Weapons</h1>
@@ -49,7 +49,7 @@ const BattlesuitListPage = ({ weaponCatalog }: BattlesuitListPageProps) => {
   )
 }
 
-export default BattlesuitListPage
+export default WeaponListPage
 
 export async function getStaticProps({ locale }: NextPageContext) {
   const weaponCatalog = loadWeaponCatalog()

src/scripts/compileRawData.ts

@@ -7,17 +7,21 @@ import {
   battlesuitCatalogPath,
   battlesuitsDir,
   dataDir,
+  stigmataCatalogPath,
+  stigmataDir,
   weaopnCatalogPath,
   weaponsDir
 } from '../lib/v2-pre/server/loadData'
-import { BattlesuitCatalogItem, WeaponCatalogItem } from '../lib/v2-pre/data/types'
+import { BattlesuitCatalogItem, StigmataCatalogItem, WeaponCatalogItem } from '../lib/v2-pre/data/types'
 import { compileBattlesuitData } from '../lib/v2-pre/server/compileData/compileBattlesuitData'
 import { compileWeaponData } from '../lib/v2-pre/server/compileData/compileWeaponData'
+import { compileStigmataData } from '../lib/v2-pre/server/compileData/compileStigmataData'
 
 runScript(async () => {
   createDirIfNotExist(dataDir)
-  writeBattlesuitData()
+  // writeBattlesuitData()
-  writeWeaponData()
+  // writeWeaponData()
+  writeStigmataData()
 })
 
 function writeBattlesuitData() {
@@ -47,10 +51,10 @@ function writeBattlesuitData() {
 function writeWeaponData() {
   const weaponDataList = compileWeaponData()
 
-  const catalogList: WeaponCatalogItem[] = weaponDataList.map(weapon => {
+  const catalogList: WeaponCatalogItem[] = weaponDataList.map(rootWeapon => {
-    const maxedWeapon = weapon.weapons[weapon.weapons.length - 1]
+    const maxedWeapon = rootWeapon.weapons[rootWeapon.weapons.length - 1]
     return {
-      id: weapon.id,
+      id: rootWeapon.id,
       name: maxedWeapon.name,
       icon: maxedWeapon.icon,
       type: maxedWeapon.type,
@@ -67,3 +71,27 @@ function writeWeaponData() {
     fs.writeFileSync(weaponDataPath, YAML.stringify(weaponData))
   }
 }
+
+function writeStigmataData() {
+  const stigmataDataList = compileStigmataData()
+
+  const catalogList: StigmataCatalogItem[] = stigmataDataList.map(rootStigma => {
+    const maxedStigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
+    return {
+      id: rootStigma.id,
+      name: maxedStigma.name,
+      icon: maxedStigma.icon,
+      type: maxedStigma.type,
+      maxRarity: maxedStigma.maxRarity
+    }
+  })
+
+  fs.writeFileSync(stigmataCatalogPath, YAML.stringify(catalogList))
+
+  createDirIfNotExist(stigmataDir)
+
+  for (const stigmataData of stigmataDataList) {
+    const stigmaDataPath = path.join(stigmataDir, `${stigmataData.id}.yaml`)
+    fs.writeFileSync(stigmaDataPath, YAML.stringify(stigmataData))
+  }
+}