diff --git a/components/weapon/WeaponKeySelect/index.module.scss b/components/weapon/WeaponKeySelect/index.module.scss index e69de29b..4fd54259 100644 --- a/components/weapon/WeaponKeySelect/index.module.scss +++ b/components/weapon/WeaponKeySelect/index.module.scss @@ -0,0 +1,9 @@ +.errors { + color: $error; + display: none; + padding: $unit 0; + + &.visible { + display: block; + } +} diff --git a/components/weapon/WeaponKeySelect/index.tsx b/components/weapon/WeaponKeySelect/index.tsx index 94ef8b03..b2d30f3b 100644 --- a/components/weapon/WeaponKeySelect/index.tsx +++ b/components/weapon/WeaponKeySelect/index.tsx @@ -1,4 +1,7 @@ import React, { useEffect, useState } from 'react' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' +import classNames from 'classnames' import Select from '~components/common/Select' import SelectGroup from '~components/common/SelectGroup' @@ -11,12 +14,14 @@ import styles from './index.module.scss' // Props interface Props { open: boolean + gridWeapon: GridWeapon weaponKey?: WeaponKey series: number slot: number onChange?: (value: WeaponKey, slot: number) => void onOpenChange: () => void onClose?: () => void + sendValidity: (isValid: boolean) => void } // Constants @@ -47,10 +52,33 @@ const emptyWeaponKey: WeaponKey = { const WeaponKeySelect = React.forwardRef( function useFieldSet( - { open, weaponKey, series, slot, onChange, onOpenChange, onClose }, + { + open, + gridWeapon, + weaponKey, + series, + slot, + onChange, + onOpenChange, + onClose, + sendValidity, + }, ref ) { + const router = useRouter() + const locale = + router.locale && ['en', 'ja'].includes(router.locale) + ? router.locale + : 'en' + const { t } = useTranslation('common') + const [keys, setKeys] = useState([]) + const [error, setError] = useState('') + + const errorClasses = classNames({ + [styles.errors]: true, + [styles.visible]: error !== '', + }) useEffect(() => { const keys = flattenWeaponKeys() @@ -134,7 +162,18 @@ const WeaponKeySelect = React.forwardRef( const keys = flattenWeaponKeys() const found = keys.find((key) => key.id == value) const weaponKey = found ? found : emptyWeaponKey - if (onChange) onChange(weaponKey, slot) + + if ( + ['14005', '14006', '14007'].includes(`${weaponKey.granblue_id}`) && + gridWeapon.transcendence_step < 3 + ) { + setError(`${weaponKey.name[locale]} requires 3rd Transcendence`) + sendValidity(false) + } else if (onChange) { + setError('') + onChange(weaponKey, slot) + sendValidity(true) + } } const emptyOption = () => { @@ -148,26 +187,29 @@ const WeaponKeySelect = React.forwardRef( } return ( - + <> + +

{error}

+ ) } ) diff --git a/components/weapon/WeaponModal/index.tsx b/components/weapon/WeaponModal/index.tsx index d17255b6..c5a6bada 100644 --- a/components/weapon/WeaponModal/index.tsx +++ b/components/weapon/WeaponModal/index.tsx @@ -50,6 +50,12 @@ const WeaponModal = ({ // State: Component const [alertOpen, setAlertOpen] = useState(false) + const [keysValid, setKeysValid] = useState([ + true, + true, + true, + true, + ]) const [formValid, setFormValid] = useState(false) // State: Selects @@ -149,6 +155,12 @@ const WeaponModal = ({ setFormValid(isValid) } + function receiveKeyValidity(isValid: boolean, slot: number) { + const newKeysValid = keysValid + newKeysValid[slot] = isValid + setKeysValid(newKeysValid) + } + // Methods: Data submission function prepareObject() { let object: GridWeaponObject = { weapon: {} } @@ -159,9 +171,17 @@ const WeaponModal = ({ object.weapon.weapon_key1_id = weaponKey1.id } - if ([2, 3, 17, 34].includes(gridWeapon.object.series) && weaponKey2) + if ([2, 3, 17, 34].includes(gridWeapon.object.series) && weaponKey2) { object.weapon.weapon_key2_id = weaponKey2.id + if ( + ['14005', '14006', '14007'].includes(weaponKey2.granblue_id) && + gridWeapon.transcendence_step < 3 + ) { + object.weapon.weapon_key2_id = undefined + } + } + if ([17].includes(gridWeapon.object.series) && weaponKey3) object.weapon.weapon_key3_id = weaponKey3.id @@ -356,12 +376,14 @@ const WeaponModal = ({ {[2, 3, 17, 22, 34].includes(gridWeapon.object.series) ? ( openSelect(1)} onChange={receiveWeaponKey} onClose={() => setWeaponKey1Open(false)} + sendValidity={(valid: boolean) => receiveKeyValidity(valid, 0)} /> ) : ( '' @@ -370,12 +392,14 @@ const WeaponModal = ({ {[2, 3, 17, 34].includes(gridWeapon.object.series) ? ( openSelect(2)} onChange={receiveWeaponKey} onClose={() => setWeaponKey2Open(false)} + sendValidity={(valid: boolean) => receiveKeyValidity(valid, 1)} /> ) : ( '' @@ -384,12 +408,14 @@ const WeaponModal = ({ {[17].includes(gridWeapon.object.series) ? ( openSelect(3)} onChange={receiveWeaponKey} onClose={() => setWeaponKey3Open(false)} + sendValidity={(valid: boolean) => receiveKeyValidity(valid, 2)} /> ) : ( '' @@ -398,12 +424,14 @@ const WeaponModal = ({ {gridWeapon.object.series == 24 && gridWeapon.object.uncap.ulb ? ( openSelect(4)} onChange={receiveWeaponKey} onClose={() => setWeaponKey4Open(false)} + sendValidity={(valid: boolean) => receiveKeyValidity(valid, 4)} /> ) : ( '' @@ -496,7 +524,7 @@ const WeaponModal = ({ bound={true} onClick={handleUpdateWeapon} key="confirm" - disabled={!formValid} + disabled={!formValid || keysValid.includes(false)} text={t('modals.weapon.buttons.confirm')} />, ]}