\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",[],[166,184],{"_109":194,"_102":195,"_167":196,"_169":168,"_170":152,"_171":197,"_173":124,"_111":198,"_106":188,"_175":199,"_177":200,"_178":22,"_179":-5,"_180":201,"_105":202},"6da487b8-3904-11f1-a77f-42b51c65c3df","index.html","280f1a48-3903-11f1-bbae-42b51c65c3df",11,["D",1776282660719],"file","\n\n\n \n \n Hayvan-Yiyecek Eşleştirme 🐾🍌\n \n \n \n \n \n\n\n

\n \n\n\n",[],[166,195],{"_109":204,"_102":205,"_167":206,"_169":168,"_170":152,"_171":207,"_173":124,"_111":208,"_106":33,"_175":189,"_177":209,"_178":22,"_179":-5,"_180":210,"_105":211},"2ba6151c-3903-11f1-a9f0-42b51c65c3df","index.tsx","2ba615e4-3903-11f1-a9f0-42b51c65c3df",5,["D",1776282120485],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n",[],[166,205],[166],{"_109":214,"_102":215,"_167":216,"_169":-5,"_170":152,"_171":217,"_173":124,"_111":218,"_106":33,"_175":176,"_177":-5,"_178":22,"_179":-5,"_180":219,"_105":229},"260ac76a-3903-11f1-b178-42b51c65c3df","shared","a429fe0c-6655-4db7-a313-b38d677ef70e",3,["D",1776282111098],[220],{"_109":221,"_102":222,"_167":223,"_169":216,"_170":152,"_171":224,"_173":124,"_111":225,"_106":188,"_175":189,"_177":226,"_178":22,"_179":-5,"_180":227,"_105":228},"69a4e130-3904-11f1-aa31-42b51c65c3df","cards.ts","260a9a10-3903-11f1-b178-42b51c65c3df",10,["D",1776282653999],"export interface AnimalFoodPair {\n id: number;\n animal: string; // hayvan adı\n animalEmoji: string; // hayvan emojisi\n food: string; // yiyecek adı\n foodEmoji: string; // yiyecek emojisi\n color: string; // tema rengi\n}\n\nexport const PAIRS: AnimalFoodPair[] = [\n { id: 1, animal: \"İnek\", animalEmoji: \"🐄\", food: \"Ot\", foodEmoji: \"🌿\", color: \"#4CAF50\" },\n { id: 2, animal: \"Maymun\", animalEmoji: \"🐒\", food: \"Muz\", foodEmoji: \"🍌\", color: \"#FFC107\" },\n { id: 3, animal: \"Tavşan\", animalEmoji: \"🐰\", food: \"Havuç\", foodEmoji: \"🥕\", color: \"#FF7043\" },\n { id: 4, animal: \"Kedi\", animalEmoji: \"🐱\", food: \"Balık\", foodEmoji: \"🐟\", color: \"#42A5F5\" },\n { id: 5, animal: \"Köpek\", animalEmoji: \"🐶\", food: \"Kemik\", foodEmoji: \"🦴\", color: \"#8D6E63\" },\n { id: 6, animal: \"Fare\", animalEmoji: \"🐭\", food: \"Peynir\", foodEmoji: \"🧀\", color: \"#FFCA28\" },\n { id: 7, animal: \"Sincap\", animalEmoji: \"🐿️\", food: \"Fındık\", foodEmoji: \"🌰\", color: \"#A1887F\" },\n { id: 8, animal: \"Ayı\", animalEmoji: \"🐻\", food: \"Bal\", foodEmoji: \"🍯\", color: \"#FFB300\" },\n { id: 9, animal: \"Fil\", animalEmoji: \"🐘\", food: \"Fıstık\", foodEmoji: \"🥜\", color: \"#78909C\" },\n { id: 10, animal: \"Tavuk\", animalEmoji: \"🐔\", food: \"Mısır\", foodEmoji: \"🌽\", color: \"#FDD835\" },\n];\n",[],[215,222],[215],{"_109":231,"_102":232,"_167":233,"_169":-5,"_170":152,"_171":151,"_173":124,"_111":234,"_106":188,"_175":199,"_177":235,"_178":22,"_179":-5,"_180":236,"_105":237},"99f9b090-3904-11f1-b2b2-42b51c65c3df","README.md","5a8ffd48-3903-11f1-8473-42b51c65c3df",["D",1776282735076],"# 🐾 Hayvan-Yiyecek Eşleştirme Oyunu 🍽️\n\nOkul öncesi çocuklar için interaktif **hayvan-yiyecek eşleştirme** oyunu.\n\n20 kart ekranda açık şekilde dizili — her hayvanı sevdiği yiyecekle eşleştir!\n\n## 📋 Eşleştirme Çiftleri (10 Takım)\n\n| Hayvan | Yiyecek |\n|---|---|\n| 🐄 İnek | 🌿 Ot |\n| 🐒 Maymun | 🍌 Muz |\n| 🐰 Tavşan | 🥕 Havuç |\n| 🐱 Kedi | 🐟 Balık |\n| 🐶 Köpek | 🦴 Kemik |\n| 🐭 Fare | 🧀 Peynir |\n| 🐿️ Sincap | 🌰 Fındık |\n| 🐻 Ayı | 🍯 Bal |\n| 🐘 Fil | 🥜 Fıstık |\n| 🐔 Tavuk | 🌽 Mısır |\n\n## 🎮 Nasıl Oynanır?\n\n1. Kartlardan bir **hayvan** seç (örn: 🐰 Tavşan)\n2. Sonra onun **yiyeceğini** seç (örn: 🥕 Havuç)\n3. ✅ Doğruysa → kartlar kaybolur!\n4. ❌ Yanlışsa → kırmızı yanar, seçim sıfırlanır\n5. 10 çifti de eşleştirince → **\"Tebrikler! Hepsini Besledin!\"** 🎉\n\n## 🏗️ Mimari\n\n```mermaid\ngraph TD\n A[main.ts - Hono HTTP] --> B[frontend/index.html]\n B --> C[frontend/index.tsx - React entrypoint]\n C --> D[frontend/App.tsx - Oyun bileşeni]\n D --> E[shared/cards.ts - 10 hayvan-yiyecek çifti]\n```\n\n## ✨ Özellikler\n\n- 🎨 **Renkli, büyük kartlar** — çocuk dostu tasarım\n- 🔀 **Rastgele karıştırma** — her oyun farklı\n- 🎵 **Ses efektleri** — doğru/yanlış/kazanma sesleri\n- 🎊 **Konfeti animasyonu** — kazanınca kutlama\n- 📊 **Skor takibi** — puan + deneme sayacı\n- 📱 **Responsive grid** — mobil ve masaüstü uyumlu\n",[],[232],{"_109":239,"_102":240,"_167":122,"_169":-5,"_170":152,"_171":241,"_173":124,"_111":242,"_106":172,"_175":243,"_177":244,"_178":22,"_179":-5,"_180":245,"_105":246},"4befc91c-3903-11f1-ac51-42b51c65c3df","main.ts",8,["D",1776282174673],"http","import { Hono } from \"npm:hono@4\";\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\napp.onError((err) => Promise.reject(err));\n\n// Serve the main HTML page\napp.get(\"/\", (c) => serveFile(\"frontend/index.html\", import.meta.url));\n\n// Serve frontend files (tsx gets transpiled automatically)\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve shared files\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// View source link\napp.get(\"/source\", (c) => c.redirect(parseVal(import.meta.url).links.self.val));\n\nexport default app.fetch;\n",[],[240],"files",[164,182,193,203,213,220,230,238],"counts",{"_251":33,"_252":188,"_253":33,"_254":255,"_258":259},"pulls","branches","forks","envVars",{"_256":33,"_257":33},"count","emptyCount","connections",{"_256":33,"_260":33},"unfilledCount","contents",[263,266,269,272],{"_109":165,"_102":166,"_167":168,"_169":-5,"_170":152,"_171":172,"_173":124,"_111":264,"_106":33,"_175":176,"_177":-5,"_178":22,"_179":-5,"_105":265},["D",1776282099171],[166],{"_109":214,"_102":215,"_167":216,"_169":-5,"_170":152,"_171":217,"_173":124,"_111":267,"_106":33,"_175":176,"_177":-5,"_178":22,"_179":-5,"_105":268},["D",1776282111098],[215],{"_109":231,"_102":232,"_167":233,"_169":-5,"_170":152,"_171":151,"_173":124,"_111":270,"_106":188,"_175":199,"_177":235,"_178":22,"_179":-5,"_105":271},["D",1776282735076],[232],{"_109":239,"_102":240,"_167":122,"_169":-5,"_170":152,"_171":241,"_173":124,"_111":273,"_106":172,"_175":243,"_177":244,"_178":22,"_179":-5,"_105":274},["D",1776282174673],[240],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_100":101,"_102":103,"_107":283,"_254":288,"_289":22},{"_109":110,"_102":103,"_111":284,"_113":-5,"_114":22,"_115":116,"_117":118,"_119":-5,"_14":120,"_121":122,"_123":124,"_125":-5,"_126":-5,"_127":33,"_16":128,"_129":-5,"_130":-5,"_131":-5,"_132":-5,"_133":134,"_135":134,"_136":137,"_138":137,"_139":137,"_140":134,"_141":134,"_23":285,"_144":286,"_149":287,"_161":22},["D",1776282060541],{"_100":101,"_143":79},{"_100":101,"_146":79,"_14":120,"_147":148},{"_106":151,"_102":48,"_109":152,"_153":110,"_154":-5,"_155":-5,"_156":-5,"_157":-5,"_158":-5,"_159":103,"_160":101},[],"isTeamOrg","actionData","errors"]

kayaaleyna

hayvan-yiyecek-eslestirme

Environment variables