136 lines
3.9 KiB
TypeScript
136 lines
3.9 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { useRouter } from 'next/router'
|
|
import { Trans, useTranslation } from 'next-i18next'
|
|
|
|
import { Dialog } from '~components/common/Dialog'
|
|
import DialogContent from '~components/common/DialogContent'
|
|
import DialogFooter from '~components/common/DialogFooter'
|
|
import Button from '~components/common/Button'
|
|
import Overlay from '~components/common/Overlay'
|
|
|
|
import { appState } from '~utils/appState'
|
|
import { ElementMap } from '~utils/elements'
|
|
|
|
import styles from './index.module.scss'
|
|
|
|
interface Props {
|
|
open: boolean
|
|
incomingCharacter?: Character
|
|
conflictingCharacters?: GridCharacter[]
|
|
desiredPosition: number
|
|
resolveConflict: () => void
|
|
resetConflict: () => void
|
|
}
|
|
|
|
const CharacterConflictModal = (props: Props) => {
|
|
// Localization
|
|
const router = useRouter()
|
|
const { t } = useTranslation('common')
|
|
const locale =
|
|
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
|
|
|
|
// States
|
|
const [open, setOpen] = useState(false)
|
|
|
|
// Refs
|
|
const footerRef = React.createRef<HTMLDivElement>()
|
|
|
|
useEffect(() => {
|
|
setOpen(props.open)
|
|
}, [setOpen, props.open])
|
|
|
|
function imageUrl(character?: Character, uncap: number = 0) {
|
|
// Change the image based on the uncap level
|
|
let suffix = '01'
|
|
if (uncap == 6) suffix = '04'
|
|
else if (uncap == 5) suffix = '03'
|
|
else if (uncap > 2) suffix = '02'
|
|
|
|
// Special casing for Lyria (and Young Cat eventually)
|
|
if (character?.granblueId === '3030182000') {
|
|
let element: GranblueElement | undefined
|
|
|
|
if (
|
|
appState.grid.weapons.mainWeapon &&
|
|
appState.grid.weapons.mainWeapon.element
|
|
) {
|
|
element = appState.grid.weapons.mainWeapon.element
|
|
} else {
|
|
element = ElementMap.wind
|
|
}
|
|
|
|
suffix = `${suffix}_0${element?.id}`
|
|
}
|
|
|
|
return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/character-square/${character?.granblueId}_${suffix}.jpg`
|
|
}
|
|
|
|
function openChange(open: boolean) {
|
|
setOpen(open)
|
|
props.resetConflict()
|
|
}
|
|
|
|
function close() {
|
|
setOpen(false)
|
|
props.resetConflict()
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={openChange}>
|
|
<DialogContent
|
|
className="conflict"
|
|
footerref={footerRef}
|
|
onOpenAutoFocus={(event) => event.preventDefault()}
|
|
onEscapeKeyDown={close}
|
|
>
|
|
<div className={styles.content}>
|
|
<p>
|
|
<Trans i18nKey="modals.conflict.character"></Trans>
|
|
</p>
|
|
<div className={styles.diagram}>
|
|
<ul>
|
|
{props.conflictingCharacters?.map((character, i) => (
|
|
<li className={styles.character} key={`conflict-${i}`}>
|
|
<img
|
|
alt={character.object.name[locale]}
|
|
src={imageUrl(character.object, character.uncapLevel)}
|
|
/>
|
|
<span>{character.object.name[locale]}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<span className={styles.arrow}>→</span>
|
|
<div className={styles.wrapper}>
|
|
<div className={styles.character}>
|
|
<img
|
|
alt={props.incomingCharacter?.name[locale]}
|
|
src={imageUrl(props.incomingCharacter)}
|
|
/>
|
|
<span>{props.incomingCharacter?.name[locale]}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DialogFooter
|
|
rightElements={[
|
|
<Button
|
|
bound={true}
|
|
onClick={close}
|
|
key="cancel"
|
|
text={t('buttons.cancel')}
|
|
/>,
|
|
<Button
|
|
bound={true}
|
|
onClick={props.resolveConflict}
|
|
key="confirm"
|
|
text={t('modals.conflict.buttons.confirm')}
|
|
/>,
|
|
]}
|
|
/>
|
|
</DialogContent>
|
|
<Overlay open={open} visible={true} />
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
export default CharacterConflictModal
|