\n \n\n",[],[75,119],"fa06a696-38ff-11f1-8ead-42b51c65c3df","components","fa06a754-38ff-11f1-8ead-42b51c65c3df",6,["D",1776280748746],[133,134],[75,127],{"_36":143,"_13":144,"_39":145,"_41":128,"_42":43,"_44":146,"_46":47,"_48":147,"_17":64,"_51":100,"_53":148,"_55":56,"_57":-5,"_85":149,"_18":150},{"_36":135,"_13":136,"_39":137,"_41":128,"_42":43,"_44":138,"_46":47,"_48":139,"_17":64,"_51":100,"_53":140,"_55":56,"_57":-5,"_85":141,"_18":142},"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}",[],[75,127,136],"4673a22c-3900-11f1-9d46-42b51c65c3df","App.tsx","4673a2d6-3900-11f1-9d46-42b51c65c3df",11,["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}",[],[75,127,144],"df07675e-38ff-11f1-b5e4-42b51c65c3df",["D",1776280703480],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Okul öncesi çocuklar için 12 aylık eşleştirme kart oyunu 🗓️","imageUrl","userId","183d243e-2f68-45f5-987f-d2bb93703378","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","2d0255a9-e1f2-43c4-8023-45aa6ac5c796","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_204":200},"org",{"_11":12,"_198":-5,"_199":200,"_161":162,"_201":202,"_203":56},"branch",{"_17":62,"_13":16,"_36":43,"_190":151,"_191":-5,"_192":-5,"_193":-5,"_194":-5,"_195":-5,"_196":14,"_197":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJxTTZoMElYdVpUajN3WllmM2dmY1c3cnp2VCJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":151,"_13":14,"_48":271,"_153":-5,"_154":56,"_155":156,"_157":156,"_158":159,"_160":-5,"_161":162,"_163":40,"_164":47,"_165":-5,"_166":-5,"_167":64,"_168":169,"_170":-5,"_171":-5,"_172":-5,"_173":-5,"_174":175,"_176":175,"_177":178,"_179":178,"_180":178,"_181":175,"_182":175,"_183":272,"_185":273,"_187":274,"_189":56},[241,247,249,250],"files",[241,242,243,244,245,246,247,248,249,250],"counts",{"_231":64,"_232":233,"_234":64,"_31":235,"_236":237},[223,224,225,226],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_36":74,"_13":75,"_39":76,"_41":-5,"_42":43,"_44":77,"_46":47,"_48":78,"_17":64,"_51":72,"_53":-5,"_55":56,"_57":-5,"_18":230},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":71,"_17":64,"_51":72,"_53":-5,"_55":56,"_57":-5,"_18":229},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":62,"_46":47,"_48":63,"_17":64,"_51":24,"_53":65,"_55":56,"_57":-5,"_18":228},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":227},[38],[60],[68],[75],"pulls","branches",1,"forks",{"_238":64,"_240":64},"connections",{"_238":64,"_239":64},"count","unfilledCount","emptyCount",{"_36":74,"_13":75,"_39":76,"_41":-5,"_42":43,"_44":77,"_46":47,"_48":104,"_17":64,"_51":72,"_53":-5,"_55":56,"_57":-5,"_85":269,"_18":270},{"_36":126,"_13":127,"_39":128,"_41":76,"_42":43,"_44":129,"_46":47,"_48":130,"_17":64,"_51":72,"_53":-5,"_55":56,"_57":-5,"_85":267,"_18":268},{"_36":143,"_13":144,"_39":145,"_41":128,"_42":43,"_44":146,"_46":47,"_48":147,"_17":64,"_51":100,"_53":148,"_55":56,"_57":-5,"_85":265,"_18":266},{"_36":135,"_13":136,"_39":137,"_41":128,"_42":43,"_44":138,"_46":47,"_48":139,"_17":64,"_51":100,"_53":140,"_55":56,"_57":-5,"_85":263,"_18":264},{"_36":118,"_13":119,"_39":120,"_41":76,"_42":43,"_44":121,"_46":47,"_48":122,"_17":64,"_51":24,"_53":123,"_55":56,"_57":-5,"_85":261,"_18":262},{"_36":110,"_13":111,"_39":112,"_41":76,"_42":43,"_44":113,"_46":47,"_48":114,"_17":64,"_51":100,"_53":115,"_55":56,"_57":-5,"_85":259,"_18":260},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":91,"_17":64,"_51":72,"_53":-5,"_55":56,"_57":-5,"_85":257,"_18":258},{"_36":95,"_13":96,"_39":97,"_41":69,"_42":43,"_44":98,"_46":47,"_48":99,"_17":64,"_51":100,"_53":101,"_55":56,"_57":-5,"_85":255,"_18":256},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":62,"_46":47,"_48":88,"_17":64,"_51":24,"_53":65,"_55":56,"_57":-5,"_85":253,"_18":254},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":84,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_85":251,"_18":252},[],[38],[],[60],[],[68,96],[248],[68],[],[75,111],[],[75,119],[],[75,127,136],[],[75,127,144],[243,244],[75,127],[242,245,246],[75],["D",1776280703480],{"_11":12,"_204":200},{"_11":12,"_198":-5,"_199":200,"_161":162,"_201":202,"_203":56},{"_17":62,"_13":16,"_36":43,"_190":151,"_191":-5,"_192":-5,"_193":-5,"_194":-5,"_195":-5,"_196":14,"_197":12},"ctx",{"_183":-5,"_220":308,"_309":310,"_311":312,"_313":56,"_314":56,"_315":56,"_316":47,"_317":-5,"_318":-7,"_319":-7,"_320":64,"_321":56,"_322":56,"_323":-5,"_324":56,"_325":56,"_326":56,"_327":-5},"ENV",{"_279":280,"_281":282,"_283":16,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]

Code