Only Transcendence3 Opuses can equip new pendulums

components/weapon/WeaponKeySelect/index.module.scss

@@ -0,0 +1,9 @@
+.errors {
+  color: $error;
+  display: none;
+  padding: $unit 0;
+
+  &.visible {
+    display: block;
+  }
+}

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<HTMLButtonElement, Props>(
   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<WeaponKey[][]>([])
+    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<HTMLButtonElement, Props>(
       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,6 +187,7 @@ const WeaponKeySelect = React.forwardRef<HTMLButtonElement, Props>(
     }
 
     return (
+      <>
         <Select
           key={`weapon-key-${slot}`}
           value={weaponKey ? weaponKey.id : emptyWeaponKey.id}
@@ -168,6 +208,8 @@ const WeaponKeySelect = React.forwardRef<HTMLButtonElement, Props>(
             return weaponKeyGroup(i)
           })}
         </Select>
+        <p className={errorClasses}>{error}</p>
+      </>
     )
   }
 )

components/weapon/WeaponModal/index.tsx

@@ -50,6 +50,12 @@ const WeaponModal = ({
 
   // State: Component
   const [alertOpen, setAlertOpen] = useState(false)
+  const [keysValid, setKeysValid] = useState<boolean[]>([
+    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) ? (
         <WeaponKeySelect
           open={weaponKey1Open}
+          gridWeapon={gridWeapon}
           weaponKey={weaponKey1}
           series={gridWeapon.object.series}
           slot={0}
           onOpenChange={() => 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) ? (
         <WeaponKeySelect
           open={weaponKey2Open}
+          gridWeapon={gridWeapon}
           weaponKey={weaponKey2}
           series={gridWeapon.object.series}
           slot={1}
           onOpenChange={() => openSelect(2)}
           onChange={receiveWeaponKey}
           onClose={() => setWeaponKey2Open(false)}
+          sendValidity={(valid: boolean) => receiveKeyValidity(valid, 1)}
         />
       ) : (
         ''
@@ -384,12 +408,14 @@ const WeaponModal = ({
       {[17].includes(gridWeapon.object.series) ? (
         <WeaponKeySelect
           open={weaponKey3Open}
+          gridWeapon={gridWeapon}
           weaponKey={weaponKey3}
           series={gridWeapon.object.series}
           slot={2}
           onOpenChange={() => 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 ? (
         <WeaponKeySelect
           open={weaponKey4Open}
+          gridWeapon={gridWeapon}
           weaponKey={weaponKey1}
           series={gridWeapon.object.series}
           slot={0}
           onOpenChange={() => 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')}
               />,
             ]}