feature: 🍳 added shake effect

src/App.tsx

@@ -6,6 +6,7 @@ const socket = io("http://localhost:3000");
 
 function App() {
   const [isAttacking, setIsAttacking] = useState(false);
+  const [actuallyAttacking, setActuallyAttacking] = useState(false);
   const [logs, setLogs] = useState<string[]>([]);
   const [progress, setProgress] = useState(0);
   const [target, setTarget] = useState("");
@@ -20,8 +21,41 @@ function App() {
   });
   const [lastUpdatedPPS, setLastUpdatedPPS] = useState(Date.now());
   const [lastTotalPackets, setLastTotalPackets] = useState(0);
+  const [currentTask, setCurrentTask] = useState<NodeJS.Timeout | null>(null);
   const audioRef = useRef<HTMLAudioElement>(null);
 
+  useEffect(() => {
+    if (audioRef.current) {
+      const audio = audioRef.current;
+      const handler = () => {
+        if (!audio.paused && audio.currentTime > 17.53) {
+          audio.currentTime = 15.86;
+        }
+      };
+
+      audio.addEventListener("timeupdate", handler);
+      return () => {
+        audio.removeEventListener("timeupdate", handler);
+      };
+    }
+  }, [audioRef]);
+
+  useEffect(() => {
+    if (!isAttacking) {
+      setActuallyAttacking(false);
+
+      const audio = audioRef.current;
+      if (audio) {
+        audio.pause();
+        audio.currentTime = 0;
+      }
+
+      if (currentTask) {
+        clearTimeout(currentTask);
+      }
+    }
+  }, [isAttacking, currentTask]);
+
   useEffect(() => {
     const now = Date.now();
     if (now - lastUpdatedPPS >= 500) {
@@ -81,7 +115,8 @@ function App() {
     }
 
     // Start attack after audio intro
-    setTimeout(() => {
+    const timeout = setTimeout(() => {
+      setActuallyAttacking(true);
       socket.emit("startAttack", {
         target,
         packetSize,
@@ -89,7 +124,8 @@ function App() {
         packetDelay,
         attackMethod,
       });
-    }, 10000);
+    }, 10250);
+    setCurrentTask(timeout);
   };
 
   const stopAttack = () => {
@@ -98,7 +134,11 @@ function App() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-100 to-blue-100 p-8">
+    <div
+      className={`w-full h-full bg-gradient-to-br from-pink-100 to-blue-100 p-8 overflow-y-auto ${
+        actuallyAttacking ? "shake" : ""
+      }`}
+    >
       <audio ref={audioRef} src="/audio.mp3" />
 
       <div className="max-w-2xl mx-auto space-y-8">

src/index.css

@@ -1,3 +1,54 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+  background-color: black;
+}
+
+/* Infinite intense shaking */
+.shake {
+  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+@keyframes shake {
+  0% {
+    transform: translate(2px, 2px) rotate(0deg);
+  }
+  10% {
+    transform: translate(-2px, -4px) rotate(-1deg);
+  }
+  20% {
+    transform: translate(-6px, 0px) rotate(1deg);
+  }
+  30% {
+    transform: translate(6px, 4px) rotate(0deg);
+  }
+  40% {
+    transform: translate(2px, -2px) rotate(1deg);
+  }
+  50% {
+    transform: translate(-2px, 4px) rotate(-1deg);
+  }
+  60% {
+    transform: translate(-6px, 2px) rotate(0deg);
+  }
+  70% {
+    transform: translate(6px, 2px) rotate(-1deg);
+  }
+  80% {
+    transform: translate(-2px, -2px) rotate(1deg);
+  }
+  90% {
+    transform: translate(2px, 4px) rotate(0deg);
+  }
+  100% {
+    transform: translate(2px, -4px) rotate(-1deg);
+  }
+}