\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","deleted","label",[183,165],"frontend","permalink","https://www.val.town/x/kayaaleyna/hayvan-yiyecek-eslestirme/code/frontend/App.tsx","extension","actionData","errors"]