\n \n \n \n\n",[],[90,121],"f038e9a5-58ae-418e-97ac-f6827a62d511","favicon.svg","019f0583-85e3-7045-a144-261187b2ebce",4,["D",1782504023408],"\n\n",[],[90,128],"1dd593dd-4263-400c-9f3b-8be5b1bb233b","components","019f0583-85e3-7045-a144-22974c7db978",["D",1782503933361],[141],[90,136],{"_35":142,"_13":143,"_64":144,"_66":137,"_67":68,"_69":145,"_71":72,"_37":146,"_17":147,"_75":116,"_77":148,"_79":50,"_80":-5,"_99":149,"_18":150},"56b8f001-1b08-41f8-a0f4-81b3e1497f39","App.tsx","019f0583-85e3-7045-a144-1881ab766a91",8,["D",1783435834232],3,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// ── Types ──────────────────────────────────────────────────────────────────\ninterface ColorItem {\n id: string;\n label: string;\n hex: string;\n emoji: string;\n}\n\ntype GamePhase = \"idle\" | \"playing\" | \"won\";\n\n// ── Color data ─────────────────────────────────────────────────────────────\nconst ALL_COLORS: ColorItem[] = [\n { id: \"red\", label: \"Red\", hex: \"#EF4444\", emoji: \"🍎\" },\n { id: \"orange\", label: \"Orange\", hex: \"#F97316\", emoji: \"🍊\" },\n { id: \"yellow\", label: \"Yellow\", hex: \"#EAB308\", emoji: \"🌟\" },\n { id: \"green\", label: \"Green\", hex: \"#22C55E\", emoji: \"🍀\" },\n { id: \"blue\", label: \"Blue\", hex: \"#3B82F6\", emoji: \"🫐\" },\n { id: \"purple\", label: \"Purple\", hex: \"#A855F7\", emoji: \"🍇\" },\n { id: \"pink\", label: \"Pink\", hex: \"#EC4899\", emoji: \"🌸\" },\n { id: \"brown\", label: \"Brown\", hex: \"#92400E\", emoji: \"🍫\" },\n];\n\n// ── Helpers ────────────────────────────────────────────────────────────────\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 speak(text: string, rate = 0.9, pitch = 1.2) {\n if (!(\"speechSynthesis\" in window)) return;\n window.speechSynthesis.cancel();\n const utt = new SpeechSynthesisUtterance(text);\n utt.rate = rate;\n utt.pitch = pitch;\n utt.volume = 1;\n window.speechSynthesis.speak(utt);\n}\n\nfunction spawnConfetti() {\n const colors = [\"#EF4444\",\"#F97316\",\"#EAB308\",\"#22C55E\",\"#3B82F6\",\"#A855F7\",\"#EC4899\"];\n for (let i = 0; i < 80; i++) {\n const el = document.createElement(\"div\");\n el.className = \"confetti-piece\";\n el.style.left = Math.random() * 100 + \"vw\";\n el.style.top = \"-20px\";\n el.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n el.style.animationDuration = (1.5 + Math.random() * 2) + \"s\";\n el.style.animationDelay = (Math.random() * 1.2) + \"s\";\n el.style.borderRadius = Math.random() > 0.5 ? \"50%\" : \"2px\";\n el.style.width = (8 + Math.random() * 10) + \"px\";\n el.style.height = (8 + Math.random() * 10) + \"px\";\n document.body.appendChild(el);\n setTimeout(() => el.remove(), 4000);\n }\n}\n\n// ── Draggable Color Chip ───────────────────────────────────────────────────\nfunction ColorChip({\n item,\n onDragStart,\n matched,\n}: {\n item: ColorItem;\n onDragStart: (id: string) => void;\n matched: boolean;\n}) {\n if (matched) return null; // hide matched chips from tray\n\n return (\n {\n e.dataTransfer.effectAllowed = \"move\";\n onDragStart(item.id);\n speak(item.label);\n (e.currentTarget as HTMLElement).classList.add(\"dragging\");\n }}\n onDragEnd={(e) => {\n (e.currentTarget as HTMLElement).classList.remove(\"dragging\");\n }}\n style={{\n background: item.hex,\n width: 80,\n height: 80,\n borderRadius: 20,\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n boxShadow: \"0 4px 14px rgba(0,0,0,0.25)\",\n border: \"4px solid rgba(255,255,255,0.6)\",\n flexShrink: 0,\n }}\n >\n {item.emoji}\n \n {item.label}\n \n \n );\n}\n\n// ── Drop Zone ──────────────────────────────────────────────────────────────\nfunction DropZone({\n target,\n matched,\n onDrop,\n}: {\n target: ColorItem;\n matched: boolean;\n onDrop: (targetId: string) => void;\n}) {\n const [over, setOver] = useState(false);\n const ref = useRef(null);\n\n return (\n { e.preventDefault(); setOver(true); }}\n onDragLeave={() => setOver(false)}\n onDrop={(e) => {\n e.preventDefault();\n setOver(false);\n onDrop(target.id);\n }}\n style={{\n width: 90,\n height: 90,\n borderRadius: 22,\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n background: matched\n ? target.hex\n : over\n ? `${target.hex}55`\n : \"rgba(255,255,255,0.35)\",\n border: matched\n ? `5px solid white`\n : over\n ? `5px dashed ${target.hex}`\n : `5px dashed rgba(0,0,0,0.2)`,\n boxShadow: matched\n ? `0 6px 20px ${target.hex}88`\n : over\n ? `0 0 0 4px ${target.hex}66`\n : \"none\",\n transition: \"all 0.2s ease\",\n position: \"relative\",\n }}\n >\n {matched ? (\n <>\n {target.emoji}\n \n {target.label}\n \n

✓

\n \n ) : (\n <>\n

\n {over ? \"✨\" : \"❓\"}\n

\n \n )}\n

\n );\n}\n\n// ── Confetti Overlay (win screen) ──────────────────────────────────────────\nfunction WinBanner({ onPlayAgain }: { onPlayAgain: () => void }) {\n return (\n \n

🏆

\n You Did It!\n

\n All colors matched! Amazing job! 🎉\n

\n \n Play Again! 🎨\n \n

\n \n );\n}\n\n// ── Main App ───────────────────────────────────────────────────────────────\nexport function App() {\n const [phase, setPhase] = useState(\"idle\");\n const [items, setItems] = useState([]); // shuffled tray\n const [targets, setTargets] = useState([]); // shuffled targets\n const [matched, setMatched] = useState>(new Set());\n const [dragId, setDragId] = useState(null);\n const [wrongId, setWrongId] = useState(null);\n const [score, setScore] = useState(0);\n\n const startGame = useCallback(() => {\n const selected = shuffle(ALL_COLORS).slice(0, 6);\n setItems(shuffle([...selected]));\n setTargets(shuffle([...selected]));\n setMatched(new Set());\n setScore(0);\n setDragId(null);\n setWrongId(null);\n setPhase(\"playing\");\n speak(\"Let's play! Drag the colors to their matching spots!\", 0.85, 1.2);\n }, []);\n\n const handleDrop = useCallback(\n (targetId: string) => {\n if (!dragId) return;\n if (dragId === targetId) {\n // ✅ Correct match!\n const newMatched = new Set(matched).add(targetId);\n setMatched(newMatched);\n setScore((s) => s + 1);\n const item = ALL_COLORS.find((c) => c.id === targetId)!;\n speak(`${item.label}! Great job!`, 0.9, 1.3);\n\n if (newMatched.size === items.length) {\n setTimeout(() => {\n setPhase(\"won\");\n spawnConfetti();\n speak(\"Hooray! You matched all the colors! You are amazing!\", 0.85, 1.3);\n }, 400);\n }\n } else {\n // ❌ Wrong match\n const item = ALL_COLORS.find((c) => c.id === dragId)!;\n speak(`Oops! That's ${item.label}. Try again!`, 0.9, 1.1);\n setWrongId(targetId);\n setTimeout(() => setWrongId(null), 600);\n }\n setDragId(null);\n },\n [dragId, matched, items.length],\n );\n\n const remainingCount = items.length - matched.size;\n\n return (\n

\n {/* Header */}\n

\n 🎨 Color Match!\n

\n {phase === \"idle\"\n ? \"Match all the colors now!\"\n : phase === \"playing\"\n ? `${remainingCount} left to match! 🌈`\n : \"All done!\"}\n

\n\n {/* Score pills */}\n {phase === \"playing\" && (\n

\n ⭐ {score} matched\n

\n 🎯 {items.length} total\n

\n )}\n\n {/* Start screen */}\n {phase === \"idle\" && (\n

🎨🌈✨

\n Drag the colorful blobs to the matching spots below! Listen for the color names!\n

\n \n Start! 🚀\n \n

\n )}\n\n {/* Game board */}\n {phase === \"playing\" && (\n <>\n {/* Drop Zones */}\n

\n {targets.map((t) => (\n

\n \n

\n ))}\n

\n\n {/* Color tray */}\n

\n 🖐 Drag a color!\n

\n {items.map((item) => (\n \n ))}\n {matched.size === items.length && (\n

\n 🎉 All matched!\n

\n )}\n

\n\n {/* Restart button */}\n \n 🔄 New Game\n \n \n )}\n\n {/* Win banner */}\n {phase === \"won\" && }\n\n {/* View source */}\n

\n view source\n

\n\n {/* Shake keyframe via style tag */}\n \n

\n );\n}\n",[],[90,136,143],"511089ff-1adb-4f1f-9692-7994bfed8163",["D",1782503933361],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789592283&sig=44b87a9753697d3addbee59200b9a3c359d2ed48f21414b5b1c4b3aead32c389","userId","4672fa32-1c6f-4907-899e-57b7e45b1dcb","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019e83d1-d41f-725b-9693-b632d430a029","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_197":193},"org",{"_11":12,"_190":191,"_192":193,"_159":160,"_194":195,"_196":50},"branch",{"_17":145,"_13":16,"_35":68,"_41":151,"_44":36,"_45":186,"_187":52,"_188":42,"_189":56,"_57":14,"_53":12},89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","Potluck Mittal","avatar","https://lh3.googleusercontent.com/a/ACg8ocJYeiSQ8_eyVYtUAg9f5qRwEXzS1AreFm572a1csvZx7c6b_S8=s96-c","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":151,"_13":14,"_37":261,"_48":-5,"_153":50,"_51":52,"_154":52,"_155":156,"_157":158,"_159":160,"_161":65,"_162":72,"_163":-5,"_164":-5,"_165":74,"_55":166,"_167":-5,"_168":-5,"_169":-5,"_170":-5,"_171":172,"_173":172,"_174":175,"_176":175,"_177":175,"_178":172,"_179":172,"_180":262,"_182":263,"_184":264,"_49":50},[237,243,244],"files",[237,238,239,240,241,242,243,244],"counts",{"_228":74,"_229":70,"_230":74,"_34":231,"_232":233},[222,223,224],"upstreamProject",{"_35":42,"_13":58,"_155":156,"_157":158,"_51":52,"_180":220},"upstreamBranch",{"_35":36,"_37":218,"_39":219,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],{"_11":54,"_197":221},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789592283&sig=c94b4e8ef22bc5a73b1dd9c4aad4b4d9c22222424e87124e310f2ae8ce092e7f",{"_35":89,"_13":90,"_64":91,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":92,"_17":74,"_75":93,"_77":-5,"_79":50,"_80":-5,"_18":227},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":86,"_17":70,"_75":24,"_77":87,"_79":50,"_80":-5,"_18":226},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":73,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_18":225},[63],[83],[90],"pulls","branches","forks",{"_234":74,"_236":74},"connections",{"_234":74,"_235":74},"count","unfilledCount","emptyCount",{"_35":89,"_13":90,"_64":91,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":105,"_17":74,"_75":93,"_77":-5,"_79":50,"_80":-5,"_99":259,"_18":260},{"_35":135,"_13":136,"_64":137,"_66":91,"_67":68,"_69":70,"_71":72,"_37":138,"_17":74,"_75":93,"_77":-5,"_79":50,"_80":-5,"_99":257,"_18":258},{"_35":142,"_13":143,"_64":144,"_66":137,"_67":68,"_69":145,"_71":72,"_37":146,"_17":147,"_75":116,"_77":148,"_79":50,"_80":-5,"_99":255,"_18":256},{"_35":127,"_13":128,"_64":129,"_66":91,"_67":68,"_69":130,"_71":72,"_37":131,"_17":70,"_75":24,"_77":132,"_79":50,"_80":-5,"_99":253,"_18":254},{"_35":120,"_13":121,"_64":122,"_66":91,"_67":68,"_69":33,"_71":72,"_37":123,"_17":70,"_75":24,"_77":124,"_79":50,"_80":-5,"_99":251,"_18":252},{"_35":112,"_13":113,"_64":114,"_66":91,"_67":68,"_69":70,"_71":72,"_37":115,"_17":74,"_75":116,"_77":117,"_79":50,"_80":-5,"_99":249,"_18":250},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":102,"_17":70,"_75":24,"_77":87,"_79":50,"_80":-5,"_99":247,"_18":248},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":98,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_99":245,"_18":246},[],[63],[],[83],[],[90,113],[],[90,121],[],[90,128],[],[90,136,143],[239],[90,136],[238,240,241,242],[90],["D",1782503933361],{"_11":12,"_197":193},{"_11":12,"_190":191,"_192":193,"_159":160,"_194":195,"_196":50},{"_17":145,"_13":16,"_35":68,"_41":151,"_44":36,"_45":186,"_187":52,"_188":42,"_189":56,"_57":14,"_53":12},"ctx",{"_180":-5,"_215":298,"_299":300,"_301":302,"_303":50,"_304":50,"_305":50,"_306":72,"_307":-5,"_308":-7,"_309":-7,"_310":74,"_311":50,"_312":50,"_313":-5,"_314":50,"_315":50,"_316":50,"_317":-5},"ENV",{"_269":270,"_271":272,"_273":16,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297},"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"]

Code