110 lines
3.3 KiB
TypeScript
110 lines
3.3 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import classnames from 'classnames'
|
|
|
|
import SearchModal from '~components/SearchModal'
|
|
import UncapIndicator from '~components/UncapIndicator'
|
|
import PlusIcon from '~public/icons/Add.svg'
|
|
|
|
import './index.scss'
|
|
import { omit } from 'lodash'
|
|
import CharacterHovercard from '~components/CharacterHovercard'
|
|
|
|
interface Props {
|
|
gridCharacter: GridCharacter | undefined
|
|
position: number
|
|
editable: boolean
|
|
updateObject: (object: Character | Weapon | Summon, position: number) => void
|
|
updateUncap: (id: string, position: number, uncap: number) => void
|
|
}
|
|
|
|
const CharacterUnit = (props: Props) => {
|
|
const [imageUrl, setImageUrl] = useState('')
|
|
|
|
const classes = classnames({
|
|
CharacterUnit: true,
|
|
'editable': props.editable,
|
|
'filled': (props.gridCharacter !== undefined)
|
|
})
|
|
|
|
const gridCharacter = props.gridCharacter
|
|
const character = gridCharacter?.object
|
|
|
|
useEffect(() => {
|
|
generateImageUrl()
|
|
})
|
|
|
|
function generateImageUrl() {
|
|
let imgSrc = ""
|
|
|
|
if (props.gridCharacter) {
|
|
const character = props.gridCharacter.object!
|
|
|
|
// Change the image based on the uncap level
|
|
let suffix = '01'
|
|
if (props.gridCharacter.uncap_level == 6)
|
|
suffix = '04'
|
|
else if (props.gridCharacter.uncap_level == 5)
|
|
suffix = '03'
|
|
else if (props.gridCharacter.uncap_level > 2)
|
|
suffix = '02'
|
|
|
|
imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-main/${character.granblue_id}_${suffix}.jpg`
|
|
}
|
|
|
|
setImageUrl(imgSrc)
|
|
}
|
|
|
|
function passUncapData(uncap: number) {
|
|
if (props.gridCharacter)
|
|
props.updateUncap(props.gridCharacter.id, props.position, uncap)
|
|
}
|
|
|
|
const image = (
|
|
<div className="CharacterImage">
|
|
<img alt={character?.name.en} className="grid_image" src={imageUrl} />
|
|
{ (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
|
|
</div>
|
|
)
|
|
|
|
const editableImage = (
|
|
<SearchModal
|
|
placeholderText="Search for a character..."
|
|
fromPosition={props.position}
|
|
object="characters"
|
|
send={props.updateObject}>
|
|
{image}
|
|
</SearchModal>
|
|
)
|
|
|
|
const unitContent = (
|
|
<div>
|
|
<div className={classes}>
|
|
{ (props.editable) ? editableImage : image }
|
|
{ (gridCharacter && character) ?
|
|
<UncapIndicator
|
|
type="character"
|
|
flb={character.uncap.flb || false}
|
|
ulb={character.uncap.ulb || false}
|
|
uncapLevel={gridCharacter.uncap_level}
|
|
updateUncap={passUncapData}
|
|
special={character.special}
|
|
/> : '' }
|
|
<h3 className="CharacterName">{character?.name.en}</h3>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
const withHovercard = (
|
|
<CharacterHovercard gridCharacter={gridCharacter!}>
|
|
{unitContent}
|
|
</CharacterHovercard>
|
|
)
|
|
|
|
return (
|
|
<div className={classes}>
|
|
{ (gridCharacter) ? withHovercard : unitContent }
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CharacterUnit
|