\n \n\n\n",[],[218,220],"88f6bba8-3904-11f1-aa31-42b51c65c3df","App.tsx","46c47410-3903-11f1-9a35-42b51c65c3df",12,["D",1776282706555],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useCallback, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { PAIRS } from \"../shared/cards.ts\";\nimport type { AnimalFoodPair } from \"../shared/cards.ts\";\n\n// Each card on the board is either an animal or a food\ninterface GameCard {\n uid: string;\n pairId: number;\n type: \"animal\" | \"food\";\n emoji: string;\n label: string;\n color: string;\n}\n\nfunction 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\nfunction buildCards(): GameCard[] {\n const cards: GameCard[] = [];\n for (const p of PAIRS) {\n cards.push({\n uid: `animal-${p.id}`,\n pairId: p.id,\n type: \"animal\",\n emoji: p.animalEmoji,\n label: p.animal,\n color: p.color,\n });\n cards.push({\n uid: `food-${p.id}`,\n pairId: p.id,\n type: \"food\",\n emoji: p.foodEmoji,\n label: p.food,\n color: p.color,\n });\n }\n return shuffle(cards);\n}\n\nfunction playSound(freq: number, type: OscillatorType = \"sine\", duration = 0.15) {\n try {\n const ctx = new AudioContext();\n const osc = ctx.createOscillator();\n const gain = ctx.createGain();\n osc.connect(gain);\n gain.connect(ctx.destination);\n osc.frequency.value = freq;\n osc.type = type;\n gain.gain.value = 0.12;\n osc.start();\n osc.stop(ctx.currentTime + duration);\n } catch {}\n}\n\nfunction playMatchSound() {\n playSound(659, \"sine\", 0.1);\n setTimeout(() => playSound(880, \"sine\", 0.15), 100);\n}\n\nfunction playWrongSound() {\n playSound(200, \"square\", 0.2);\n}\n\nfunction playWinSound() {\n [523, 659, 784, 1047].forEach((f, i) => {\n setTimeout(() => playSound(f, \"sine\", 0.2), i * 150);\n });\n}\n\n// ─── Single Card Component ───\nfunction CardButton({\n card,\n isSelected,\n isWrong,\n isLeaving,\n onClick,\n}: {\n card: GameCard;\n isSelected: boolean;\n isWrong: boolean;\n isLeaving: boolean;\n onClick: () => void;\n}) {\n const borderIcon = card.type === \"animal\" ? \"🐾\" : \"🍽️\";\n\n let border = \"#e5e7eb\";\n let bg = \"white\";\n let shadow = \"0 3px 10px rgba(0,0,0,0.08)\";\n let scale = \"scale(1)\";\n\n if (isLeaving) {\n scale = \"scale(0)\";\n bg = `${card.color}30`;\n border = card.color;\n shadow = `0 0 20px ${card.color}66`;\n } else if (isWrong) {\n border = \"#ef4444\";\n bg = \"#fef2f2\";\n shadow = \"0 0 12px #ef444444\";\n } else if (isSelected) {\n border = card.color;\n bg = `${card.color}15`;\n shadow = `0 0 16px ${card.color}44`;\n scale = \"scale(1.05)\";\n }\n\n return (\n \n {card.emoji}\n \n {card.label}\n \n {borderIcon}\n \n );\n}\n\n// ─── Confetti ───\nfunction Confetti() {\n const colors = [\"#4CAF50\", \"#FFC107\", \"#FF7043\", \"#42A5F5\", \"#8D6E63\", \"#FFCA28\", \"#A1887F\", \"#FFB300\"];\n const pieces = Array.from({ length: 70 }, (_, i) => ({\n id: i,\n left: Math.random() * 100,\n delay: Math.random() * 2,\n color: colors[i % colors.length],\n size: 6 + Math.random() * 10,\n duration: 2 + Math.random() * 2,\n rotation: Math.random() * 720,\n }));\n\n return (\n

\n {pieces.map((p) => (\n 0.5 ? \"50%\" : \"3px\",\n background: p.color,\n animation: `confettiFall ${p.duration}s ease-in ${p.delay}s forwards`,\n }}\n />\n ))}\n \n

\n );\n}\n\n// ─── Main App ───\nexport function App() {\n const [cards, setCards] = useState(buildCards);\n const [selected, setSelected] = useState(null);\n const [matched, setMatched] = useState>(new Set());\n const [leaving, setLeaving] = useState>(new Set());\n const [wrongUids, setWrongUids] = useState>(new Set());\n const [score, setScore] = useState(0);\n const [attempts, setAttempts] = useState(0);\n const [showConfetti, setShowConfetti] = useState(false);\n const lockRef = useRef(false);\n\n const isComplete = matched.size === PAIRS.length;\n\n // Win celebration\n useEffect(() => {\n if (isComplete && matched.size > 0) {\n playWinSound();\n setShowConfetti(true);\n const t = setTimeout(() => setShowConfetti(false), 6000);\n return () => clearTimeout(t);\n }\n }, [isComplete]);\n\n const handleCardClick = useCallback((clickedCard: GameCard) => {\n if (lockRef.current) return;\n if (matched.has(clickedCard.pairId)) return;\n if (leaving.has(clickedCard.pairId)) return;\n\n // Nothing selected yet → select this card\n if (!selected) {\n setSelected(clickedCard.uid);\n return;\n }\n\n // Clicking the same card → deselect\n if (selected === clickedCard.uid) {\n setSelected(null);\n return;\n }\n\n // Find the first selected card\n const firstCard = cards.find((c) => c.uid === selected);\n if (!firstCard) {\n setSelected(clickedCard.uid);\n return;\n }\n\n // Don't allow matching same type (animal-animal or food-food)\n if (firstCard.type === clickedCard.type) {\n // Just switch selection to the new card\n setSelected(clickedCard.uid);\n return;\n }\n\n // Now we have two different-type cards selected — check match\n lockRef.current = true;\n setAttempts((a) => a + 1);\n\n if (firstCard.pairId === clickedCard.pairId) {\n // ✅ MATCH! Animate leaving then remove\n playMatchSound();\n setScore((s) => s + 10);\n setLeaving((prev) => new Set([...prev, firstCard.pairId]));\n setSelected(null);\n\n setTimeout(() => {\n setMatched((prev) => new Set([...prev, firstCard.pairId]));\n setLeaving((prev) => {\n const next = new Set(prev);\n next.delete(firstCard.pairId);\n return next;\n });\n lockRef.current = false;\n }, 450);\n } else {\n // ❌ WRONG — flash red then reset\n playWrongSound();\n setWrongUids(new Set([firstCard.uid, clickedCard.uid]));\n\n setTimeout(() => {\n setWrongUids(new Set());\n setSelected(null);\n lockRef.current = false;\n }, 700);\n }\n }, [selected, cards, matched, leaving]);\n\n const resetGame = () => {\n lockRef.current = false;\n setCards(buildCards());\n setSelected(null);\n setMatched(new Set());\n setLeaving(new Set());\n setWrongUids(new Set());\n setScore(0);\n setAttempts(0);\n setShowConfetti(false);\n };\n\n // Visible cards (not yet matched)\n const visibleCards = cards.filter((c) => !matched.has(c.pairId));\n\n return (\n

\n {showConfetti && }\n\n {/* Header */}\n

\n 🐾 Hayvan-Yiyecek Eşleştirme 🍽️\n

\n Her hayvanı sevdiği yiyecekle eşleştir!\n

\n\n {/* Scoreboard */}\n

\n ⭐ Puan: {score}\n

\n 🎯 Deneme: {attempts}\n

\n ✅ {matched.size} / {PAIRS.length}\n

\n\n {/* Instruction hint */}\n {!isComplete && (\n

\n 💡 Önce bir hayvan, sonra onun yiyeceğini seç!\n

\n )}\n\n {/* Card Grid — 20 cards in a responsive grid, centered */}\n {!isComplete && (\n \n {visibleCards.map((card) => (\n handleCardClick(card)}\n />\n ))}\n

\n )}\n\n {/* Win Message */}\n {isComplete && (\n

🎉🐾🍽️🎉

\n Tebrikler!\n

\n Hepsini Besledin! 🥳\n

\n {attempts} denemede {score} puan kazandın!\n

\n {PAIRS.map((p) => (\n \n {p.animalEmoji}❤️{p.foodEmoji}\n \n ))}\n

\n )}\n\n {/* Reset */}\n \n 🔄 Yeniden Oyna\n \n\n {/* Footer */}\n

\n kaynak kodu\n {\" \"}•{\" \"}Okul öncesi eğitim için hazırlanmıştır 🧸\n

\n \n );\n}\n",[],[218,228],"1ef021dc-3903-11f1-b873-42b51c65c3df",["D",1776282099171],[179,180,181],[218],["D",1776282060541],{"_11":12,"_133":72},{"_11":12,"_129":-5,"_71":72,"_31":70,"_130":131,"_132":30},{"_40":120,"_13":16,"_34":37,"_121":85,"_122":-5,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":14,"_128":12},"ctx",{"_54":-5,"_152":276,"_277":278,"_279":280,"_281":30,"_282":30,"_283":30,"_284":24,"_285":-5,"_286":-7,"_287":-7,"_288":26,"_289":30,"_290":30,"_291":-5,"_292":30,"_293":30,"_294":30,"_295":-5},"ENV",{"_247":248,"_249":250,"_251":16,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275},"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"]

History · shared