❓

\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}",[165,83,66],"4673a22c-3900-11f1-9d46-42b51c65c3df",["D",1776280876986],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { months } from \"../../shared/card-data.ts\";\nimport Card, { type CardType } from \"./Card.tsx\";\n\ninterface GameCard {\n uid: string; // unique in the deck\n monthId: number;\n type: CardType;\n monthName: string;\n iconSvg: string;\n iconLabel: string;\n bgColor: 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 buildDeck(): GameCard[] {\n const cards: GameCard[] = [];\n for (const m of months) {\n cards.push({\n uid: `month-${m.id}`,\n monthId: m.id,\n type: \"month\",\n monthName: m.month,\n iconSvg: m.icon,\n iconLabel: m.iconLabel,\n bgColor: m.bgColor,\n });\n cards.push({\n uid: `icon-${m.id}`,\n monthId: m.id,\n type: \"icon\",\n monthName: m.month,\n iconSvg: m.icon,\n iconLabel: m.iconLabel,\n bgColor: m.bgColor,\n });\n }\n return shuffle(cards);\n}\n\nfunction Confetti() {\n const particles = useMemo(() => {\n const colors = [\"#FF6B6B\", \"#4ECDC4\", \"#45B7D1\", \"#96CEB4\", \"#FFEAA7\", \"#DDA0DD\", \"#98D8C8\", \"#F7DC6F\"];\n return Array.from({ length: 40 }, (_, i) => ({\n id: i,\n left: Math.random() * 100,\n delay: Math.random() * 2,\n duration: 2 + Math.random() * 2,\n color: colors[i % colors.length],\n size: 6 + Math.random() * 8,\n }));\n }, []);\n\n return (\n

\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}",[165,83,81],"pulls","branches",1,"forks","envVars",{"_184":26,"_186":26},"connections",{"_184":26,"_185":26},"count","unfilledCount","emptyCount",{"_34":254,"_13":165,"_64":157,"_44":-5,"_36":37,"_158":255,"_160":24,"_38":256,"_40":26,"_67":84,"_162":-5,"_69":30,"_163":-5,"_204":257,"_17":258},{"_34":156,"_13":83,"_64":82,"_44":157,"_36":37,"_158":159,"_160":24,"_38":251,"_40":26,"_67":84,"_162":-5,"_69":30,"_163":-5,"_204":252,"_17":253},{"_34":172,"_13":81,"_64":80,"_44":82,"_36":37,"_158":75,"_160":24,"_38":248,"_40":26,"_67":68,"_162":174,"_69":30,"_163":-5,"_204":249,"_17":250},{"_34":168,"_13":66,"_64":65,"_44":82,"_36":37,"_158":41,"_160":24,"_38":245,"_40":26,"_67":68,"_162":170,"_69":30,"_163":-5,"_204":246,"_17":247},{"_34":237,"_13":238,"_64":239,"_44":157,"_36":37,"_158":240,"_160":24,"_38":241,"_40":26,"_67":21,"_162":242,"_69":30,"_163":-5,"_204":243,"_17":244},{"_34":229,"_13":230,"_64":231,"_44":157,"_36":37,"_158":232,"_160":24,"_38":233,"_40":26,"_67":68,"_162":234,"_69":30,"_163":-5,"_204":235,"_17":236},{"_34":224,"_13":223,"_64":217,"_44":-5,"_36":37,"_158":225,"_160":24,"_38":226,"_40":26,"_67":84,"_162":-5,"_69":30,"_163":-5,"_204":227,"_17":228},{"_34":214,"_13":215,"_64":216,"_44":217,"_36":37,"_158":218,"_160":24,"_38":219,"_40":26,"_67":68,"_162":220,"_69":30,"_163":-5,"_204":221,"_17":222},{"_34":207,"_13":208,"_64":209,"_44":-5,"_36":37,"_158":121,"_160":24,"_38":210,"_40":26,"_67":21,"_162":211,"_69":30,"_163":-5,"_204":212,"_17":213},{"_34":197,"_13":198,"_64":97,"_44":-5,"_36":37,"_158":199,"_160":24,"_38":200,"_40":201,"_67":202,"_162":203,"_69":30,"_163":-5,"_204":205,"_17":206},"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;","children",[],[198],"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",[],[208],"232cc398-3900-11f1-a35d-42b51c65c3df","card-data.ts","232cc47e-3900-11f1-a35d-42b51c65c3df","f82c92fe-38ff-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",[],[223,215],"shared","f82c9204-38ff-11f1-a35d-42b51c65c3df",5,["D",1776280745581],[194],[223],"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();",[],[165,230],"2a5b71f0-3900-11f1-9b5b-42b51c65c3df","index.html","2a5b729a-3900-11f1-9b5b-42b51c65c3df",8,["D",1776280829847],"\n\n\n \n \n 🗓️ Ay Eşleştirme Oyunu\n \n \n \n \n \n\n\n

\n \n\n",[],[165,238],["D",1776280846816],[],[165,83,66],["D",1776280876986],[],[165,83,81],["D",1776280748746],[189,190],[165,83],"f8057dcc-38ff-11f1-8ac3-42b51c65c3df",4,["D",1776280745366],[188,191,192],[165],["D",1776280703480],{"_11":12,"_134":72},{"_11":12,"_130":-5,"_71":72,"_31":70,"_131":132,"_133":30},{"_40":121,"_13":16,"_34":37,"_122":86,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":-5,"_128":14,"_129":12},"ctx",{"_54":-5,"_153":296,"_297":298,"_299":300,"_301":30,"_302":30,"_303":30,"_304":24,"_305":-5,"_306":-7,"_307":-7,"_308":26,"_309":30,"_310":30,"_311":-5,"_312":30,"_313":30,"_314":30,"_315":-5},"ENV",{"_267":268,"_269":270,"_271":16,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295},"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 · components