\n \n\n\n","label",[162,65],"frontend","pulls","branches","forks","envVars",{"_170":26,"_172":26},"connections",{"_170":26,"_171":26},"count","unfilledCount","emptyCount",{"_33":234,"_13":162,"_63":153,"_43":-5,"_35":36,"_154":185,"_155":94,"_37":235,"_39":26,"_66":212,"_158":-5,"_67":24,"_160":-5,"_188":236,"_17":237},{"_33":226,"_13":227,"_63":228,"_43":153,"_35":36,"_154":229,"_155":94,"_37":230,"_39":157,"_66":204,"_158":231,"_67":24,"_160":-5,"_188":232,"_17":233},{"_33":152,"_13":65,"_63":64,"_43":153,"_35":36,"_154":73,"_155":94,"_37":223,"_39":157,"_66":21,"_158":159,"_67":24,"_160":-5,"_188":224,"_17":225},{"_33":215,"_13":216,"_63":217,"_43":153,"_35":36,"_154":218,"_155":94,"_37":219,"_39":26,"_66":204,"_158":220,"_67":24,"_160":-5,"_188":221,"_17":222},{"_33":209,"_13":208,"_63":201,"_43":-5,"_35":36,"_154":210,"_155":94,"_37":211,"_39":26,"_66":212,"_158":-5,"_67":24,"_160":-5,"_188":213,"_17":214},{"_33":198,"_13":199,"_63":200,"_43":201,"_35":36,"_154":202,"_155":94,"_37":203,"_39":157,"_66":204,"_158":205,"_67":24,"_160":-5,"_188":206,"_17":207},{"_33":191,"_13":192,"_63":193,"_43":-5,"_35":36,"_154":117,"_155":94,"_37":194,"_39":157,"_66":21,"_158":195,"_67":24,"_160":-5,"_188":196,"_17":197},{"_33":181,"_13":182,"_63":92,"_43":-5,"_35":36,"_154":183,"_155":94,"_37":184,"_39":185,"_66":186,"_158":187,"_67":24,"_160":-5,"_188":189,"_17":190},"4befc91c-3903-11f1-ac51-42b51c65c3df","main.ts",8,["D",1776282174673],2,"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","children",[],[182],"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",[],[192],"69a4e130-3904-11f1-aa31-42b51c65c3df","cards.ts","260a9a10-3903-11f1-b178-42b51c65c3df","a429fe0c-6655-4db7-a313-b38d677ef70e",10,["D",1776282653999],"script","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",[],[208,199],"shared","260ac76a-3903-11f1-b178-42b51c65c3df",3,["D",1776282111098],"directory",[178],[208],"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",[],[162,216],["D",1776282660719],[],[162,65],"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",[],[162,227],"1ef021dc-3903-11f1-b873-42b51c65c3df",["D",1776282099171],[174,175,176],[162],["D",1776282060541],{"_11":12,"_130":70},{"_11":12,"_126":-5,"_69":70,"_30":68,"_127":128,"_129":24},{"_39":117,"_13":16,"_33":36,"_118":81,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":14,"_125":12},"ctx",{"_53":-5,"_149":275,"_276":277,"_278":279,"_280":24,"_281":24,"_282":24,"_283":94,"_284":-5,"_285":-7,"_286":-7,"_287":26,"_288":24,"_289":24,"_290":-5,"_291":24,"_292":24,"_293":24,"_294":-5},"ENV",{"_246":247,"_248":249,"_250":16,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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 · index.html