diff --git a/IMG_20241015_121622.jpg b/IMG_20241015_121622.jpg new file mode 100644 index 0000000..c0d9977 Binary files /dev/null and b/IMG_20241015_121622.jpg differ diff --git a/assets/mazeIcon.png b/assets/mazeIcon.png new file mode 100644 index 0000000..55ac445 Binary files /dev/null and b/assets/mazeIcon.png differ diff --git a/chaosweb-v@2/src/App.jsx b/chaosweb-v@2/src/App.jsx index 5507d41..8ee2129 100644 --- a/chaosweb-v@2/src/App.jsx +++ b/chaosweb-v@2/src/App.jsx @@ -1,15 +1,20 @@ -import React from "react"; + 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 Review from "./pages/Review"; import Contributors from "./pages/Contributors"; + function App() { return ( - + + + } /> } /> @@ -17,9 +22,12 @@ function App() { } /> } /> } /> + } /> + ); + } export default App; diff --git a/chaosweb-v@2/src/components/InvertColorToggle.jsx b/chaosweb-v@2/src/components/InvertColorToggle.jsx new file mode 100644 index 0000000..f4355db --- /dev/null +++ b/chaosweb-v@2/src/components/InvertColorToggle.jsx @@ -0,0 +1,37 @@ + +import { useState, useEffect } from "react"; + +const InvertColorToggle = () => { + + const [isInverted, setIsInverted] = useState(false); + + const handleToggle = (event) => { + + event.stopPropagation(); // Prevent click event from bubbling up + + setIsInverted(!isInverted); + }; + + useEffect(() => { + if (isInverted) { + + document.body.classList.add("inverted"); + } else { + document.body.classList.remove("inverted"); + } + }, [isInverted]); + + + return ( + + + ); +}; + + +export default InvertColorToggle; diff --git a/chaosweb-v@2/src/components/MazeGame.css b/chaosweb-v@2/src/components/MazeGame.css new file mode 100644 index 0000000..1a3dfcf --- /dev/null +++ b/chaosweb-v@2/src/components/MazeGame.css @@ -0,0 +1,252 @@ +.maze { + text-align: center; + position: relative; + overflow: hidden; + padding-top: 70px; + background: linear-gradient(120deg, rgba(0, 189, 252, 0.8), rgba(209, 25, 255, 0.8)); + background-size: 200% 200%; + animation: backgroundShift 10s ease infinite; /* Background shifting */ +} + +.maze-heading { + display: inline-block; + transition: all 0.3s ease; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + margin-bottom: 500%; + font-size: 48px; + animation: fadeInOut 1s infinite, chaoticHeadingMovement 7s ease-in-out infinite; /* Added chaotic movement */ +} + +.maze-grid { + display: inline-block; + margin: 20px 0; + animation: shakeRows 6s ease-in-out infinite; /* Shake rows */ +} + +.maze-row { + display: flex; + animation: bounceRows 4s ease-in-out infinite alternate; /* Bounce effect */ +} + +.maze-cell { + width: 40px; + height: 40px; + border: 1px solid #ccc; + box-sizing: border-box; + transition: background-color 0.3s, transform 0.3s, opacity 0.5s; + animation: sizeChange 2s infinite alternate, fadeInOut 5s infinite alternate, rotateSpin 4s linear infinite; /* Added rotation and spin effect */ +} + +/* Styles for walls */ +.wall { + background-color: #000000; + animation: shakeWalls 3s ease-in-out infinite, rotate 8s linear infinite; /* Added slower rotation */ +} + +/* Styles for player */ +.player { + background-color: #ff0000; + animation: jumpPlayer 2s ease-in-out infinite, shakePlayer 3s infinite; /* Added shake */ +} + +/* Styles for start point */ +.start { + background-color: #00ff00; + border: 2px solid #004d00; + box-shadow: 0 0 10px #00ff00; + animation: spinStart 6s linear infinite, opacityChange 2s infinite alternate; /* Added opacity change */ +} + +/* Styles for end point */ +.end { + background-color: #0000ff; + border: 2px solid #000099; + box-shadow: 0 0 10px #0000ff; + animation: flashEnd 1s ease-in-out infinite alternate, shakeEnd 3s infinite; /* Added shake effect */ +} + +/* Styles for the game over message */ +.game-over { + color: green; + font-size: 20px; + margin-top: 20px; +} + +/* Animation for the heading */ +h2 { + animation: colorChange 0.5s linear infinite; /* Color changing effect */ + transition: font-size 0.5s, top 0.5s, left 0.5s; +} + +/* Bottom heading remains unchanged */ +.bottom-heading { + font-size: 25px; /* Keep the font size */ + + color: white; /* Text color */ + padding: 20px; /* Padding for better appearance */ + border-radius: 10px; /* Rounded corners */ + position: absolute; /* Position it absolutely */ + top: 20px; /* Adjust as needed */ + left: 20px; /* Position at the top left corner */ + animation: none; +} + + +/* Define keyframes for animations */ +@keyframes shakeRows { + 0%, 100% { transform: translateX(0); } + 50% { transform: translateX(-5px); } +} + +@keyframes bounceRows { + 0% { transform: translateY(0); } + 50% { transform: translateY(10px); } + 100% { transform: translateY(0); } +} + +@keyframes shakeWalls { + 0%, 100% { transform: translate(0); } + 25% { transform: translate(-3px, -3px); } + 50% { transform: translate(3px, 3px); } + 75% { transform: translate(-3px, 3px); } +} + +@keyframes jumpPlayer { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-15px); } +} + +@keyframes shakePlayer { + 0%, 100% { transform: translate(0); } + 50% { transform: translate(-3px, 3px); } +} + +@keyframes spinStart { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@keyframes flashEnd { + 0% { background-color: #0000ff; } + 100% { background-color: #ff00ff; } +} + +@keyframes shakeEnd { + 0%, 100% { transform: translate(0); } + 50% { transform: translate(3px, -3px); } +} + +@keyframes colorChange { + 0% { color: red; } + 25% { color: orange; } + 50% { color: yellow; } + 75% { color: green; } + 100% { color: blue; } +} + +/* Keyframes for the background movement */ +@keyframes backgroundShift { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +/* Keyframes for chaotic movement of bottom heading */ +@keyframes chaoticMovement { + 0% { left: 10%; top: 20%; } + 10% { left: 5%; top: 50%; } + 20% { left: 15%; top: 10%; } + 30% { left: 30%; top: 70%; } + 40% { left: 25%; top: 30%; } + 50% { left: 70%; top: 20%; } + 60% { left: 90%; top: 60%; } + 70% { left: 80%; top: 40%; } + 80% { left: 50%; top: 80%; } + 90% { left: 30%; top: 90%; } + 100% { left: 10%; top: 50%; } +} + +/* Keyframes for chaotic heading movement */ +@keyframes chaoticHeadingMovement { + 0% { + transform: translate(-50%, -50%) rotate(0deg) scale(1); + left: 50%; top: 0; + } + 10% { + transform: translate(-50%, -50%) rotate(10deg) scale(1.1); + left: 55%; top: 5%; + } + 20% { + transform: translate(-50%, -50%) rotate(-10deg) scale(0.9); + left: 45%; top: 15%; + } + 30% { + transform: translate(-50%, -50%) rotate(15deg) scale(1.2); + left: 40%; top: 25%; + } + 40% { + transform: translate(-50%, -50%) rotate(-15deg) scale(0.85); + left: 60%; top: 35%; + } + 50% { + transform: translate(-50%, -50%) rotate(20deg) scale(1.1); + left: 55%; top: 45%; + } + 60% { + transform: translate(-50%, -50%) rotate(-20deg) scale(1); + left: 50%; top: 50%; + } + 70% { + transform: translate(-50%, -50%) rotate(25deg) scale(1.05); + left: 40%; top: 55%; + } + 80% { + transform: translate(-50%, -50%) rotate(-25deg) scale(1); + left: 55%; top: 60%; + } + 90% { + transform: translate(-50%, -50%) rotate(30deg) scale(1.1); + left: 60%; top: 50%; + } + 100% { + transform: translate(-50%, -50%) rotate(0deg) scale(1); + left: 50%; top: 70%; + } +} + +/* Keyframes for wave motion */ +@keyframes bounceWave { + 0% { transform: translateY(0); } + 25% { transform: translateY(-5px); } + 50% { transform: translateY(10px); } + 75% { transform: translateY(-5px); } + 100% { transform: translateY(0); } +} + +/* Keyframes for random size changes */ +@keyframes sizeChange { + 0% { transform: scale(1); } + 25% { transform: scale(1.1); } + 50% { transform: scale(0.9); } + 75% { transform: scale(1.1); } + 100% { transform: scale(1); } +} + +/* Keyframes for opacity change */ +@keyframes fadeInOut { + 0% { opacity: 1; } + 50% { opacity: 0; } + 100% { opacity: 1; } +} + +/* Keyframes for rotating and spinning maze cells */ +@keyframes rotateSpin { + 0% { transform: rotate(0deg); } + 25% { transform: rotate(180deg); } + 50% { transform: rotate(360deg); } + 75% { transform: rotate(540deg); } + 100% { transform: rotate(720deg); } +} diff --git a/chaosweb-v@2/src/components/MazeGame.jsx b/chaosweb-v@2/src/components/MazeGame.jsx new file mode 100644 index 0000000..baf257d --- /dev/null +++ b/chaosweb-v@2/src/components/MazeGame.jsx @@ -0,0 +1,185 @@ +import { useState, useEffect, useCallback } from 'react'; +import './MazeGame.css'; + +const mazeDesigns = [ + [ + [0, 1, 0, 0, 0], + [0, 1, 1, 1, 0], + [0, 0, 0, 1, 0], + [1, 1, 0, 0, 0], + [0, 0, 1, 1, 0], + ], + [ + [0, 0, 1, 1, 0], + [1, 0, 0, 1, 0], + [1, 1, 0, 0, 0], + [0, 1, 1, 1, 0], + [0, 0, 0, 0, 0], + ], + [ + [0, 0, 1, 0, 0], + [1, 1, 1, 1, 0], + [0, 0, 0, 1, 0], + [0, 1, 0, 0, 0], + [0, 1, 1, 0, 0], + ], + [ + [0, 1, 1, 0, 0], + [0, 0, 1, 1, 0], + [1, 0, 0, 0, 0], + [0, 1, 1, 1, 0], + [0, 0, 0, 0, 0], + ], + [ + [0, 0, 0, 1, 0], + [1, 1, 0, 1, 0], + [0, 0, 0, 0, 0], + [1, 1, 1, 1, 0], + [0, 0, 0, 0, 0], + ], + [ + [0, 1, 0, 0, 0], + [0, 1, 1, 1, 0], + [0, 0, 0, 1, 0], + [1, 1, 0, 0, 0], + [0, 0, 0, 1, 0], + ], +]; + +const getRandomMaze = () => { + return mazeDesigns[Math.floor(Math.random() * mazeDesigns.length)]; +}; + +const getRandomColor = () => { + const letters = '0123456789ABCDEF'; + let color = '#'; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +}; + +// Function to get a random font size +const getRandomFontSize = () => { + return `${Math.random() * (32 - 16) + 16}px`; // Random size between 16px and 32px +}; + +const MazeGame = () => { + const [maze, setMaze] = useState(getRandomMaze()); + const [playerPos, setPlayerPos] = useState({ x: 0, y: 0 }); + const [gameOver, setGameOver] = useState(false); + const [headingStyle, setHeadingStyle] = useState({ + color: getRandomColor(), + }); + + // Move the player based on direction + const movePlayer = useCallback((dx, dy) => { + const newX = playerPos.x + dx; + const newY = playerPos.y + dy; + + if ( + newX >= 0 && + newX < maze.length && + newY >= 0 && + newY < maze[0].length && + maze[newX][newY] === 0 + ) { + setPlayerPos({ x: newX, y: newY }); + } + + // Check if player reached the end position + if (newX === maze.length - 1 && newY === maze[0].length - 1) { + setGameOver(true); + } + }, [maze, playerPos]); + + // Handle keypress events for player movement + useEffect(() => { + const handleKeyPress = (e) => { + if (gameOver) return; + + switch (e.key) { + case 'ArrowUp': + movePlayer(0, -1); + break; + case 'ArrowDown': + movePlayer(0, 1); + break; + case 'ArrowLeft': + movePlayer(-1, 0); + break; + case 'ArrowRight': + movePlayer(1, 0); + break; + default: + break; + } + }; + + window.addEventListener('keydown', handleKeyPress); + + return () => { + window.removeEventListener('keydown', handleKeyPress); + }; + }, [movePlayer, gameOver]); + + // Reset game to start a new maze + const resetGame = () => { + setMaze(getRandomMaze()); + setPlayerPos({ x: 0, y: 0 }); + setGameOver(false); + }; + + // Automatically reset game after winning + useEffect(() => { + if (gameOver) { + setTimeout(() => { + resetGame(); + }, 2000); + } + }, [gameOver]); + + // Change heading color every second + useEffect(() => { + const interval = setInterval(() => { + setHeadingStyle({ + color: getRandomColor(), + }); + }, 500); + + return () => clearInterval(interval); + }, []); + + const heading = "The Chaotic Maze Game"; + + return ( +
+

+ {heading.split("").map((char, index) => ( + + {char} + + ))} +

+ {gameOver &&
Congratulations! You reached the end!
} +
+ {maze.map((row, x) => ( +
+ {row.map((cell, y) => { + let cellClass = 'maze-cell'; + if (cell === 1) cellClass += ' wall'; // Wall style + if (x === playerPos.x && y === playerPos.y) cellClass += ' player'; // Player style + if (x === 0 && y === 0) cellClass += ' start'; // Start position + if (x === maze.length - 1 && y === maze[0].length - 1) cellClass += ' end'; // End position + return
; + })} +
+ ))} +
+

Can you navigate the chaos?

+

Use arrow keys to move

+
+ ); +}; + +export default MazeGame; diff --git a/chaosweb-v@2/src/components/navbar.css b/chaosweb-v@2/src/components/navbar.css index 448b857..f33a28f 100644 --- a/chaosweb-v@2/src/components/navbar.css +++ b/chaosweb-v@2/src/components/navbar.css @@ -6,6 +6,21 @@ box-sizing: border-box; } + +.toggle-button { + padding: 10px 20px; + background-color: #696d6e; /* Replace with your preferred color */ + color: white; /* Text color */ + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + } + + .toggle-button:hover { + background-color: #3700b3; /* Darker shade on hover */ + } + body { font-family: 'Oswald', sans-serif; height: 100vh; diff --git a/chaosweb-v@2/src/components/navbar.jsx b/chaosweb-v@2/src/components/navbar.jsx index ab0b8c7..8a6cb21 100644 --- a/chaosweb-v@2/src/components/navbar.jsx +++ b/chaosweb-v@2/src/components/navbar.jsx @@ -1,12 +1,17 @@ -import React, { useEffect, useState } from "react"; +import { 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 MazeGame from "./MazeGame"; +import Popup from "/src/components/popup"; // Import Popup component +import logo from "../assets/logo/logo.png"; import Popup from "/src/components/popup"; // Import Popup component import logo from "../assets/logo/logo.png"; - import appPages from "../utils/pages.js"; + const Navbar = () => { const [showPopup, setShowPopup] = useState(false); // State to control popup visibility const navigate = useNavigate(); // Initialize navigate hook @@ -175,6 +180,13 @@ const Navbar = () => { Home +
handleNavigate("/maze")}> + + Maze Game +
+ + + {/* Treasure Button start */}
{
{/* Treasure Button end */} +
handleNavigate("/about")} > + + + team work + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + About Us +
+
+ {/* This will render the button */} +
+ { About Us -
handleNavigate("/contact")} > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { fill="#ffb6b6" /> + Contact
{ id="signin" onClick={() => handleNavigate("/signin")} > + + + + + + + + + + + + + + + + + + + + + + + + + + { fill="#cbcbcb" /> + Sign In
handleNavigate("/testing")} + > + + + + + + + + + + + + + + + + + + + + + + + + + Testing +
+ + id="review" onClick={() => handleNavigate("/review")} > @@ -1189,11 +1668,121 @@ const Navbar = () => { Testing +
handleNavigate("/timeline")} > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { fill="#1894cb" /> + Timeline
{ Hypnotic Chaos
+ + {/* Render the Popup component conditionally */} diff --git a/chaosweb-v@2/src/index.css b/chaosweb-v@2/src/index.css index 6c6ba4a..c141cb1 100644 --- a/chaosweb-v@2/src/index.css +++ b/chaosweb-v@2/src/index.css @@ -1,4 +1,28 @@ +/* Inverted body style */ +body.inverted { + filter: + invert(1) + hue-rotate(180deg) + saturate(0.5) + brightness(1.2) + contrast(2) + sepia(0); + opacity: 1; +} + +body.inverted img, +body.inverted video { + filter: + invert(1) + hue-rotate(180deg) + saturate(0.3) + brightness(1.5) + contrast(2) + sepia(0); + opacity: 1; +} +/* Custom scrollbar styles */ ::-webkit-scrollbar { width: 7px; } @@ -18,4 +42,4 @@ ::-webkit-scrollbar-thumb:hover { background: rgba(222, 130, 235, 0.911); border-radius: 12px; -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index cd229c8..f7de2e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,7 @@ { - "name": "ChaosWeb-clone", + + "name": "ChaosWeb", + "lockfileVersion": 3, "requires": true, "packages": {}