rintyuu/MikuMikuBeam
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #17 from theDesConnet/main

Browse source 
feature: updating the attack animation
This commit is contained in:
Sammwy 2025-01-22 17:21:44 -03:00 • committed by GitHub
commit 3636508871
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 45 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/App.tsx
View file

@ -7,6 +7,7 @@ const socket = io("http://localhost:3000");
function App() { function App() {
const [isAttacking, setIsAttacking] = useState(false); const [isAttacking, setIsAttacking] = useState(false);
const [actuallyAttacking, setActuallyAttacking] = useState(false); const [actuallyAttacking, setActuallyAttacking] = useState(false);
const [animState, setAnimState] = useState(0);
const [logs, setLogs] = useState<string[]>([]); const [logs, setLogs] = useState<string[]>([]);
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
const [target, setTarget] = useState(""); const [target, setTarget] = useState("");
@ -29,7 +30,12 @@ function App() {
if (audioRef.current) { if (audioRef.current) {
const audio = audioRef.current; const audio = audioRef.current;
const handler = () => { const handler = () => {
if (!audio.paused && audio.currentTime > 17.53) { if (audio.paused) return;
if (animState !== 2 && audio.currentTime > 5.24 && audio.currentTime < 9.4) {
setAnimState(2);
}
if (audio.currentTime > 17.53) {
audio.currentTime = 15.86; audio.currentTime = 15.86;
} }
}; };
@ -44,6 +50,7 @@ function App() {
useEffect(() => { useEffect(() => {
if (!isAttacking) { if (!isAttacking) {
setActuallyAttacking(false); setActuallyAttacking(false);
setAnimState(0);
const audio = audioRef.current; const audio = audioRef.current;
if (audio) { if (audio) {
@ -124,10 +131,13 @@ function App() {
audioRef.current.play(); audioRef.current.play();
} }
if (!isQuick) setAnimState(1);
// Start attack after audio intro // Start attack after audio intro
const timeout = setTimeout( const timeout = setTimeout(
() => { () => {
setActuallyAttacking(true); setActuallyAttacking(true);
setAnimState(3);
socket.emit("startAttack", { socket.emit("startAttack", {
target, target,
packetSize, packetSize,
@ -148,7 +158,7 @@ function App() {
return ( return (
<div <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" : "" actuallyAttacking ? "shake" : ""
}`} }`}
> >
@ -159,13 +169,13 @@ function App() {
<h1 className="mb-2 text-4xl font-bold text-pink-500"> <h1 className="mb-2 text-4xl font-bold text-pink-500">
Miku Miku Beam Miku Miku Beam
</h1> </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 Because DDoS attacks are also cute and even more so when Miku does
them. them.
</p> </p>
</div> </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 */} {/* Miku GIF */}
<div <div
className="flex justify-center w-full h-48 mb-6" className="flex justify-center w-full h-48 mb-6"
@ -174,6 +184,8 @@ function App() {
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
backgroundPosition: "center", backgroundPosition: "center",
backgroundSize: "cover", backgroundSize: "cover",
opacity: animState === 0 || animState === 3 ? 1 : 0,
transition: "opacity 0.2s ease-in-out",
}} }}
></div> ></div>
@ -185,7 +197,7 @@ function App() {
value={target} value={target}
onChange={(e) => setTarget(e.target.value)} onChange={(e) => setTarget(e.target.value)}
placeholder="Enter target URL or IP" 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} disabled={isAttacking}
/> />
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -225,13 +237,13 @@ function App() {
<div className="grid grid-cols-4 gap-4"> <div className="grid grid-cols-4 gap-4">
<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"}`}>
Attack Method Attack Method
</label> </label>
<select <select
value={attackMethod} value={attackMethod}
onChange={(e) => setAttackMethod(e.target.value)} 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} disabled={isAttacking}
> >
<option value="http_flood">HTTP/Flood</option> <option value="http_flood">HTTP/Flood</option>
@ -241,42 +253,42 @@ function App() {
</select> </select>
</div> </div>
<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) Packet Size (kb)
</label> </label>
<input <input
type="number" type="number"
value={packetSize} value={packetSize}
onChange={(e) => setPacketSize(Number(e.target.value))} 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} disabled={isAttacking}
min="1" min="1"
max="1500" max="1500"
/> />
</div> </div>
<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) Duration (seconds)
</label> </label>
<input <input
type="number" type="number"
value={duration} value={duration}
onChange={(e) => setDuration(Number(e.target.value))} 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} disabled={isAttacking}
min="1" min="1"
max="300" max="300"
/> />
</div> </div>
<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) Packet Delay (ms)
</label> </label>
<input <input
type="number" type="number"
value={packetDelay} value={packetDelay}
onChange={(e) => setPacketDelay(Number(e.target.value))} 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} disabled={isAttacking}
min="1" min="1"
max="1000" max="1000"
@ -292,7 +304,7 @@ function App() {
<Zap className="w-4 h-4" /> <Zap className="w-4 h-4" />
<span className="font-semibold">Packets/sec</span> <span className="font-semibold">Packets/sec</span>
</div> </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()} {stats.pps.toLocaleString()}
</div> </div>
</div> </div>
@ -301,7 +313,7 @@ function App() {
<Bot className="w-4 h-4" /> <Bot className="w-4 h-4" />
<span className="font-semibold">Active Bots</span> <span className="font-semibold">Active Bots</span>
</div> </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()} {stats.bots.toLocaleString()}
</div> </div>
</div> </div>
@ -310,7 +322,7 @@ function App() {
<Wifi className="w-4 h-4" /> <Wifi className="w-4 h-4" />
<span className="font-semibold">Total Packets</span> <span className="font-semibold">Total Packets</span>
</div> </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()} {stats.totalPackets.toLocaleString()}
</div> </div>
</div> </div>

17
src/index.css
View file

@ -9,6 +9,23 @@ body {
background-color: black; 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 */ /* Infinite intense shaking */
.shake { .shake {
animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite; animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;