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 ( Awakening type @@ -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 ( + {`axskill`} + ) + } + } + + 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 = (
- {awakeningImage()} +
+ {awakeningImage()} +
+ {axImage(0)} + {axImage(1)} +
+
{weapon?.name.en} {props.editable ? (