feat: add hype-gauge shake effect

Console-buche · Jul 31, 2023 · 29ec708 · 29ec708
1 parent d857f55
commit 29ec708
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 7 deletions.
diff --git a/src/components/hud/HypeGauge/HypeGauge.tsx b/src/components/hud/HypeGauge/HypeGauge.tsx
@@ -8,18 +8,21 @@ type Props = {
 };
 
 const getImageNameFromHype = (hype: number) => {
-  if (hype < 50) {
-    return 'lame';
-  }
-  if (hype >= 50 && hype < 75) {
-    return 'fun';
-  }
+  if (hypeToDegree(hype) <= -127) return 'lame';
+  if (hypeToDegree(hype) < 40) return 'fun';
   return 'overload';
 };
 
 export const HypeGauge = ({ hype }: Props) => {
+  const shake =
+    hypeToDegree(hype) <= -127
+      ? ''
+      : hypeToDegree(hype) < 40
+      ? 'light-shake'
+      : 'hard-shake';
+
   return (
-    <div className="hype__gauge__container">
+    <div className={`hype__gauge__container ${shake}`}>
       <img
         src={`/assets/hud/gauge_${getImageNameFromHype(hype)}.png`}
         alt="hype gauge meter"

diff --git a/src/components/hud/hud.css b/src/components/hud/hud.css
@@ -22,3 +22,50 @@
 .center {
   text-align: center;
 }
+
+/* light shake */
+@keyframes light-shake {
+  0% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  25% {
+    transform: translate(2px, 2px) rotate(2deg);
+  }
+  50% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  75% {
+    transform: translate(-2px, 2px) rotate(-2deg);
+  }
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+}
+.light-shake {
+  animation: light-shake 0.1s infinite;
+}
+
+/* hard shake */
+@keyframes hard-shake {
+  0% {
+    transform: translate(0, 0) rotate(0deg) scale(1);
+  }
+  25% {
+    transform: translate(3px, 3px) rotate(3deg) scale(1.1);
+    filter: drop-shadow(0 0 0.75rem #da1b1b);
+  }
+  50% {
+    transform: translate(0, 0) rotate(0deg) scale(1);
+  }
+  75% {
+    transform: translate(-3px, 3px) rotate(-3deg) scale(1.1);
+    filter: drop-shadow(0 0 1.3rem #da1b1b);
+  }
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+}
+
+.hard-shake {
+  animation: hard-shake 0.1s infinite;
+}