\n \n \n \n\n",[],[155,199],"c0334a4b-2b56-4649-9141-cc14f83cc4e2","favicon.svg","019ecc23-2746-76ab-af90-6221355c9d04",["D",1781541316309],"\n",[],[155,207],"7b3da6ae-1a19-4602-a6a0-9ab44aa10d83","sound.ts","49d5ff2a-68d8-11f1-8b51-1607ee4eb77e","019ecc23-2746-76ab-af90-5dd6eefd9135",3,["D",1781541358608],"// Ses yardımcıları: harici dosya yok, hepsi tarayıcı API'leriyle üretilir.\n// - speak(): Web Speech API ile İngilizce seslendirme\n// - playApplause / playBuzzer / playSparkle / playCheer: Web Audio API ile efektler\n\nlet audioCtx: AudioContext | null = null;\nfunction ctx(): AudioContext {\n if (!audioCtx) {\n const AC = (globalThis as any).AudioContext || (globalThis as any).webkitAudioContext;\n audioCtx = new AC();\n }\n // iOS/Safari: kullanıcı etkileşiminden sonra context'i devam ettir\n if (audioCtx.state === \"suspended\") audioCtx.resume();\n return audioCtx;\n}\n\n// --- Seslendirme (Text-to-Speech) ---\nfunction pickEnglishVoice(): SpeechSynthesisVoice | undefined {\n const voices = speechSynthesis.getVoices();\n return (\n voices.find((v) => /en[-_]US/i.test(v.lang)) ||\n voices.find((v) => /^en/i.test(v.lang)) ||\n voices[0]\n );\n}\n\nexport function speak(text: string, opts: { rate?: number; pitch?: number } = {}) {\n if (!(\"speechSynthesis\" in globalThis)) return;\n try {\n speechSynthesis.cancel();\n const u = new SpeechSynthesisUtterance(text);\n u.lang = \"en-US\";\n u.rate = opts.rate ?? 0.85; // çocuklar için biraz yavaş\n u.pitch = opts.pitch ?? 1.1;\n const v = pickEnglishVoice();\n if (v) u.voice = v;\n speechSynthesis.speak(u);\n } catch {\n // sessizce geç\n }\n}\n\n// Sesler tarayıcıya asenkron yüklenir; hazır olunca seçimi tazele\nif (\"speechSynthesis\" in globalThis) {\n speechSynthesis.onvoiceschanged = () => pickEnglishVoice();\n}\n\n// --- Düşük seviye ton üretici ---\nfunction tone(\n freq: number,\n start: number,\n duration: number,\n type: OscillatorType = \"sine\",\n gain = 0.2,\n) {\n const c = ctx();\n const osc = c.createOscillator();\n const g = c.createGain();\n osc.type = type;\n osc.frequency.value = freq;\n g.gain.setValueAtTime(0.0001, c.currentTime + start);\n g.gain.exponentialRampToValueAtTime(gain, c.currentTime + start + 0.02);\n g.gain.exponentialRampToValueAtTime(0.0001, c.currentTime + start + duration);\n osc.connect(g).connect(c.destination);\n osc.start(c.currentTime + start);\n osc.stop(c.currentTime + start + duration + 0.05);\n}\n\n// Beyaz gürültü patlaması (alkış benzeri)\nfunction noiseBurst(start: number, duration: number, gain = 0.35) {\n const c = ctx();\n const bufferSize = Math.floor(c.sampleRate * duration);\n const buffer = c.createBuffer(1, bufferSize, c.sampleRate);\n const data = buffer.getChannelData(0);\n for (let i = 0; i < bufferSize; i++) {\n // sönümlü gürültü -> alkış hissi\n const decay = 1 - i / bufferSize;\n data[i] = (Math.random() * 2 - 1) * decay * decay;\n }\n const src = c.createBufferSource();\n src.buffer = buffer;\n const g = c.createGain();\n g.gain.value = gain;\n const filter = c.createBiquadFilter();\n filter.type = \"bandpass\";\n filter.frequency.value = 2200;\n src.connect(filter).connect(g).connect(c.destination);\n src.start(c.currentTime + start);\n}\n\n// --- Yüksek seviye efektler ---\n\n// Güçlü alkış: art arda gürültü patlamaları\nexport function playApplause() {\n for (let i = 0; i < 14; i++) {\n noiseBurst(i * 0.06, 0.12, 0.25 + Math.random() * 0.2);\n }\n}\n\n// Parlayan yıldız / başarı: yukarı çıkan neşeli arpej\nexport function playSparkle() {\n const notes = [523, 659, 784, 1047, 1319]; // C5 E5 G5 C6 E6\n notes.forEach((f, i) => tone(f, i * 0.08, 0.25, \"triangle\", 0.18));\n}\n\n// Yanlış cevap: komik \"daaat\" düşen vızıltı\nexport function playBuzzer() {\n const c = ctx();\n const osc = c.createOscillator();\n const g = c.createGain();\n osc.type = \"sawtooth\";\n osc.frequency.setValueAtTime(320, c.currentTime);\n osc.frequency.exponentialRampToValueAtTime(120, c.currentTime + 0.45);\n g.gain.setValueAtTime(0.0001, c.currentTime);\n g.gain.exponentialRampToValueAtTime(0.25, c.currentTime + 0.03);\n g.gain.exponentialRampToValueAtTime(0.0001, c.currentTime + 0.5);\n osc.connect(g).connect(c.destination);\n osc.start();\n osc.stop(c.currentTime + 0.55);\n}\n\n// Büyük kutlama: alkış + neşeli melodi\nexport function playCheer() {\n playApplause();\n const melody = [523, 659, 784, 659, 784, 1047]; // küçük zafer ezgisi\n melody.forEach((f, i) => tone(f, 0.1 + i * 0.18, 0.3, \"square\", 0.16));\n}\n\n// Tarayıcının ses iznini ilk dokunuşta açmak için\nexport function unlockAudio() {\n try {\n ctx();\n } catch {\n // yoksay\n }\n}\n",[],[155,222,214],"components","036252ee-7891-4706-9d56-b18e7c1dfa59","animals.ts","3a1297ec-68d8-11f1-8b51-1607ee4eb77e",2,["D",1781541332161],"// Hayvan verileri: İngilizce isim + büyük renkli emoji görseli\nexport interface Animal {\n id: string;\n word: string; // İngilizce seslendirilecek kelime\n emoji: string; // büyük renkli görsel\n color: string; // kartın arka plan rengi (tailwind class)\n}\n\nexport const ANIMALS: Animal[] = [\n { id: \"dog\", word: \"Dog\", emoji: \"🐶\", color: \"bg-amber-100\" },\n { id: \"cat\", word: \"Cat\", emoji: \"🐱\", color: \"bg-orange-100\" },\n { id: \"bird\", word: \"Bird\", emoji: \"🐦\", color: \"bg-sky-100\" },\n { id: \"rabbit\", word: \"Rabbit\", emoji: \"🐰\", color: \"bg-pink-100\" },\n { id: \"fish\", word: \"Fish\", emoji: \"🐠\", color: \"bg-cyan-100\" },\n { id: \"horse\", word: \"Horse\", emoji: \"🐴\", color: \"bg-yellow-100\" },\n { id: \"cow\", word: \"Cow\", emoji: \"🐮\", color: \"bg-lime-100\" },\n { id: \"sheep\", word: \"Sheep\", emoji: \"🐑\", color: \"bg-stone-100\" },\n { id: \"duck\", word: \"Duck\", emoji: \"🦆\", color: \"bg-emerald-100\" },\n { id: \"elephant\", word: \"Elephant\", emoji: \"🐘\", color: \"bg-indigo-100\" },\n];\n\n// Diziyi karıştırmak için yardımcı (Fisher-Yates)\nexport function shuffle(arr: T[]): T[] {\n const a = [...arr];\n for (let i = a.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [a[i], a[j]] = [a[j], a[i]];\n }\n return a;\n}\n",[],[155,222,224],"fb7001b8-09c1-4fb9-b2c2-8daf13127066","WinScreen.tsx","67b8aec0-68d8-11f1-98cc-1607ee4eb77e",7,["D",1781541408744],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Confetti } from \"./Confetti.tsx\";\n\nexport function WinScreen({ onPlayAgain }: { onPlayAgain: () => void }) {\n return (\n

\n \n

🎉🏆🎉

\n You Did It!\n

\n ⭐ All animals matched! ⭐\n

\n \n 🔄 Play Again\n \n

\n );\n}\n",[],[155,222,232],"fc08bdd9-fbc2-4754-b5cd-1a8c8a43f697","SoundButton.tsx","614eef9a-68d8-11f1-90af-1607ee4eb77e",6,["D",1781541397988],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface Props {\n matched: boolean;\n isActive: boolean; // şu an seçili (eşleştirilmeyi bekleyen) buton\n onPlay: () => void; // tıklayınca kelimeyi seslendir + bu butonu seç\n onDragStart: () => void;\n onDragEnd: () => void;\n}\n\n// Yazısız ses butonu: sadece hoparlör simgesi (inline SVG).\nexport function SoundButton({ matched, isActive, onPlay, onDragStart, onDragEnd }: Props) {\n let base = \"bg-purple-500 hover:bg-purple-600\";\n if (matched) base = \"bg-green-500 cursor-default\";\n else if (isActive) base = \"bg-pink-500 ring-8 ring-pink-300 animate-pulse\";\n\n return (\n {\n e.dataTransfer.effectAllowed = \"move\";\n // bazı tarayıcılar veri olmadan sürüklemeyi engeller\n e.dataTransfer.setData(\"text/plain\", \"sound\");\n onDragStart();\n }}\n onDragEnd={onDragEnd}\n class={`relative flex items-center justify-center rounded-3xl shadow-lg\n ${base} text-white\n w-full aspect-square select-none transition-all duration-200\n ${matched ? \"opacity-90\" : \"hover:scale-105 active:scale-95 cursor-pointer\"}`}\n aria-label=\"Play sound\"\n >\n {matched\n ? (\n \n )\n : (\n \n )}\n \n );\n}\n",[],[155,222,240],"f59891c2-ed60-4b14-b9ac-7cc8174a5be4","Confetti.tsx","51270cc4-68d8-11f1-b8a2-1607ee4eb77e",4,["D",1781541370882],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo } from \"https://esm.sh/react@18.2.0\";\n\nconst COLORS = [\n \"#ef4444\", \"#f59e0b\", \"#eab308\", \"#22c55e\",\n \"#06b6d4\", \"#3b82f6\", \"#8b5cf6\", \"#ec4899\",\n];\n\n// Harici kütüphane yok: bir grup renkli kareyi yukarıdan aşağı düşürüyoruz.\nexport function Confetti({ count = 120 }: { count?: number }) {\n const pieces = useMemo(() => {\n return Array.from({ length: count }).map((_, i) => ({\n id: i,\n left: Math.random() * 100, // %\n delay: Math.random() * 0.6, // s\n duration: 2.5 + Math.random() * 2, // s\n size: 8 + Math.random() * 10, // px\n color: COLORS[i % COLORS.length],\n rotate: Math.random() * 360,\n round: Math.random() > 0.5,\n }));\n }, [count]);\n\n return (\n

\n \n {pieces.map((p) => (\n \n ))}\n

\n );\n}\n",[],[155,222,248],"0386c7e2-7431-4ea6-86ff-3b2e73218f84","App.tsx","019ecc23-2745-726a-a755-e54d81208c30",8,["D",1781541436613],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { ANIMALS, type Animal, shuffle } from \"./animals.ts\";\nimport { AnimalCard, type CardState } from \"./AnimalCard.tsx\";\nimport { SoundButton } from \"./SoundButton.tsx\";\nimport { Confetti } from \"./Confetti.tsx\";\nimport { WinScreen } from \"./WinScreen.tsx\";\nimport {\n playApplause,\n playBuzzer,\n playCheer,\n playSparkle,\n speak,\n unlockAudio,\n} from \"./sound.ts\";\n\nconst PRAISE = [\"Great Job!\", \"Excellent!\", \"Awesome!\", \"Well Done!\", \"Super!\"];\n\nexport function App() {\n // Her oyun turu için iki bağımsız karıştırılmış sıralama\n const [round, setRound] = useState(0);\n const animalsLeft = useMemo(() => shuffle(ANIMALS), [round]);\n const soundsRight = useMemo(() => shuffle(ANIMALS), [round]);\n\n // Eşleşen hayvan id'leri\n const [matched, setMatched] = useState>(new Set());\n // Şu an seçili olan ses (kelime). Çocuk bunu bir hayvana eşleştirecek.\n const [activeId, setActiveId] = useState(null);\n // Sürüklenen ses\n const [draggingId, setDraggingId] = useState(null);\n // Sürüklemenin üzerinde olduğu hayvan kartı\n const [dropTargetId, setDropTargetId] = useState(null);\n // Geçici doğru/yanlış geri bildirim durumu (kart id -> state)\n const [feedback, setFeedback] = useState>({});\n // Kutlama (kısa konfeti) ve oyun sonu\n const [celebrate, setCelebrate] = useState(false);\n const [won, setWon] = useState(false);\n\n const allDone = matched.size === ANIMALS.length;\n\n useEffect(() => {\n if (allDone && !won) {\n setWon(true);\n playCheer();\n setTimeout(() => speak(\"You did it! Amazing!\"), 300);\n }\n }, [allDone, won]);\n\n function playWord(animal: Animal) {\n unlockAudio();\n setActiveId(animal.id);\n speak(animal.word);\n }\n\n // Bir hayvana, seçili/sürüklenen sesi eşleştirmeyi dene\n function attemptMatch(targetAnimal: Animal, soundId: string | null) {\n if (!soundId || matched.has(targetAnimal.id)) return;\n unlockAudio();\n\n if (soundId === targetAnimal.id) {\n // DOĞRU\n const next = new Set(matched);\n next.add(targetAnimal.id);\n setMatched(next);\n setActiveId(null);\n setFeedback((f) => ({ ...f, [targetAnimal.id]: \"correct\" }));\n playApplause();\n playSparkle();\n // kısa konfeti patlaması (oyun sonu değilse)\n if (next.size < ANIMALS.length) {\n setCelebrate(true);\n setTimeout(() => setCelebrate(false), 1500);\n }\n const praise = PRAISE[Math.floor(Math.random() * PRAISE.length)];\n setTimeout(() => speak(praise), 250);\n } else {\n // YANLIŞ — puan kaybı yok, tekrar denenebilir\n setFeedback((f) => ({ ...f, [targetAnimal.id]: \"wrong\" }));\n playBuzzer();\n setTimeout(() => speak(\"Daat! Try again.\"), 200);\n setTimeout(() => {\n setFeedback((f) => {\n const c = { ...f };\n delete c[targetAnimal.id];\n return c;\n });\n }, 700);\n }\n }\n\n function resetGame() {\n setMatched(new Set());\n setActiveId(null);\n setDraggingId(null);\n setDropTargetId(null);\n setFeedback({});\n setCelebrate(false);\n setWon(false);\n setRound((r) => r + 1);\n }\n\n return (\n

\n {celebrate && }\n {won && }\n\n {/* Başlık */}\n

\n 🐾 Animal Match 🔊\n

\n Tap a 🔊 sound, then tap the right animal!\n

\n {matched.size} / {ANIMALS.length} ⭐\n

\n\n {/* Oyun alanı: sol hayvanlar | sağ ses butonları */}\n

\n {/* SOL: Hayvan görselleri */}\n

\n Animals\n

\n {animalsLeft.map((animal) => (\n attemptMatch(animal, activeId)}\n onDropAnimal={() => attemptMatch(animal, draggingId)}\n onDragOver={(over) => setDropTargetId(over ? animal.id : null)}\n />\n ))}\n

\n\n {/* SAĞ: Ses butonları (yazısız) */}\n

\n Sounds\n

\n {soundsRight.map((animal) => (\n playWord(animal)}\n onDragStart={() => setDraggingId(animal.id)}\n onDragEnd={() => setDraggingId(null)}\n />\n ))}\n

\n\n \n

\n );\n}\n",[],[155,222,256],"18e0b196-e6da-4131-95f9-3a6b806eee6e","AnimalCard.tsx","58b9cdfa-68d8-11f1-b538-1607ee4eb77e",5,["D",1781541383587],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Animal } from \"./animals.ts\";\n\nexport type CardState = \"idle\" | \"correct\" | \"wrong\";\n\ninterface Props {\n animal: Animal;\n state: CardState;\n matched: boolean;\n isDropTarget: boolean; // sürükleme bu kartın üzerindeyken\n onActivate: () => void; // tıklama ile seçim\n onDropAnimal: () => void; // sürükle-bırak ile seçim\n onDragOver: (over: boolean) => void;\n}\n\nexport function AnimalCard(\n { animal, state, matched, isDropTarget, onActivate, onDropAnimal, onDragOver }: Props,\n) {\n let ring = \"ring-4 ring-transparent\";\n if (matched) ring = \"ring-8 ring-green-500\";\n else if (state === \"correct\") ring = \"ring-8 ring-green-500\";\n else if (state === \"wrong\") ring = \"ring-8 ring-red-500 animate-wiggle\";\n else if (isDropTarget) ring = \"ring-8 ring-yellow-400\";\n\n return (\n {\n e.preventDefault();\n onDragOver(true);\n }}\n onDragLeave={() => onDragOver(false)}\n onDrop={(e) => {\n e.preventDefault();\n onDragOver(false);\n onDropAnimal();\n }}\n class={`relative flex items-center justify-center rounded-3xl shadow-lg\n ${animal.color} ${ring}\n w-full aspect-square select-none transition-all duration-200\n ${matched ? \"opacity-90 scale-95\" : \"hover:scale-105 active:scale-95 cursor-pointer\"}`}\n aria-label={animal.word}\n >\n \n {animal.emoji}\n \n\n {/* Doğru eşleşmede parlayan yıldız animasyonu */}\n {(matched || state === \"correct\") && (\n \n ⭐\n \n )}\n {matched && (\n \n ✨\n \n )}\n \n );\n}\n",[],[155,222,264],"a4374115-bc2d-4882-911c-dede0b204c54",["D",1781541316309],[171,172,173,174,175,176,177],[155,222],["D",1781541316309],[170,178,179,180],[155],["D",1781541316309],{"_11":12,"_93":89},{"_11":12,"_87":-5,"_88":89,"_48":49,"_90":91,"_92":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_80":42,"_81":82,"_83":84,"_85":14,"_86":12},"ctx",{"_73":-5,"_117":315,"_316":317,"_318":319,"_320":40,"_321":40,"_322":40,"_323":53,"_324":-5,"_325":-7,"_326":-7,"_327":57,"_328":40,"_329":40,"_330":-5,"_331":40,"_332":40,"_333":40,"_334":-5},"ENV",{"_286":287,"_288":289,"_290":26,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1