Add display for Telumas and fix WeaponModal display

components/WeaponKeySelect/index.tsx

@@ -48,17 +48,17 @@ const WeaponKeySelect = React.forwardRef<HTMLButtonElement, Props>(
         )
         let groupedKeys = []
         for (let i = 0; i <= numGroups; i++) {
-          groupedKeys[i] = weaponKeys.filter((key) => key.group == i)
+          const values = weaponKeys.filter((key) => key.group == i)
+          if (values.length > 0) groupedKeys[i] = values
         }
 
-        setKeys(groupedKeys)
+        setKeys(groupedKeys.filter(() => true))
       }
 
       function fetchWeaponKeys() {
-        api.endpoints.weapon_keys.getAll(filterParams).then((response) => {
-          const keys = response.data
-          organizeWeaponKeys(keys)
-        })
+        api.endpoints.weapon_keys
+          .getAll(filterParams)
+          .then((response) => organizeWeaponKeys(response.data))
       }
 
       fetchWeaponKeys()
@@ -90,7 +90,7 @@ const WeaponKeySelect = React.forwardRef<HTMLButtonElement, Props>(
       if (props.series == 2 && index == 0) name = pendulumNames[0]
       else if (props.series == 2 && props.slot == 1 && index == 1)
         name = pendulumNames[1]
-      else if (props.series == 3) name = telumaNames[index]
+      else if (props.series == 3) name = telumaNames[0]
       else if (props.series == 17) name = gauphNames[props.slot]
       else if (props.series == 22) name = emblemNames[index]
 

components/WeaponUnit/index.scss

@@ -48,11 +48,11 @@
         left: -3.5%;
       }
 
-      .Modifiers > .AxSkills {
+      .Modifiers > .Skills {
         bottom: 12%;
         right: -3.5%;
 
-        & > .AxSkill {
+        & > .Skill {
           width: 25%;
           height: auto;
         }
@@ -80,11 +80,11 @@
         left: -3.5%;
       }
 
-      .Modifiers > .AxSkills {
+      .Modifiers > .Skills {
         bottom: 12%;
         left: -3.5%;
 
-        & > .AxSkill {
+        & > .Skill {
           width: 20%;
           height: auto;
         }
@@ -158,7 +158,7 @@
       position: absolute;
       z-index: 3;
 
-      .AxSkills {
+      .Skills {
         display: flex;
         gap: $unit-fourth;
         justify-content: flex-end;

components/WeaponUnit/index.tsx

@@ -11,6 +11,7 @@ import Button from '~components/Button'
 
 import type { SearchableObject } from '~types'
 
+import { appState } from '~utils/appState'
 import { axData } from '~utils/axData'
 import { weaponAwakening } from '~utils/awakening'
 
@@ -95,6 +96,37 @@ const WeaponUnit = (props: Props) => {
     }
   }
 
+  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 (
+      props.gridWeapon &&
+      props.gridWeapon.object.series === 3 &&
+      props.gridWeapon.weapon_keys
+    ) {
+      if (index === 0 && props.gridWeapon.weapon_keys[0]) {
+        altText = `${props.gridWeapon.weapon_keys[0].name[locale]}`
+        filename = `${props.gridWeapon.weapon_keys[0].slug}.png`
+      } else if (index === 1 && props.gridWeapon.weapon_keys[1]) {
+        altText = `${props.gridWeapon.weapon_keys[1].name[locale]}`
+
+        const element = props.gridWeapon.object.element
+        filename = `${props.gridWeapon.weapon_keys[1].slug}-${element}.png`
+      }
+
+      return (
+        <img
+          alt={`${altText}`}
+          className="Skill"
+          src={`${baseUrl}${filename}`}
+        />
+      )
+    }
+  }
+
   function axImage(index: number) {
     const axSkill = getCanonicalAxSkill(index)
 
@@ -108,7 +140,7 @@ const WeaponUnit = (props: Props) => {
       return (
         <img
           alt={`axskill`}
-          className="AxSkill"
+          className="Skill"
           src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/ax/${axSkill.slug}.png`}
         />
       )
@@ -157,9 +189,11 @@ const WeaponUnit = (props: Props) => {
     <div className="WeaponImage">
       <div className="Modifiers">
         {awakeningImage()}
-        <div className="AxSkills">
+        <div className="Skills">
           {axImage(0)}
           {axImage(1)}
+          {telumaImage(0)}
+          {telumaImage(1)}
         </div>
       </div>
       <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />