Merge pull request #182 from sumitkumar9128/feature/scare-jumps

Add Dynamic Jump Scare Feature with Full Spookiness and Chaos

chaosweb-v@2/src/App.jsx

@@ -1,37 +1,49 @@
-
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Home from "./pages/home";
 import Contact from "./pages/contact";
 import Timeline from "./pages/timeline";
 import HypnoticChaos from "./pages/HypnoticChaos";
 import MazeGame from './components/MazeGame';
-import './index.css'
+import './index.css';
 import Review from "./pages/Review";
 import Contributors from "./pages/Contributors";
 import ChaosMania from "./pages/ChaosMania";
 import ButtonCollection from "./pages/ButtonCollection";
-
+import { useState } from "react";
+import JumpScareEffect from "./components/JumpScareEffect";
 
 function App() {
-  return (
-
-       <Router>
-
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/about" element={<Contributors />} />
-        <Route path="/contact" element={<Contact />} />
-        <Route path="/review" element={<Review />} />
-        <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>
+    const [trigger, setTrigger] = useState(false);
+
+    const handleJumpScare = () => {
+        console.log('Jump scare triggered!');
+        setTrigger(true);
+        setTimeout(() => setTrigger(false), 3000); 
+    };
+
+    return (
+        <Router>
+            <div
+                onMouseEnter={handleJumpScare} // Triggers on hover
+                onClick={handleJumpScare} // Triggers on click
+                style={{ height: '100vh', overflowY: 'scroll' }} 
+            >
+                <JumpScareEffect trigger={trigger} />
 
-    </Router>
-  );
-
+                <Routes>
+                    <Route path="/" element={<Home />} />
+                    <Route path="/about" element={<Contributors />} />
+                    <Route path="/contact" element={<Contact />} />
+                    <Route path="/review" element={<Review />} />
+                    <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>
+            </div>
+        </Router>
+    );
 }
 
 export default App;

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

@@ -0,0 +1,38 @@
+/* src/components/JumpScareEffect.css */
+.jump-scare {
+    position: fixed;
+    z-index: 1000;
+    pointer-events: none;
+    opacity: 0;
+    animation: chaoticFlicker 1.5s forwards;
+}
+
+.jump-scare img {
+    max-width: 100%;
+    height: auto;
+    transform: scale(1.2); /* Slightly larger for effect */
+}
+
+/* Keyframes for flickering and chaotic effect */
+@keyframes chaoticFlicker {
+    0% {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(1.5);
+    }
+    20%, 40% {
+        opacity: 1;
+        transform: translate(calc(-50% + 10px), calc(-50% + 10px)) scale(1);
+    }
+    30%, 50% {
+        opacity: 0.7;
+        transform: translate(calc(-50% - 10px), calc(-50% - 10px)) scale(1.1);
+    }
+    60%, 80% {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1.2);
+    }
+    100% {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.8);
+    }
+}

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

@@ -0,0 +1,109 @@
+// src/components/JumpScareEffect.jsx
+import React, { useEffect, useState } from 'react';
+import './JumpScareEffect.css';
+import jumpScareImage1 from '../assets/creepyImg/jump-scare.jpg';
+import jumpScareImage2 from '../assets/creepyImg/jump-scare-2.jpg';
+import jumpScareImage3 from '../assets/creepyImg/jump-scare-3.jpg';
+import jumpScareImage4 from '../assets/creepyImg/jump-scare-4.jpg';
+import jumpScareImage5 from '../assets/creepyImg/jump-scare-5.jpg';
+
+const images = [jumpScareImage1, jumpScareImage2, jumpScareImage3, jumpScareImage4, jumpScareImage5];
+
+const JumpScareEffect = ({ trigger }) => {
+    const [visible, setVisible] = useState(false);
+    const [currentImage, setCurrentImage] = useState(jumpScareImage1);
+    const [position, setPosition] = useState({ top: '50%', left: '50%' });
+
+    useEffect(() => {
+        if (trigger) {
+            const randomImage = images[Math.floor(Math.random() * images.length)];
+            setCurrentImage(randomImage);
+
+
+            const randomTop = `${Math.floor(Math.random() * 80) + 10}%`;
+            const randomLeft = `${Math.floor(Math.random() * 80) + 10}%`;
+            setPosition({ top: randomTop, left: randomLeft });
+
+            setVisible(true);
+            const timer = setTimeout(() => {
+                setVisible(false);
+            }, 1500); 
+            return () => clearTimeout(timer);
+        }
+    }, [trigger]);
+
+    return (
+        <>
+            {visible && (
+                <div className="jump-scare" style={{ top: position.top, left: position.left }}>
+                    <img src={currentImage} alt="Jump Scare" />
+                </div>
+            )}
+        </>
+    );
+};
+
+export default JumpScareEffect;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// // src/components/JumpScareEffect.jsx
+// import React, { useEffect, useState } from 'react';
+// import './JumpScareEffect.css';
+// import jumpScareImage1 from '../assets/creepyImg/jump-scare.jpg';
+// import jumpScareImage2 from '../assets/creepyImg/jump-scare-2.jpg';
+// import jumpScareImage3 from '../assets/creepyImg/jump-scare-3.jpg';
+// import jumpScareImage4 from '../assets/creepyImg/jump-scare-4.jpg';
+// import jumpScareImage5 from '../assets/creepyImg/jump-scare-5.jpg';
+
+// const images = [jumpScareImage1, jumpScareImage2, jumpScareImage3, jumpScareImage4, jumpScareImage5];
+
+// const JumpScareEffect = ({ trigger }) => {
+//     const [visible, setVisible] = useState(false);
+//     const [currentImage, setCurrentImage] = useState(jumpScareImage1);
+
+//     useEffect(() => {
+//         if (trigger) {
+//             // Randomly select an image each time
+//             const randomImage = images[Math.floor(Math.random() * images.length)];
+//             setCurrentImage(randomImage);
+//             setVisible(true);
+//             const timer = setTimeout(() => {
+//                 setVisible(false);
+//             }, 1500); // Display for 1.5 seconds
+//             return () => clearTimeout(timer);
+//         }
+//     }, [trigger]);
+
+//     return (
+//         <>
+//             {visible && (
+//                 <div className="jump-scare">
+//                     <img src={currentImage} alt="Jump Scare" />
+//                 </div>
+//             )}
+//         </>
+//     );
+// };
+
+// export default JumpScareEffect;
+
+
+