From 45691f0dc9eb6c8cdbac1ec8b5474e5a4ef2a90a Mon Sep 17 00:00:00 2001 From: Yash8077 Date: Tue, 22 Oct 2024 19:26:43 +0530 Subject: [PATCH] Added Dvd Logo --- chaosweb-v@2/src/pages/BouncingDiv.jsx | 128 +++++++++++++++++++++++++ chaosweb-v@2/src/pages/home.jsx | 4 +- 2 files changed, 131 insertions(+), 1 deletion(-) create mode 100644 chaosweb-v@2/src/pages/BouncingDiv.jsx diff --git a/chaosweb-v@2/src/pages/BouncingDiv.jsx b/chaosweb-v@2/src/pages/BouncingDiv.jsx new file mode 100644 index 0000000..3d85e72 --- /dev/null +++ b/chaosweb-v@2/src/pages/BouncingDiv.jsx @@ -0,0 +1,128 @@ +import React, { useEffect, useState } from "react"; +const randomColor = () => { + const letters = "0123456789ABCDEF"; + let color = "#"; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +}; + +const BouncingDiv = () => { + const [position, setPosition] = useState({ top: 100, left: 100 }); + const [direction, setDirection] = useState({ x: 3, y: 3 }); + const [rotation, setRotation] = useState(0); + const [color, setColor] = useState(randomColor()); + const [speedMultiplier, setSpeedMultiplier] = useState(1); + const [trails, setTrails] = useState([]); + + useEffect(() => { + const moveDiv = () => { + setPosition((prevPosition) => { + let newTop = prevPosition.top + direction.y * speedMultiplier; + let newLeft = prevPosition.left + direction.x * speedMultiplier; + + let newDirection = { ...direction }; + let newSpeedMultiplier = speedMultiplier; + + // Check for collision with the edges of the viewport + if (newTop <= 0 || newTop >= window.innerHeight - 100) { + newDirection.y = -newDirection.y; + newSpeedMultiplier = Math.random() * 2 + 1; // Random speed change + setColor(randomColor()); + } + + if (newLeft <= 0 || newLeft >= window.innerWidth - 100) { + newDirection.x = -newDirection.x; + newSpeedMultiplier = Math.random() * 2 + 1; // Random speed change + setColor(randomColor()); + } + + setDirection(newDirection); + setSpeedMultiplier(newSpeedMultiplier); + setRotation((prevRotation) => prevRotation + 5); // Rotate by 5 degrees + + // Add the current position to the trail + setTrails((prevTrails) => [ + ...prevTrails, + { position: { top: newTop, left: newLeft }, color: color }, + ]); + + return { top: newTop, left: newLeft }; + }); + }; + + const intervalId = setInterval(moveDiv, 20); + + return () => clearInterval(intervalId); + }, [direction, speedMultiplier, color]); + + // Remove old trails over time + useEffect(() => { + const trailInterval = setInterval(() => { + setTrails((prevTrails) => + prevTrails.length > 10 ? prevTrails.slice(1) : prevTrails + ); + }, 200); + + return () => clearInterval(trailInterval); + }, []); + + return ( + <> + {trails.map((trail, index) => ( +
+ ))} + +
+ {/* Transparent DVD Logo */} + + + + + +
+ + ); +}; + +export default BouncingDiv; diff --git a/chaosweb-v@2/src/pages/home.jsx b/chaosweb-v@2/src/pages/home.jsx index f4451ad..c7c94b3 100644 --- a/chaosweb-v@2/src/pages/home.jsx +++ b/chaosweb-v@2/src/pages/home.jsx @@ -1,10 +1,12 @@ import React from "react"; import Navbar from "../components/navbar"; - +import BouncingDiv from "./BouncingDiv"; const Home = () => { return ( <> + + ); };