From 7721b71fc4e05833896819cf4142c0f3fe25a204 Mon Sep 17 00:00:00 2001
From: Sammwy <sammwy.dev@gmail.com>
Date: Mon, 20 Jan 2025 13:58:53 -0300
Subject: [PATCH] =?UTF-8?q?feature:=20=F0=9F=8D=B3=20added=20shake=20effec?=
=?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.tsx | 46 +++++++++++++++++++++++++++++++++++++++++++---
src/index.css | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 94 insertions(+), 3 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index cf23cca..cf76232 100644
--- a/src/App.tsx
+++ b/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">
diff --git a/src/index.css b/src/index.css
index b5c61c9..18aaa52 100644
--- a/src/index.css
+++ b/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);
+ }
+}