Merge pull request #148 from Tamanna225/Feature/ChaosManiaAndButtonCo…

…llection

Added ChaosMania and ButtonCollections and added multiple chaotic reusable components

chaosweb-v@2/package.json

@@ -10,22 +10,29 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "fireworks-js": "^2.10.8",
     "react": "^18.3.1",
+    "react-confetti": "^6.1.0",
     "react-dom": "^18.3.1",
+    "react-fireworks": "^1.0.4",
     "react-router-dom": "^6.26.2",
     "react-slick": "^0.30.2",
+    "react-tsparticles": "^2.12.2",
     "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.11.1",
     "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
     "vite": "^5.4.8"
   }
 }

chaosweb-v@2/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

chaosweb-v@2/src/App.jsx

@@ -8,6 +8,8 @@ import MazeGame from './components/MazeGame';
 import './index.css'
 import Review from "./pages/Review";
 import Contributors from "./pages/Contributors";
+import ChaosMania from "./pages/ChaosMania";
+import ButtonCollection from "./pages/ButtonCollection";
 
 
 function App() {
@@ -23,6 +25,8 @@ function App() {
         <Route path="/timeline" element={<Timeline />} />
         <Route path="/hypnotic" element={<HypnoticChaos />} />
         <Route path="/maze" element={<MazeGame />} />
+        <Route path="/chaosmania" element={<ChaosMania />} />
+        <Route path= "/ButtonCollection" element={<ButtonCollection />} />
       </Routes>
 
     </Router>

chaosweb-v@2/src/components/FireRain.css

@@ -0,0 +1,36 @@
+.fire-rain-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; /* Allow interactions to pass through */
+  z-index: -1; /* Place behind other elements */
+  overflow: hidden;
+}
+
+.fire-drop {
+  position: absolute;
+  bottom: 100%; /* Start from above the viewport */
+  width: 12px; /* Adjusted width */
+  height: 25px; /* Adjusted height */
+  background: radial-gradient(circle, rgb(255, 166, 0) 0%, rgba(255, 100, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
+  border-radius: 50%;
+  box-shadow: 0 0 10px rgb(255, 166, 0), 0 0 20px rgb(255, 102, 0);
+  animation: fire-fall linear forwards;
+}
+
+@keyframes fire-fall {
+  0% {
+    transform: translateY(-10vh) scale(0.8); /* Start slightly smaller */
+    opacity: 1;
+  }
+  70% {
+    transform: translateY(100vh) scale(1); /* Drop down with scaling */
+    opacity: 1; /* Keep some opacity */
+  }
+  100% {
+    transform: translateY(110vh) scale(0.9); /* Slightly shrink before disappearing */
+    opacity: 1; /* Fade out */
+  }
+}

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

@@ -0,0 +1,33 @@
+import React, { useEffect, useRef } from 'react';
+import './FireRain.css'; // Ensure to import the CSS file
+
+const FireRain = () => {
+  const fireContainer = useRef(null);
+
+  useEffect(() => {
+    const createFireDrop = () => {
+      const fireDrop = document.createElement('div');
+      fireDrop.classList.add('fire-drop');
+      fireDrop.style.left = `${Math.random() * 100}vw`;
+      fireDrop.style.animationDuration = `${Math.random() * 3 + 2}s`;
+      fireDrop.style.opacity = `${Math.random() * 0.5 + 0.5}`;
+
+      fireContainer.current.appendChild(fireDrop);
+
+      // Remove fire drop after animation ends to avoid memory leaks
+      setTimeout(() => {
+        fireDrop.remove();
+      }, (Math.random() * 3 + 2) * 1000);
+    };
+
+    // Create a fire drop at intervals
+    const interval = setInterval(createFireDrop, 200);
+
+    // Cleanup interval on component unmount
+    return () => clearInterval(interval);
+  }, []);
+
+  return <div ref={fireContainer} className="fire-rain-container"></div>;
+};
+
+export default FireRain;

chaosweb-v@2/src/components/Firework.css

@@ -0,0 +1,34 @@
+.firework-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+  }
+
+  .firework {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background-color: transparent;
+    border-radius: 50%;
+    box-shadow: 0 0 10px 10px rgba(255, 255, 255, 1);
+    animation: explode 1.5s ease-out forwards;
+  }
+
+  @keyframes explode {
+    0% {
+      transform: scale(0);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(5);
+      opacity: 0.8;
+    }
+    100% {
+      transform: scale(10);
+      opacity: 0;
+    }
+  }
+

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

@@ -0,0 +1,42 @@
+import React, { useEffect, useRef } from 'react';
+import { Fireworks } from 'fireworks-js';
+
+const Firework = () => {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    const fireworks = new Fireworks(canvasRef.current, {
+      speed: 1, // Speed of fireworks
+      acceleration: 1.05, // Acceleration of the fireworks
+      friction: 0.95, // Friction applied to the fireworks
+      gravity: 1, // Gravity applied to the fireworks
+      particles: 100, // Number of particles in each firework
+      explosion: 5, // Number of explosions per firework
+      sound: false, // Enable or disable sound
+      colors: ['#ff0000', '#00ff00', '#0000ff'], // Colors of fireworks
+    });
+
+    fireworks.start();
+
+    return () => {
+      fireworks.stop(); // Cleanup on component unmount
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none', // Prevent interaction
+        zIndex: 1000,
+      }}
+    />
+  );
+};
+
+export default Firework;

chaosweb-v@2/src/components/FloatingRain.css

@@ -0,0 +1,47 @@
+/* FloatingRain.css */
+.rain-container {
+    position: fixed; /* Fixed positioning to overlay over other components */
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none; /* Prevent interaction with the shapes */
+  }
+
+  .shape {
+    position: absolute;
+    bottom: -50px; /* Start below the view */
+    animation-name: float;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes float {
+    to {
+      transform: translateY(-100vh); /* Move to the top of the viewport */
+    }
+  }
+
+  /* Shape styles */
+  .cuboid {
+    width: 30px;
+    height: 30px;
+    background-color: #ff4136; /* Red */
+    transform: rotate(45deg); /* Rotate to look like a cuboid */
+  }
+
+  .sphere {
+    width: 30px;
+    height: 30px;
+    background-color: #ffdc00; /* Yellow */
+    border-radius: 50%; /* Make it round */
+  }
+
+  .pyramid {
+    width: 0;
+    height: 0;
+    border-left: 15px solid transparent;
+    border-right: 15px solid transparent;
+    border-bottom: 30px solid #2ecc40; /* Green */
+  }
+

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

@@ -0,0 +1,40 @@
+import React, { useEffect, useRef } from 'react';
+import './FloatingRain.css'; // Ensure to import the CSS file
+
+const shapes = ['cuboid', 'sphere', 'pyramid'];
+
+const getRandomShape = () => {
+  return shapes[Math.floor(Math.random() * shapes.length)];
+};
+
+const FloatingRain = () => {
+  const rainContainer = useRef(null);
+
+  useEffect(() => {
+    const createShape = () => {
+      const shape = document.createElement('div');
+      shape.classList.add('shape', getRandomShape()); // Add a random shape class
+      shape.style.left = `${Math.random() * 100}vw`; // Random horizontal position
+      shape.style.animationDuration = `${Math.random() * 3 + 2}s`; // Random animation duration
+      shape.style.fontSize = `${Math.random() * 20 + 10}px`; // Random size
+      shape.style.opacity = `${Math.random() * 0.5 + 0.5}`; // Random opacity
+
+      rainContainer.current.appendChild(shape);
+
+      // Remove shape after animation ends to avoid memory leaks
+      setTimeout(() => {
+        shape.remove();
+      }, (parseFloat(shape.style.animationDuration) * 1000));
+    };
+
+    // Create a shape at intervals
+    const interval = setInterval(createShape, 500); // Adjust the interval for more or fewer shapes
+
+    // Cleanup interval on component unmount
+    return () => clearInterval(interval);
+  }, []);
+
+  return <div ref={rainContainer} className="rain-container"></div>;
+};
+
+export default FloatingRain;

chaosweb-v@2/src/components/Snowfall.css

@@ -0,0 +1,33 @@
+/* Snowfall.css */
+.snowfall-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: -1; /* Set behind other content */
+  }
+
+  .snowflake {
+    position: absolute;
+    top: -10px;
+    color: #fff;
+    user-select: none;
+    pointer-events: none;
+    animation: fall linear infinite;
+    opacity: 0.8;
+  }
+
+  @keyframes fall {
+    0% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    100% {
+      transform: translateY(100vh);
+      opacity: 0;
+    }
+  }
+

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

@@ -0,0 +1,35 @@
+import React, { useEffect, useRef } from 'react';
+import './Snowfall.css'; // Make sure to import the CSS file
+
+const Snowfall = () => {
+  const snowContainer = useRef(null);
+
+  useEffect(() => {
+    const createSnowflake = () => {
+      const snowflake = document.createElement('div');
+      snowflake.classList.add('snowflake');
+      snowflake.textContent = '❄'; // Unicode character for snowflake
+      snowflake.style.left = `${Math.random() * 100}vw`;
+      snowflake.style.animationDuration = `${Math.random() * 3 + 2}s`;
+      snowflake.style.fontSize = `${Math.random() * 20 + 10}px`;
+      snowflake.style.opacity = `${Math.random() * 0.5 + 0.5}`;
+
+      snowContainer.current.appendChild(snowflake);
+
+      // Remove snowflake after animation ends to avoid memory leaks
+      setTimeout(() => {
+        snowflake.remove();
+      }, (Math.random() * 3 + 2) * 1000);
+    };
+
+    // Create a snowflake at intervals
+    const interval = setInterval(createSnowflake, 200);
+
+    // Cleanup interval on component unmount
+    return () => clearInterval(interval);
+  }, []);
+
+  return <div ref={snowContainer} className="snowfall-container"></div>;
+};
+
+export default Snowfall;