retr0volkov/abyss-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add sigil and support pages

Browse Source
This commit is contained in:
Sakura Knoll
2023-07-13 21:46:31 +09:00 Unverified
parent 2edb2cde77
commit 82dabeeef6
11 changed files with 391 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/v2-pre/BattlesuitSmallIcon.tsx
+95
View File
@@ -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
+15
View File
@@ -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
+16
View File
@@ -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
+28 -4
View File
@@ -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
+12 -1
View File
@@ -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
+24
View File
@@ -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
+23
View File
@@ -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
+56 -3
View File
@@ -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
+53
View File
@@ -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
+63
View File
@@ -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
+6 -1
View File
@@ -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))
}