Add sigil and support pages

src/components/v2-pre/BattlesuitSmallIcon.tsx

@@ -0,0 +1,95 @@
+import { Box, Flex, Image } from 'theme-ui'
+import { assetsBucketBaseUrl } from '../../lib/consts'
+import { AttributeType, BattlesuitCatalogItem } from '../../lib/v2-pre/data/types'
+
+interface BattlesuitAvatarIconProps {
+  battlesuit: BattlesuitCatalogItem
+  ratio?: number
+}
+
+const width = 136
+const height = 120
+
+const BattlesuitSmallIcon = ({ battlesuit, ratio = 1 }: BattlesuitAvatarIconProps) => {
+  const targetWidth = 136 * ratio
+  const targetHeight = height * ratio
+  return (
+    <Box sx={{ width: targetWidth, height: targetHeight, position: 'relative' }}>
+      <Box
+        sx={{
+          position: 'absolute',
+          left: (targetWidth - 136) / 2,
+          top: (targetHeight - 120) / 2
+        }}
+      >
+        <Flex
+          sx={{
+            position: 'absolute',
+            width: width,
+            height: height,
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1,
+            transform: `scale(${ratio})`
+          }}
+        >
+          <Image src={getBattlesuitCardIconSrc(battlesuit)} />
+        </Flex>
+        <Flex
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: width,
+            height: height,
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: `scale(${ratio})`
+          }}
+        >
+          <Image src={getAttributeBgImageSrc(battlesuit.attributeType)} />
+        </Flex>
+      </Box>
+    </Box>
+  )
+  return (
+    <Box>
+      <Box
+        sx={{
+          borderRadius: 5,
+          background: `no-repeat 50% url(${getBattlesuitCardIconSrc(
+            battlesuit
+          )}), no-repeat 50% url(${getAttributeBgImageSrc(battlesuit.attributeType)})`,
+          width: 130,
+          height: 120
+        }}
+      ></Box>
+    </Box>
+  )
+}
+
+export default BattlesuitSmallIcon
+
+function getAttributeBgImageSrc(attrId: AttributeType) {
+  switch (attrId) {
+    case 'bio':
+      return `${assetsBucketBaseUrl}/raw/avataricon/AttrShengWu1.png`
+    case 'psy':
+      return `${assetsBucketBaseUrl}/raw/avataricon/AttrYiNeng1.png`
+    case 'mech':
+      return `${assetsBucketBaseUrl}/raw/avataricon/AttrJiXie1.png`
+    case 'qua':
+      return `${assetsBucketBaseUrl}/raw/avataricon/AttrLiangZi1.png`
+    case 'img':
+      return `${assetsBucketBaseUrl}/raw/avataricon/AttrXuShu1.png`
+    case 'none':
+    default:
+      return `${assetsBucketBaseUrl}/raw/avataricon/AttrDefault.png`
+  }
+}
+
+function getBattlesuitCardIconSrc(battlesuit: BattlesuitCatalogItem) {
+  return `${assetsBucketBaseUrl}/raw/avatarcardicons/${
+    battlesuit.id.length > 3 ? `6${battlesuit.id}` : `60${battlesuit.id}`
+  }.png`
+}

src/components/v2-pre/MaterialIcon.tsx

@@ -0,0 +1,15 @@
+import { assetsBucketBaseUrl } from '../../lib/consts'
+import SquareImage from './SquareImage'
+
+interface MaterialIconProps {
+  materialId: string
+  size?: number
+}
+
+const MaterialIcon = ({ materialId, size = 50 }: MaterialIconProps) => {
+  return (
+    <SquareImage src={`${assetsBucketBaseUrl}/raw/materialfigures/${materialId}.png`} originalSize={250} size={50} />
+  )
+}
+
+export default MaterialIcon

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

@@ -275,6 +275,14 @@ export interface ErBattlesuit {
   abilities: ErBattlesuitAbility[]
   signets: ErSignet[]
 }
+
+export interface ErSupportBattlesuit {
+  battlesuit: string
+  name: string
+  desc: string
+  cd: number
+}
+
 export interface ErBattlesuitCatalogItem {
   battlesuit: string
 }
@@ -291,3 +299,11 @@ export interface ErSignetGroup {
   name: string
   icon: string
 }
+
+export interface ErSigil {
+  id: string
+  name: string
+  desc: string
+  unlockHint: string
+  type: number
+}

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

@@ -1,15 +1,18 @@
-import { ErBattlesuit, ErBattlesuitAbility, ErSignet, ErSignetGroup } from '../../data/types'
+import { ErBattlesuit, ErBattlesuitAbility, ErSigil, ErSignet, ErSupportBattlesuit } from '../../data/types'
 import { getRawGodWarAvatarAbilityMap } from '../raw/godWarAvatarAbility'
 import { getRawGodWarBuffMap } from '../raw/godWarBuff'
-import { getRawGodWarBuffSuitMap } from '../raw/godWarBuffSuit'
+import { getRawGodWarExtraItemMap } from '../raw/godWarExxtraItem'
 import { getRawGodWarMainAvatarMap } from '../raw/godWarMainAvatar'
+import { getRawGodWarSupportAvatarMap } from '../raw/godWarSupportAvatar'
 import { getText } from './utils'
 
 export function compileGodWarData() {
   const rawMainAvatarMap = getRawGodWarMainAvatarMap()['1']
   const rawGodWarAvatarAbilityMap = getRawGodWarAvatarAbilityMap()
   const rawGodWarBuffMap = getRawGodWarBuffMap()
-  const rawGodWarBuffSuitMap = getRawGodWarBuffSuitMap()
+  const rawGodWarSupportAvatarMap = getRawGodWarSupportAvatarMap()['1']
+  const rawGodWarExtraItemMap = getRawGodWarExtraItemMap()
+
   const battlesuitIdRawBuffListMap = new Map<string, ErSignet[]>()
   const buffSuitBuffListMap = new Map<string, ErSignet[]>()
 
@@ -76,8 +79,29 @@ export function compileGodWarData() {
     }
   })
 
+  const supportAvatarList = Object.entries(rawGodWarSupportAvatarMap).map<ErSupportBattlesuit>(([id, rawData]) => {
+    return {
+      battlesuit: id,
+      name: getText(rawData.SkillName),
+      desc: getText(rawData.SkillDesc),
+      cd: rawData.CD
+    }
+  })
+
+  const sigilList = Object.entries(rawGodWarExtraItemMap).map<ErSigil>(([id, rawData]) => {
+    return {
+      id,
+      name: getText(rawData.ExtraItemName),
+      desc: getText(rawData.ExtraItemSkill),
+      type: rawData.ExtraItemType,
+      unlockHint: getText(rawData.UnlockExtraItemHint)
+    }
+  })
+
   return {
     buffSuitBuffListMap,
-    mainAvatarList
+    mainAvatarList,
+    supportAvatarList,
+    sigilList
   }
 }

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

@@ -5,7 +5,9 @@ import {
   BattlesuitCatalogItem,
   ErBattlesuit,
   ErBattlesuitCatalogItem,
+  ErSigil,
   ErSignet,
+  ErSupportBattlesuit,
   RootStigma,
   StigmataCatalogItem,
   StigmataSet,
@@ -30,7 +32,8 @@ export const stigmataSetCatalogPath = path.join(dataDir, 'stigmata-set-catalog.y
 export const erBattlesuitCatalogPath = path.join(dataDir, 'er-battlesuits-catalog.yaml')
 export const erBattlesuitsDir = path.join(dataDir, 'er-battlesuits')
 export const erSignetsDir = path.join(dataDir, 'er-signets')
-export const erSignetGroupsPath = path.join(dataDir, 'er-signet-groups.yaml')
+export const erSupportsPath = path.join(dataDir, 'er-supports.yaml')
+export const erSigilsPath = path.join(dataDir, 'er-sigils.yaml')
 
 export function loadBattlesuitCatalog(): BattlesuitCatalogItem[] {
   return readYamlFile(battlesuitCatalogPath)
@@ -82,6 +85,14 @@ export function loadErSignets(id: string): ErSignet[] {
   return readYamlFile(erSignetsPath)
 }
 
+export function loadErSupports(): ErSupportBattlesuit[] {
+  return readYamlFile(erSupportsPath)
+}
+
+export function loadErSigils(): ErSigil[] {
+  return readYamlFile(erSigilsPath)
+}
+
 function readYamlFile(pathname: string) {
   return YAML.parse(fs.readFileSync(pathname).toString())
 }

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

@@ -0,0 +1,24 @@
+import { loadRawData } from './loadRawData'
+
+export function getRawGodWarExtraItemMap(): RawGodWarExtraItemMap {
+  return loadRawData('GodWarExtraItem.json')
+}
+
+export type RawGodWarExtraItemMap = {
+  [key: string]: RawGodWarExtraItemData
+}
+
+export interface RawGodWarExtraItemData {
+  GodWarID: number
+  ExtraItemSkillType: number
+  AbilityName: string
+  ParamList: string[]
+  ExtraItemStar: number
+  ExtraItemName: number
+  ExtraItemSkillOverall: number
+  ExtraItemIcon: string // 'SpriteOutput/Rogue/MaterialFigures/119301'
+  UnlockExtraItemHint: number
+  ExtraItemSkill: number
+  ExtraItemType: number
+  ExtraItemSuitID: number
+}

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

@@ -0,0 +1,23 @@
+import { loadRawData } from './loadRawData'
+
+export function getRawGodWarSupportAvatarMap(): RawGodWarSupportAvataMap {
+  return loadRawData('GodWarSupportAvatar.json')
+}
+
+export type RawGodWarSupportAvataMap = {
+  [key: string]: {
+    [key: string]: RawGodWarSupportAvatarData
+  }
+}
+
+export interface RawGodWarSupportAvatarData {
+  SkillFunctionName: string
+  AbilityName: string
+  ParamList: string[]
+  CD: number
+  SkillName: number
+  SkillDesc: number
+  SkillIcon: string
+  UnlockSupportAvatarHint: number
+  IsSkillChange: boolean
+}

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

@@ -1,26 +1,36 @@
 /** @jsxImportSource theme-ui */
 import { Box, Heading, Flex, Link, Card } from '@theme-ui/components'
 import { NextPageContext } from 'next'
-import { loadBattlesuitCatalog, loadErBattlesuitCatalog } from '../../../lib/v2-pre/server/loadData'
+import {
+  loadBattlesuitCatalog,
+  loadErBattlesuitCatalog,
+  loadErSigils,
+  loadErSupports
+} from '../../../lib/v2-pre/server/loadData'
 import { BattlesuitCatalogItem, ErBattlesuitCatalogItem } from '../../../lib/v2-pre/data/types'
 import { useMemo } from 'react'
 import BattlesuitCatalogItemCard from '../../../components/v2-pre/BattlesuitCatalogItemCard'
 import { assetsBucketBaseUrl } from '../../../lib/consts'
 import SquareImage from '../../../components/v2-pre/SquareImage'
 import { signetGroups } from '../../../lib/v2-pre/data/er'
+import BattlesuitSmallIcon from '../../../components/v2-pre/BattlesuitSmallIcon'
+import MaterialIcon from '../../../components/v2-pre/MaterialIcon'
 
 interface ErPageProps {
   erBattlesuitCatalog: ErBattlesuitCatalogItem[]
   battlesuitCatalog: BattlesuitCatalogItem[]
+  erSupports: string[]
+  erSigils: { id: string; name: string }[]
 }
 
-const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog }: ErPageProps) => {
+const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }: ErPageProps) => {
   const battlesuitCatalogMap = useMemo(() => {
     return battlesuitCatalog.reduce((map, item) => {
       map.set(item.id, item)
       return map
     }, new Map<string, BattlesuitCatalogItem>())
   }, [battlesuitCatalog])
+
   return (
     <Box>
       <h1>Elysian Realm</h1>
@@ -59,6 +69,39 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog }: ErPageProps) => {
       </Flex>
 
       <Heading as="h2">Supports</Heading>
+
+      <Flex sx={{ flexWrap: 'wrap' }}>
+        {erSupports.map(support => {
+          const battlesuit = battlesuitCatalogMap.get(support)!
+          return (
+            <Box key={support}>
+              <Link href={`/v2-pre/er/supports#${support}`}>
+                <Box sx={{ p: 1, m: 1, width: 110 }}>
+                  <BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
+                  <Box sx={{ textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {battlesuit.fullName}
+                  </Box>
+                </Box>
+                {/* <BattlesuitCatalogItemCard battlesuit={battlesuit} /> */}
+              </Link>
+            </Box>
+          )
+        })}
+      </Flex>
+
+      <Heading as="h2">Sigils</Heading>
+
+      <Flex sx={{ flexWrap: 'wrap' }}>
+        {erSigils.map(sigil => {
+          return (
+            <Card key={sigil.id} p={1} m={1}>
+              <Link href={`/v2-pre/er/sigils#${sigil.id}`}>
+                <MaterialIcon materialId={sigil.id} />
+              </Link>
+            </Card>
+          )
+        })}
+      </Flex>
     </Box>
   )
 }
@@ -68,8 +111,18 @@ export default ErPage
 export async function getStaticProps({ locale }: NextPageContext) {
   const erBattlesuitCatalog = loadErBattlesuitCatalog()
   const battlesuitCatalog = loadBattlesuitCatalog()
+  const erSupports = loadErSupports().map(support => {
+    return support.battlesuit
+  })
+
+  const erSigils = loadErSigils().map(sigil => {
+    return {
+      id: sigil.id,
+      name: sigil.name
+    }
+  })
 
   return {
-    props: { erBattlesuitCatalog, battlesuitCatalog }
+    props: { erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
   }
 }

src/pages/v2-pre/er/sigils.tsx

@@ -0,0 +1,53 @@
+import { NextPageContext } from 'next'
+import { Box, Card, Flex, Heading } from 'theme-ui'
+import MaterialIcon from '../../../components/v2-pre/MaterialIcon'
+import { ErSigil } from '../../../lib/v2-pre/data/types'
+import { loadErSigils } from '../../../lib/v2-pre/server/loadData'
+
+interface SigilsPageProps {
+  erSigils: ErSigil[]
+}
+
+const SigilsPage = ({ erSigils }: SigilsPageProps) => {
+  return (
+    <Box>
+      <Heading as="h1">ER Sigils</Heading>
+
+      <Card mb={3}>
+        {erSigils.map(sigil => {
+          return (
+            <Flex
+              key={sigil.id}
+              sx={{
+                borderBottom: 'default',
+                '&:last-child': {
+                  borderBottom: 'none'
+                }
+              }}
+            >
+              <Box sx={{ p: 1, flexShrink: 0, borderRight: 'default' }}>
+                <MaterialIcon materialId={sigil.id} />
+              </Box>
+              <Box sx={{ flexGrow: 1 }}>
+                <Heading as="h3" sx={{ m: 0, p: 1, borderBottom: 'default' }} id={sigil.id}>
+                  {sigil.name}
+                </Heading>
+                <Box p={1}>{sigil.desc}</Box>
+              </Box>
+            </Flex>
+          )
+        })}
+      </Card>
+    </Box>
+  )
+}
+
+export default SigilsPage
+
+export async function getStaticProps({ locale }: NextPageContext) {
+  const erSigils = loadErSigils()
+
+  return {
+    props: { erSigils }
+  }
+}

src/pages/v2-pre/er/supports.tsx

@@ -0,0 +1,63 @@
+import { NextPageContext } from 'next'
+import { useMemo } from 'react'
+import { Box, Card, Flex, Heading } from 'theme-ui'
+import BattlesuitSmallIcon from '../../../components/v2-pre/BattlesuitSmallIcon'
+import { BattlesuitCatalogItem, ErSupportBattlesuit } from '../../../lib/v2-pre/data/types'
+import { loadBattlesuitCatalog, loadErSupports } from '../../../lib/v2-pre/server/loadData'
+
+interface SupportsPageProps {
+  battlesuitCatalog: BattlesuitCatalogItem[]
+  erSupports: ErSupportBattlesuit[]
+}
+
+const SupportsPage = ({
+  battlesuitCatalog,
+
+  erSupports
+}: SupportsPageProps) => {
+  const battlesuitCatalogMap = useMemo(() => {
+    return battlesuitCatalog.reduce((map, item) => {
+      map.set(item.id, item)
+      return map
+    }, new Map<string, BattlesuitCatalogItem>())
+  }, [battlesuitCatalog])
+  return (
+    <Box>
+      <Heading as="h1">ER Supports</Heading>
+
+      <Card mb={3}>
+        {erSupports.map(support => {
+          const battlesuit = battlesuitCatalogMap.get(support.battlesuit)!
+          return (
+            <Flex key={support.battlesuit} sx={{ borderBottom: 'default' }}>
+              <Box sx={{ flexShrink: 0, p: 1, borderRight: 'default' }}>
+                <BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
+              </Box>
+              <Box>
+                <Flex sx={{ p: 1, borderBottom: 'default', flexGrow: 1 }}>
+                  <Heading as="h3" sx={{ m: 0 }} id={support.battlesuit}>
+                    {support.name}
+                  </Heading>
+
+                  <Box sx={{ ml: 1, color: 'textMuted' }}>(CD {support.cd}s)</Box>
+                </Flex>
+                <Box p={1}>{support.desc}</Box>
+              </Box>
+            </Flex>
+          )
+        })}
+      </Card>
+    </Box>
+  )
+}
+
+export default SupportsPage
+
+export async function getStaticProps({ locale }: NextPageContext) {
+  const battlesuitCatalog = loadBattlesuitCatalog()
+  const erSupports = loadErSupports()
+
+  return {
+    props: { battlesuitCatalog, erSupports }
+  }
+}

src/scripts/compileRawData.ts

@@ -9,7 +9,9 @@ import {
   dataDir,
   erBattlesuitCatalogPath,
   erBattlesuitsDir,
+  erSigilsPath,
   erSignetsDir,
+  erSupportsPath,
   stigmataCatalogPath,
   stigmataDir,
   stigmataSetCatalogPath,
@@ -133,7 +135,7 @@ function writeStigmataData() {
 }
 
 function writeErData() {
-  const { buffSuitBuffListMap, mainAvatarList } = compileGodWarData()
+  const { buffSuitBuffListMap, mainAvatarList, supportAvatarList, sigilList } = compileGodWarData()
 
   const erBattlesuitCatalog = mainAvatarList.map(mainAvatar => {
     return { battlesuit: mainAvatar.battlesuit }
@@ -152,4 +154,7 @@ function writeErData() {
     const erSignetsPath = path.join(erSignetsDir, `${buffSuit}.yaml`)
     fs.writeFileSync(erSignetsPath, YAML.stringify(list))
   }
+
+  fs.writeFileSync(erSupportsPath, YAML.stringify(supportAvatarList))
+  fs.writeFileSync(erSigilsPath, YAML.stringify(sigilList))
 }