582 lines
15 KiB
TypeScript
582 lines
15 KiB
TypeScript
import React, { useEffect, useState, MouseEvent } from 'react'
|
|
import { useRouter } from 'next/router'
|
|
import { Trans, useTranslation } from 'next-i18next'
|
|
import classNames from 'classnames'
|
|
|
|
import Alert from '~components/Alert'
|
|
import SearchModal from '~components/SearchModal'
|
|
import WeaponModal from '~components/WeaponModal'
|
|
import {
|
|
ContextMenu,
|
|
ContextMenuTrigger,
|
|
ContextMenuContent,
|
|
} from '~components/ContextMenu'
|
|
import ContextMenuItem from '~components/ContextMenuItem'
|
|
import WeaponHovercard from '~components/WeaponHovercard'
|
|
import UncapIndicator from '~components/UncapIndicator'
|
|
import Button from '~components/Button'
|
|
|
|
import type { SearchableObject } from '~types'
|
|
|
|
import ax from '~data/ax'
|
|
import { weaponAwakening } from '~data/awakening'
|
|
|
|
import PlusIcon from '~public/icons/Add.svg'
|
|
import SettingsIcon from '~public/icons/Settings.svg'
|
|
import './index.scss'
|
|
|
|
interface Props {
|
|
gridWeapon: GridWeapon | undefined
|
|
unitType: 0 | 1
|
|
position: number
|
|
editable: boolean
|
|
removeWeapon: (id: string) => void
|
|
updateObject: (object: SearchableObject, position: number) => void
|
|
updateUncap: (id: string, position: number, uncap: number) => void
|
|
}
|
|
|
|
const WeaponUnit = ({
|
|
gridWeapon,
|
|
unitType,
|
|
position,
|
|
editable,
|
|
removeWeapon: sendWeaponToRemove,
|
|
updateObject,
|
|
updateUncap,
|
|
}: Props) => {
|
|
// Translations and locale
|
|
const { t } = useTranslation('common')
|
|
const router = useRouter()
|
|
const locale =
|
|
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
|
|
|
|
// State: UI
|
|
const [detailsModalOpen, setDetailsModalOpen] = useState(false)
|
|
const [searchModalOpen, setSearchModalOpen] = useState(false)
|
|
const [contextMenuOpen, setContextMenuOpen] = useState(false)
|
|
const [alertOpen, setAlertOpen] = useState(false)
|
|
|
|
// State: Other
|
|
const [imageUrl, setImageUrl] = useState('')
|
|
|
|
// Classes
|
|
const classes = classNames({
|
|
WeaponUnit: true,
|
|
mainhand: unitType == 0,
|
|
grid: unitType == 1,
|
|
editable: editable,
|
|
filled: gridWeapon !== undefined,
|
|
empty: gridWeapon == undefined,
|
|
})
|
|
|
|
const buttonClasses = classNames({
|
|
Options: true,
|
|
Clicked: contextMenuOpen,
|
|
})
|
|
|
|
// Other
|
|
const weapon = gridWeapon?.object
|
|
|
|
// Hooks
|
|
useEffect(() => {
|
|
generateImageUrl()
|
|
})
|
|
|
|
// Methods: Convenience
|
|
function canBeModified(gridWeapon: GridWeapon) {
|
|
const weapon = gridWeapon.object
|
|
|
|
return (
|
|
weapon.ax ||
|
|
weapon.awakening ||
|
|
(weapon.series && [2, 3, 17, 22, 24].includes(weapon.series))
|
|
)
|
|
}
|
|
|
|
// Methods: Open layer
|
|
function openWeaponModal(event: Event) {
|
|
setDetailsModalOpen(true)
|
|
}
|
|
|
|
function openSearchModal() {
|
|
if (editable) setSearchModalOpen(true)
|
|
}
|
|
|
|
function openRemoveWeaponAlert() {
|
|
setAlertOpen(true)
|
|
}
|
|
|
|
// Methods: Handle button clicked
|
|
function handleButtonClicked() {
|
|
setContextMenuOpen(!contextMenuOpen)
|
|
}
|
|
|
|
// Methods: Handle open change
|
|
function handleContextMenuOpenChange(open: boolean) {
|
|
if (!open) setContextMenuOpen(false)
|
|
}
|
|
|
|
function handleWeaponModalOpenChange(open: boolean) {
|
|
setDetailsModalOpen(open)
|
|
}
|
|
|
|
function handleSearchModalOpenChange(open: boolean) {
|
|
setSearchModalOpen(open)
|
|
}
|
|
|
|
// Methods: Mutate data
|
|
function passUncapData(index: number) {
|
|
if (gridWeapon) updateUncap(gridWeapon.id, position, index)
|
|
}
|
|
|
|
function removeWeapon() {
|
|
if (gridWeapon) sendWeaponToRemove(gridWeapon.id)
|
|
setAlertOpen(false)
|
|
}
|
|
|
|
// Methods: Data fetching and manipulation
|
|
function getCanonicalAxSkill(index: number) {
|
|
if (
|
|
gridWeapon &&
|
|
gridWeapon.object.ax &&
|
|
gridWeapon.object.ax_type > 0 &&
|
|
gridWeapon.ax
|
|
) {
|
|
const axOptions = ax[gridWeapon.object.ax_type - 1]
|
|
const weaponAxSkill: SimpleAxSkill = gridWeapon.ax[0]
|
|
|
|
let axSkill = axOptions.find((ax) => ax.id === weaponAxSkill.modifier)
|
|
|
|
if (index !== 0 && axSkill && axSkill.secondary) {
|
|
const weaponSubAxSkill: SimpleAxSkill = gridWeapon.ax[1]
|
|
axSkill = axSkill.secondary.find(
|
|
(ax) => ax.id === weaponSubAxSkill.modifier
|
|
)
|
|
}
|
|
|
|
return axSkill
|
|
} else return
|
|
}
|
|
|
|
// Methods: Image string generation
|
|
function generateImageUrl() {
|
|
let imgSrc = ''
|
|
if (gridWeapon) {
|
|
const weapon = gridWeapon.object!
|
|
|
|
if (unitType == 0) {
|
|
if (gridWeapon.object.element == 0 && gridWeapon.element)
|
|
imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}_${gridWeapon.element}.jpg`
|
|
else
|
|
imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}.jpg`
|
|
} else {
|
|
if (gridWeapon.object.element == 0 && gridWeapon.element)
|
|
imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${gridWeapon.element}.jpg`
|
|
else
|
|
imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`
|
|
}
|
|
}
|
|
|
|
setImageUrl(imgSrc)
|
|
}
|
|
|
|
function placeholderImageUrl() {
|
|
return unitType == 0
|
|
? '/images/placeholders/placeholder-weapon-main.png'
|
|
: '/images/placeholders/placeholder-weapon-grid.png'
|
|
}
|
|
|
|
// Methods: Image element rendering
|
|
function awakeningImage() {
|
|
if (
|
|
gridWeapon &&
|
|
gridWeapon.object.awakening &&
|
|
gridWeapon.awakening &&
|
|
gridWeapon.awakening.type > 0 &&
|
|
gridWeapon.awakening.type != null
|
|
) {
|
|
const awakening = weaponAwakening.find(
|
|
(awakening) => awakening.id === gridWeapon?.awakening?.type
|
|
)
|
|
const name = awakening?.name[locale]
|
|
|
|
return (
|
|
<img
|
|
alt={`${name} Lv${gridWeapon.awakening.level}`}
|
|
className="Awakening"
|
|
src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/awakening/weapon_${gridWeapon.awakening.type}.png`}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
function telumaImage(index: number) {
|
|
const baseUrl = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-keys/`
|
|
let filename = ''
|
|
let altText = ''
|
|
|
|
// If there is a grid weapon, it is a Draconic Weapon and it has keys
|
|
if (
|
|
gridWeapon &&
|
|
gridWeapon.object.series === 3 &&
|
|
gridWeapon.weapon_keys
|
|
) {
|
|
if (index === 0 && gridWeapon.weapon_keys[0]) {
|
|
altText = `${gridWeapon.weapon_keys[0].name[locale]}`
|
|
filename = `${gridWeapon.weapon_keys[0].slug}.png`
|
|
} else if (index === 1 && gridWeapon.weapon_keys[1]) {
|
|
altText = `${gridWeapon.weapon_keys[1].name[locale]}`
|
|
|
|
const element = gridWeapon.object.element
|
|
filename = `${gridWeapon.weapon_keys[1].slug}-${element}.png`
|
|
}
|
|
|
|
return (
|
|
<img
|
|
alt={altText}
|
|
key={altText}
|
|
className="Skill"
|
|
src={`${baseUrl}${filename}`}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
function telumaImages() {
|
|
let images: JSX.Element[] = []
|
|
if (
|
|
gridWeapon &&
|
|
gridWeapon.object.series === 3 &&
|
|
gridWeapon.weapon_keys &&
|
|
gridWeapon.weapon_keys.length > 0
|
|
) {
|
|
for (let i = 0; i < gridWeapon.weapon_keys.length; i++) {
|
|
const image = telumaImage(i)
|
|
if (image) images.push(image)
|
|
}
|
|
}
|
|
|
|
return images
|
|
}
|
|
|
|
function ultimaImage(index: number) {
|
|
const baseUrl = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-keys/`
|
|
let filename = ''
|
|
let altText = ''
|
|
|
|
// If there is a grid weapon, it is a Dark Opus Weapon and it has keys
|
|
if (
|
|
gridWeapon &&
|
|
gridWeapon.object.series === 17 &&
|
|
gridWeapon.weapon_keys
|
|
) {
|
|
if (
|
|
gridWeapon.weapon_keys[index] &&
|
|
(gridWeapon.weapon_keys[index].slot === 1 ||
|
|
gridWeapon.weapon_keys[index].slot === 2)
|
|
) {
|
|
altText = `${gridWeapon.weapon_keys[index].name[locale]}`
|
|
filename = `${gridWeapon.weapon_keys[index].slug}.png`
|
|
} else if (
|
|
gridWeapon.weapon_keys[index] &&
|
|
gridWeapon.weapon_keys[index].slot === 0
|
|
) {
|
|
altText = `${gridWeapon.weapon_keys[index].name[locale]}`
|
|
|
|
const weapon = gridWeapon.object.proficiency
|
|
|
|
const suffix = `${weapon}`
|
|
filename = `${gridWeapon.weapon_keys[index].slug}-${suffix}.png`
|
|
}
|
|
}
|
|
|
|
return (
|
|
<img
|
|
alt={altText}
|
|
key={altText}
|
|
className="Skill"
|
|
src={`${baseUrl}${filename}`}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function ultimaImages() {
|
|
let images: JSX.Element[] = []
|
|
if (
|
|
gridWeapon &&
|
|
gridWeapon.object.series === 17 &&
|
|
gridWeapon.weapon_keys &&
|
|
gridWeapon.weapon_keys.length > 0
|
|
) {
|
|
for (let i = 0; i < gridWeapon.weapon_keys.length; i++) {
|
|
const image = ultimaImage(i)
|
|
if (image) images.push(image)
|
|
}
|
|
}
|
|
|
|
return images
|
|
}
|
|
|
|
function opusImage(index: number) {
|
|
const baseUrl = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-keys/`
|
|
let filename = ''
|
|
let altText = ''
|
|
|
|
// If there is a grid weapon, it is a Dark Opus Weapon and it has keys
|
|
if (
|
|
gridWeapon &&
|
|
gridWeapon.object.series === 2 &&
|
|
gridWeapon.weapon_keys
|
|
) {
|
|
if (
|
|
gridWeapon.weapon_keys[index] &&
|
|
gridWeapon.weapon_keys[index].slot === 0
|
|
) {
|
|
altText = `${gridWeapon.weapon_keys[index].name[locale]}`
|
|
filename = `${gridWeapon.weapon_keys[index].slug}.png`
|
|
} else if (
|
|
gridWeapon.weapon_keys[index] &&
|
|
gridWeapon.weapon_keys[index].slot === 1
|
|
) {
|
|
altText = `${gridWeapon.weapon_keys[index].name[locale]}`
|
|
|
|
const element = gridWeapon.object.element
|
|
const mod = gridWeapon.object.name.en.includes('Repudiation')
|
|
? 'primal'
|
|
: 'magna'
|
|
|
|
const suffix = `${mod}-${element}`
|
|
const weaponKey = gridWeapon.weapon_keys[index]
|
|
|
|
if (
|
|
[
|
|
'pendulum-strength',
|
|
'pendulum-zeal',
|
|
'pendulum-strife',
|
|
'chain-temperament',
|
|
'chain-restoration',
|
|
'chain-glorification',
|
|
].includes(weaponKey.slug)
|
|
) {
|
|
filename = `${gridWeapon.weapon_keys[index].slug}-${suffix}.png`
|
|
} else {
|
|
filename = `${gridWeapon.weapon_keys[index].slug}.png`
|
|
}
|
|
}
|
|
|
|
return (
|
|
<img
|
|
alt={altText}
|
|
key={altText}
|
|
className="Skill"
|
|
src={`${baseUrl}${filename}`}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
function opusImages() {
|
|
let images: JSX.Element[] = []
|
|
if (
|
|
gridWeapon &&
|
|
gridWeapon.object.series === 2 &&
|
|
gridWeapon.weapon_keys &&
|
|
gridWeapon.weapon_keys.length > 0
|
|
) {
|
|
for (let i = 0; i < gridWeapon.weapon_keys.length; i++) {
|
|
const image = opusImage(i)
|
|
if (image) images.push(image)
|
|
}
|
|
}
|
|
|
|
return images
|
|
}
|
|
|
|
function axImage(index: number) {
|
|
const axSkill = getCanonicalAxSkill(index)
|
|
|
|
if (
|
|
gridWeapon &&
|
|
gridWeapon.object.ax &&
|
|
gridWeapon.object.ax_type > 0 &&
|
|
gridWeapon.ax &&
|
|
axSkill
|
|
) {
|
|
const altText = `${axSkill.name[locale]} Lv${gridWeapon.ax[index].strength}`
|
|
return (
|
|
<img
|
|
alt={altText}
|
|
key={altText}
|
|
className="Skill"
|
|
src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/ax/${axSkill.slug}.png`}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
function axImages() {
|
|
let images: JSX.Element[] = []
|
|
if (
|
|
gridWeapon &&
|
|
gridWeapon.object.ax &&
|
|
gridWeapon.ax &&
|
|
gridWeapon.ax.length > 0
|
|
) {
|
|
for (let i = 0; i < gridWeapon.ax.length; i++) {
|
|
const image = axImage(i)
|
|
if (image) images.push(image)
|
|
}
|
|
}
|
|
|
|
return images
|
|
}
|
|
|
|
// Methods: Layer element rendering
|
|
const weaponModal = () => {
|
|
if (gridWeapon) {
|
|
return (
|
|
<WeaponModal
|
|
gridWeapon={gridWeapon}
|
|
open={detailsModalOpen}
|
|
onOpenChange={handleWeaponModalOpenChange}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
const contextMenu = () => {
|
|
if (editable && gridWeapon && gridWeapon.id) {
|
|
return (
|
|
<>
|
|
<ContextMenu onOpenChange={handleContextMenuOpenChange}>
|
|
<ContextMenuTrigger asChild>
|
|
<Button
|
|
leftAccessoryIcon={<SettingsIcon />}
|
|
className={buttonClasses}
|
|
onClick={handleButtonClicked}
|
|
/>
|
|
</ContextMenuTrigger>
|
|
<ContextMenuContent align="start">
|
|
{canBeModified(gridWeapon) ? (
|
|
<ContextMenuItem onSelect={openWeaponModal}>
|
|
{t('context.modify.weapon')}
|
|
</ContextMenuItem>
|
|
) : (
|
|
''
|
|
)}
|
|
<ContextMenuItem onSelect={openRemoveWeaponAlert}>
|
|
{t('context.remove')}
|
|
</ContextMenuItem>
|
|
</ContextMenuContent>
|
|
</ContextMenu>
|
|
{weaponModal()}
|
|
{removeAlert()}
|
|
</>
|
|
)
|
|
}
|
|
}
|
|
|
|
const removeAlert = () => {
|
|
return (
|
|
<Alert
|
|
open={alertOpen}
|
|
primaryAction={removeWeapon}
|
|
primaryActionText={t('modals.weapon.buttons.remove')}
|
|
cancelAction={() => setAlertOpen(false)}
|
|
cancelActionText={t('buttons.cancel')}
|
|
message={
|
|
<Trans i18nKey="modals.weapons.messages.remove">
|
|
Are you sure you want to remove{' '}
|
|
<strong>{{ weapon: gridWeapon?.object.name[locale] }}</strong> from
|
|
your team?
|
|
</Trans>
|
|
}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const searchModal = () => {
|
|
return (
|
|
<SearchModal
|
|
placeholderText={t('search.placeholders.weapon')}
|
|
fromPosition={position}
|
|
object="weapons"
|
|
open={searchModalOpen}
|
|
onOpenChange={handleSearchModalOpenChange}
|
|
send={updateObject}
|
|
/>
|
|
)
|
|
}
|
|
|
|
// Methods: Core element rendering
|
|
const image = () => {
|
|
const image = (
|
|
<img
|
|
alt={weapon?.name[locale]}
|
|
className={classNames({
|
|
GridImage: true,
|
|
Placeholder: imageUrl === '',
|
|
})}
|
|
src={imageUrl !== '' ? imageUrl : placeholderImageUrl()}
|
|
/>
|
|
)
|
|
|
|
const content = (
|
|
<div className="WeaponImage" onClick={openSearchModal}>
|
|
<div className="Modifiers">
|
|
{awakeningImage()}
|
|
<div className="Skills">
|
|
{axImages()}
|
|
{telumaImages()}
|
|
{opusImages()}
|
|
{ultimaImages()}
|
|
</div>
|
|
</div>
|
|
{image}
|
|
{editable ? (
|
|
<span className="icon">
|
|
<PlusIcon />
|
|
</span>
|
|
) : (
|
|
''
|
|
)}
|
|
</div>
|
|
)
|
|
|
|
return gridWeapon ? (
|
|
<WeaponHovercard gridWeapon={gridWeapon} onTriggerClick={openSearchModal}>
|
|
{content}
|
|
</WeaponHovercard>
|
|
) : (
|
|
content
|
|
)
|
|
}
|
|
|
|
const unitContent = (
|
|
<>
|
|
<div className={classes}>
|
|
{contextMenu()}
|
|
{image()}
|
|
{gridWeapon && weapon ? (
|
|
<UncapIndicator
|
|
type="weapon"
|
|
ulb={gridWeapon.object.uncap.ulb || false}
|
|
flb={gridWeapon.object.uncap.flb || false}
|
|
uncapLevel={gridWeapon.uncap_level}
|
|
position={gridWeapon.position}
|
|
updateUncap={passUncapData}
|
|
special={false}
|
|
/>
|
|
) : (
|
|
''
|
|
)}
|
|
<h3 className="WeaponName">{weapon?.name[locale]}</h3>
|
|
</div>
|
|
{searchModal()}
|
|
</>
|
|
)
|
|
|
|
return unitContent
|
|
}
|
|
|
|
export default WeaponUnit
|