[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_310":311,"_312":313},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_74":221,"_40":-7,"_222":-5,"_17":223,"_224":225,"_226":227,"_228":229,"_230":231,"_92":-5,"_232":233,"_234":235,"_236":48,"_237":238,"_239":26,"_240":-5,"_241":-5,"_242":243},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","potluck","name","color-matching-game","branchName","main","project",{"_32":59,"_13":14,"_34":179,"_46":-5,"_180":48,"_49":50,"_181":50,"_182":183,"_184":185,"_186":187,"_188":189,"_190":26,"_191":-5,"_192":-5,"_193":175,"_53":194,"_195":-5,"_196":-5,"_197":-5,"_198":-5,"_199":200,"_201":200,"_202":203,"_204":203,"_205":203,"_206":200,"_207":200,"_208":209,"_210":211,"_212":28,"_47":48},"ahead",7,"behind",2,"diff",{"_64":65,"_66":67,"_68":69},"hasChanges",true,"sourceBranch",{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"pull","id","961078ea-f528-11ef-aa68-569c3dd06744","createdAt",["D",1740674013689],"updatedAt",["D",1785420707976],"projectId","96102714-f528-11ef-aa68-569c3dd06744","version",91,"forkedBranchId","forkedBranchVersion","lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","deletedAt","isOwned",false,"privacy","public","userHandle","templates","orgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","react-hono-starter",8,"9bb0174e-219f-40e2-a5af-e9ad02e5dca2","511089ff-1adb-4f1f-9692-7994bfed8163",89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[],"deleted",[167],"modified",[70,71,72,73],{"_74":150,"_76":151,"_78":152},{"_74":127,"_76":128,"_78":129},{"_74":109,"_76":110,"_78":111},{"_74":75,"_76":77,"_78":79},"path","frontend/index.html","targetFile",{"_32":101,"_13":81,"_82":102,"_84":103,"_86":33,"_87":104,"_88":48,"_34":105,"_40":57,"_91":92,"_93":106,"_66":48,"_95":-5,"_96":-7,"_74":107,"_98":108},"sourceFile",{"_32":80,"_13":81,"_82":83,"_84":85,"_86":58,"_87":22,"_88":26,"_34":89,"_40":90,"_91":92,"_93":94,"_66":48,"_95":-5,"_96":-7,"_74":97,"_98":99},"89509be0-9f74-4b32-8048-a44f661f5ef9","index.html","fileId","019f0583-85e3-7045-a144-29e1a0c3a0d6","parentId","019f0583-85e3-7045-a144-331a6cb93eed","branchId","branchVersion","latest",["D",1782503950511],1,"fileType","file","content","\n\n \n \n \n 🎨 Color Matching Game\n \n \n \n \n \n

\n \n \n \n\n","label","children",[100,81],"contentHash","caf89e2604bb57b9cddfb1e3de45940352ca711a1ff40ce10f8cc247b8e1a456","frontend","5c059140-3996-11f1-a04c-42b51c65c3df","5404b440-f52b-11ef-99f0-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",74,["D",1776345337676],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[100,81],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/favicon.svg",{"_32":120,"_13":113,"_82":121,"_84":103,"_86":33,"_87":122,"_88":26,"_34":123,"_40":90,"_91":92,"_93":124,"_66":48,"_95":-5,"_96":-7,"_74":125,"_98":126},{"_32":112,"_13":113,"_82":114,"_84":85,"_86":58,"_87":115,"_88":26,"_34":116,"_40":90,"_91":92,"_93":117,"_66":48,"_95":-5,"_96":-7,"_74":118,"_98":119},"f038e9a5-58ae-418e-97ac-f6827a62d511","favicon.svg","019f0583-85e3-7045-a144-261187b2ebce",4,["D",1782504023408],"\n\n",[100,113],"6f73e66541326d95601a471ad462db63e4fcbb162a573e538916a3ad0fb8c46e","82a730d4-3261-11f0-aa46-569c3dd06744","6f196b86-3261-11f0-9a3d-569c3dd06744",45,["D",1747405483360],"\n",[100,113],"1b9cfa9bc87dc0db12471f908bb8438c469ac9b2a59379157b627909cb30fc53","frontend/components/App.tsx",{"_32":141,"_13":131,"_82":142,"_84":143,"_86":33,"_87":144,"_88":26,"_34":145,"_40":146,"_91":136,"_93":147,"_66":48,"_95":-5,"_96":-7,"_74":148,"_98":149},{"_32":130,"_13":131,"_82":132,"_84":133,"_86":58,"_87":57,"_88":26,"_34":134,"_40":135,"_91":136,"_93":137,"_66":48,"_95":-5,"_96":-7,"_74":138,"_98":139},"56b8f001-1b08-41f8-a0f4-81b3e1497f39","App.tsx","019f0583-85e3-7045-a144-1881ab766a91","019f0583-85e3-7045-a144-22974c7db978",["D",1783435834232],3,"script","/** @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",[100,140,131],"6aaa6a3b57825b4f18d4768d165e87e9b2b1e231ba8dd3b408cf25b2defbb3a5","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",75,["D",1776345339930],5,"/** @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",[100,140,131],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7","README.md",{"_32":160,"_13":150,"_82":161,"_84":-5,"_86":33,"_87":60,"_88":48,"_34":162,"_40":163,"_91":92,"_93":164,"_66":48,"_95":-5,"_96":-7,"_74":165,"_98":166},{"_32":153,"_13":150,"_82":154,"_84":-5,"_86":58,"_87":155,"_88":26,"_34":156,"_40":90,"_91":92,"_93":157,"_66":48,"_95":-5,"_96":-7,"_74":158,"_98":159},"5cccd4ae-6e44-440e-9dae-c9b1b3ecc48b","019f0583-85e3-7045-a144-35fcd14aa9d2",6,["D",1782504040203],"# 🎨 Color Matching Game\n\nA fun, child-friendly drag-and-drop color matching game built with React + Hono on Val Town.\n\n## Features\n\n- 🖱️ **Draggable color blobs** — pick up a color chip and drop it onto its matching target\n- 🔊 **Browser text-to-speech** — colors are spoken aloud when you drag them and on correct/wrong matches\n- 🚀 **Start button** — intro screen before gameplay begins\n- 🎉 **Confetti celebration** — all 80 confetti pieces fall when every color is matched\n- 🏆 **Win banner** — animated congratulations screen with \"Play Again\" button\n- 🔀 **Randomised each round** — 6 of 8 colors are chosen and shuffled every game\n- 📱 **Responsive** — works on tablets and phones too\n\n## How to play\n\n1. Press **Start!**\n2. In the **top panel** you'll see mystery drop zones (each has a coloured underline hint)\n3. In the **bottom tray** you'll see colourful blobs — drag one to the matching zone\n4. The game speaks each color name and gives spoken feedback (\"Great job!\" or \"Try again!\")\n5. Match all 6 to win! 🌈\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"frontend/index.html\"]\n HTML -->|loads| Entry[\"frontend/index.tsx\"]\n Entry -->|renders| App[\"frontend/components/App.tsx
(Full game logic)\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend)\nfrontend/\n index.html ← HTML shell (fonts, animations, Twind)\n index.tsx ← React entrypoint\n favicon.svg ← Colorful icon\n components/\n App.tsx ← Entire game: chips, drop zones, win screen, TTS\n```\n",[150],"9d151080a9b7add98973b6e4e741cbfe2fca015de32ea4da3bc52d4720e9d7f5","b9c749c0-59e1-11f1-bb5f-ee650bb23af1","a50c3760-f53e-11ef-bd6d-569c3dd06744",["D",1779896144390],31,"# 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",[150],"aaa4f5cc8e5bd01528335cdd2066e164bf95353ce2fe37c616b3e6406f49331e",{"_74":168,"_76":169,"_78":-7},"frontend/components/Counter.tsx",{"_32":170,"_13":171,"_82":172,"_84":143,"_86":33,"_87":173,"_88":26,"_34":174,"_40":175,"_91":136,"_93":176,"_66":48,"_95":-5,"_96":-7,"_74":177,"_98":178},"57a8cc52-3996-11f1-8db6-42b51c65c3df","Counter.tsx","57a8cd2e-3996-11f1-8db6-42b51c65c3df",73,["D",1776345330366],0,"/** @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",[100,140,171],"10ce4fbd7e41af337e504c3877201698031249b437d941845f0f7cdc52a79e66",["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=1789589215&sig=319d1f4c9437a7e405a9f1979a8617ea53686f2e726f30e0558ce8e0aa205a7f","userId","4672fa32-1c6f-4907-899e-57b7e45b1dcb","pinnedFileId","019f0583-85e3-7045-a144-3935a56a6996","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,"_220":216},"org",{"_11":12,"_213":214,"_215":216,"_186":187,"_217":218,"_219":48},"branch","displayName","Potluck Mittal","avatar","https://lh3.googleusercontent.com/a/ACg8ocJYeiSQ8_eyVYtUAg9f5qRwEXzS1AreFm572a1csvZx7c6b_S8=s96-c","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":306,"_46":-5,"_180":48,"_49":50,"_181":50,"_182":183,"_184":185,"_186":187,"_188":189,"_190":26,"_191":-5,"_192":-5,"_193":175,"_53":194,"_195":-5,"_196":-5,"_197":-5,"_198":-5,"_199":200,"_201":200,"_202":203,"_204":203,"_205":203,"_206":200,"_207":200,"_208":307,"_210":308,"_212":309,"_47":48},"tree",[273,279,280],"files",[273,274,275,276,277,278,279,280],"counts",{"_263":175,"_264":90,"_265":175,"_266":267,"_268":269},"contents",[248,249,250],"upstreamProject",{"_32":39,"_13":56,"_182":183,"_184":185,"_49":50,"_208":246},"upstreamBranch",{"_32":33,"_34":244,"_36":245,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],{"_11":52,"_220":247},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789589215&sig=0319c05b993ee94052a8905e269e7d5b971ba22fb48d3135cc1f2b1c475427f5",{"_32":259,"_13":100,"_82":85,"_84":-5,"_86":58,"_87":90,"_88":26,"_34":260,"_40":175,"_91":261,"_93":-5,"_66":48,"_95":-5,"_74":262},{"_32":153,"_13":150,"_82":154,"_84":-5,"_86":58,"_87":155,"_88":26,"_34":257,"_40":90,"_91":92,"_93":157,"_66":48,"_95":-5,"_74":258},{"_32":251,"_13":252,"_82":189,"_84":-5,"_86":58,"_87":90,"_88":26,"_34":253,"_40":175,"_91":254,"_93":255,"_66":48,"_95":-5,"_74":256},"12058a24-fba1-47a9-bd58-f53c6c80dea1","index.ts",["D",1782503933361],"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",[252],["D",1782504040203],[150],"42edc8ff-0a4b-4a13-beb9-5d15812c4089",["D",1782503933361],"directory",[100],"pulls","branches","forks","envVars",{"_270":175,"_272":175},"connections",{"_270":175,"_271":175},"count","unfilledCount","emptyCount",{"_32":259,"_13":100,"_82":85,"_84":-5,"_86":58,"_87":90,"_88":26,"_34":303,"_40":175,"_91":261,"_93":-5,"_66":48,"_95":-5,"_96":304,"_74":305},{"_32":299,"_13":140,"_82":133,"_84":85,"_86":58,"_87":90,"_88":26,"_34":300,"_40":175,"_91":261,"_93":-5,"_66":48,"_95":-5,"_96":301,"_74":302},{"_32":130,"_13":131,"_82":132,"_84":133,"_86":58,"_87":57,"_88":26,"_34":134,"_40":135,"_91":136,"_93":137,"_66":48,"_95":-5,"_96":297,"_74":298},{"_32":112,"_13":113,"_82":114,"_84":85,"_86":58,"_87":115,"_88":26,"_34":116,"_40":90,"_91":92,"_93":117,"_66":48,"_95":-5,"_96":295,"_74":296},{"_32":80,"_13":81,"_82":83,"_84":85,"_86":58,"_87":22,"_88":26,"_34":89,"_40":90,"_91":92,"_93":94,"_66":48,"_95":-5,"_96":293,"_74":294},{"_32":286,"_13":287,"_82":288,"_84":85,"_86":58,"_87":90,"_88":26,"_34":289,"_40":175,"_91":136,"_93":290,"_66":48,"_95":-5,"_96":291,"_74":292},{"_32":153,"_13":150,"_82":154,"_84":-5,"_86":58,"_87":155,"_88":26,"_34":156,"_40":90,"_91":92,"_93":157,"_66":48,"_95":-5,"_96":284,"_74":285},{"_32":251,"_13":252,"_82":189,"_84":-5,"_86":58,"_87":90,"_88":26,"_34":281,"_40":175,"_91":254,"_93":255,"_66":48,"_95":-5,"_96":282,"_74":283},["D",1782503933361],[],[252],[],[150],"44095b74-f42e-40a0-a581-691d411dff1b","index.tsx","019f0583-85e3-7045-a144-2f246a070c10",["D",1782503933361],"/** @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();",[],[100,287],[],[100,81],[],[100,113],[],[100,140,131],"1dd593dd-4263-400c-9f3b-8be5b1bb233b",["D",1782503933361],[275],[100,140],["D",1782503933361],[274,276,277,278],[100],["D",1782503933361],{"_11":12,"_220":216},{"_11":12,"_213":214,"_215":216,"_186":187,"_217":218,"_219":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_208":-5,"_241":343,"_344":345,"_346":347,"_348":48,"_349":48,"_350":48,"_351":26,"_352":-5,"_353":-7,"_354":-7,"_355":175,"_356":48,"_357":48,"_358":-5,"_359":48,"_360":48,"_361":48,"_362":-5},"ENV",{"_314":315,"_316":317,"_318":16,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342},"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"]

Compare

Mergepotluck/mainintotemplates/main

README.md+24-44

frontend/components/App.tsx+460-6

frontend/favicon.svg+6-3

frontend/index.html+97-3

frontend/components/Counter.tsx+0-18