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

\n );\n}\n\nexport default function App() {\n const [deck, setDeck] = useState(() => buildDeck());\n const [flipped, setFlipped] = useState([]); // uid list\n const [matched, setMatched] = useState>(new Set());\n const [moves, setMoves] = useState(0);\n const [locked, setLocked] = useState(false);\n\n const won = matched.size === 12;\n\n const handleClick = useCallback(\n (uid: string) => {\n if (locked) return;\n if (flipped.includes(uid)) return;\n const card = deck.find((c) => c.uid === uid)!;\n if (matched.has(card.monthId)) return;\n\n const next = [...flipped, uid];\n setFlipped(next);\n\n if (next.length === 2) {\n setMoves((m) => m + 1);\n const [a, b] = next.map((u) => deck.find((c) => c.uid === u)!);\n if (a.monthId === b.monthId && a.type !== b.type) {\n // Match!\n setTimeout(() => {\n setMatched((prev) => new Set([...prev, a.monthId]));\n setFlipped([]);\n }, 600);\n } else {\n // No match\n setLocked(true);\n setTimeout(() => {\n setFlipped([]);\n setLocked(false);\n }, 1000);\n }\n }\n },\n [deck, flipped, matched, locked],\n );\n\n const restart = () => {\n setDeck(buildDeck());\n setFlipped([]);\n setMatched(new Set());\n setMoves(0);\n setLocked(false);\n };\n\n return (\n

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

\n 🗓️ Ay Eşleştirme Oyunu\n

\n Her ayı simgesiyle eşleştir!\n

\n\n {/* Stats bar */}\n

\n Hamle\n {moves}\n

\n Eşleşme\n {matched.size}/12\n

\n \n 🔄 Yeniden\n \n

\n\n {/* Win message */}\n {won && (\n

\n \n 🎉 Tebrikler! {moves} hamlede tamamladın! 🎉\n \n

\n )}\n\n {/* Card Grid */}\n

\n {deck.map((card) => (\n handleClick(card.uid)}\n />\n ))}\n

\n\n {/* Footer */}\n \n

\n );\n}",[],[167,185,192],{"_109":201,"_102":202,"_168":203,"_170":186,"_171":153,"_172":204,"_174":124,"_111":205,"_106":33,"_176":196,"_178":206,"_179":22,"_180":-5,"_181":207,"_105":208},"347b795a-3900-11f1-8ac3-42b51c65c3df","Card.tsx","347b7a04-3900-11f1-8ac3-42b51c65c3df",10,["D",1776280846816],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nexport type CardType = \"month\" | \"icon\";\n\ninterface CardProps {\n monthName: string;\n iconSvg: string;\n iconLabel: string;\n bgColor: string;\n type: CardType;\n isFlipped: boolean;\n isMatched: boolean;\n onClick: () => void;\n}\n\nexport default function Card({\n monthName,\n iconSvg,\n iconLabel,\n bgColor,\n type,\n isFlipped,\n isMatched,\n onClick,\n}: CardProps) {\n const show = isFlipped || isMatched;\n\n return (\n \n \n {/* Back face (what you see when card is face-down) */}\n \n

❓

\n \n\n {/* Front face */}\n \n {type === \"month\" ? (\n

\n 🗓️\n \n {monthName}\n \n

\n ) : (\n \n )}\n \n \n\n {/* Matched sparkle */}\n {isMatched && (\n

⭐

\n )}\n \n );\n}",[],[167,185,202],[167,185],{"_109":211,"_102":212,"_168":213,"_170":169,"_171":153,"_172":214,"_174":124,"_111":215,"_106":33,"_176":216,"_178":217,"_179":22,"_180":-5,"_181":218,"_105":219},"2a5b71f0-3900-11f1-9b5b-42b51c65c3df","index.html","2a5b729a-3900-11f1-9b5b-42b51c65c3df",8,["D",1776280829847],"file","\n\n\n \n \n 🗓️ Ay Eşleştirme Oyunu\n \n \n \n \n \n\n\n

\n \n\n",[],[167,212],{"_109":221,"_102":222,"_168":223,"_170":169,"_171":153,"_172":224,"_174":124,"_111":225,"_106":33,"_176":196,"_178":226,"_179":22,"_180":-5,"_181":227,"_105":228},"2b588b42-3900-11f1-a35d-42b51c65c3df","index.tsx","2b588bce-3900-11f1-a35d-42b51c65c3df",9,["D",1776280831507],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport ReactDOM from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[167,222],[167],{"_109":231,"_102":232,"_168":233,"_170":-5,"_171":153,"_172":234,"_174":124,"_111":235,"_106":33,"_176":177,"_178":-5,"_179":22,"_180":-5,"_181":236,"_105":246},"f82c9204-38ff-11f1-a35d-42b51c65c3df","shared","f82c92fe-38ff-11f1-a35d-42b51c65c3df",5,["D",1776280745581],[237],{"_109":238,"_102":239,"_168":240,"_170":233,"_171":153,"_172":241,"_174":124,"_111":242,"_106":33,"_176":196,"_178":243,"_179":22,"_180":-5,"_181":244,"_105":245},"232cc398-3900-11f1-a35d-42b51c65c3df","card-data.ts","232cc47e-3900-11f1-a35d-42b51c65c3df",7,["D",1776280817754],"// Month matching card data for preschool game\n// Each month has a name card and a matching icon card\n\nexport interface MonthCard {\n id: number;\n month: string;\n icon: string; // SVG string for the icon\n bgColor: string; // pastel background\n iconLabel: string; // accessible label\n}\n\nexport const months: MonthCard[] = [\n {\n id: 1,\n month: \"Ocak\",\n iconLabel: \"Kardan Adam\",\n bgColor: \"#D6EAF8\",\n icon: ``,\n },\n {\n id: 2,\n month: \"Şubat\",\n iconLabel: \"Kalp\",\n bgColor: \"#FDEDEC\",\n icon: ``,\n },\n {\n id: 3,\n month: \"Mart\",\n iconLabel: \"Çiçek Açan Dal\",\n bgColor: \"#F3E5F5\",\n icon: ``,\n },\n {\n id: 4,\n month: \"Nisan\",\n iconLabel: \"Renkli Çiçekler\",\n bgColor: \"#E8F5E9\",\n icon: ``,\n },\n {\n id: 5,\n month: \"Mayıs\",\n iconLabel: \"Uğur Böceği\",\n bgColor: \"#FFF9C4\",\n icon: ``,\n },\n {\n id: 6,\n month: \"Haziran\",\n iconLabel: \"Mezuniyet Kepi\",\n bgColor: \"#E3F2FD\",\n icon: ``,\n },\n {\n id: 7,\n month: \"Temmuz\",\n iconLabel: \"Deniz ve Güneş\",\n bgColor: \"#E0F7FA\",\n icon: ``,\n },\n {\n id: 8,\n month: \"Ağustos\",\n iconLabel: \"Karpuz Dilimi\",\n bgColor: \"#FFEBEE\",\n icon: ``,\n },\n {\n id: 9,\n month: \"Eylül\",\n iconLabel: \"Okul Çantası\",\n bgColor: \"#FFF3E0\",\n icon: ``,\n },\n {\n id: 10,\n month: \"Ekim\",\n iconLabel: \"Kurumuş Yapraklar\",\n bgColor: \"#FBE9E7\",\n icon: ``,\n },\n {\n id: 11,\n month: \"Kasım\",\n iconLabel: \"Şemsiye\",\n bgColor: \"#EDE7F6\",\n icon: ``,\n },\n {\n id: 12,\n month: \"Aralık\",\n iconLabel: \"Çam Ağacı\",\n bgColor: \"#E8F5E9\",\n icon: ``,\n },\n];\n",[],[232,239],[232],{"_109":248,"_102":249,"_168":250,"_170":-5,"_171":153,"_172":152,"_174":124,"_111":251,"_106":33,"_176":216,"_178":252,"_179":22,"_180":-5,"_181":253,"_105":254},"5426d7ea-3900-11f1-bbbe-42b51c65c3df","README.md","5426d89e-3900-11f1-bbbe-42b51c65c3df",["D",1776280899971],"# 🗓️ Ay Eşleştirme Oyunu\n\nOkul öncesi çocuklar için tasarlanmış, **12 ayı ve simgelerini eşleştirme** kart oyunu.\n\n## 🎯 Nasıl Oynanır?\n1. Kartlara tıklayarak çevir\n2. Her ayı (Ocak, Şubat...) ona ait simgeyle eşleştir\n3. 12 çifti de bul ve oyunu tamamla!\n\n## 🎨 Ay – Simge Eşleşmeleri\n\n| Ay | Simge |\n|---|---|\n| Ocak | ⛄ Kardan Adam |\n| Şubat | 💗 Pembe Kalp |\n| Mart | 🌸 Çiçek Açan Dal |\n| Nisan | 🌷 Renkli Çiçekler |\n| Mayıs | 🐞 Uğur Böceği |\n| Haziran | 🎓 Mezuniyet Kepi |\n| Temmuz | 🏖️ Deniz ve Güneş |\n| Ağustos | 🍉 Karpuz Dilimi |\n| Eylül | 🎒 Okul Çantası |\n| Ekim | 🍂 Kurumuş Yapraklar |\n| Kasım | ☂️ Şemsiye |\n| Aralık | 🎄 Süslü Çam Ağacı |\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 Entry]\n C --> D[frontend/components/App.tsx - Oyun Mantığı]\n D --> E[frontend/components/Card.tsx - Kart Bileşeni]\n D --> F[shared/card-data.ts - Ay Verileri + SVG İkonlar]\n```\n\n## ✨ Özellikler\n- 🎨 Pastel tonlarda, yalın ve sevimli tasarım\n- 🃏 3D kart çevirme animasyonu\n- ⭐ Eşleşme efektleri ve konfeti kutlaması\n- 📱 Mobil uyumlu grid (4 sütun mobil, 6 sütun masaüstü)\n- ♿ Erişilebilir (ARIA etiketleri, klavye desteği)\n",[],[249],{"_109":256,"_102":257,"_168":122,"_170":-5,"_171":153,"_172":258,"_174":124,"_111":259,"_106":260,"_176":261,"_178":262,"_179":22,"_180":-5,"_181":263,"_105":264},"f5fef134-38ff-11f1-9d76-42b51c65c3df","main.ts",3,["D",1776280741988],2,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/shared/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;",[],[257],"files",[165,183,190,200,210,220,230,237,247,255],"counts",{"_269":33,"_270":271,"_272":33,"_273":274,"_277":278},"pulls","branches",1,"forks","envVars",{"_275":33,"_276":33},"count","emptyCount","connections",{"_275":33,"_279":33},"unfilledCount","contents",[282,285,288,291],{"_109":166,"_102":167,"_168":169,"_170":-5,"_171":153,"_172":173,"_174":124,"_111":283,"_106":33,"_176":177,"_178":-5,"_179":22,"_180":-5,"_105":284},["D",1776280745366],[167],{"_109":231,"_102":232,"_168":233,"_170":-5,"_171":153,"_172":234,"_174":124,"_111":286,"_106":33,"_176":177,"_178":-5,"_179":22,"_180":-5,"_105":287},["D",1776280745581],[232],{"_109":248,"_102":249,"_168":250,"_170":-5,"_171":153,"_172":152,"_174":124,"_111":289,"_106":33,"_176":216,"_178":252,"_179":22,"_180":-5,"_105":290},["D",1776280899971],[249],{"_109":256,"_102":257,"_168":122,"_170":-5,"_171":153,"_172":258,"_174":124,"_111":292,"_106":260,"_176":261,"_178":262,"_179":22,"_180":-5,"_105":293},["D",1776280741988],[257],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_100":101,"_102":103,"_107":302,"_273":307,"_308":22},{"_109":110,"_102":103,"_111":303,"_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":304,"_145":305,"_150":306,"_162":22},["D",1776280703480],{"_100":101,"_143":144},{"_100":101,"_147":144,"_14":120,"_148":149},{"_106":152,"_102":48,"_109":153,"_154":110,"_155":-5,"_156":-5,"_157":-5,"_158":-5,"_159":-5,"_160":103,"_161":101},[],"isTeamOrg","actionData","errors"]

medaa

ay-eslestirme-oyunu

Environment variables