Display Opus weapons and fix selection

There was a bug where if you unset the first Opus key (or presumably any weapon mod where there is more than one), the display in grid and in the modal would be incorrect and lead to corrupted data. This is fixed now!

components/WeaponModal/index.tsx

@@ -78,13 +78,15 @@ const WeaponModal = (props: Props) => {
     setElement(props.gridWeapon.element)
 
     if (props.gridWeapon.weapon_keys) {
-      if (props.gridWeapon.weapon_keys[0]) {
-        setWeaponKey1(props.gridWeapon.weapon_keys[0])
-      }
-      if (props.gridWeapon.weapon_keys[1])
-        setWeaponKey2(props.gridWeapon.weapon_keys[1])
-      if (props.gridWeapon.weapon_keys[2])
-        setWeaponKey3(props.gridWeapon.weapon_keys[2])
+      props.gridWeapon.weapon_keys.forEach((key) => {
+        if (key.slot + 1 === 1) {
+          setWeaponKey1(key)
+        } else if (key.slot + 1 === 2) {
+          setWeaponKey2(key)
+        } else if (key.slot + 1 === 3) {
+          setWeaponKey3(key)
+        }
+      })
     }
   }, [props])
 
@@ -119,14 +121,17 @@ const WeaponModal = (props: Props) => {
 
     if (props.gridWeapon.object.element == 0) object.weapon.element = element
 
-    if ([2, 3, 17, 24].includes(props.gridWeapon.object.series)) {
+    if (
+      [2, 3, 17, 24].includes(props.gridWeapon.object.series) &&
+      weaponKey1Id
+    ) {
       object.weapon.weapon_key1_id = weaponKey1Id
     }
 
-    if ([2, 3, 17].includes(props.gridWeapon.object.series))
+    if ([2, 3, 17].includes(props.gridWeapon.object.series) && weaponKey2Id)
       object.weapon.weapon_key2_id = weaponKey2Id
 
-    if (props.gridWeapon.object.series == 17)
+    if (props.gridWeapon.object.series == 17 && weaponKey3Id)
       object.weapon.weapon_key3_id = weaponKey3Id
 
     if (props.gridWeapon.object.ax > 0) {

components/WeaponUnit/index.tsx

@@ -127,6 +127,79 @@ const WeaponUnit = (props: Props) => {
     }
   }
 
+  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 (
+      props.gridWeapon &&
+      props.gridWeapon.object.series === 2 &&
+      props.gridWeapon.weapon_keys
+    ) {
+      if (
+        props.gridWeapon.weapon_keys[index] &&
+        props.gridWeapon.weapon_keys[index].slot === 0
+      ) {
+        altText = `${props.gridWeapon.weapon_keys[index].name[locale]}`
+        filename = `${props.gridWeapon.weapon_keys[index].slug}.png`
+      } else if (
+        props.gridWeapon.weapon_keys[index] &&
+        props.gridWeapon.weapon_keys[index].slot === 1
+      ) {
+        altText = `${props.gridWeapon.weapon_keys[index].name[locale]}`
+
+        const element = props.gridWeapon.object.element
+        const mod = props.gridWeapon.object.name.en.includes('Repudiation')
+          ? 'primal'
+          : 'magna'
+
+        const suffix = `${mod}-${element}`
+        const weaponKey = props.gridWeapon.weapon_keys[index]
+
+        if (
+          [
+            'pendulum-strength',
+            'pendulum-zeal',
+            'pendulum-strife',
+            'chain-temperament',
+            'chain-restoration',
+            'chain-glorification',
+          ].includes(weaponKey.slug)
+        ) {
+          filename = `${props.gridWeapon.weapon_keys[index].slug}-${suffix}.png`
+        } else {
+          filename = `${props.gridWeapon.weapon_keys[index].slug}.png`
+        }
+      }
+
+      return (
+        <img
+          alt={`${altText}`}
+          className="Skill"
+          src={`${baseUrl}${filename}`}
+        />
+      )
+    }
+  }
+
+  function opusImages() {
+    let images: JSX.Element[] = []
+    if (
+      props.gridWeapon &&
+      props.gridWeapon.weapon_keys &&
+      props.gridWeapon.weapon_keys.length > 0
+    ) {
+      for (let i = 0; i < props.gridWeapon.weapon_keys.length; i++) {
+        const image = opusImage(i)
+        if (image) images.push(image)
+      }
+    }
+
+    return images
+  }
+
   function axImage(index: number) {
     const axSkill = getCanonicalAxSkill(index)
 
@@ -194,6 +267,7 @@ const WeaponUnit = (props: Props) => {
           {axImage(1)}
           {telumaImage(0)}
           {telumaImage(1)}
+          {opusImages()}
         </div>
       </div>
       <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />