\n \n\n",[],[211,213],"347b795a-3900-11f1-8ac3-42b51c65c3df","Card.tsx","347b7a04-3900-11f1-8ac3-42b51c65c3df","fa06a754-38ff-11f1-8ead-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}",[],[211,229,221],"components","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}",[],[211,229,231],"fa06a696-38ff-11f1-8ead-42b51c65c3df",6,["D",1776280748746],[171,172],[211,229],"f8057dcc-38ff-11f1-8ac3-42b51c65c3df",4,["D",1776280745366],[170,173,174],[211],["D",1776280703480],{"_11":12,"_123":71},{"_11":12,"_119":-5,"_70":71,"_31":69,"_120":121,"_122":30},{"_39":110,"_13":16,"_33":36,"_111":75,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":14,"_118":12},"ctx",{"_53":-5,"_142":285,"_286":287,"_288":289,"_290":30,"_291":30,"_292":30,"_293":24,"_294":-5,"_295":-7,"_296":-7,"_297":26,"_298":30,"_299":30,"_300":-5,"_301":30,"_302":30,"_303":30,"_304":-5},"ENV",{"_256":257,"_258":259,"_260":16,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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 · shared