From 7d7e867b407801643bd0319e898c61bbc7cb0f27 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 24 Dec 2022 03:27:15 -0800
Subject: [PATCH] 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 | 25 ++++++-----
 components/WeaponUnit/index.tsx  | 74 ++++++++++++++++++++++++++++++++
 2 files changed, 89 insertions(+), 10 deletions(-)

diff --git a/components/WeaponModal/index.tsx b/components/WeaponModal/index.tsx
index 40f08be0..7eea8156 100644
--- a/components/WeaponModal/index.tsx
+++ b/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) {
diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx
index db499054..84598500 100644
--- a/components/WeaponUnit/index.tsx
+++ b/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} />