Merge pull request #210 from Yash8077/feature-add-effects

Chaotic Feature: Feature add effects

chaosweb-v@2/src/App.jsx

@@ -13,6 +13,7 @@ import { useState } from "react";
 import JumpScareEffect from "./components/JumpScareEffect";
 import BarrelRoll from "./pages/BarrelRoll";
 import RateUs from "./pages/RateUs";
+import TestEffects from "./pages/TestEffects";
 
 function App() {
     const [trigger, setTrigger] = useState(false);
@@ -44,6 +45,7 @@ function App() {
                     <Route path="/ButtonCollection" element={<ButtonCollection />} />
                     <Route path="/BarrelRoll" element={<BarrelRoll />} />
                     <Route path="/RateUs" element={<RateUs />} />
+                    <Route path="/coloreffects" element={<TestEffects />} />
                 </Routes>
             </div>
         </Router>

chaosweb-v@2/src/components/navbar.jsx

@@ -1671,6 +1671,9 @@ const Navbar = () => {
         <div className="nav-item" onClick={() => handleNavigate("/maze")}>
         Maze Game
       </div>
+      <div className="nav-item" onClick={() => handleNavigate("/coloreffects")}>
+        Cursor Effects !!
+      </div>
       <div className="nav-item" onClick={() => handleNavigate("/chaosmania")}>
         ChaosMania
       </div>

chaosweb-v@2/src/pages/ColorEffect.css

@@ -0,0 +1,59 @@
+.color-effect-container {
+    position: absolute;
+    top:0px;
+    left:0px;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  .effect {
+    position: absolute;
+    pointer-events: none;
+  }
+
+  .splash {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    animation: splashAnimation 1s ease-out forwards;
+    opacity: 0.8;
+  }
+
+  .shatter {
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 20px solid;
+    animation: shatterAnimation 1s ease-out forwards;
+    opacity: 0.8;
+  }
+
+  @keyframes splashAnimation {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(2);
+      opacity: 0.7;
+    }
+    100% {
+      transform: scale(0.5);
+      opacity: 0;
+    }
+  }
+
+  @keyframes shatterAnimation {
+    0% {
+      transform: scale(1) rotate(0deg);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.5) translate(50px, 50px) rotate(180deg);
+      opacity: 0;
+    }
+  }
+

chaosweb-v@2/src/pages/TestEffects.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import "./ColorEffect.css";
+
+const TestEffects = () => {
+  const [effects, setEffects] = useState([]);
+
+  const handleClick = (e) => {
+    const { clientX: x, clientY: y } = e;
+
+    const isShatter = Math.random() > 0.5;
+    const newEffects = Array.from({ length: 50 }).map(() => ({
+      x,
+      y,
+      offsetX: isShatter ? (Math.random() - 0.5) * 300 : (Math.random() - 0.5) * 300,
+      offsetY: isShatter ? (Math.random() - 0.5) * 300 : (Math.random() - 0.5) * 300,
+      rotation: isShatter ? Math.random() * 360 : 0,
+      color: `hsl(${Math.random() * 360}, 100%, 50%)`,
+      id: Math.random(),
+      type: isShatter ? "shatter" : "splash",
+    }));
+
+    setEffects((prev) => [...prev, ...newEffects]);
+
+    setTimeout(() => {
+      setEffects((prev) => prev.slice(newEffects.length));
+    }, 1000);
+  };
+
+  return (
+    <div className="color-effect-container" onClick={handleClick}>
+      {effects.map(({ x, y, offsetX, offsetY, rotation, color, id, type }) => (
+        <div
+          key={id}
+          className={`effect ${type}`}
+          style={{
+            left: x + offsetX,
+            top: y + offsetY,
+            backgroundColor: color,
+            transform: `rotate(${rotation}deg) translate(${offsetX}px, ${offsetY}px)`,
+          }}
+        />
+      ))}
+      <h1 style={{textAlign:"center",fontSize:"50px"}}>Click anywhere for a random color effect!</h1>
+    </div>
+  );
+};
+
+export default TestEffects;