import React, { useState, useEffect } from 'react';
import { Volume2 } from 'lucide-react';
const BrainLearningGame = () => {
const [page, setPage] = useState('intro');
const [points, setPoints] = useState(0);
const [dots, setDots] = useState([]);
const [simon, setSimon] = useState({ pattern: [], userPattern: [], level: 1, playing: false, started: false });
const [memory, setMemory] = useState({ cards: [], flipped: [], matched: [], started: false, checking: false });
const [jumps, setJumps] = useState(0);
const [emojis, setEmojis] = useState([]);
const [certColor, setCertColor] = useState(0);
const [agreedPowers, setAgreedPowers] = useState([]);
useEffect(() => {
if (page === 'final') {
const interval = setInterval(() => {
setCertColor(prev => (prev + 1) % 6);
}, 1000);
return () => clearInterval(interval);
}
}, [page]);
const beep = () => {
const audio = new AudioContext();
const osc = audio.createOscillator();
osc.connect(audio.destination);
osc.frequency.value = 400;
osc.start();
osc.stop(audio.currentTime + 0.1);
};
const tadaSound = () => {
const audio = new AudioContext();
const osc = audio.createOscillator();
const gainNode = audio.createGain();
osc.connect(gainNode);
gainNode.connect(audio.destination);
osc.frequency.setValueAtTime(523, audio.currentTime);
osc.frequency.setValueAtTime(659, audio.currentTime + 0.1);
osc.frequency.setValueAtTime(784, audio.currentTime + 0.2);
osc.frequency.setValueAtTime(1047, audio.currentTime + 0.3);
gainNode.gain.setValueAtTime(0.3, audio.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audio.currentTime + 0.5);
osc.start();
osc.stop(audio.currentTime + 0.5);
};
const buzzerSound = () => {
const audio = new AudioContext();
const osc = audio.createOscillator();
const gainNode = audio.createGain();
osc.connect(gainNode);
gainNode.connect(audio.destination);
osc.type = 'sawtooth';
osc.frequency.setValueAtTime(200, audio.currentTime);
osc.frequency.setValueAtTime(100, audio.currentTime + 0.3);
gainNode.gain.setValueAtTime(0.3, audio.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audio.currentTime + 0.3);
osc.start();
osc.stop(audio.currentTime + 0.3);
};
const addDot = (e) => {
if (dots.length >= 12) return;
const rect = e.currentTarget.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
const newDot = { id: Date.now(), x, y };
setDots([...dots, newDot]);
setPoints(points + 5);
beep();
};
const startSimon = () => {
const pattern = [Math.floor(Math.random() * 9) + 1, Math.floor(Math.random() * 9) + 1];
setSimon({ pattern, userPattern: [], level: 1, playing: true, started: true });
setTimeout(() => showPattern(pattern), 500);
};
const showPattern = async (pattern) => {
setSimon(prev => ({ ...prev, playing: true, userPattern: [] }));
for (let num of pattern) {
await new Promise(r => setTimeout(r, 200));
beep();
const btn = document.getElementById(`btn-${num}`);
if (btn) {
btn.style.cssText = 'background-color: #FCD34D !important; transform: scale(1.2); transition: all 0.2s;';
await new Promise(r => setTimeout(r, 400));
btn.style.cssText = 'background-color: white !important; transform: scale(1); transition: all 0.2s;';
}
await new Promise(r => setTimeout(r, 200));
}
setSimon(prev => ({ ...prev, playing: false }));
};
const clickNumber = (num) => {
if (simon.playing) return;
beep();
const btn = document.getElementById(`btn-${num}`);
if (btn) {
btn.style.cssText = 'background-color: #FCD34D !important; transform: scale(1.2); transition: all 0.2s;';
setTimeout(() => {
btn.style.cssText = 'background-color: white !important; transform: scale(1); transition: all 0.2s;';
}, 300);
}
const newPattern = [...simon.userPattern, num];
if (newPattern[newPattern.length - 1] !== simon.pattern[newPattern.length - 1]) {
buzzerSound();
setTimeout(() => {
alert('Oops! Try again! 🔄');
showPattern(simon.pattern);
}, 500);
return;
}
if (newPattern.length === simon.pattern.length) {
setTimeout(() => {
tadaSound();
setPoints(points + 10);
}, 400);
const nextLevel = simon.level + 1;
if (nextLevel <= 5) {
setTimeout(() => {
const newPat = Array.from({ length: nextLevel + 1 }, () => Math.floor(Math.random() * 9) + 1);
setSimon({ pattern: newPat, userPattern: [], level: nextLevel, playing: true, started: true });
showPattern(newPat);
}, 1500);
} else {
setTimeout(() => {
alert('🎉 You won! Amazing brain!');
setSimon({ pattern: [], userPattern: [], level: 1, playing: false, started: false });
}, 1500);
}
} else {
setSimon(prev => ({ ...prev, userPattern: newPattern }));
}
};
const startMemory = () => {
const icons = ['🌟', '🎨', '🦋', '🌈', '🎵', '🌸'];
const cards = [...icons, ...icons].sort(() => Math.random() - 0.5).map((e, i) => ({ id: i, icon: e }));
setMemory({ cards, flipped: [], matched: [], started: true, checking: false });
};
const flipCard = (id) => {
if (memory.checking || memory.matched.includes(id) || memory.flipped.includes(id) || memory.flipped.length >= 2) return;
beep();
const newFlipped = [...memory.flipped, id];
if (newFlipped.length === 2) {
setMemory(prev => ({ ...prev, flipped: newFlipped, checking: true }));
const c1 = memory.cards.find(c => c.id === newFlipped[0]);
const c2 = memory.cards.find(c => c.id === newFlipped[1]);
if (c1.icon === c2.icon) {
setTimeout(() => {
setMemory(prev => ({ ...prev, matched: [...prev.matched, newFlipped[0], newFlipped[1]], flipped: [], checking: false }));
setPoints(points + 10);
}, 600);
} else {
setTimeout(() => {
setMemory(prev => ({ ...prev, flipped: [], checking: false }));
}, 1000);
}
} else {
setMemory(prev => ({ ...prev, flipped: newFlipped }));
}
};
const doJump = () => {
const newJumps = jumps + 1;
setJumps(newJumps);
beep();
if (newJumps === 10) {
setPoints(points + 15);
for (let i = 0; i < 15; i++) {
setTimeout(() => {
const e = { id: Date.now() + Math.random(), x: Math.random() * 90 };
setEmojis(prev => [...prev, e]);
setTimeout(() => setEmojis(prev => prev.filter(em => em.id !== e.id)), 2000);
}, i * 100);
}
setTimeout(() => alert('🎉 Great job! Your brain is super charged! 🧠⚡'), 1500);
}
};
return (
🧠 Brain Learning Adventure! ✨
Brain Power: {points} ⭐
{page === 'intro' && (
🧠
Your Amazing Brain!
Your brain is like a super computer! 🖥️💫
It helps you learn and remember AMAZING things! 🎉
)}
{page === 'neurons' && (
Brain Buddies! 🧠💙
Your brain has tiny helpers called NEURONS! 🌟
They connect and talk to each other! 💬✨
{dots.length < 12 ? 'Click anywhere to add neurons! They connect automatically! 🎯' : '💪 Strong Connection! 💪'}
Neurons: {dots.length}/12 | Connections: {dots.length > 1 ? (dots.length * (dots.length - 1)) / 2 : 0}
{dots.map(d => (
))}
{dots.length >= 12 && (
)}
)}
{page === 'simon' && (
Practice Makes Perfect! 🎯
When you practice AGAIN and AGAIN... 🔄
Your brain gets SUPER STRONG! 💪🌟
{!simon.started ? (
Memory Challenge! 🧠
Watch the numbers light up, then repeat!
) : (
{simon.playing ? '👀 Watch carefully!' : '🎯 Now you try!'}
Level {simon.level} | Remember {simon.level + 1} numbers!
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map(n => (
))}
)}
)}
{page === 'memory' && (
Memory Match! 🎮
Your brain LOVES games! 🎉
Find matching pairs! 🌟
{!memory.started ? (
) : (
{memory.cards.map(card => {
const show = memory.flipped.includes(card.id) || memory.matched.includes(card.id);
return (
);
})}
{memory.matched.length === memory.cards.length && (
🎉 Amazing! 🧠✨
)}
)}
)}
{page === 'sleep' && (
Sleep is Super Important! 😴💤
When you sleep, your brain does MAGIC! ✨🌙
It saves everything you learned today! 💾
Sleep helps your brain grow strong and healthy! 🌱💪
😴
9-11 Hours
of sleep every night!
Here are some examples:
😴 Bed at 8:00 PM → ☀️ Wake at 7:00 AM = 11 hours! ✅
😴 Bed at 8:30 PM → ☀️ Wake at 6:30 AM = 10 hours! ✅
😴 Bed at 9:00 PM → ☀️ Wake at 6:00 AM = 9 hours! ✅
😴 Bed at 10:00 PM → ☀️ Wake at 6:00 AM = 8 hours ❌ Too little!
Pick a bedtime that gives you 9-11 hours! 🧠✨
💡 Brain Tips:
📚 Read before bed to remember stories better!
🛏️ Go to bed at the same time every night!
🌙 Keep your room dark and quiet!
)}
{page === 'jump' && (
{emojis.map(e => (
🙆♀️
))}
Move Your Body! 🏃♀️
When you MOVE, your brain gets oxygen! 🫁💨
This helps you learn faster! 🧠⚡
🙆♀️
Do 10 jumping jacks for magic! 🚀
Jumping Jacks: {jumps} 🎯
{jumps >= 10 &&
✨ Brain fully charged! Keep going! ✨
}
)}
{page === 'final' && (
🎉🧠✨
You're a Super Learner!
🏆 SUPER LEARNER 🏆
CERTIFICATE OF ACHIEVEMENT
This certifies that
YOU
have completed the
Amazing Brain Learning Adventure!
Click each superpower to agree! 🌟
{agreedPowers.length === 5 && (
🎉 You agreed to all 5 superpowers! 🎉
)}
🎊 You learned all the secrets to a super smart brain! 🎊
Use these powers every day to keep learning and growing! 🌱💪
)}
);
};
export default BrainLearningGame;