Merge pull request #228 from samriddhitiwary/Chaos/TypingUniverse

Chaos Typing Universe

chaosweb-v@2/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "chaosweb-v-2": "file:",
     "fireworks-js": "^2.10.8",
     "framer-motion": "^11.11.10",
     "react": "^18.3.1",

chaosweb-v@2/src/App.jsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+    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";
@@ -15,7 +15,8 @@ import BarrelRoll from "./pages/BarrelRoll";
 import RateUs from "./pages/RateUs";
 import TestEffects from "./pages/TestEffects";
 import Metadata from "./metadata"; 
-
+import ChaoticTypingTest from "./pages/ChaoticTypingTest";
+
 function App() {
     const [trigger, setTrigger] = useState(false);
 
@@ -48,6 +49,7 @@ function App() {
                     <Route path="/BarrelRoll" element={<BarrelRoll />} />
                     <Route path="/RateUs" element={<RateUs />} />
                     <Route path="/coloreffects" element={<TestEffects />} />
+                    <Route path="/chaotictypingTest" element={<ChaoticTypingTest />} />
                 </Routes>
             </div>
         </Router>

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

@@ -0,0 +1,178 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: Arial, sans-serif;
+    overflow: hidden;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    position: relative;
+    animation: flickerBackground 0.5s infinite alternate;
+  }
+
+  #container {
+    margin-top: 20%;
+    text-align: center;
+    z-index: 10;
+    max-width: 700px;
+    padding: 20px;
+    border: 3px solid #888;
+    border-radius: 10px;
+    background: rgba(0, 0, 0, 0.8);
+    animation: flashBackground 0.11s infinite alternate;
+  }
+
+  #scrambled-text {
+    font-size: 1.2em;
+    margin: 20px;
+    padding: 15px;
+    border-radius: 8px;
+    color: #f4f4f4;
+    min-height: 50px;
+    display: inline-block;
+    transition: all 0.3s ease;
+  }
+
+  #typed-output {
+    font-size: 1.5em;
+    margin-top: 20px;
+    color: #ff6347;
+    background-color: #222;
+    padding: 10px;
+    border-radius: 4px;
+    border: 2px solid #555;
+    min-height: 50px;
+    white-space: pre-wrap;
+    animation: flashBackground 0.11s infinite alternate;
+  }
+
+  .chaotic-element {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 1;
+    animation: moveChaos 2s infinite ease-in-out alternate;
+  }
+
+  .chaotic-element:nth-child(2n) {
+    animation-duration: 7s;
+    background-color: rgba(255, 0, 0, 0.6);
+  }
+
+  .chaotic-element:nth-child(3n) {
+    animation-duration: 6s;
+    background-color: rgba(0, 255, 0, 0.6);
+  }
+
+  .chaotic-element:nth-child(5n) {
+    animation-duration: 3s;
+    background-color: rgba(0, 0, 255, 0.6);
+  }
+
+  .chaotic-element:nth-child(7n) {
+    animation-duration: 4s;
+    background-color: rgba(255, 0, 255, 0.6);
+  }
+
+  .chaotic-element:nth-child(11n) {
+    animation-duration: 5s;
+    background-color: rgba(255, 255, 0, 0.6);
+  }
+
+  .thunderbolt {
+    position: absolute;
+    width: 10px;
+    height: 300px;
+    background: linear-gradient(to bottom, #fff, #ff0);
+    opacity: 1;
+    animation: thunderboltAnimation 2s infinite;
+    transform-origin: top;
+  }
+
+  @keyframes thunderboltAnimation {
+    0% {
+      opacity: 0;
+      transform: translate(50%, -100%) scaleY(0.2);
+    }
+    50% {
+      opacity: 1;
+      transform: translate(50%, 0) scaleY(1.5);
+    }
+    100% {
+      opacity: 0;
+      transform: translate(50%, -100%) scaleY(0.2);
+    }
+  }
+
+  @keyframes moveChaos {
+    0% {
+      transform: translate(0, 0) scale(1);
+    }
+    50% {
+      transform: translate(calc(100vw - 20px), calc(100vh - 20px)) scale(1.5) rotate(45deg);
+    }
+    100% {
+      transform: translate(calc(-100vw + 20px), calc(-100vh + 20px)) scale(0.8) rotate(-45deg);
+    }
+  }
+
+  @keyframes flickerBackground {
+    0%, 100% {
+      background-color: #1029e5;
+    }
+    20% {
+      background-color: #f0e405;
+    }
+    40% {
+      background-color: #e91414;
+    }
+    60% {
+      background-color: #0aebee;
+    }
+    80% {
+      background-color: #8b3ded;
+    }
+  }
+
+  .floating-title {
+    position: absolute;
+    font-size: 10em;
+    color: #90e4da;
+    animation: flickerText 0.6s infinite alternate;
+  }
+
+  @keyframes flickerText {
+    0%, 100% {
+      opacity: -10;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.3;
+      transform: scale(1.1);
+    }
+  }
+
+  .random-effect {
+    position: absolute;
+    font-size: 1.5em;
+    animation: chaoticEffect 1.5s ease-in-out infinite;
+  }
+
+  @keyframes chaoticEffect {
+    0%, 100% {
+      transform: rotate(0deg);
+      opacity: 1;
+    }
+    50% {
+      transform: rotate(180deg);
+      opacity: 0.5;
+    }
+  }
+
+
+

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

@@ -0,0 +1,93 @@
+import { useState, useEffect } from 'react';
+import './ChaoticTypingTest.css';
+
+const ChaoticTypingTest = () => {
+  const paragraph = "This is your typing paragraph. Try to type it accurately despite the chaos!";
+  const [typedText, setTypedText] = useState('');
+  const [scrambledText, setScrambledText] = useState(paragraph);
+
+  const scrambleParagraph = () => {
+    const scrambledParagraph = paragraph.split('').sort(() => Math.random() - 0.5).join('');
+    setScrambledText(scrambledParagraph);
+
+    const randomSize = Math.random() * (2 - 0.8) + 0.8;
+    const randomRotation = Math.random() * 360;
+    const randomX = Math.random() * 50;
+    const randomY = Math.random() * 50;
+
+    const scrambledTextEl = document.getElementById('scrambled-text');
+    scrambledTextEl.style.fontSize = `${randomSize}em`;
+    scrambledTextEl.style.transform = `rotate(${randomRotation}deg) translate(${randomX}%, ${randomY}%)`;
+  };
+
+  const randomLetterOrEmoji = () => {
+    const lettersAndEmojis = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz😊😂😎🎉✨💥🔥';
+    return lettersAndEmojis[Math.floor(Math.random() * lettersAndEmojis.length)];
+  };
+
+  const chaoticTyping = (event) => {
+    const typedChar = event.key;
+    setTypedText((prevText) => prevText + typedChar);
+
+    for (let i = 0; i < 100; i++) {
+      const chaoticElement = document.createElement('div');
+      chaoticElement.textContent = randomLetterOrEmoji();
+      chaoticElement.classList.add('random-effect');
+      chaoticElement.style.left = `${event.clientX + Math.random() * 300 - 50}px`;
+      chaoticElement.style.top = `${event.clientY + Math.random() * 300 - 50}px`;
+      document.body.appendChild(chaoticElement);
+      setTimeout(() => chaoticElement.remove(), 2000);
+    }
+  };
+
+  useEffect(() => {
+    const scrambleInterval = setInterval(() => {
+      scrambleParagraph();
+    }, 3000);
+
+    window.addEventListener('keydown', chaoticTyping);
+    window.addEventListener('click', chaoticTyping);
+
+    const titles = document.querySelectorAll('.floating-title');
+    titles.forEach(title => {
+      const randomX = Math.random() * 100;
+      const randomY = Math.random() * 100;
+      title.style.top = `${randomY}vh`;
+      title.style.left = `${randomX}vw`;
+    });
+
+    return () => {
+      clearInterval(scrambleInterval);
+      window.removeEventListener('keydown', chaoticTyping);
+      window.removeEventListener('click', chaoticTyping);
+    };
+  }, []);
+
+  return (
+    <div className="chaotic-typing-test">
+      <div id="floating-title-1" className="floating-title">ChAOtiC TYpiNg UniVeRSe</div>
+      <div id="floating-title-2" className="floating-title">Welcome to chaosWeb</div>
+
+      <div id="container">
+        <div id="scrambled-text">{scrambledText}</div>
+        <div id="typed-output">{typedText}</div>
+      </div>
+
+      <div className="chaotic-element" style={{ width: '100px', height: '100px', top: '10%', left: '20%' }}></div>
+      <div className="chaotic-element" style={{ width: '80px', height: '80px', top: '30%', left: '70%' }}></div>
+      <div className="chaotic-element" style={{ width: '120px', height: '120px', top: '50%', left: '40%' }}></div>
+      <div className="chaotic-element" style={{ width: '60px', height: '60px', top: '70%', left: '10%' }}></div>
+      <div className="chaotic-element" style={{ width: '90px', height: '90px', top: '80%', left: '60%' }}></div>
+
+      <div className="thunderbolt" style={{ left: '30%', top: '10%', animationDelay: '0.5s' }}></div>
+      <div className="thunderbolt" style={{ left: '70%', top: '30%', animationDelay: '0.15s' }}></div>
+      <div className="thunderbolt" style={{ left: '50%', top: '60%', animationDelay: '0.01s' }}></div>
+
+      <div className="thunderbolt" style={{ left: '90%', top: '90%', animationDelay: '0.5s' }}></div>
+      <div className="thunderbolt" style={{ left: '100%', top: '30%', animationDelay: '0.15s' }}></div>
+      <div className="thunderbolt" style={{ left: '120%', top: '60%', animationDelay: '0.01s' }}></div>
+    </div>
+  );
+};
+
+export default ChaoticTypingTest;

chaosweb-v@2/src/utils/pages.js

@@ -4,5 +4,6 @@ const appPages = [
   "/review",
   "/timeline",
   "/hypnotic",
+  "/chaotictypingTest",
 ];
 export default appPages;