From adde7e818257d4300a94b48d5c79cf684fb838df Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 23 Dec 2022 21:19:35 -0800
Subject: [PATCH] Add Awakening image to WeaponUnit

---
 components/WeaponUnit/index.scss | 22 +++++++++++++++++++++-
 components/WeaponUnit/index.tsx  | 18 ++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss
index 2b725eb1..2bd75d7a 100644
--- a/components/WeaponUnit/index.scss
+++ b/components/WeaponUnit/index.scss
@@ -41,6 +41,13 @@
       width: 200px;
       height: auto;
 
+      .Awakening {
+        width: 40%;
+        height: auto;
+        top: 67%;
+        left: -3.5%;
+      }
+
       @media (max-width: $medium-screen) {
         width: 25vw;
       }
@@ -56,6 +63,13 @@
       width: 160px;
       height: auto;
 
+      .Awakening {
+        width: 30%;
+        height: auto;
+        top: 12%;
+        left: -3.5%;
+      }
+
       @media (max-width: $medium-screen) {
         width: 20vw;
       }
@@ -81,7 +95,7 @@
     position: absolute;
     left: $unit;
     top: $unit;
-    z-index: 3;
+    z-index: 10;
   }
 
   h3 {
@@ -102,12 +116,18 @@
     justify-content: center;
     margin-bottom: calc($unit / 4);
     overflow: hidden;
+    position: relative;
     transition: all 0.18s ease-in-out;
 
     &:hover .icon svg {
       fill: var(--icon-secondary-hover);
     }
 
+    .Awakening {
+      position: absolute;
+      z-index: 3;
+    }
+
     img {
       position: relative;
       width: 100%;
diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx
index 15c0f82f..aeebd6d0 100644
--- a/components/WeaponUnit/index.tsx
+++ b/components/WeaponUnit/index.tsx
@@ -70,6 +70,23 @@ const WeaponUnit = (props: Props) => {
     setImageUrl(imgSrc)
   }
 
+  function awakeningImage() {
+    if (
+      props.gridWeapon &&
+      props.gridWeapon.object.awakening &&
+      props.gridWeapon.awakening &&
+      props.gridWeapon.awakening.type >= 0
+    ) {
+      return (
+        <img
+          alt="Awakening type"
+          className="Awakening"
+          src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/awakening/weapon_${props.gridWeapon.awakening.type}.png`}
+        />
+      )
+    }
+  }
+
   function passUncapData(uncap: number) {
     if (props.gridWeapon)
       props.updateUncap(props.gridWeapon.id, props.position, uncap)
@@ -87,6 +104,7 @@ const WeaponUnit = (props: Props) => {
 
   const image = (
     <div className="WeaponImage">
+      {awakeningImage()}
       <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
       {props.editable ? (
         <span className="icon">