import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; // Shape components const Circle = ({ color }) => (

); const Square = ({ color }) => (

); const Triangle = ({ color }) => (

); const App = () => { const correctSound = React.useRef(null); const incorrectSound = React.useRef(null); const createCorrectSound = () => { const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(700, audioContext.currentTime); oscillator.frequency.setValueAtTime(900, audioContext.currentTime + 0.1); gainNode.gain.setValueAtTime(0.2, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.start(); oscillator.stop(audioContext.currentTime + 0.3); }; const createIncorrectSound = () => { const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(400, audioContext.currentTime); oscillator.frequency.setValueAtTime(200, audioContext.currentTime + 0.1); gainNode.gain.setValueAtTime(0.2, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.start(); oscillator.stop(audioContext.currentTime + 0.3); }; const [score, setScore] = useState(0); const [currentPattern, setCurrentPattern] = useState([]); const [options, setOptions] = useState([]); const [correctAnswer, setCorrectAnswer] = useState(null); const [message, setMessage] = useState(''); const [round, setRound] = useState(1); const [isGameComplete, setIsGameComplete] = useState(false); const [selectedShape, setSelectedShape] = useState(null); const shapes = { circle: Circle, square: Square, triangle: Triangle }; const generatePattern = () => { const patternTypes = [ ['circle', 'square'], ['square', 'triangle'], ['circle', 'triangle'], ['circle', 'square', 'triangle'] ]; const selectedPattern = patternTypes[Math.floor(Math.random() * (round < 4 ? 3 : 4))]; const patternLength = Math.min(4 + Math.floor(round / 2), 7); let pattern = []; for (let i = 0; i < patternLength - 1; i++) { pattern.push(selectedPattern[i % selectedPattern.length]); } const correct = selectedPattern[pattern.length % selectedPattern.length]; setCorrectAnswer(correct); // Generate wrong options const allShapes = Object.keys(shapes); const wrongOptions = allShapes.filter(shape => shape !== correct); const shuffledOptions = [correct, ...wrongOptions].sort(() => Math.random() - 0.5); setCurrentPattern(pattern); setOptions(shuffledOptions); }; const handleGuess = (shape) => { setSelectedShape(shape); if (shape === correctAnswer) { createCorrectSound(); setScore(score + Math.floor(100 * (1 + round * 0.1))); if (round === 10) { setMessage('Congratulations! You\'ve completed all 10 rounds!'); setIsGameComplete(true); } else { setMessage('Correct! Well done!'); setTimeout(() => { setRound(round + 1); setMessage(''); setSelectedShape(null); generatePattern(); }, 1500); } } else { createIncorrectSound(); setMessage('Wrong answer. Try again!'); setScore(Math.max(0, score - 50)); setTimeout(() => { setMessage(''); setSelectedShape(null); }, 1500); } }; const resetGame = () => { setRound(1); setScore(0); setIsGameComplete(false); setMessage(''); setSelectedShape(null); generatePattern(); }; useEffect(() => { generatePattern(); }, []); const ShapeComponent = ({ type }) => { const Component = shapes[type]; return ; }; return (

Shape Recognition

Score: {score}

Round: {round}

{!isGameComplete ? ( <>

{currentPattern.map((shape, index) => ( ))} {selectedShape ? ( ) : (

)}

{options.map((shape, index) => ( ))}

) : (

Game Complete!

Final Score: {score}

)} {message && (

{message}

)}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();