vansh-codes · avogadroB · Oct 28, 2024
diff --git a/chaosweb-v@2/package-lock.json b/chaosweb-v@2/package-lock.json
diff --git a/chaosweb-v@2/package.json b/chaosweb-v@2/package.json
@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "start": "react-scripts start",
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
@@ -34,5 +35,17 @@
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.14",
     "vite": "^5.4.8"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }
diff --git a/chaosweb-v@2/public/assets/js/script.js b/chaosweb-v@2/public/assets/js/script.js
@@ -1,16 +1,14 @@
-
-const header = document.getElementById('chaos-header');
-const words = header.textContent.split(' ');
+header = document.getElementById('chaos-header');
+words = header.textContent.split(' ');
 header.innerHTML = words.map(word => `<span>${word}</span>`).join(' ');
 
-
-const navItems = document.querySelectorAll('.nav-item');
-const velocity = 3; // Initial speed of movement
-const collisionBuffer = 50; // Distance to consider for collision detection
-const itemSize = 100; // Approximate size of the nav items (width/height)
+navItems = document.querySelectorAll('.nav-item');
+velocity = 3; // Initial speed of movement
+collisionBuffer = 50; // Distance to consider for collision detection
+itemSize = 100; // Approximate size of the nav items (width/height)
 
 // Define a threshold for edge detection
-const edgeThreshold = 0; // Allow items to use the full page
+edgeThreshold = 0; // Allow items to use the full page
 
 // Function to generate random colors
 function getRandomColor() {
@@ -23,8 +21,9 @@ function getRandomColor() {
 }
 
 // Initialize positions and velocities for each nav item
+
 const fishData = Array.from(navItems).map(item => {
-    const position = {
+    position = {
         x: Math.random() * (window.innerWidth - itemSize),
         y: Math.random() * (window.innerHeight - itemSize)
     };
@@ -43,11 +42,11 @@ const fishData = Array.from(navItems).map(item => {
         target: null // Add target property for gliding back to the center
     };
 });
-
 // Function to update the positions of the nav items
 // Function to update the positions of the nav items
 // Function to update the positions of the nav items
 function updatePositions() {
+
     fishData.forEach((fish, index) => {
         // Update position based on velocity
         fish.position.x += fish.velocity.x;

diff --git a/chaosweb-v@2/index.html → chaosweb-v@2/public/index.html b/chaosweb-v@2/index.html → chaosweb-v@2/public/index.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/index.jsx"></script>
     <script>
       // The base title that should not fully change
       const titleText = "Chaotic Title!";

diff --git a/chaosweb-v@2/src/App.jsx b/chaosweb-v@2/src/App.jsx
@@ -1,16 +1,16 @@
 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 Home from "./pages/home.jsx";
+import Contact from "./pages/contact.jsx";
+import Timeline from "./pages/timeline.jsx";
+import HypnoticChaos from "./pages/HypnoticChaos.jsx";
+import MazeGame from './components/MazeGame.jsx';
 import './index.css';
-import Review from "./pages/Review";
-import Contributors from "./pages/Contributors";
-import ChaosMania from "./pages/ChaosMania";
-import ButtonCollection from "./pages/ButtonCollection";
+import Review from "./pages/Review.jsx";
+import Contributors from "./pages/Contributors.jsx";
+import ChaosMania from "./pages/ChaosMania.jsx";
+import ButtonCollection from "./pages/ButtonCollection.jsx";
 import { useState } from "react";
-import JumpScareEffect from "./components/JumpScareEffect";
+import JumpScareEffect from "./components/JumpScareEffect.jsx";
 
 function App() {
     const [trigger, setTrigger] = useState(false);

diff --git a/chaosweb-v@2/src/components/JumpScareEffect.jsx b/chaosweb-v@2/src/components/JumpScareEffect.jsx
@@ -1,11 +1,11 @@
 // 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';
+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];
 

diff --git a/chaosweb-v@2/src/components/navbar.jsx b/chaosweb-v@2/src/components/navbar.jsx
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation
 import "./navbar.css";
 // import logo from "../assets/logo/ChaosWeb.svg";
-import InvertColorToggle from "./InvertColorToggle";
-import Popup from "/src/components/popup"; // Import Popup component
+import InvertColorToggle from "./InvertColorToggle.jsx";
+import Popup from "./popup.jsx"; // Import Popup component
 import logo from "../assets/logo/logo.png";
 
 import appPages from "../utils/pages.js";

diff --git a/chaosweb-v@2/src/components/popup.jsx b/chaosweb-v@2/src/components/popup.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import monkeyImage from "/src/assets/monkey.jpg";
-import hamsterSound from "/src/assets/hamsterSound.mp3"
+import monkeyImage from "../assets/monkey.jpg";
+import hamsterSound from "../assets/hamsterSound.mp3"
 
 const Popup = ({ showPopup, setShowPopup }) => {
   const [isImageVisible, setIsImageVisible] = useState(false); // State to control image visibility

diff --git a/chaosweb-v@2/src/main.jsx → chaosweb-v@2/src/index.jsx b/chaosweb-v@2/src/main.jsx → chaosweb-v@2/src/index.jsx
diff --git a/chaosweb-v@2/src/pages/ButtonCollection.jsx b/chaosweb-v@2/src/pages/ButtonCollection.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import './ButtonCollection.css';
-import Popup from "../components/popup";
+import Popup from "../components/popup.jsx";
 
 
 const ButtonCollection = () => {
@@ -21,12 +21,10 @@ const ButtonCollection = () => {
 
   return (
     <div className="min-h-screen bg-[#1a1a2e] text-[#e0e0e0] p-10">
-      <header className="text-center mb-12">
         <h1 className="text-6xl font-extrabold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-500 via-pink-500 to-orange-400 drop-shadow-md">
           Button Mania
         </h1>
         <p className="text-lg text-gray-400">Explore the Unknown with our buttons</p>
-      </header>
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 shake-slow">
         {/* Game Card with Explosion Effect */}

diff --git a/chaosweb-v@2/src/pages/ChaosMania.jsx b/chaosweb-v@2/src/pages/ChaosMania.jsx
@@ -1,11 +1,11 @@
 import React, {useState} from "react";
 import './ChaosMania.css'; // Importing the CSS for cube styles
-import Snowfall from "../components/Snowfall";
+import Snowfall from "../components/Snowfall.jsx";
 import snowyImage from "../assets/snowstruct.png";
-import FireRain from "../components/FireRain";
-import Starfield from "../components/Starfield";
-import FloatingRain from "../components/FloatingRain";
-import Firework from "../components/Firework";
+import FireRain from "../components/FireRain.jsx";
+import Starfield from "../components/Starfield.jsx";
+import FloatingRain from "../components/FloatingRain.jsx";
+import Firework from "../components/Firework.jsx";
 const games = [
   { name: "Hyptonic Chaos", link: "/hypnotic" },
   { name: "Button Collection", link: "/ButtonCollection" },

diff --git a/chaosweb-v@2/src/pages/HypnoticChaos.jsx b/chaosweb-v@2/src/pages/HypnoticChaos.jsx
@@ -1,9 +1,16 @@
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Home from "./home.jsx";
+import app from "../App.jsx";
+import '../index.css';
+import { useState } from "react";
 import appPages from "../utils/pages.js";
+import { Link } from 'react-router-dom';
+
 
 const HypnoticChaos = () => {
+
   const navigate = useNavigate(); // Initialize navigate hook
   useEffect(() => {
     // --------------Random page navigation start-------------------------------
@@ -26,7 +33,16 @@ const HypnoticChaos = () => {
       var b = Math.floor(Math.random() * 256);
       return { r, g, b };
     }
-
+    function Home() {
+      return (
+        <div>
+          <h1>Home Page</h1>
+          <Link to="/app">
+            <button>Go to App Page</button>
+          </Link>
+        </div>
+      );
+    }
     function luminance(r, g, b) {
       var a = [r, g, b].map(function (v) {
         v /= 255;
@@ -107,13 +123,19 @@ const HypnoticChaos = () => {
       clearTimeout(timer); // clear random page navigation timeout
     };
   }, [navigate]);
-
+  function Home() {
+    const navigate = useNavigate();
+  }  
   return (
     <div className="parent">
       <div className="content">
         <div className="chaotic-text top-text">
           Welcome to Chaos! Where sanity is overrated.
         </div>
+        <div>
+      <h1>Home Page</h1>
+      <button onClick={() => navigate('/')}>Go to App Page</button>
+    </div>
         <canvas id="myCanvas" width="300" height="300"></canvas>
         <div className="chaotic-text bottom-text">
           Relax? Sure, if you like chaos!
@@ -176,6 +198,7 @@ const HypnoticChaos = () => {
         }
       `}</style>
     </div>
+
   );
 };