107 lines
3.3 KiB
TypeScript
107 lines
3.3 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import classnames from 'classnames'
|
|
import { useModal as useModal } from '~utils/useModal'
|
|
|
|
import SearchModal from '~components/SearchModal'
|
|
import UncapIndicator from '~components/UncapIndicator'
|
|
|
|
import mainImages from '../../images/weapon-main/*.jpg'
|
|
import gridImages from '../../images/weapon-grid/*.jpg'
|
|
import Plus from '../../../assets/plus.svg'
|
|
|
|
import './index.css'
|
|
|
|
interface Props {
|
|
onReceiveData: (weapon: Weapon, position: number) => void
|
|
weapon: Weapon | undefined
|
|
position: number
|
|
editable: boolean
|
|
unitType: 0 | 1
|
|
}
|
|
|
|
const WeaponUnit = (props: Props) => {
|
|
const [imageUrl, setImageUrl] = useState('')
|
|
|
|
const { open, openModal, closeModal } = useModal()
|
|
|
|
const openModalIfEditable = (props.editable) ? openModal : () => {}
|
|
|
|
const classes = classnames({
|
|
WeaponUnit: true,
|
|
'mainhand': props.unitType == 0,
|
|
'grid': props.unitType == 1,
|
|
'editable': props.editable,
|
|
'filled': (props.weapon !== undefined)
|
|
})
|
|
|
|
const weapon = props.weapon
|
|
|
|
useEffect(() => {
|
|
generateImageUrl()
|
|
})
|
|
|
|
function generateImageUrl() {
|
|
let imgSrc
|
|
if (props.weapon) {
|
|
const weapon = props.weapon!
|
|
|
|
// Generate the correct source for the weapon
|
|
if (process.env.NODE_ENV === 'development') {
|
|
if (props.unitType == 0)
|
|
imgSrc = mainImages[weapon.granblue_id]
|
|
else
|
|
imgSrc = gridImages[weapon.granblue_id]
|
|
} else if (process.env.NODE_ENV === 'production') {
|
|
if (props.unitType == 0)
|
|
imgSrc = `${process.env.SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}.jpg`
|
|
else
|
|
imgSrc = `${process.env.SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`
|
|
}
|
|
}
|
|
|
|
setImageUrl(imgSrc)
|
|
}
|
|
|
|
function sendData(object: Weapon | Summon, position: number) {
|
|
if (isWeapon(object)) {
|
|
props.onReceiveData(object, position)
|
|
}
|
|
}
|
|
|
|
function isWeapon(object: Weapon | Summon): object is Weapon {
|
|
return (object as Weapon).proficiency !== undefined
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className={classes} onClick={openModalIfEditable}>
|
|
<div className="WeaponImage">
|
|
{
|
|
(imageUrl != '')
|
|
? <img className="grid_image" src={imageUrl} />
|
|
: <img className="grid_image" />
|
|
|
|
}
|
|
{ (props.editable) ? <span className='icon'><Plus /></span> : '' }
|
|
</div>
|
|
<UncapIndicator
|
|
ulb={weapon?.uncap.ulb || false}
|
|
flb={weapon?.uncap.flb || false}
|
|
uncapLevel={3}
|
|
/>
|
|
<h3 className="WeaponName">{weapon?.name.en}</h3>
|
|
</div>
|
|
{open ? (
|
|
<SearchModal
|
|
close={closeModal}
|
|
send={sendData}
|
|
fromPosition={props.position}
|
|
object="weapons"
|
|
placeholderText="Search for a weapon..."
|
|
/>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default WeaponUnit
|