From d9ed72827623a61c898cb3fa0b1cd08e30b41a10 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 29 Jan 2023 19:25:24 -0800
Subject: [PATCH] Add weapon awakenings to hovercard

---
 components/WeaponHovercard/index.scss | 24 +++++++++++++++++++--
 components/WeaponHovercard/index.tsx  | 30 +++++++++++++++++++++++++++
 components/WeaponModal/index.tsx      |  1 +
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/components/WeaponHovercard/index.scss b/components/WeaponHovercard/index.scss
index 20dabbea..2dd5ba5a 100644
--- a/components/WeaponHovercard/index.scss
+++ b/components/WeaponHovercard/index.scss
@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding-right: $unit * 2;
+    padding-right: $unit-2x;
 
     .axSkill {
       align-items: center;
@@ -36,6 +36,26 @@
     display: flex;
     flex-direction: column;
     font-size: $normal;
-    gap: calc($unit / 2);
+    gap: $unit-half;
+  }
+
+  .awakening {
+    display: flex;
+    flex-direction: column;
+    gap: $unit-half;
+
+    & > div {
+      align-items: center;
+      display: flex;
+      gap: $unit-half;
+
+      img {
+        width: $unit-4x;
+      }
+
+      strong {
+        font-weight: $bold;
+      }
+    }
   }
 }
diff --git a/components/WeaponHovercard/index.tsx b/components/WeaponHovercard/index.tsx
index 39b31ab1..8f91f5d3 100644
--- a/components/WeaponHovercard/index.tsx
+++ b/components/WeaponHovercard/index.tsx
@@ -11,6 +11,7 @@ import WeaponLabelIcon from '~components/WeaponLabelIcon'
 import UncapIndicator from '~components/UncapIndicator'
 
 import ax from '~data/ax'
+import { weaponAwakening } from '~data/awakening'
 
 import './index.scss'
 
@@ -135,6 +136,33 @@ const WeaponHovercard = (props: Props) => {
       return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`
   }
 
+  const awakeningSection = () => {
+    const gridAwakening = props.gridWeapon.awakening
+    const awakening = weaponAwakening.find(
+      (awakening) => awakening.id === gridAwakening?.type
+    )
+
+    if (gridAwakening && awakening) {
+      return (
+        <section className="awakening">
+          <h5 className={tintElement}>
+            {t('modals.weapon.subtitles.awakening')}
+          </h5>
+          <div>
+            <img
+              alt={awakening.name[locale]}
+              src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/awakening/weapon_${gridAwakening.type}.png`}
+            />
+            <span>
+              <strong>{`${awakening.name[locale]}`}</strong>&nbsp;
+              {`Lv${gridAwakening.level}`}
+            </span>
+          </div>
+        </section>
+      )
+    }
+  }
+
   const keysSection = (
     <section className="weaponKeys">
       {WeaponKeyNames[props.gridWeapon.object.series] ? (
@@ -243,9 +271,11 @@ const WeaponHovercard = (props: Props) => {
         props.gridWeapon.ax[0].strength
           ? axSection
           : ''}
+        {awakeningSection()}
         {props.gridWeapon.weapon_keys && props.gridWeapon.weapon_keys.length > 0
           ? keysSection
           : ''}
+
         <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
           {t('buttons.wiki')}
         </a>
diff --git a/components/WeaponModal/index.tsx b/components/WeaponModal/index.tsx
index 5cec601c..d7fcdec0 100644
--- a/components/WeaponModal/index.tsx
+++ b/components/WeaponModal/index.tsx
@@ -189,6 +189,7 @@ const WeaponModal = ({
     if (gridWeapon.mainhand) appState.grid.weapons.mainWeapon = gridWeapon
     else appState.grid.weapons.allWeapons[gridWeapon.position] = gridWeapon
 
+    if (onOpenChange) onOpenChange(false)
     setOpen(false)
   }