Hotfix issues regarding Draconic Weapons (#394)

* Properly send draconic key 3 to API
* Show key images over Draconic Weapons Providence
* Show key images in hovercards

components/common/Button/index.module.scss

@@ -412,7 +412,7 @@
 
   &.wind {
     background: var(--wind-bg);
-    color: var(--wind-text);
+    color: var(--wind-text-contrast);
 
     &:hover {
       background: var(--wind-bg-hover);
@@ -422,7 +422,7 @@
 
   &.fire {
     background: var(--fire-bg);
-    color: var(--fire-text);
+    color: var(--fire-text-contrast);
 
     &:hover {
       background: var(--fire-bg-hover);
@@ -432,7 +432,7 @@
 
   &.water {
     background: var(--water-bg);
-    color: var(--water-text);
+    color: var(--water-text-contrast);
 
     &:hover {
       background: var(--water-bg-hover);
@@ -442,7 +442,7 @@
 
   &.earth {
     background: var(--earth-bg);
-    color: var(--earth-text);
+    color: var(--earth-text-contrast);
 
     &:hover {
       background: var(--earth-bg-hover);
@@ -452,7 +452,7 @@
 
   &.dark {
     background: var(--dark-bg);
-    color: var(--dark-text);
+    color: var(--dark-text-contrast);
 
     &:hover {
       background: var(--dark-bg-hover);
@@ -462,7 +462,7 @@
 
   &.light {
     background: var(--light-bg);
-    color: var(--light-text);
+    color: var(--light-text-contrast);
 
     &:hover {
       background: var(--light-bg-hover);

components/weapon/WeaponHovercard/index.module.scss

@@ -66,6 +66,22 @@
     display: flex;
     flex-direction: column;
     font-size: $normal;
-    gap: $unit-half;
+    gap: $unit;
+
+    .weaponKey {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      gap: $unit;
+
+      .icon img {
+        width: $unit-3x;
+        height: $unit-3x;
+      }
+
+      span {
+        font-weight: $medium;
+      }
+    }
   }
 }

components/weapon/WeaponHovercard/index.tsx

@@ -54,6 +54,10 @@ const WeaponHovercard = (props: Props) => {
       en: 'Emblem',
       ja: 'エンブレム',
     },
+    '34': {
+      en: 'Teluma',
+      ja: 'テルマ',
+    },
   }
 
   const tintElement =
@@ -75,6 +79,100 @@ const WeaponHovercard = (props: Props) => {
     else return 'bottom'
   }
 
+  function telumaImage(index: number) {
+    const baseUrl = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-keys/`
+
+    // If there is a grid weapon, it is a Draconic Weapon and it has keys
+    if (
+      (props.gridWeapon.object.series === 3 ||
+        props.gridWeapon.object.series == 34) &&
+      props.gridWeapon.weapon_keys
+    ) {
+      const weaponKey = props.gridWeapon.weapon_keys[index]
+      const altText = weaponKey.name[locale]
+      let filename = `${weaponKey.slug}`
+
+      if (
+        index === 1 ||
+        (index === 2 && parseInt(weaponKey.granblue_id) === 15008)
+      ) {
+        filename += `-${props.gridWeapon.object.element}`
+      }
+
+      return (
+        <img
+          alt={altText}
+          key={altText}
+          className={styles.skill}
+          src={`${baseUrl}${filename}.png`}
+        />
+      )
+    }
+  }
+
+  function opusImage(index: number) {
+    const baseUrl = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-keys/`
+
+    // If there is a grid weapon, it is a Dark Opus Weapon and it has keys
+    if (props.gridWeapon.object.series === 2 && props.gridWeapon.weapon_keys) {
+      const weaponKey = props.gridWeapon.weapon_keys[index]
+      const altText = weaponKey.name[locale]
+      let filename = weaponKey.slug
+
+      if (weaponKey.slot === 1) {
+        const element = props.gridWeapon.object.element
+        const mod = props.gridWeapon.object.name.en.includes('Repudiation')
+          ? 'primal'
+          : 'magna'
+        const suffixes = [
+          'pendulum-strength',
+          'pendulum-zeal',
+          'pendulum-strife',
+          'chain-temperament',
+          'chain-restoration',
+          'chain-glorification',
+        ]
+
+        if (suffixes.includes(weaponKey.slug)) {
+          filename += `-${mod}-${element}`
+        }
+      }
+
+      return (
+        <img
+          alt={altText}
+          key={altText}
+          className={styles.skill}
+          src={`${baseUrl}${filename}.png`}
+        />
+      )
+    }
+  }
+
+  function ultimaImage(index: number) {
+    const baseUrl = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-keys/`
+
+    // If there is a grid weapon, it is a Dark Opus Weapon and it has keys
+    if (props.gridWeapon.object.series === 17 && props.gridWeapon.weapon_keys) {
+      const weaponKey = props.gridWeapon.weapon_keys[index]
+      const altText = weaponKey.name[locale]
+      let filename = weaponKey.slug
+
+      if (weaponKey.slot === 0) {
+        filename += `-${props.gridWeapon.object.proficiency}`
+      }
+
+      return (
+        <img
+          alt={altText}
+          key={altText}
+          className={styles.skill}
+          src={`${baseUrl}${filename}.png`}
+        />
+      )
+    }
+  }
+
   const createPrimaryAxSkillString = () => {
     const primaryAxSkills = ax[props.gridWeapon.object.ax_type - 1]
 
@@ -135,27 +233,27 @@ const WeaponHovercard = (props: Props) => {
 
   const keysSection = (
     <section className={styles.weaponKeys}>
-      {WeaponKeyNames[props.gridWeapon.object.series] ? (
+      {WeaponKeyNames[props.gridWeapon.object.series] && (
         <h5 className={tintElement}>
           {WeaponKeyNames[props.gridWeapon.object.series][locale]}
-          {locale === 'en' ? 's' : ''}
+          {locale === 'en' && 's'}
         </h5>
-      ) : (
-        ''
       )}
 
-      {props.gridWeapon.weapon_keys
+      {props.gridWeapon.weapon_keys?.map((weaponKey, i) => (
-        ? Array.from(Array(props.gridWeapon.weapon_keys.length)).map((x, i) => {
+        <div className={styles.weaponKey} key={weaponKey.id}>
-            return (
+          {[3, 34].includes(props.gridWeapon.object.series) && (
-              <div
+            <i className={styles.icon}>{telumaImage(i)}</i>
-                className={styles.weaponKey}
+          )}
-                key={props.gridWeapon.weapon_keys![i].id}
+          {props.gridWeapon.object.series === 17 && (
-              >
+            <i className={styles.icon}>{ultimaImage(i)}</i>
-                <span>{props.gridWeapon.weapon_keys![i].name[locale]}</span>
+          )}
-              </div>
+          {props.gridWeapon.object.series === 2 && (
-            )
+            <i className={styles.icon}>{opusImage(i)}</i>
-          })
+          )}
-        : ''}
+          <span>{weaponKey.name[locale]}</span>
+        </div>
+      ))}
     </section>
   )
 

components/weapon/WeaponModal/index.tsx

@@ -162,7 +162,7 @@ const WeaponModal = ({
     if ([2, 3, 17, 34].includes(gridWeapon.object.series) && weaponKey2)
       object.weapon.weapon_key2_id = weaponKey2.id
 
-    if (gridWeapon.object.series == 17 && weaponKey3)
+    if ([17, 34].includes(gridWeapon.object.series) && weaponKey3)
       object.weapon.weapon_key3_id = weaponKey3.id
 
     if (gridWeapon.object.ax && gridWeapon.object.ax_type > 0) {

components/weapon/WeaponUnit/index.tsx

@@ -238,23 +238,22 @@ const WeaponUnit = ({
 
   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.object.series === 3 || gridWeapon.object.series == 34) &&
       gridWeapon.weapon_keys
     ) {
-      if (index === 0 && gridWeapon.weapon_keys[0]) {
+      const weaponKey = gridWeapon.weapon_keys[index]
-        altText = `${gridWeapon.weapon_keys[0].name[locale]}`
+      const altText = weaponKey.name[locale]
-        filename = `${gridWeapon.weapon_keys[0].slug}.png`
+      let filename = `${weaponKey.slug}`
-      } else if (index === 1 && gridWeapon.weapon_keys[1]) {
-        altText = `${gridWeapon.weapon_keys[1].name[locale]}`
 
-        const element = gridWeapon.object.element
+      if (
-        filename = `${gridWeapon.weapon_keys[1].slug}-${element}.png`
+        index === 1 ||
+        (index === 2 && parseInt(weaponKey.granblue_id) === 15008)
+      ) {
+        filename += `-${gridWeapon.object.element}`
       }
 
       return (
@@ -262,7 +261,7 @@ const WeaponUnit = ({
           alt={altText}
           key={altText}
           className={styles.skill}
-          src={`${baseUrl}${filename}`}
+          src={`${baseUrl}${filename}.png`}
         />
       )
     }
@@ -272,7 +271,7 @@ const WeaponUnit = ({
     let images: JSX.Element[] = []
     if (
       gridWeapon &&
-      gridWeapon.object.series === 3 &&
+      (gridWeapon.object.series === 3 || gridWeapon.object.series === 34) &&
       gridWeapon.weapon_keys &&
       gridWeapon.weapon_keys.length > 0
     ) {
@@ -287,8 +286,6 @@ const WeaponUnit = ({
 
   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 (
@@ -296,34 +293,23 @@ const WeaponUnit = ({
       gridWeapon.object.series === 17 &&
       gridWeapon.weapon_keys
     ) {
-      if (
+      const weaponKey = gridWeapon.weapon_keys[index]
-        gridWeapon.weapon_keys[index] &&
+      const altText = weaponKey.name[locale]
-        (gridWeapon.weapon_keys[index].slot === 1 ||
+      let filename = weaponKey.slug
-          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
+      if (weaponKey.slot === 0) {
-
+        filename += `-${gridWeapon.object.proficiency}`
-        const suffix = `${weapon}`
-        filename = `${gridWeapon.weapon_keys[index].slug}-${suffix}.png`
       }
-    }
 
-    return (
+      return (
-      <img
+        <img
-        alt={altText}
+          alt={altText}
-        key={altText}
+          key={altText}
-        className={styles.skill}
+          className={styles.skill}
-        src={`${baseUrl}${filename}`}
+          src={`${baseUrl}${filename}.png`}
-      />
+        />
-    )
+      )
+    }
   }
 
   function ultimaImages() {
@@ -345,8 +331,6 @@ const WeaponUnit = ({
 
   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 (
@@ -354,39 +338,26 @@ const WeaponUnit = ({
       gridWeapon.object.series === 2 &&
       gridWeapon.weapon_keys
     ) {
-      if (
+      const weaponKey = gridWeapon.weapon_keys[index]
-        gridWeapon.weapon_keys[index] &&
+      const altText = weaponKey.name[locale]
-        gridWeapon.weapon_keys[index].slot === 0
+      let filename = weaponKey.slug
-      ) {
-        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]}`
 
+      if (weaponKey.slot === 1) {
         const element = gridWeapon.object.element
         const mod = gridWeapon.object.name.en.includes('Repudiation')
           ? 'primal'
           : 'magna'
+        const suffixes = [
+          'pendulum-strength',
+          'pendulum-zeal',
+          'pendulum-strife',
+          'chain-temperament',
+          'chain-restoration',
+          'chain-glorification',
+        ]
 
-        const suffix = `${mod}-${element}`
+        if (suffixes.includes(weaponKey.slug)) {
-        const weaponKey = gridWeapon.weapon_keys[index]
+          filename += `-${mod}-${element}`
-
-        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`
         }
       }
 
@@ -395,7 +366,7 @@ const WeaponUnit = ({
           alt={altText}
           key={altText}
           className={styles.skill}
-          src={`${baseUrl}${filename}`}
+          src={`${baseUrl}${filename}.png`}
         />
       )
     }

styles/themes.scss

@@ -178,6 +178,7 @@
   --null-bg: #{$null--bg--light};
   --null-bg-hover: #{$null--bg--hover--light};
   --null-text: #{$null--text--light};
+  --null-text-contrast: #{$null--text--light};
   --null-raid-text: #{$null--text--raid--light};
   --null-text-hover: #{$null--text--hover--light};
   --null-shadow: #{$null--shadow--light};
@@ -196,6 +197,7 @@
   --fire-bg-hover: #{$fire--bg--hover--light};
   --fire-portrait-bg: #{$fire--portrait--bg--light};
   --fire-text: #{$fire--text--light};
+  --fire-text-contrast: #{$fire--text--light};
   --fire-raid-text: #{$fire--text--raid--light};
   --fire-text-hover: #{$fire--text--hover--light};
   --fire-shadow: #{$fire--shadow--light};
@@ -205,6 +207,7 @@
   --water-bg-hover: #{$water--bg--hover--light};
   --water-portrait-bg: #{$water--portrait--bg--light};
   --water-text: #{$water--text--light};
+  --water-text-contrast: #{$water--text--light};
   --water-raid-text: #{$water--text--raid--light};
   --water-text-hover: #{$water--text--hover--light};
   --water-shadow: #{$water--shadow--light};
@@ -214,6 +217,7 @@
   --earth-bg-hover: #{$earth--bg--hover--light};
   --earth-portrait-bg: #{$earth--portrait--bg--light};
   --earth-text: #{$earth--text--light};
+  --earth-text-contrast: #{$earth--text--light};
   --earth-raid-text: #{$earth--text--raid--light};
   --earth-text-hover: #{$earth--text--hover--light};
   --earth-shadow: #{$earth--shadow--light};
@@ -223,6 +227,7 @@
   --dark-bg-hover: #{$dark--bg--hover--light};
   --dark-portrait-bg: #{$dark--portrait--bg--light};
   --dark-text: #{$dark--text--light};
+  --dark-text-contrast: #{$dark--text--light};
   --dark-raid-text: #{$dark--text--raid--light};
   --dark-text-hover: #{$dark--text--hover--light};
   --dark-shadow: #{$dark--shadow--light};
@@ -232,6 +237,7 @@
   --light-bg-hover: #{$light--bg--hover--light};
   --light-portrait-bg: #{$light--portrait--bg--light};
   --light-text: #{$light--text--light};
+  --light-text-contrast: #{$light--text--light};
   --light-raid-text: #{$light--text--raid--light};
   --light-text-hover: #{$light--text--hover--light};
   --light-shadow: #{$light--shadow--light};
@@ -422,6 +428,7 @@
   --null-bg: #{$null--bg--dark};
   --null-bg-hover: #{$null--bg--hover--dark};
   --null-text: #{$null--text--dark};
+  --null-contrast-text: #{$null--text--contrast};
   --null-raid-text: #{$null--text--raid--dark};
   --null-text-hover: #{$null--text--hover--dark};
   --null-shadow: #{$null--shadow--dark};
@@ -432,6 +439,7 @@
   --wind-portrait-bg: #{$wind--portrait--bg--dark};
   --wind-text: #{$wind--text--dark};
   --wind-raid-text: #{$wind--text--raid--dark};
+  --wind-text-contrast: #{$wind--text--contrast};
   --wind-text-hover: #{$wind--text--hover--dark};
   --wind-shadow: #{$wind--shadow--dark};
   --wind-shadow-hover: #{$wind--shadow--dark--hover};
@@ -440,6 +448,7 @@
   --fire-bg-hover: #{$fire--bg--hover--dark};
   --fire-portrait-bg: #{$fire--portrait--bg--dark};
   --fire-text: #{$fire--text--dark};
+  --fire-text-contrast: #{$fire--text--contrast};
   --fire-raid-text: #{$fire--text--raid--dark};
   --fire-text-hover: #{$fire--text--hover--dark};
   --fire-shadow: #{$fire--shadow--dark};
@@ -449,6 +458,7 @@
   --water-bg-hover: #{$water--bg--hover--dark};
   --water-portrait-bg: #{$water--portrait--bg--dark};
   --water-text: #{$water--text--dark};
+  --water-text-contrast: #{$water--text--contrast};
   --water-raid-text: #{$water--text--raid--dark};
   --water-text-hover: #{$water--text--hover--dark};
   --water-shadow: #{$water--shadow--dark};
@@ -458,6 +468,7 @@
   --earth-bg-hover: #{$earth--bg--hover--dark};
   --earth-portrait-bg: #{$earth--portrait--bg--dark};
   --earth-text: #{$earth--text--dark};
+  --earth-text-contrast: #{$earth--text--contrast};
   --earth-raid-text: #{$earth--text--raid--dark};
   --earth-text-hover: #{$earth--text--hover--dark};
   --earth-shadow: #{$earth--shadow--dark};
@@ -467,6 +478,7 @@
   --dark-bg-hover: #{$dark--bg--hover--dark};
   --dark-portrait-bg: #{$dark--portrait--bg--dark};
   --dark-text: #{$dark--text--dark};
+  --dark-text-contrast: #{$dark--text--contrast};
   --dark-raid-text: #{$dark--text--raid--dark};
   --dark-text-hover: #{$dark--text--hover--dark};
   --dark-shadow: #{$dark--shadow--dark};
@@ -476,6 +488,7 @@
   --light-bg-hover: #{$light--bg--hover--dark};
   --light-portrait-bg: #{$light--portrait--bg--dark};
   --light-text: #{$light--text--dark};
+  --light-text-contrast: #{$light--text--contrast};
   --light-raid-text: #{$light--text--raid--dark};
   --light-text-hover: #{$light--text--hover--dark};
   --light-shadow: #{$light--shadow--dark};

styles/variables.scss

@@ -485,7 +485,8 @@ $wind--bg--hover--light: $wind-bg-00;
 $wind--bg--hover--dark: $wind-bg-00;
 
 $wind--text--light: $wind-text-20;
-$wind--text--dark: $wind-text-20;
+$wind--text--dark: $wind-text-30;
+$wind--text--contrast: $wind-text-10;
 
 $wind--text--raid--light: $wind-text-20;
 $wind--text--raid--dark: $wind-bg-10;
@@ -508,6 +509,7 @@ $null--bg--hover--dark: $grey-30;
 
 $null--text--light: $grey-40;
 $null--text--dark: $grey-90;
+$null--text--contrast: $grey-90;
 
 $null--text--raid--light: $grey-40;
 $null--text--raid--dark: $grey-90;
@@ -532,7 +534,8 @@ $fire--bg--hover--light: $fire-bg-00;
 $fire--bg--hover--dark: $fire-bg-00;
 
 $fire--text--light: $fire-text-20;
-$fire--text--dark: $fire-text-10;
+$fire--text--dark: $fire-text-30;
+$fire--text--contrast: $fire-text-10;
 
 $fire--text--raid--light: $fire-text-20;
 $fire--text--raid--dark: $fire-bg-10;
@@ -557,7 +560,8 @@ $water--bg--hover--light: $water-bg-00;
 $water--bg--hover--dark: $water-bg-00;
 
 $water--text--light: $water-text-20;
-$water--text--dark: $water-text-10;
+$water--text--dark: $water-text-30;
+$water--text--contrast: $water-text-10;
 
 $water--text--raid--light: $water-text-20;
 $water--text--raid--dark: $water-bg-10;
@@ -582,7 +586,8 @@ $earth--bg--hover--light: $earth-bg-00;
 $earth--bg--hover--dark: $earth-bg-00;
 
 $earth--text--light: $earth-text-20;
-$earth--text--dark: $earth-text-10;
+$earth--text--dark: $earth-text-30;
+$earth--text--contrast: $earth-text-10;
 
 $earth--text--raid--light: $earth-text-20;
 $earth--text--raid--dark: $earth-bg-10;
@@ -607,7 +612,8 @@ $dark--bg--hover--light: $dark-bg-00;
 $dark--bg--hover--dark: $dark-bg-00;
 
 $dark--text--light: $dark-text-20;
-$dark--text--dark: $dark-text-10;
+$dark--text--dark: $dark-text-30;
+$dark--text--contrast: $dark-text-10;
 
 $dark--text--raid--light: $dark-text-20;
 $dark--text--raid--dark: $dark-bg-10;
@@ -632,7 +638,8 @@ $light--bg--hover--light: $light-bg-00;
 $light--bg--hover--dark: $light-bg-00;
 
 $light--text--light: $light-text-20;
-$light--text--dark: $light-text-10;
+$light--text--dark: $light-text-30;
+$light--text--contrast: $light-text-10;
 
 $light--text--raid--light: $light-text-20;
 $light--text--raid--dark: $light-bg-10;