import React, { useState, useEffect, useRef, useMemo } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; import { Home, BarChart3, Settings, Flame, Zap, Brain, Target, RefreshCw, Cpu, Gamepad2, ArrowRight, Loader2, ArrowLeft, Volume2, VolumeX, Monitor, Smartphone, X, Power, Trophy, Star, Activity, Shield, Info, Search, Filter, TrendingUp, Award, Clock, ChevronRight, Mountain, CheckCircle2, Hexagon, Dice5, Crown, Lock } from 'lucide-react'; import { motion, AnimatePresence } from 'framer-motion'; // Services & Types import { StorageService } from '../services/storageService'; import { UserProfile, AppSettings } from '../types'; // UI Components import { Button } from '../components/ui/Button'; import { Logo } from '../components/ui/Logo'; import { GameShell } from '../components/ui/GameShell'; // Games import { SpeedZone } from '../games/SpeedZone'; import { MemoryShore } from '../games/MemoryShore'; import { AttentionTracks } from '../games/AttentionTracks'; import { MentalAgility } from '../games/MentalAgility'; import { LogicFuses } from '../games/LogicFuses'; import { DanpheRush } from '../games/DanpheRush'; import { ArcadeLeaderboard } from '../games/ArcadeLeaderboard'; import { Ludo } from '../games/Ludo'; import { Chess } from '../games/Chess'; import { MandalaMind } from '../games/MandalaMind'; // --- CONSTANTS & DATA --- const CATEGORIES = [ { id: 'all', label: 'All Protocols', icon: GridIcon }, { id: 'speed', label: 'Reflex', icon: Zap }, { id: 'memory', label: 'Memory', icon: Brain }, { id: 'focus', label: 'Focus', icon: Target }, { id: 'logic', label: 'Logic', icon: Cpu }, { id: 'classic', label: 'Retro', icon: Gamepad2 }, ]; const GAMES = [ { id: 'speed', title: 'Speed Zone', desc: 'Calibrate your neural response time in a high-velocity environment.', icon: Zap, color: 'red', category: 'speed', difficulty: 'Advanced', time: '2m', points: '500+', featured: true }, { id: 'mandala', title: 'Mandala Mind', desc: 'Synchronize your memory with complex audio-visual patterns.', icon: Hexagon, color: 'purple', category: 'memory', difficulty: 'Intermediate', time: '∞', points: 'VAR' }, { id: 'ludo', title: 'Ludo King', desc: 'Strategic board simulation for multiple neural networks.', icon: Dice5, color: 'purple', category: 'classic', difficulty: 'Easy', time: '15m', points: '1000+', comingSoon: true // Changed to Coming Soon }, { id: 'chess', title: 'Royal Chess', desc: 'Grandmaster tactical evaluation protocol.', icon: Crown, color: 'white', category: 'logic', difficulty: 'Master', time: '∞', points: 'VAR', comingSoon: true // Changed to Coming Soon }, { id: 'danphe', title: 'Danphe Rush', desc: 'Navigate the national bird through high-altitude obstacles.', icon: TrendingUp, color: 'emerald', category: 'classic', difficulty: 'Hard', time: '∞', points: 'VAR', comingSoon: false // Active }, { id: 'memory', title: 'Memory Shore', desc: 'Identify and reconstruct complex visual patterns from short-term data.', icon: Brain, color: 'cyan', category: 'memory', difficulty: 'Intermediate', time: '3m', points: '400+' }, // AttentionTracks (Focus Tracks) Removed as requested { id: 'flexibility', title: 'Mental Agility', desc: 'Switch between conflicting logic protocols without losing sync.', icon: RefreshCw, color: 'pink', category: 'focus', difficulty: 'Intermediate', time: '3m', points: '350+' }, { id: 'problem', title: 'Logic Circuits', desc: 'Debug and complete sequential energy paths to restore system flow.', icon: Cpu, color: 'emerald', category: 'logic', difficulty: 'Advanced', time: '4m', points: '600+' } ]; // --- HELPER COMPONENTS --- function GridIcon(props: any) { return ( ); } const EnhancedNeuralBackground = () => { const canvasRef = useRef(null); const mouseRef = useRef({ x: 0, y: 0 }); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; let animationFrameId: number; let particles: any[] = []; const particleCount = 60; const connectionDistance = 150; class Particle { x: number; y: number; vx: number; vy: number; size: number; baseSize: number; constructor(width: number, height: number) { this.x = Math.random() * width; this.y = Math.random() * height; this.vx = (Math.random() - 0.5) * 0.4; this.vy = (Math.random() - 0.5) * 0.4; this.baseSize = Math.random() * 2 + 1; this.size = this.baseSize; } update(width: number, height: number) { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > width) this.vx *= -1; if (this.y < 0 || this.y > height) this.vy *= -1; const dx = this.x - mouseRef.current.x; const dy = this.y - mouseRef.current.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < 100) { this.size = this.baseSize * 2; } else { this.size = this.baseSize; } } draw() { if (!ctx) return; ctx.fillStyle = 'rgba(99, 102, 241, 0.4)'; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } } const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; particles = []; for (let i = 0; i < particleCount; i++) { particles.push(new Particle(canvas.width, canvas.height)); } }; const handleMouseMove = (e: MouseEvent) => { mouseRef.current = { x: e.clientX, y: e.clientY }; }; const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < particles.length; i++) { particles[i].update(canvas.width, canvas.height); particles[i].draw(); for (let j = i + 1; j < particles.length; j++) { const dx = particles[i].x - particles[j].x; const dy = particles[i].y - particles[j].y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < connectionDistance) { const alpha = (1 - dist / connectionDistance) * 0.15; ctx.strokeStyle = `rgba(129, 140, 248, ${alpha})`; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.stroke(); } } } animationFrameId = requestAnimationFrame(animate); }; window.addEventListener('resize', resize); window.addEventListener('mousemove', handleMouseMove); resize(); animate(); return () => { window.removeEventListener('resize', resize); window.removeEventListener('mousemove', handleMouseMove); cancelAnimationFrame(animationFrameId); }; }, []); return ; }; const ArcadeSettingsModal = ({ onClose }: { onClose: () => void }) => { const [settings, setSettings] = useState(null); useEffect(() => { StorageService.getSettings().then(setSettings); }, []); const toggleSetting = async (key: keyof AppSettings) => { if (!settings) return; const newSettings = { ...settings, [key]: !settings[key as keyof AppSettings] }; setSettings(newSettings); await StorageService.saveSettings(newSettings); }; if (!settings) return null; return (

System Config

toggleSetting('soundEnabled')} /> toggleSetting('hapticFeedback')} color="bg-emerald-500" /> toggleSetting('dataSaver')} color="bg-purple-500" />
); }; const SettingToggle = ({ label, active, icon: Icon, onClick, color = "bg-indigo-500" }: any) => (
{label}
); const SidebarIcon = ({ icon: Icon, active = false, label, onClick }: any) => (
{label}
); const GameCard = ({ game, onClick }: any) => { const { title, desc, icon: Icon, color, difficulty, time, points, comingSoon } = game; const styles: any = { red: { text: 'text-red-400', border: 'hover:border-red-500', shadow: 'hover:shadow-[0_0_30px_rgba(239,68,68,0.3)]', bg: 'from-red-500/10' }, cyan: { text: 'text-cyan-400', border: 'hover:border-cyan-500', shadow: 'hover:shadow-[0_0_30px_rgba(34,211,238,0.3)]', bg: 'from-cyan-500/20' }, amber: { text: 'text-amber-400', border: 'hover:border-amber-500', shadow: 'hover:shadow-[0_0_30px_rgba(245,158,11,0.3)]', bg: 'from-amber-500/10' }, purple: { text: 'text-purple-400', border: 'hover:border-purple-500', shadow: 'hover:shadow-[0_0_30px_rgba(168,85,247,0.3)]', bg: 'from-purple-500/10' }, emerald: { text: 'text-emerald-400', border: 'hover:border-emerald-500', shadow: 'hover:shadow-[0_0_30px_rgba(16,185,129,0.3)]', bg: 'from-emerald-500/10' }, pink: { text: 'text-pink-400', border: 'hover:border-pink-500', shadow: 'hover:shadow-[0_0_30px_rgba(236,72,153,0.3)]', bg: 'from-pink-500/10' }, blue: { text: 'text-blue-400', border: 'hover:border-blue-500', shadow: 'hover:shadow-[0_0_30px_rgba(59,130,246,0.3)]', bg: 'from-blue-500/10' }, white: { text: 'text-gray-200', border: 'hover:border-gray-200', shadow: 'hover:shadow-[0_0_30px_rgba(255,255,255,0.2)]', bg: 'from-gray-500/10' } }[color]; return ( !comingSoon && onClick(game.id)} className={`group relative h-80 md:h-96 rounded-[2rem] md:rounded-[2.5rem] bg-slate-900/40 backdrop-blur-md border border-white/10 overflow-hidden transition-all duration-500 ${comingSoon ? 'opacity-70 cursor-not-allowed' : `cursor-pointer ${styles.border} ${styles.shadow}`}`} >
{comingSoon && (
Coming Soon
)}
{difficulty} {time}

{title}

{desc}

Max Potential {points} Pts
); }; // --- MAIN HUB COMPONENT --- const Game: React.FC = () => { const navigate = useNavigate(); const location = useLocation(); const [activeScreen, setActiveScreen] = useState('hub'); const [activeCategory, setActiveCategory] = useState('all'); const [profile, setProfile] = useState(() => { try { const stored = localStorage.getItem('rudraksha_profile'); return stored ? JSON.parse(stored) : null; } catch { return null; } }); const [loading, setLoading] = useState(!profile); const [showSettings, setShowSettings] = useState(false); const [searchQuery, setSearchQuery] = useState(''); // Weekly Stats Data const [weeklyStats, setWeeklyStats] = useState([]); useEffect(() => { // Background refresh of profile & sessions const init = async () => { const [p, sessions] = await Promise.all([ StorageService.getProfile(), StorageService.getGameSessions() ]); setProfile(p); // Calculate Weekly Stats (Last 7 Days) const stats = new Array(7).fill(0); const now = new Date(); const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000); sessions.forEach(s => { const date = new Date(s.timestamp); if (date > oneWeekAgo) { // Calculate days difference (0 = today, 6 = 7 days ago) // We want to map it to the 7 bars // Simplified: Calculate day index relative to today // Actually, let's just create a map for last 7 days strings // For this visualization, let's map sessions to the last 7 calendar days const dayDiff = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24)); if (dayDiff >= 0 && dayDiff < 7) { // Store play time in minutes stats[6 - dayDiff] += Math.ceil(s.durationSeconds / 60); } } }); setWeeklyStats(stats); setLoading(false); }; init(); if (location.state && (location.state as any).autoLaunch) { setActiveScreen((location.state as any).autoLaunch); navigate(location.pathname, { replace: true, state: {} }); } }, [location, activeScreen]); // Refresh stats when returning to hub const filteredGames = useMemo(() => { return GAMES.filter(g => { const matchesCategory = activeCategory === 'all' || g.category === activeCategory; const matchesSearch = g.title.toLowerCase().includes(searchQuery.toLowerCase()); return matchesCategory && matchesSearch; }).sort((a, b) => { // Sort: Active games first, Coming Soon last if (a.comingSoon === b.comingSoon) return 0; return a.comingSoon ? 1 : -1; }); }, [activeCategory, searchQuery]); const isGameActive = !['hub', 'leaderboard'].includes(activeScreen); if (loading) return (

Syncing Neural Data

); return (
{!isGameActive && }
{/* SIDEBAR */} {!isGameActive && ( )} {/* MAIN VIEW */}
{activeScreen === 'hub' ? ( {/* HEADER SECTION */}
System v4.2.0 Neural Link: Stable

Neural Arcade

Welcome back, {profile?.name?.split(' ')[0] || 'Operator'}. Cognitive load is 12%.

Global Rank #1,402
Neural Score
{profile?.points?.toLocaleString() || '0'}
{/* SEARCH & FILTER BAR */}
setSearchQuery(e.target.value)} className="w-full bg-white/5 border border-white/10 rounded-2xl pl-12 pr-4 py-3 md:py-4 text-xs font-black tracking-widest focus:outline-none focus:border-indigo-500 transition-colors uppercase" />
{CATEGORIES.map(cat => ( ))}
{/* GAMES GRID */} {filteredGames.length > 0 ? ( filteredGames.map(game => ( )) ) : (

No Protocols Found

)}
{/* DASHBOARD WIDGETS */}

Neural Performance (Minutes)

{weeklyStats.length > 0 ? weeklyStats.map((mins, i) => (
{mins}m
0 ? 'bg-gradient-to-t from-indigo-600 to-indigo-400 group-hover:from-indigo-400 group-hover:to-white' : 'bg-white/5 h-1'}`} /> D-{6-i}
)) : (
No data recorded yet
)}

Medals

{[ { label: 'Reflex Master', desc: 'Reach 0.2s reaction time', icon: Zap, color: 'text-red-400' }, { label: 'Focus Guru', desc: '5min session in focus tracks', icon: Target, color: 'text-amber-400' }, { label: 'Grandmaster', desc: 'Reach level 50 in logic', icon: Shield, color: 'text-indigo-400' } ].map((item, i) => (

{item.label}

{item.desc}

))}
) : activeScreen === 'leaderboard' ? ( setActiveScreen('hub')} /> ) : ( /* --- GAME SHELL WRAPPER --- */ {activeScreen === 'speed' && ( setActiveScreen('hub')} /> )} {activeScreen === 'memory' && ( setActiveScreen('hub')} /> )} {activeScreen === 'attention' && ( setActiveScreen('hub')}> {({ onGameOver }) => setActiveScreen('hub')} />} )} {activeScreen === 'flexibility' && ( setActiveScreen('hub')} /> )} {activeScreen === 'problem' && ( setActiveScreen('hub')}> {({ onGameOver }) => setActiveScreen('hub')} />} )} {activeScreen === 'danphe' && ( setActiveScreen('hub')} /> )} {activeScreen === 'ludo' && ( setActiveScreen('hub')} /> )} {activeScreen === 'chess' && ( setActiveScreen('hub')} /> )} {activeScreen === 'mandala' && ( setActiveScreen('hub')} /> )} )}
{showSettings && setShowSettings(false)} />}
); }; export default Game;