diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss
index 2bd75d7a..79f69ec1 100644
--- a/components/WeaponUnit/index.scss
+++ b/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%;
diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx
index aeebd6d0..87cdc43c 100644
--- a/components/WeaponUnit/index.tsx
+++ b/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 (
@@ -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 (
+
+ )
+ }
+ }
+
+ 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 = (