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
2023-12-30 07:28:33 -08:00 · 2023-12-30 07:28:33 -08:00 · b665d005d5
commit b665d005d5
parent 02fe61df88
7 changed files with 204 additions and 99 deletions
--- a/components/common/Button/index.module.scss
+++ b/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);
--- a/components/weapon/WeaponHovercard/index.module.scss
+++ b/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;
+      }
+    }
  }
 }
--- a/components/weapon/WeaponHovercard/index.tsx
+++ b/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
-        ? Array.from(Array(props.gridWeapon.weapon_keys.length)).map((x, i) => {
-            return (
-              <div
-                className={styles.weaponKey}
-                key={props.gridWeapon.weapon_keys![i].id}
-              >
-                <span>{props.gridWeapon.weapon_keys![i].name[locale]}</span>
-              </div>
-            )
-          })
-        : ''}
+      {props.gridWeapon.weapon_keys?.map((weaponKey, i) => (
+        <div className={styles.weaponKey} key={weaponKey.id}>
+          {[3, 34].includes(props.gridWeapon.object.series) && (
+            <i className={styles.icon}>{telumaImage(i)}</i>
+          )}
+          {props.gridWeapon.object.series === 17 && (
+            <i className={styles.icon}>{ultimaImage(i)}</i>
+          )}
+          {props.gridWeapon.object.series === 2 && (
+            <i className={styles.icon}>{opusImage(i)}</i>
+          )}
+          <span>{weaponKey.name[locale]}</span>
+        </div>
+      ))}
    </section>
  )

--- a/components/weapon/WeaponModal/index.tsx
+++ b/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) {
--- a/components/weapon/WeaponUnit/index.tsx
+++ b/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]) {
-        altText = `${gridWeapon.weapon_keys[0].name[locale]}`
-        filename = `${gridWeapon.weapon_keys[0].slug}.png`
-      } else if (index === 1 && gridWeapon.weapon_keys[1]) {
-        altText = `${gridWeapon.weapon_keys[1].name[locale]}`
+      const weaponKey = gridWeapon.weapon_keys[index]
+      const altText = weaponKey.name[locale]
+      let filename = `${weaponKey.slug}`

-        const element = gridWeapon.object.element
-        filename = `${gridWeapon.weapon_keys[1].slug}-${element}.png`
+      if (
+        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 (
-        gridWeapon.weapon_keys[index] &&
-        (gridWeapon.weapon_keys[index].slot === 1 ||
-          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 weaponKey = gridWeapon.weapon_keys[index]
+      const altText = weaponKey.name[locale]
+      let filename = weaponKey.slug

-        const weapon = gridWeapon.object.proficiency
-
-        const suffix = `${weapon}`
-        filename = `${gridWeapon.weapon_keys[index].slug}-${suffix}.png`
+      if (weaponKey.slot === 0) {
+        filename += `-${gridWeapon.object.proficiency}`
      }
-    }

-    return (
-      <img
-        alt={altText}
-        key={altText}
-        className={styles.skill}
-        src={`${baseUrl}${filename}`}
-      />
-    )
+      return (
+        <img
+          alt={altText}
+          key={altText}
+          className={styles.skill}
+          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 (
-        gridWeapon.weapon_keys[index] &&
-        gridWeapon.weapon_keys[index].slot === 0
-      ) {
-        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]}`
+      const weaponKey = gridWeapon.weapon_keys[index]
+      const altText = weaponKey.name[locale]
+      let filename = weaponKey.slug

+      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}`
-        const weaponKey = gridWeapon.weapon_keys[index]
-
-        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`
+        if (suffixes.includes(weaponKey.slug)) {
+          filename += `-${mod}-${element}`
        }
      }

@ -395,7 +366,7 @@ const WeaponUnit = ({
          alt={altText}
          key={altText}
          className={styles.skill}
-          src={`${baseUrl}${filename}`}
+          src={`${baseUrl}${filename}.png`}
        />
      )
    }
--- a/styles/themes.scss
+++ b/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};
--- a/styles/variables.scss
+++ b/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;