Display AX skills on WeaponUnit

components/WeaponUnit/index.scss

@@ -48,6 +48,16 @@
         left: -3.5%;
       }
 
+      .Modifiers > .AxSkills {
+        bottom: 12%;
+        right: -3.5%;
+
+        & > .AxSkill {
+          width: 25%;
+          height: auto;
+        }
+      }
+
       @media (max-width: $medium-screen) {
         width: 25vw;
       }
@@ -66,10 +76,20 @@
       .Awakening {
         width: 30%;
         height: auto;
-        top: 12%;
+        top: 14%;
         left: -3.5%;
       }
 
+      .Modifiers > .AxSkills {
+        bottom: 12%;
+        left: -3.5%;
+
+        & > .AxSkill {
+          width: 20%;
+          height: auto;
+        }
+      }
+
       @media (max-width: $medium-screen) {
         width: 20vw;
       }
@@ -124,10 +144,29 @@
     }
 
     .Awakening {
+      width: 100%;
+      height: 100%;
       position: absolute;
       z-index: 3;
     }
 
+    .Modifiers {
+      display: flex;
+      align-items: flex-end;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 3;
+
+      .AxSkills {
+        display: flex;
+        gap: $unit-fourth;
+        justify-content: flex-end;
+        padding: $unit-half;
+        width: 100%;
+      }
+    }
+
     img {
       position: relative;
       width: 100%;

components/WeaponUnit/index.tsx

@@ -11,6 +11,9 @@ import Button from '~components/Button'
 
 import type { SearchableObject } from '~types'
 
+import { axData } from '~utils/axData'
+import { weaponAwakening } from '~utils/awakening'
+
 import PlusIcon from '~public/icons/Add.svg'
 import SettingsIcon from '~public/icons/Settings.svg'
 import './index.scss'
@@ -77,9 +80,14 @@ const WeaponUnit = (props: Props) => {
       props.gridWeapon.awakening &&
       props.gridWeapon.awakening.type >= 0
     ) {
+      const awakening = weaponAwakening.find(
+        (awakening) => awakening.id === props.gridWeapon?.awakening?.type
+      )
+      const name = awakening?.name[locale]
+
       return (
         <img
-          alt="Awakening type"
+          alt={`${name} Lv${props.gridWeapon.awakening.level}`}
           className="Awakening"
           src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/awakening/weapon_${props.gridWeapon.awakening.type}.png`}
         />
@@ -87,6 +95,39 @@ const WeaponUnit = (props: Props) => {
     }
   }
 
+  function axImage(index: number) {
+    const axSkill = getCanonicalAxSkill(index)
+
+    if (
+      props.gridWeapon &&
+      props.gridWeapon.object.ax &&
+      props.gridWeapon.object.ax > 0 &&
+      props.gridWeapon.ax &&
+      axSkill
+    ) {
+      return (
+        <img
+          alt={`axskill`}
+          className="AxSkill"
+          src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/ax/${axSkill.slug}.png`}
+        />
+      )
+    }
+  }
+
+  function getCanonicalAxSkill(index: number) {
+    if (
+      props.gridWeapon &&
+      props.gridWeapon.object.ax &&
+      props.gridWeapon.object.ax > 0 &&
+      props.gridWeapon.ax
+    ) {
+      const axOptions = axData[props.gridWeapon.object.ax - 1]
+      const weaponAxSkill: SimpleAxSkill = props.gridWeapon.ax[index]
+      return axOptions.find((ax) => ax.id === weaponAxSkill.modifier)
+    } else return
+  }
+
   function passUncapData(uncap: number) {
     if (props.gridWeapon)
       props.updateUncap(props.gridWeapon.id, props.position, uncap)
@@ -104,7 +145,13 @@ const WeaponUnit = (props: Props) => {
 
   const image = (
     <div className="WeaponImage">
-      {awakeningImage()}
+      <div className="Modifiers">
+        {awakeningImage()}
+        <div className="AxSkills">
+          {axImage(0)}
+          {axImage(1)}
+        </div>
+      </div>
       <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
       {props.editable ? (
         <span className="icon">