Merge pull request #197 from Yash8077/Feature-add-Barrel-Roll

Chaotic Feat: Added Barrell Roll Functionality

chaosweb-v@2/src/App.jsx

@@ -11,6 +11,7 @@ import ChaosMania from "./pages/ChaosMania";
 import ButtonCollection from "./pages/ButtonCollection";
 import { useState } from "react";
 import JumpScareEffect from "./components/JumpScareEffect";
+import BarrelRoll from "./pages/BarrelRoll";
 
 function App() {
     const [trigger, setTrigger] = useState(false);
@@ -40,6 +41,7 @@ function App() {
                     <Route path="/maze" element={<MazeGame />} />
                     <Route path="/chaosmania" element={<ChaosMania />} />
                     <Route path="/ButtonCollection" element={<ButtonCollection />} />
+                    <Route path="/BarrelRoll" element={<BarrelRoll />} />
                 </Routes>
             </div>
         </Router>

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

@@ -1662,6 +1662,9 @@ const Navbar = () => {
         <div className="nav-item">
           <InvertColorToggle /> {/* This will render the button */}
         </div>
+        <div className="nav-item" onClick={() => handleNavigate("/barrelroll")}>
+            Do a Barrel Roll
+        </div>
         <div className="nav-item" onClick={() => handleNavigate("/maze")}>
         Maze Game
       </div>

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

@@ -0,0 +1,95 @@
+/* App.css */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
+
+body, html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: 'Roboto', sans-serif;
+}
+
+.App {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #ff4d4d, #ffbe76);
+  overflow: hidden;
+  transition: transform 2s ease-in-out;
+}
+
+@keyframes barrel-roll {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.barrel-roll {
+  animation: barrel-roll 2s ease-in-out forwards;
+}
+
+.title {
+  font-size: 3rem;
+  color: white;
+  text-align: center;
+  animation: fadeIn 2s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.instructions {
+  font-size: 1.2rem;
+  color: #fff;
+  margin: 20px;
+  text-align: center;
+  max-width: 80%;
+  animation: fadeIn 3s ease-in-out;
+}
+
+.button {
+  padding: 15px 30px;
+  font-size: 1.2rem;
+  color: #ffbe76;
+  background-color: #2c3e50;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.button:hover {
+  background-color: #1abc9c;
+  transform: scale(1.1);
+}
+
+.star {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: #fff;
+  border-radius: 50%;
+  animation: float 4s ease-in-out infinite;
+}
+
+@keyframes float {
+  0% {
+    transform: translateY(0) translateX(0);
+  }
+  50% {
+    transform: translateY(-20px) translateX(10px);
+  }
+  100% {
+    transform: translateY(0) translateX(0);
+  }
+}

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

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import "./BarrelRoll.css"
+function BarrelRoll() {
+  const [roll, setRoll] = useState(false);
+
+  const handleBarrelRoll = () => {
+    setRoll(true);
+    setTimeout(() => setRoll(false), 2000);
+  };
+
+  const createStars = () => {
+    const stars = [];
+    for (let i = 0; i < 20; i++) {
+      const starStyle = {
+        top: `${Math.random() * 100}vh`,
+        left: `${Math.random() * 100}vw`,
+        animationDuration: `${Math.random() * 3 + 2}s`,
+        animationDelay: `${Math.random() * 2}s`
+      };
+      stars.push(<div key={i} className="star" style={starStyle} />);
+    }
+    return stars;
+  };
+
+  return (
+    <div className={`App ${roll ? 'barrel-roll' : ''}`} style={{position:"absolute",top:"0px",left:"0px",width:"100%",overflow:"hidden"}}>
+      <div className="title">Do a Barrel Roll!</div>
+      <div className="instructions">
+        Press the button below to spin the entire page. Enjoy the cosmic journey!
+      </div>
+      <button className="button" onClick={handleBarrelRoll}>Barrel Roll!</button>
+      {createStars()}
+    </div>
+  );
+}
+
+export default BarrelRoll;

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

@@ -1,13 +1,23 @@
-import React from "react";
-import Navbar from "../components/navbar";
-import BouncingDiv from "./BouncingDiv";
+// Home.jsx
+import React, { useState } from 'react';
+import Navbar from '../components/navbar';
+import BouncingDiv from './BouncingDiv';
+import BarrelRoll from './BarrelRoll';
+import "./BarrelRoll.css"
+
 const Home = () => {
+  const [roll, setRoll] = useState(false);
+
+  const handleBarrelRoll = () => {
+    setRoll(true);
+    setTimeout(() => setRoll(false), 2000);
+  };
+
   return (
-    <>
+    <div className={`home-container ${roll ? 'barrel-roll' : ''}`}>
       <Navbar />
-        <BouncingDiv />
-
-    </>
+      <BouncingDiv />
+    </div>
   );
 };