From 4dbe3abad1eb7a5097180d3133039f1eda2b6690 Mon Sep 17 00:00:00 2001
From: "Roman U. (DesConnet)" <thedesconnet@ds1nc.ru>
Date: Wed, 22 Jan 2025 12:36:50 +0700
Subject: [PATCH] feature: updating the attack animation

---
 src/App.tsx   | 46 ++++++++++++++++++++++++++++++----------------
 src/index.css | 17 +++++++++++++++++
 2 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 11add29..b94f7a6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ const socket = io("http://localhost:3000");
 function App() {
   const [isAttacking, setIsAttacking] = useState(false);
   const [actuallyAttacking, setActuallyAttacking] = useState(false);
+  const [animState, setAnimState] = useState(0);
   const [logs, setLogs] = useState<string[]>([]);
   const [progress, setProgress] = useState(0);
   const [target, setTarget] = useState("");
@@ -29,7 +30,14 @@ function App() {
     if (audioRef.current) {
       const audio = audioRef.current;
       const handler = () => {
-        if (!audio.paused && audio.currentTime > 17.53) {
+        if (audio.paused) return;
+
+        console.log(audio.currentTime);
+
+        if (animState !== 2 && audio.currentTime > 5.24 && audio.currentTime < 9.4) {
+          setAnimState(2);
+        }
+        if (audio.currentTime > 17.53) {
           audio.currentTime = 15.86;
         }
       };
@@ -44,6 +52,7 @@ function App() {
   useEffect(() => {
     if (!isAttacking) {
       setActuallyAttacking(false);
+      setAnimState(0);
 
       const audio = audioRef.current;
       if (audio) {
@@ -124,10 +133,13 @@ function App() {
       audioRef.current.play();
     }
 
+    if (!isQuick) setAnimState(1);
+
     // Start attack after audio intro
     const timeout = setTimeout(
       () => {
         setActuallyAttacking(true);
+        setAnimState(3);
         socket.emit("startAttack", {
           target,
           packetSize,
@@ -148,7 +160,7 @@ function App() {
 
   return (
     <div
-      className={`w-screen h-screen bg-gradient-to-br from-pink-100 to-blue-100 p-8 overflow-y-auto ${
+      className={`w-screen h-screen bg-gradient-to-br ${animState === 0 || animState === 3 ? "from-pink-100 to-blue-100" : animState === 2 ? "background-pulse" : "bg-gray-950"} p-8 overflow-y-auto ${
         actuallyAttacking ? "shake" : ""
       }`}
     >
@@ -159,13 +171,13 @@ function App() {
           <h1 className="mb-2 text-4xl font-bold text-pink-500">
             Miku Miku Beam
           </h1>
-          <p className="text-gray-600">
+          <p className={`${animState === 0 || animState === 3 ? "text-gray-600" : "text-white"}`}>
             Because DDoS attacks are also cute and even more so when Miku does
             them.
           </p>
         </div>
 
-        <div className="relative p-6 overflow-hidden bg-white rounded-lg shadow-xl">
+        <div className={`relative p-6 overflow-hidden rounded-lg shadow-xl ${animState === 0 || animState === 3 ? "bg-white" : "bg-gray-950"}`}>
           {/* Miku GIF */}
           <div
             className="flex justify-center w-full h-48 mb-6"
@@ -174,6 +186,8 @@ function App() {
               backgroundRepeat: "no-repeat",
               backgroundPosition: "center",
               backgroundSize: "cover",
+              opacity: animState === 0 || animState === 3 ? 1 : 0,
+              transition: "opacity 0.2s ease-in-out",
             }}
           ></div>
 
@@ -185,7 +199,7 @@ function App() {
                 value={target}
                 onChange={(e) => setTarget(e.target.value)}
                 placeholder="Enter target URL or IP"
-                className="px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200"
+                className={`${animState === 0 || animState === 3 ? "" : "text-white"} px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
                 disabled={isAttacking}
               />
               <div className="flex items-center gap-2">
@@ -225,13 +239,13 @@ function App() {
 
             <div className="grid grid-cols-4 gap-4">
               <div>
-                <label className="block mb-1 text-sm font-medium text-gray-700">
+                <label className={`block mb-1 text-sm font-medium ${animState === 0 || animState === 3 ? "text-gray-700" : "text-white"}`}>
                   Attack Method
                 </label>
                 <select
                   value={attackMethod}
                   onChange={(e) => setAttackMethod(e.target.value)}
-                  className="w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200"
+                  className={`${animState === 0 || animState === 3 ? "" : "text-gray-900"} w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
                   disabled={isAttacking}
                 >
                   <option value="http_flood">HTTP/Flood</option>
@@ -241,42 +255,42 @@ function App() {
                 </select>
               </div>
               <div>
-                <label className="block mb-1 text-sm font-medium text-gray-700">
+                <label className={`block mb-1 text-sm font-medium ${animState === 0 || animState === 3 ? "text-gray-700" : "text-white"}`}>
                   Packet Size (kb)
                 </label>
                 <input
                   type="number"
                   value={packetSize}
                   onChange={(e) => setPacketSize(Number(e.target.value))}
-                  className="w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200"
+                  className={`${animState === 0 || animState === 3 ? "" : "text-white"} w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
                   disabled={isAttacking}
                   min="1"
                   max="1500"
                 />
               </div>
               <div>
-                <label className="block mb-1 text-sm font-medium text-gray-700">
+                <label className={`block mb-1 text-sm font-medium ${animState === 0 || animState === 3 ? "text-gray-700" : "text-white"}`}>
                   Duration (seconds)
                 </label>
                 <input
                   type="number"
                   value={duration}
                   onChange={(e) => setDuration(Number(e.target.value))}
-                  className="w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200"
+                  className={`${animState === 0 || animState === 3 ? "" : "text-white"} w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
                   disabled={isAttacking}
                   min="1"
                   max="300"
                 />
               </div>
               <div>
-                <label className="block mb-1 text-sm font-medium text-gray-700">
+                <label className={`block mb-1 text-sm font-medium ${animState === 0 || animState === 3 ? "text-gray-700" : "text-white"}`}>
                   Packet Delay (ms)
                 </label>
                 <input
                   type="number"
                   value={packetDelay}
                   onChange={(e) => setPacketDelay(Number(e.target.value))}
-                  className="w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200"
+                  className={`${animState === 0 || animState === 3 ? "" : "text-white"} w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
                   disabled={isAttacking}
                   min="1"
                   max="1000"
@@ -292,7 +306,7 @@ function App() {
                 <Zap className="w-4 h-4" />
                 <span className="font-semibold">Packets/sec</span>
               </div>
-              <div className="text-2xl font-bold text-gray-800">
+              <div className={`text-2xl font-bold ${animState === 0 || animState === 3 ? "text-gray-800" : "text-white"}`}>
                 {stats.pps.toLocaleString()}
               </div>
             </div>
@@ -301,7 +315,7 @@ function App() {
                 <Bot className="w-4 h-4" />
                 <span className="font-semibold">Active Bots</span>
               </div>
-              <div className="text-2xl font-bold text-gray-800">
+              <div className={`text-2xl font-bold ${animState === 0 || animState === 3 ? "text-gray-800" : "text-white"}`}>
                 {stats.bots.toLocaleString()}
               </div>
             </div>
@@ -310,7 +324,7 @@ function App() {
                 <Wifi className="w-4 h-4" />
                 <span className="font-semibold">Total Packets</span>
               </div>
-              <div className="text-2xl font-bold text-gray-800">
+              <div className={`text-2xl font-bold ${animState === 0 || animState === 3 ? "text-gray-800" : "text-white"}`}>
                 {stats.totalPackets.toLocaleString()}
               </div>
             </div>
diff --git a/src/index.css b/src/index.css
index e1e1ce2..196319a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,6 +9,23 @@ body {
   background-color: black;
 }
 
+.background-pulse {
+  animation: background-pulse 0.31s infinite;
+  transition: background-color 0.2s ease-in-out;
+}
+
+@keyframes background-pulse {
+  0% {
+    background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
+  }
+  50% {
+    background-color: rgb(48, 15, 31)
+  }
+  100% {
+    transform: rgb(3 7 18 / var(--tw-bg-opacity, 1));
+  }
+}
+
 /* Infinite intense shaking */
 .shake {
   animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;