/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; const fruits = [ { name: "Elma", emoji: "🍎", color: "red" }, { name: "Muz", emoji: "🍌", color: "yellow" }, { name: "Portakal", emoji: "🍊", color: "orange" }, { name: "Üzüm", emoji: "🍇", color: "purple" }, { name: "Çilek", emoji: "🍓", color: "crimson" }, { name: "Karpuz", emoji: "🍉", color: "green" }, { name: "Armut", emoji: "🍐", color: "lightgreen" }, { name: "Kiraz", emoji: "🍒", color: "maroon" }, { name: "Ananas", emoji: "🍍", color: "goldenrod" }, { name: "Şeftali", emoji: "🍑", color: "coral" }, { name: "Greyfurt", emoji: "🍊", color: "darkorange" }, { name: "Hurma", emoji: "🫒", color: "saddlebrown" }, { name: "Kavun", emoji: "🍈", color: "mediumseagreen" }, { name: "İncir", emoji: "🫒", color: "peru" }, { name: "Kivi", emoji: "🥝", color: "olivedrab" } ]; // Color translation function const translateColor = (color) => { const colorMap = { 'red': 'kırmızı', 'yellow': 'sarı', 'orange': 'turuncu', 'purple': 'mor', 'crimson': 'koyu kırmızı', 'green': 'yeşil', 'lightgreen': 'açık yeşil', 'maroon': 'bordo', 'goldenrod': 'altın sarısı', 'coral': 'mercan', 'darkorange': 'koyu turuncu', 'saddlebrown': 'kahverengi', 'mediumseagreen': 'deniz yeşili', 'peru': 'toprak rengi', 'olivedrab': 'zeytin yeşili' }; return colorMap[color] || color; }; function Fireworks({ show }) { if (!show) return null; const fireworkColors = [ '#ff6b6b', '#4ecdc4', '#45b7d1', '#ffd93d', '#ff9a8b', '#green', '#purple', '#orange' ]; return (

{[...Array(10)].map((_, i) => (

))}

); } function FruitLearningGame() { const [score, setScore] = useState(0); const [currentRound, setCurrentRound] = useState(0); const [selectedFruit, setSelectedFruit] = useState(null); const [showFireworks, setShowFireworks] = useState(false); const [speechSupported, setSpeechSupported] = useState(false); const [isProcessing, setIsProcessing] = useState(false); const [timeLeft, setTimeLeft] = useState(10); const [gameOver, setGameOver] = useState(false); useEffect(() => { // Check if speech synthesis is supported setSpeechSupported('speechSynthesis' in window); }, []); useEffect(() => { // Countdown timer logic if (timeLeft > 0 && !isProcessing && !gameOver) { const timer = setTimeout(() => { setTimeLeft(timeLeft - 1); }, 1000); return () => clearTimeout(timer); } else if (timeLeft === 0) { setGameOver(true); alert(`Süre bitti! Toplam puanın: ${score} 🕒`); } }, [timeLeft, isProcessing, gameOver]); const speakFruitName = (fruit, isCorrect, correctFruit = null) => { if (!speechSupported) return; const utterance = new SpeechSynthesisUtterance(); utterance.lang = 'tr-TR'; utterance.pitch = 1; utterance.rate = 0.8; if (isCorrect) { const fruitColor = translateColor(fruit.color); utterance.text = `Bravo! Doğru cevap. ${fruit.name}. Rengi ${fruitColor}.`; } else { utterance.text = `Hayır, bu ${fruit.name} değil. Doğru cevap ${correctFruit.name}!`; } utterance.onend = () => { // Move to next round after speaking if (!isCorrect) { goToNextRound(); } setIsProcessing(false); }; window.speechSynthesis.speak(utterance); }; const goToNextRound = () => { if (currentRound < fruits.length - 1 && !gameOver) { setCurrentRound(currentRound + 1); // Reset timer for each round setTimeLeft(10); } else { setGameOver(true); alert(`Oyun bitti! Toplam puanın: ${score} 🏆`); setCurrentRound(0); setScore(0); } setSelectedFruit(null); }; const currentFruit = fruits[currentRound]; const handleFruitSelection = (fruit) => { // Prevent multiple selections during processing or if game is over if (isProcessing || gameOver) return; setIsProcessing(true); const isCorrect = fruit.name === currentFruit.name; if (isCorrect) { setScore(score + 10); setShowFireworks(true); // Speak correct answer and move to next round speakFruitName(fruit, true); // Hide fireworks after a short delay setTimeout(() => setShowFireworks(false), 1500); // Automatically go to next round after a delay setTimeout(goToNextRound, 2000); } else { setShowFireworks(false); // Speak incorrect answer and the correct fruit name speakFruitName(fruit, false, currentFruit); } }; return (

⏰ {timeLeft}

🍎 Meyve Öğrenme Oyunu 🍌

{currentFruit.emoji}

Bu meyvenin adını bulun!

{!speechSupported && (

Ses çıkarma özelliği bu cihazda desteklenmiyor.

)}

{fruits.map((fruit) => ( ))}

Puan: {score}

Mevcut Tur: {currentRound + 1} / {fruits.length}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request) { return new Response(` Meyve Öğrenme Oyunu

`, { headers: { "content-type": "text/html" } }); }

fruitLearningGame