diff --git a/client/pages/NotFound.tsx b/client/pages/NotFound.tsx index 71650605..035dda8c 100644 --- a/client/pages/NotFound.tsx +++ b/client/pages/NotFound.tsx @@ -1,8 +1,44 @@ -import { useLocation } from "react-router-dom"; -import { useEffect } from "react"; +import { useState, useEffect, useCallback } from "react"; +import { useNavigate, useLocation } from "react-router-dom"; +import Layout from "@/components/Layout"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { + Home, + ArrowLeft, + Zap, + Target, + Star, + Trophy, + RefreshCw, + Search, + Gamepad2, + Shield, + Sparkles, + ChevronUp, + ChevronDown, + ChevronLeft, + ChevronRight +} from "lucide-react"; + +interface GameState { + score: number; + lives: number; + level: 1 | 2 | 3; + playerPosition: { x: number; y: number }; + collectibles: Array<{ x: number; y: number; id: number; collected: boolean }>; + gameActive: boolean; + gameWon: boolean; +} const NotFound = () => { + const navigate = useNavigate(); const location = useLocation(); + const [timeSpent, setTimeSpent] = useState(0); + const [showEasterEgg, setShowEasterEgg] = useState(false); + const [konami, setKonami] = useState([]); + const [currentQuote, setCurrentQuote] = useState(0); useEffect(() => { console.error( @@ -11,16 +47,363 @@ const NotFound = () => { ); }, [location.pathname]); + const quotes = [ + "404: Page not found, but your potential is infinite.", + "Error 404: This page is in another castle.", + "404: The page you seek is in another universe.", + "404: Lost in cyberspace? We'll guide you home.", + "404: Page not found, but great adventures await." + ]; + + const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight']; + + // Game state + const [gameState, setGameState] = useState({ + score: 0, + lives: 3, + level: 1, + playerPosition: { x: 5, y: 5 }, + collectibles: [], + gameActive: false, + gameWon: false + }); + + // Initialize collectibles + const initializeGame = useCallback(() => { + const newCollectibles = []; + for (let i = 0; i < 10; i++) { + newCollectibles.push({ + x: Math.floor(Math.random() * 10), + y: Math.floor(Math.random() * 10), + id: i, + collected: false + }); + } + setGameState(prev => ({ + ...prev, + collectibles: newCollectibles, + gameActive: true, + score: 0, + lives: 3, + playerPosition: { x: 5, y: 5 }, + gameWon: false + })); + }, []); + + // Timer and quote rotation + useEffect(() => { + const timer = setInterval(() => { + setTimeSpent(prev => prev + 1); + }, 1000); + + const quoteTimer = setInterval(() => { + setCurrentQuote(prev => (prev + 1) % quotes.length); + }, 3000); + + return () => { + clearInterval(timer); + clearInterval(quoteTimer); + }; + }, [quotes.length]); + + // Konami code detection + useEffect(() => { + const handleKeyPress = (e: KeyboardEvent) => { + const newKonami = [...konami, e.code].slice(-konamiCode.length); + setKonami(newKonami); + + if (JSON.stringify(newKonami) === JSON.stringify(konamiCode)) { + setShowEasterEgg(true); + setKonami([]); + } + }; + + window.addEventListener('keydown', handleKeyPress); + return () => window.removeEventListener('keydown', handleKeyPress); + }, [konami, konamiCode]); + + // Game controls + useEffect(() => { + const handleGameControls = (e: KeyboardEvent) => { + if (!gameState.gameActive) return; + + e.preventDefault(); + let newX = gameState.playerPosition.x; + let newY = gameState.playerPosition.y; + + switch (e.key) { + case 'ArrowUp': + case 'w': + newY = Math.max(0, newY - 1); + break; + case 'ArrowDown': + case 's': + newY = Math.min(9, newY + 1); + break; + case 'ArrowLeft': + case 'a': + newX = Math.max(0, newX - 1); + break; + case 'ArrowRight': + case 'd': + newX = Math.min(9, newX + 1); + break; + default: + return; + } + + setGameState(prev => { + const newPosition = { x: newX, y: newY }; + const updatedCollectibles = prev.collectibles.map(collectible => { + if (collectible.x === newX && collectible.y === newY && !collectible.collected) { + return { ...collectible, collected: true }; + } + return collectible; + }); + + const newScore = updatedCollectibles.filter(c => c.collected).length * 10; + const gameWon = updatedCollectibles.every(c => c.collected); + + return { + ...prev, + playerPosition: newPosition, + collectibles: updatedCollectibles, + score: newScore, + gameWon: gameWon, + gameActive: !gameWon + }; + }); + }; + + if (gameState.gameActive) { + window.addEventListener('keydown', handleGameControls); + return () => window.removeEventListener('keydown', handleGameControls); + } + }, [gameState.gameActive, gameState.playerPosition]); + + const renderGameGrid = () => { + const grid = []; + for (let y = 0; y < 10; y++) { + for (let x = 0; x < 10; x++) { + const isPlayer = gameState.playerPosition.x === x && gameState.playerPosition.y === y; + const collectible = gameState.collectibles.find(c => c.x === x && c.y === y && !c.collected); + + grid.push( +
+ {isPlayer && '🚀'} + {collectible && '⭐'} +
+ ); + } + } + return grid; + }; + return ( -
-
-

404

-

Oops! Page not found

- - Return to Home - + +
+
+ {/* Floating particles */} +
+ {[...Array(30)].map((_, i) => ( +
+ 404 +
+ ))} +
+ + {/* Main Content */} +
+ {/* Header */} +
+
+ AeThex Logo +
+ +

+ 404 +

+ +
+

+ System Anomaly Detected +

+

+ {quotes[currentQuote]} +

+
+ +
+ + + Time Lost: {timeSpent}s + + + + Location: {location.pathname} + +
+
+ + {/* Interactive Game Section */} + + + + + 404 Rescue Mission + + + Help the rocket collect all stars to unlock the way home! Use WASD or arrow keys. + + + + {!gameState.gameActive && !gameState.gameWon && ( + + )} + + {gameState.gameActive && ( +
+
+
+ Score: {gameState.score} +
+
+ Lives: {'❤️'.repeat(gameState.lives)} +
+
+ +
+ {renderGameGrid()} +
+ +
+ Collected: {gameState.collectibles.filter(c => c.collected).length} / {gameState.collectibles.length} +
+
+ )} + + {gameState.gameWon && ( +
+
+ +

Mission Complete!

+

+ You've rescued the lost page! Final Score: {gameState.score} +

+
+ +
+ )} + + + + {/* Easter Egg */} + {showEasterEgg && ( + + + +

+ 🎉 Konami Code Activated! 🎉 +

+

+ You've unlocked the secret developer mode! You're clearly a person of culture. +

+ + + + )} + + {/* Navigation Options */} +
+ + + + + +
+ + {/* Help Section */} + + + +

+ Lost? Try searching for what you need or{" "} + +

+ + + + {/* Fun Stats */} +
+

🎮 Try the Konami Code for a surprise!

+

⬆️⬆️⬇️⬇️⬅️➡️⬅️➡️

+
+
+
-
+ ); };