[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_299":300,"_301":302},"routes/_app.x.$handle.$name",{"_107":106,"_37":50,"_115":93,"_32":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_26":-5,"_127":128,"_129":130,"_131":30,"_132":133,"_134":65,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":30},"version",7,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","d34205a9-9beb-4cb0-a87e-09dca89e78cc","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/components/WinScreen.tsx","latestPath","fileId","67b8aec0-68d8-11f1-98cc-1607ee4eb77e","name","WinScreen.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Confetti } from \"./Confetti.tsx\";\n\nexport function WinScreen({ onPlayAgain }: { onPlayAgain: () => void }) {\n return (\n

\n \n

🎉🏆🎉

\n You Did It!\n

\n ⭐ All animals matched! ⭐\n

\n \n 🔄 Play Again\n \n

\n );\n}\n","createdAt",["D",1781541408744],"branchVersion","branchId","4858753f-eff0-4e8a-8a17-0ba6dac1be24","id","fb850ee3-4fdd-43f0-b8b7-dc631063dc80","animal-match-game",["D",1781541316309],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Okul öncesi (4-6 yaş) için İngilizce hayvan eşleştirme oyunu","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789549199&sig=78a5bc27f03474c98a49b09a954e18cc6dd63f22ba19ce3e096717a88d3522b5","c3d6cfe1-915a-4297-83fc-698b7e286e2a","pinnedFileId","019ecc23-2746-76ab-af90-757e21ffd16c","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","cb0f47d4-5041-4336-a59b-f79cc6472ac8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_107":106,"_114":110},"org",{"_107":106,"_108":-5,"_109":110,"_19":61,"_111":112,"_113":30},"branch",{"_13":92,"_37":93,"_48":47,"_94":49,"_95":96,"_97":98,"_99":55,"_100":101,"_102":103,"_104":50,"_105":106},"isOwned",11,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","polat46","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJxR0VRRnZqRm8zZ0JaYVJDMGd6a1NybHpGWiJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_37":50,"_43":295,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":296,"_87":297,"_89":298,"_91":30},"tree",[185,198,199],"files",[185,186,187,188,189,190,191,192,193,194,195,196,197,198,199],"counts",{"_175":69,"_176":156,"_177":156,"_178":179,"_180":181},"contents",[150,151,152],"upstreamProject",{"_48":101,"_37":146,"_57":147,"_59":60,"_54":55,"_85":148},"upstreamBranch",{"_48":96,"_43":139,"_140":141,"_37":93,"_94":101,"_13":142,"_95":-5,"_97":-5,"_143":144,"_52":-5,"_91":30,"_54":55,"_105":145,"_70":103,"_104":146},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server",{"_107":145,"_114":149},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789549199&sig=85ec03bbe2ae9af315fa5e89fceebe840b59020b3ec43df39e2ab37ef0d215ad",{"_48":169,"_37":170,"_35":171,"_155":-5,"_46":47,"_45":156,"_157":65,"_43":172,"_13":69,"_39":173,"_41":-5,"_29":30,"_161":-5,"_32":174},{"_48":163,"_37":164,"_35":165,"_155":-5,"_46":47,"_45":156,"_157":30,"_43":166,"_13":69,"_39":26,"_41":167,"_29":30,"_161":-5,"_32":168},{"_48":153,"_37":154,"_35":63,"_155":-5,"_46":47,"_45":156,"_157":65,"_43":158,"_13":69,"_39":159,"_41":160,"_29":30,"_161":-5,"_32":162},"f17fbaab-a889-4eb5-9b25-fc9b3de61453","index.ts","parentId",1,"latest",["D",1781541316309],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label",[154],"65a71256-db7c-4a1a-805a-c40842af3e40","README.md","019ecc23-2746-76ab-af90-70dbd0db8610",["D",1781541316309],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[164],"98c5cca2-645d-4379-8a3b-700b2f0cc108","frontend","019ecc23-2746-76ab-af90-6ea362ebd4bf",["D",1781541316309],"directory",[170],"pulls","branches","forks","envVars",{"_182":69,"_184":69},"connections",{"_182":69,"_183":69},"count","unfilledCount","emptyCount",{"_48":169,"_37":170,"_35":171,"_155":-5,"_46":47,"_45":156,"_157":65,"_43":292,"_13":69,"_39":173,"_41":-5,"_29":30,"_161":-5,"_201":293,"_32":294},{"_48":288,"_37":237,"_35":231,"_155":171,"_46":47,"_45":156,"_157":65,"_43":289,"_13":69,"_39":173,"_41":-5,"_29":30,"_161":-5,"_201":290,"_32":291},{"_48":280,"_37":281,"_35":282,"_155":231,"_46":47,"_45":283,"_157":65,"_43":284,"_13":69,"_39":40,"_41":285,"_29":30,"_161":-5,"_201":286,"_32":287},{"_48":273,"_37":274,"_35":275,"_155":231,"_46":47,"_45":156,"_157":30,"_43":276,"_13":69,"_39":40,"_41":277,"_29":30,"_161":-5,"_201":278,"_32":279},{"_48":265,"_37":266,"_35":267,"_155":231,"_46":47,"_45":268,"_157":65,"_43":269,"_13":69,"_39":40,"_41":270,"_29":30,"_161":-5,"_201":271,"_32":272},{"_48":258,"_37":259,"_35":260,"_155":231,"_46":47,"_45":156,"_157":30,"_43":261,"_13":69,"_39":40,"_41":262,"_29":30,"_161":-5,"_201":263,"_32":264},{"_48":250,"_37":251,"_35":252,"_155":231,"_46":47,"_45":253,"_157":65,"_43":254,"_13":69,"_39":40,"_41":255,"_29":30,"_161":-5,"_201":256,"_32":257},{"_48":246,"_37":38,"_35":36,"_155":231,"_46":47,"_45":14,"_157":65,"_43":247,"_13":69,"_39":40,"_41":42,"_29":30,"_161":-5,"_201":248,"_32":249},{"_48":238,"_37":239,"_35":240,"_155":231,"_46":47,"_45":241,"_157":65,"_43":242,"_13":69,"_39":40,"_41":243,"_29":30,"_161":-5,"_201":244,"_32":245},{"_48":228,"_37":229,"_35":230,"_155":231,"_46":47,"_45":232,"_157":65,"_43":233,"_13":69,"_39":40,"_41":234,"_29":30,"_161":-5,"_201":235,"_32":236},{"_48":221,"_37":222,"_35":223,"_155":171,"_46":47,"_45":156,"_157":65,"_43":224,"_13":69,"_39":26,"_41":225,"_29":30,"_161":-5,"_201":226,"_32":227},{"_48":214,"_37":215,"_35":216,"_155":171,"_46":47,"_45":156,"_157":30,"_43":217,"_13":69,"_39":26,"_41":218,"_29":30,"_161":-5,"_201":219,"_32":220},{"_48":207,"_37":208,"_35":209,"_155":171,"_46":47,"_45":156,"_157":65,"_43":210,"_13":69,"_39":40,"_41":211,"_29":30,"_161":-5,"_201":212,"_32":213},{"_48":163,"_37":164,"_35":165,"_155":-5,"_46":47,"_45":156,"_157":30,"_43":204,"_13":69,"_39":26,"_41":167,"_29":30,"_161":-5,"_201":205,"_32":206},{"_48":153,"_37":154,"_35":63,"_155":-5,"_46":47,"_45":156,"_157":65,"_43":200,"_13":69,"_39":159,"_41":160,"_29":30,"_161":-5,"_201":202,"_32":203},["D",1781541316309],"children",[],[154],["D",1781541316309],[],[164],"168a5a7f-342a-4b37-8ebd-79d7fbffaac6","index.tsx","019ecc23-2746-76ab-af90-68d194f2b3b8",["D",1781541316309],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[170,208],"dbf3359f-8bd1-48f1-b9fe-b23c7dbc2351","index.html","019ecc23-2746-76ab-af90-66779fcc57f7",["D",1781541316309],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[170,215],"c0334a4b-2b56-4649-9141-cc14f83cc4e2","favicon.svg","019ecc23-2746-76ab-af90-6221355c9d04",["D",1781541316309],"\n",[],[170,222],"7b3da6ae-1a19-4602-a6a0-9ab44aa10d83","sound.ts","49d5ff2a-68d8-11f1-8b51-1607ee4eb77e","019ecc23-2746-76ab-af90-5dd6eefd9135",3,["D",1781541358608],"// Ses yardımcıları: harici dosya yok, hepsi tarayıcı API'leriyle üretilir.\n// - speak(): Web Speech API ile İngilizce seslendirme\n// - playApplause / playBuzzer / playSparkle / playCheer: Web Audio API ile efektler\n\nlet audioCtx: AudioContext | null = null;\nfunction ctx(): AudioContext {\n if (!audioCtx) {\n const AC = (globalThis as any).AudioContext || (globalThis as any).webkitAudioContext;\n audioCtx = new AC();\n }\n // iOS/Safari: kullanıcı etkileşiminden sonra context'i devam ettir\n if (audioCtx.state === \"suspended\") audioCtx.resume();\n return audioCtx;\n}\n\n// --- Seslendirme (Text-to-Speech) ---\nfunction pickEnglishVoice(): SpeechSynthesisVoice | undefined {\n const voices = speechSynthesis.getVoices();\n return (\n voices.find((v) => /en[-_]US/i.test(v.lang)) ||\n voices.find((v) => /^en/i.test(v.lang)) ||\n voices[0]\n );\n}\n\nexport function speak(text: string, opts: { rate?: number; pitch?: number } = {}) {\n if (!(\"speechSynthesis\" in globalThis)) return;\n try {\n speechSynthesis.cancel();\n const u = new SpeechSynthesisUtterance(text);\n u.lang = \"en-US\";\n u.rate = opts.rate ?? 0.85; // çocuklar için biraz yavaş\n u.pitch = opts.pitch ?? 1.1;\n const v = pickEnglishVoice();\n if (v) u.voice = v;\n speechSynthesis.speak(u);\n } catch {\n // sessizce geç\n }\n}\n\n// Sesler tarayıcıya asenkron yüklenir; hazır olunca seçimi tazele\nif (\"speechSynthesis\" in globalThis) {\n speechSynthesis.onvoiceschanged = () => pickEnglishVoice();\n}\n\n// --- Düşük seviye ton üretici ---\nfunction tone(\n freq: number,\n start: number,\n duration: number,\n type: OscillatorType = \"sine\",\n gain = 0.2,\n) {\n const c = ctx();\n const osc = c.createOscillator();\n const g = c.createGain();\n osc.type = type;\n osc.frequency.value = freq;\n g.gain.setValueAtTime(0.0001, c.currentTime + start);\n g.gain.exponentialRampToValueAtTime(gain, c.currentTime + start + 0.02);\n g.gain.exponentialRampToValueAtTime(0.0001, c.currentTime + start + duration);\n osc.connect(g).connect(c.destination);\n osc.start(c.currentTime + start);\n osc.stop(c.currentTime + start + duration + 0.05);\n}\n\n// Beyaz gürültü patlaması (alkış benzeri)\nfunction noiseBurst(start: number, duration: number, gain = 0.35) {\n const c = ctx();\n const bufferSize = Math.floor(c.sampleRate * duration);\n const buffer = c.createBuffer(1, bufferSize, c.sampleRate);\n const data = buffer.getChannelData(0);\n for (let i = 0; i < bufferSize; i++) {\n // sönümlü gürültü -> alkış hissi\n const decay = 1 - i / bufferSize;\n data[i] = (Math.random() * 2 - 1) * decay * decay;\n }\n const src = c.createBufferSource();\n src.buffer = buffer;\n const g = c.createGain();\n g.gain.value = gain;\n const filter = c.createBiquadFilter();\n filter.type = \"bandpass\";\n filter.frequency.value = 2200;\n src.connect(filter).connect(g).connect(c.destination);\n src.start(c.currentTime + start);\n}\n\n// --- Yüksek seviye efektler ---\n\n// Güçlü alkış: art arda gürültü patlamaları\nexport function playApplause() {\n for (let i = 0; i < 14; i++) {\n noiseBurst(i * 0.06, 0.12, 0.25 + Math.random() * 0.2);\n }\n}\n\n// Parlayan yıldız / başarı: yukarı çıkan neşeli arpej\nexport function playSparkle() {\n const notes = [523, 659, 784, 1047, 1319]; // C5 E5 G5 C6 E6\n notes.forEach((f, i) => tone(f, i * 0.08, 0.25, \"triangle\", 0.18));\n}\n\n// Yanlış cevap: komik \"daaat\" düşen vızıltı\nexport function playBuzzer() {\n const c = ctx();\n const osc = c.createOscillator();\n const g = c.createGain();\n osc.type = \"sawtooth\";\n osc.frequency.setValueAtTime(320, c.currentTime);\n osc.frequency.exponentialRampToValueAtTime(120, c.currentTime + 0.45);\n g.gain.setValueAtTime(0.0001, c.currentTime);\n g.gain.exponentialRampToValueAtTime(0.25, c.currentTime + 0.03);\n g.gain.exponentialRampToValueAtTime(0.0001, c.currentTime + 0.5);\n osc.connect(g).connect(c.destination);\n osc.start();\n osc.stop(c.currentTime + 0.55);\n}\n\n// Büyük kutlama: alkış + neşeli melodi\nexport function playCheer() {\n playApplause();\n const melody = [523, 659, 784, 659, 784, 1047]; // küçük zafer ezgisi\n melody.forEach((f, i) => tone(f, 0.1 + i * 0.18, 0.3, \"square\", 0.16));\n}\n\n// Tarayıcının ses iznini ilk dokunuşta açmak için\nexport function unlockAudio() {\n try {\n ctx();\n } catch {\n // yoksay\n }\n}\n",[],[170,237,229],"components","036252ee-7891-4706-9d56-b18e7c1dfa59","animals.ts","3a1297ec-68d8-11f1-8b51-1607ee4eb77e",2,["D",1781541332161],"// Hayvan verileri: İngilizce isim + büyük renkli emoji görseli\nexport interface Animal {\n id: string;\n word: string; // İngilizce seslendirilecek kelime\n emoji: string; // büyük renkli görsel\n color: string; // kartın arka plan rengi (tailwind class)\n}\n\nexport const ANIMALS: Animal[] = [\n { id: \"dog\", word: \"Dog\", emoji: \"🐶\", color: \"bg-amber-100\" },\n { id: \"cat\", word: \"Cat\", emoji: \"🐱\", color: \"bg-orange-100\" },\n { id: \"bird\", word: \"Bird\", emoji: \"🐦\", color: \"bg-sky-100\" },\n { id: \"rabbit\", word: \"Rabbit\", emoji: \"🐰\", color: \"bg-pink-100\" },\n { id: \"fish\", word: \"Fish\", emoji: \"🐠\", color: \"bg-cyan-100\" },\n { id: \"horse\", word: \"Horse\", emoji: \"🐴\", color: \"bg-yellow-100\" },\n { id: \"cow\", word: \"Cow\", emoji: \"🐮\", color: \"bg-lime-100\" },\n { id: \"sheep\", word: \"Sheep\", emoji: \"🐑\", color: \"bg-stone-100\" },\n { id: \"duck\", word: \"Duck\", emoji: \"🦆\", color: \"bg-emerald-100\" },\n { id: \"elephant\", word: \"Elephant\", emoji: \"🐘\", color: \"bg-indigo-100\" },\n];\n\n// Diziyi karıştırmak için yardımcı (Fisher-Yates)\nexport function 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",[],[170,237,239],"fb7001b8-09c1-4fb9-b2c2-8daf13127066",["D",1781541408744],[],[170,237,38],"fc08bdd9-fbc2-4754-b5cd-1a8c8a43f697","SoundButton.tsx","614eef9a-68d8-11f1-90af-1607ee4eb77e",6,["D",1781541397988],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface Props {\n matched: boolean;\n isActive: boolean; // şu an seçili (eşleştirilmeyi bekleyen) buton\n onPlay: () => void; // tıklayınca kelimeyi seslendir + bu butonu seç\n onDragStart: () => void;\n onDragEnd: () => void;\n}\n\n// Yazısız ses butonu: sadece hoparlör simgesi (inline SVG).\nexport function SoundButton({ matched, isActive, onPlay, onDragStart, onDragEnd }: Props) {\n let base = \"bg-purple-500 hover:bg-purple-600\";\n if (matched) base = \"bg-green-500 cursor-default\";\n else if (isActive) base = \"bg-pink-500 ring-8 ring-pink-300 animate-pulse\";\n\n return (\n {\n e.dataTransfer.effectAllowed = \"move\";\n // bazı tarayıcılar veri olmadan sürüklemeyi engeller\n e.dataTransfer.setData(\"text/plain\", \"sound\");\n onDragStart();\n }}\n onDragEnd={onDragEnd}\n class={`relative flex items-center justify-center rounded-3xl shadow-lg\n ${base} text-white\n w-full aspect-square select-none transition-all duration-200\n ${matched ? \"opacity-90\" : \"hover:scale-105 active:scale-95 cursor-pointer\"}`}\n aria-label=\"Play sound\"\n >\n {matched\n ? (\n \n )\n : (\n \n )}\n \n );\n}\n",[],[170,237,251],"920906e0-cfca-4001-b83f-156c8c34bb88","Counter.tsx","019ecc23-2745-726a-a755-ebaf320a6e34",["D",1781541316309],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[170,237,259],"f59891c2-ed60-4b14-b9ac-7cc8174a5be4","Confetti.tsx","51270cc4-68d8-11f1-b8a2-1607ee4eb77e",4,["D",1781541370882],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo } from \"https://esm.sh/react@18.2.0\";\n\nconst COLORS = [\n \"#ef4444\", \"#f59e0b\", \"#eab308\", \"#22c55e\",\n \"#06b6d4\", \"#3b82f6\", \"#8b5cf6\", \"#ec4899\",\n];\n\n// Harici kütüphane yok: bir grup renkli kareyi yukarıdan aşağı düşürüyoruz.\nexport function Confetti({ count = 120 }: { count?: number }) {\n const pieces = useMemo(() => {\n return Array.from({ length: count }).map((_, i) => ({\n id: i,\n left: Math.random() * 100, // %\n delay: Math.random() * 0.6, // s\n duration: 2.5 + Math.random() * 2, // s\n size: 8 + Math.random() * 10, // px\n color: COLORS[i % COLORS.length],\n rotate: Math.random() * 360,\n round: Math.random() > 0.5,\n }));\n }, [count]);\n\n return (\n

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

\n );\n}\n",[],[170,237,266],"68f9de66-db9c-4606-87cd-c5fe1c63dd0d","App.tsx","019ecc23-2745-726a-a755-e54d81208c30",["D",1781541316309],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[],[170,237,274],"18e0b196-e6da-4131-95f9-3a6b806eee6e","AnimalCard.tsx","58b9cdfa-68d8-11f1-b538-1607ee4eb77e",5,["D",1781541383587],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Animal } from \"./animals.ts\";\n\nexport type CardState = \"idle\" | \"correct\" | \"wrong\";\n\ninterface Props {\n animal: Animal;\n state: CardState;\n matched: boolean;\n isDropTarget: boolean; // sürükleme bu kartın üzerindeyken\n onActivate: () => void; // tıklama ile seçim\n onDropAnimal: () => void; // sürükle-bırak ile seçim\n onDragOver: (over: boolean) => void;\n}\n\nexport function AnimalCard(\n { animal, state, matched, isDropTarget, onActivate, onDropAnimal, onDragOver }: Props,\n) {\n let ring = \"ring-4 ring-transparent\";\n if (matched) ring = \"ring-8 ring-green-500\";\n else if (state === \"correct\") ring = \"ring-8 ring-green-500\";\n else if (state === \"wrong\") ring = \"ring-8 ring-red-500 animate-wiggle\";\n else if (isDropTarget) ring = \"ring-8 ring-yellow-400\";\n\n return (\n {\n e.preventDefault();\n onDragOver(true);\n }}\n onDragLeave={() => onDragOver(false)}\n onDrop={(e) => {\n e.preventDefault();\n onDragOver(false);\n onDropAnimal();\n }}\n class={`relative flex items-center justify-center rounded-3xl shadow-lg\n ${animal.color} ${ring}\n w-full aspect-square select-none transition-all duration-200\n ${matched ? \"opacity-90 scale-95\" : \"hover:scale-105 active:scale-95 cursor-pointer\"}`}\n aria-label={animal.word}\n >\n \n {animal.emoji}\n \n\n {/* Doğru eşleşmede parlayan yıldız animasyonu */}\n {(matched || state === \"correct\") && (\n \n ⭐\n \n )}\n {matched && (\n \n ✨\n \n )}\n \n );\n}\n",[],[170,237,281],"a4374115-bc2d-4882-911c-dede0b204c54",["D",1781541316309],[187,188,189,190,191,192,193,194],[170,237],["D",1781541316309],[186,195,196,197],[170],["D",1781541316309],{"_107":106,"_114":110},{"_107":106,"_108":-5,"_109":110,"_19":61,"_111":112,"_113":30},{"_13":92,"_37":93,"_48":47,"_94":49,"_95":96,"_97":98,"_99":55,"_100":101,"_102":103,"_104":50,"_105":106},"ctx",{"_85":-5,"_136":332,"_333":334,"_335":336,"_337":30,"_338":30,"_339":30,"_340":65,"_341":-5,"_342":-7,"_343":-7,"_344":69,"_345":30,"_346":30,"_347":-5,"_348":30,"_349":30,"_350":30,"_351":-5},"ENV",{"_303":304,"_305":306,"_307":93,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Diff · v7