Merge pull request #119 from dragoni7/polish-diamond-animation

started polishing button
dragoni7 · Sep 21, 2024 · 8434fdc · 8434fdc
2 parents 24722e7 + 00b4680
commit 8434fdc
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 43 deletions.
diff --git a/src/components/SubclassSelector.css b/src/components/SubclassSelector.css
@@ -4,6 +4,7 @@
   justify-content: center;
   align-items: center;
   gap: 40px;
+  overflow: visible;
 }
 
 .diamond-grid {
@@ -49,23 +50,21 @@
   z-index: 1;
 }
 
-.diamond-button:hover img {
-  width: 100%;
-  height: 100%;
-}
-
 .button-1 {
   top: 0;
   left: 60px;
 }
+
 .button-2 {
   top: 60px;
   left: 0;
 }
+
 .button-3 {
   top: 60px;
   left: 120px;
 }
+
 .button-4 {
   top: 120px;
   left: 60px;
@@ -85,24 +84,12 @@
 .single-diamond-button::before {
   content: '';
   position: absolute;
-  transition: all 0.3s ease;
-}
-
-.single-diamond-button:not(.prismatic-selected)::before {
   top: 20px;
   left: 20px;
   right: 20px;
   bottom: 20px;
   transform: rotate(45deg);
-}
-
-.single-diamond-button.prismatic-selected::before {
-  top: 5px;
-  left: 5px;
-  right: 5px;
-  bottom: 5px;
-  border-radius: 50%;
-  border: none;
+  transition: all 0.3s ease;
 }
 
 .single-diamond-button:hover::before {
@@ -116,11 +103,6 @@
   z-index: 1;
 }
 
-.single-diamond-button:hover img {
-  width: 100%;
-  height: 100%;
-}
-
 .prismatic-button {
   width: 130px;
   height: 130px;
@@ -136,7 +118,6 @@
 
 .prismatic-glow {
   position: absolute;
-
   background: transparent;
   border-radius: 50%;
   transition: all 0.3s ease;
@@ -157,15 +138,6 @@
   border-radius: 50%;
 }
 
-.rotating-square {
-  position: absolute;
-  width: 180px;
-  height: 180px;
-  border: 1px solid rgba(172, 172, 172, 0.5);
-  opacity: 0.3;
-  z-index: -1;
-}
-
 .rotating-shape {
   position: absolute;
   width: 120px;
@@ -179,3 +151,13 @@
 .prismatic-button.diamond-shape .rotating-square {
   transform: rotate(45deg);
 }
+
+/* Styles for reduced size when prismatic is active */
+.prismatic-active .single-diamond-button {
+  transition: all 0.3s ease;
+
+}
+
+.prismatic-active.single-diamond-wrapper {
+  gap: 30px;
+}
diff --git a/src/components/SubclassSelector.tsx b/src/components/SubclassSelector.tsx
@@ -49,6 +49,12 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
     config: { duration: morphDuration },
   }));
 
+  // Swap animation adjustments
+  const [{ x }, swapApi] = useSpring(() => ({
+    x: 0,
+    config: { tension: 220, friction: 26 }, // Adjusted for smoother animation
+  }));
+
   const morph = useCallback(() => {
     setIsOblong(!isOblong);
     shapeApi.start({
@@ -116,14 +122,17 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
       setLastNonPrismaticSubclass(defaultSubclass);
       onSubclassSelect(defaultSubclass!);
     }
-  }, [selectedSubclass, subclasses, onSubclassSelect, lastNonPrismaticSubclass]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedSubclass, subclasses]);
 
   const handleSelect = (subclass: SubclassConfig) => {
     if (subclass.damageType === DAMAGE_TYPE.KINETIC) {
       setIsPrismaticActive(true);
+      swapApi.start({ x: 1 });
     } else {
       setIsPrismaticActive(false);
       setLastNonPrismaticSubclass(subclass);
+      swapApi.start({ x: 0 });
     }
     setCurrentSubclass(subclass);
     onSubclassSelect(subclass);
@@ -134,6 +143,7 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
       setIsPrismaticActive(false);
       setCurrentSubclass(lastNonPrismaticSubclass);
       onSubclassSelect(lastNonPrismaticSubclass);
+      swapApi.start({ x: 0 });
     }
   };
 
@@ -157,7 +167,13 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
   );
 
   return (
-    <div className="single-diamond-wrapper">
+    <animated.div
+      className={`single-diamond-wrapper ${isPrismaticActive ? 'prismatic-active' : ''}`}
+      style={{
+        // Adjusted swap animation for smoother transition
+        transform: x.to((x) => `translateX(${x * 40}px)`),
+      }}
+    >
       {!isPrismaticActive && (
         <div className="diamond-grid">
           {subclasses &&
@@ -211,8 +227,11 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
               className="diamond-icon"
             />
           </div>
-          <div
+          <animated.div
             className="single-diamond-button"
+            style={{
+              transform: x.to((x) => `scale(${1 - x * 0.4})`),
+            }}
             onClick={() => handleSelect(lastNonPrismaticSubclass!)}
             onContextMenu={(event) => {
               if (selectedSubclass?.damageType !== DAMAGE_TYPE.KINETIC)
@@ -224,12 +243,15 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
               alt={lastNonPrismaticSubclass!.subclass.name}
               className="diamond-icon"
             />
-          </div>
+          </animated.div>
         </>
       ) : (
         <>
-          <div
+          <animated.div
             className="single-diamond-button"
+            style={{
+              transform: x.to((x) => `scale(${1 - x * 0.4})`),
+            }}
             onContextMenu={(event) => {
               if (selectedSubclass?.damageType !== DAMAGE_TYPE.KINETIC)
                 handleRightClick(event, currentSubclass!);
@@ -242,7 +264,7 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
                 className="diamond-icon"
               />
             )}
-          </div>
+          </animated.div>
           {subclasses !== undefined && subclasses[DAMAGE_TYPE.KINETIC] ? (
             <div
               className="prismatic-button"
@@ -262,12 +284,10 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
                 className="circular-icon"
               />
             </div>
-          ) : (
-            false
-          )}
+          ) : null}
         </>
       )}
-    </div>
+    </animated.div>
   );
 };