165 lines
4.1 KiB
TypeScript
165 lines
4.1 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { useRouter } from 'next/router'
|
|
|
|
import styles from './index.module.scss'
|
|
|
|
interface Props {
|
|
grid: {
|
|
mainSummon?: GridSummon | undefined
|
|
friendSummon?: GridSummon | undefined
|
|
allSummons: GridArray<GridSummon>
|
|
}
|
|
}
|
|
|
|
const SUMMONS_COUNT = 4
|
|
|
|
const SummonRep = (props: Props) => {
|
|
// Localization for alt tags
|
|
const router = useRouter()
|
|
const locale =
|
|
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
|
|
|
|
// Component state
|
|
const [mainSummon, setMainSummon] = useState<GridSummon>()
|
|
const [summons, setSummons] = useState<GridArray<Summon>>({})
|
|
const [grid, setGrid] = useState<GridArray<GridSummon>>({})
|
|
|
|
// On grid update
|
|
useEffect(() => {
|
|
const newSummons = Array(SUMMONS_COUNT)
|
|
const gridSummons = Array(SUMMONS_COUNT)
|
|
|
|
if (props.grid.mainSummon) {
|
|
setMainSummon(props.grid.mainSummon)
|
|
}
|
|
|
|
if (props.grid.allSummons) {
|
|
for (const [key, value] of Object.entries(props.grid.allSummons)) {
|
|
if (value) {
|
|
newSummons[value.position] = value.object
|
|
gridSummons[value.position] = value
|
|
}
|
|
}
|
|
}
|
|
|
|
setSummons(newSummons)
|
|
setGrid(gridSummons)
|
|
}, [props.grid])
|
|
|
|
// Methods: Image generation
|
|
function generateMainImage() {
|
|
let url = ''
|
|
|
|
const upgradedSummons = [
|
|
'2040094000',
|
|
'2040100000',
|
|
'2040080000',
|
|
'2040098000',
|
|
'2040090000',
|
|
'2040084000',
|
|
'2040003000',
|
|
'2040056000',
|
|
'2040020000',
|
|
'2040034000',
|
|
'2040028000',
|
|
'2040027000',
|
|
'2040046000',
|
|
'2040047000',
|
|
]
|
|
|
|
if (mainSummon) {
|
|
// Change the image based on the uncap level
|
|
let suffix = ''
|
|
if (mainSummon.object.uncap.xlb && mainSummon.uncapLevel == 6) {
|
|
if (
|
|
mainSummon.transcendenceStep >= 1 &&
|
|
mainSummon.transcendenceStep < 5
|
|
) {
|
|
suffix = '_03'
|
|
} else if (mainSummon.transcendenceStep === 5) {
|
|
suffix = '_04'
|
|
}
|
|
} else if (
|
|
upgradedSummons.indexOf(mainSummon.object.granblueId.toString()) !=
|
|
-1 &&
|
|
mainSummon.uncapLevel == 5
|
|
) {
|
|
suffix = '_02'
|
|
}
|
|
|
|
url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-main/${mainSummon.object.granblueId}${suffix}.jpg`
|
|
}
|
|
|
|
return mainSummon && <img alt={mainSummon.object.name[locale]} src={url} />
|
|
}
|
|
|
|
function generateGridImage(position: number) {
|
|
let url = ''
|
|
|
|
const summon = summons[position]
|
|
const gridSummon = grid[position]
|
|
|
|
const upgradedSummons = [
|
|
'2040094000',
|
|
'2040100000',
|
|
'2040080000',
|
|
'2040098000',
|
|
'2040090000',
|
|
'2040084000',
|
|
'2040003000',
|
|
'2040056000',
|
|
'2040020000',
|
|
'2040034000',
|
|
'2040028000',
|
|
'2040027000',
|
|
'2040046000',
|
|
'2040047000',
|
|
]
|
|
|
|
if (summon && gridSummon) {
|
|
// Change the image based on the uncap level
|
|
let suffix = ''
|
|
if (gridSummon.object.uncap.xlb && gridSummon.uncapLevel == 6) {
|
|
if (
|
|
gridSummon.transcendenceStep >= 1 &&
|
|
gridSummon.transcendenceStep < 5
|
|
) {
|
|
suffix = '_03'
|
|
} else if (gridSummon.transcendenceStep === 5) {
|
|
suffix = '_04'
|
|
}
|
|
} else if (
|
|
upgradedSummons.indexOf(summon.granblueId.toString()) != -1 &&
|
|
gridSummon.uncapLevel == 5
|
|
) {
|
|
suffix = '_02'
|
|
}
|
|
|
|
url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblueId}${suffix}.jpg`
|
|
}
|
|
|
|
return (
|
|
summons[position] && (
|
|
<img alt={summons[position]?.name[locale]} src={url} />
|
|
)
|
|
)
|
|
}
|
|
|
|
// Render
|
|
return (
|
|
<div className={styles.rep}>
|
|
<div className={styles.mainSummon}>{generateMainImage()}</div>
|
|
<ul className={styles.summons}>
|
|
{Array.from(Array(SUMMONS_COUNT)).map((x, i) => {
|
|
return (
|
|
<li key={`summons-${i}`} className={styles.summon}>
|
|
{generateGridImage(i)}
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SummonRep
|