[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_294":295,"_296":297},"routes/_app.x.$handle.$name",{"_99":98,"_31":44,"_107":85,"_26":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":24,"_124":125,"_126":57,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",6,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/components/AITAGame.tsx","latestPath","fileId","c6bdd950-67f2-11f0-bf9d-0224a6c84d84","name","AITAGame.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface AITAPost {\n id: string;\n title: string;\n content: string;\n}\n\ninterface GuessResult {\n actualPct: number;\n difference: number;\n message: string;\n}\n\nexport function AITAGame() {\n const [post, setPost] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [guess, setGuess] = useState(50);\n const [result, setResult] = useState(null);\n\n // Fetch the AITA post when component mounts\n useEffect(() => {\n fetchPost();\n }, []);\n\n const fetchPost = async () => {\n setLoading(true);\n setError(null);\n setResult(null);\n\n try {\n const response = await fetch(`/api/posts/1`);\n if (!response.ok) {\n throw new Error('Failed to fetch post');\n }\n const data = await response.json();\n setPost(data);\n } catch (err) {\n setError('Error loading post. Please try again.');\n console.error(err);\n } finally {\n setLoading(false);\n }\n };\n\n const handleSliderChange = (e: React.ChangeEvent) => {\n setGuess(parseInt(e.target.value, 10));\n };\n\n const submitGuess = async () => {\n if (!post) return;\n\n try {\n const response = await fetch(`/api/posts/${post.id}/check`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({ guess })\n });\n\n if (!response.ok) {\n throw new Error('Failed to submit guess');\n }\n\n const result = await response.json();\n setResult(result);\n } catch (err) {\n setError('Error submitting guess. Please try again.');\n console.error(err);\n }\n };\n\n const playAgain = () => {\n setGuess(50);\n setResult(null);\n // In a real app with multiple posts, we would fetch a new post here\n // For now, we'll just reset the state\n };\n\n if (loading) {\n return

;\n }\n\n if (error) {\n return (\n

{error}

\n \n

\n );\n }\n\n if (!post) {\n return

No post found.

;\n }\n\n return (\n

Am I The Asshole?

Guess what percentage of Reddit users thought the poster was the asshole

\n\n

{post.title}

{post.content}

\n\n {!result ? (\n

\n What percentage of people thought this person was the asshole?\n \n

{guess}%

\n \n

\n ) : (\n

Results

{result.message}

{result.actualPct}% of people thought OP was the asshole

(You were off by {result.difference}%)

\n \n

\n )}\n

\n );\n}\n","createdAt",["D",1753295286172],"branchVersion","branchId","9152d4b2-67ef-11f0-97a8-0224a6c84d84","id","91500c1e-67ef-11f0-97a8-0224a6c84d84","aita",["D",1753293908093],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","01983870-a3b2-73c9-9a1d-1aa63e70e1b2","pinnedFileId","01983875-e8ca-7735-b93b-be439ff044a2","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","01983870-a3b2-73c9-9a1d-1f44dda566fd","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":53,"_103":104,"_105":24},"branch",{"_13":84,"_31":85,"_42":41,"_86":43,"_87":88,"_89":90,"_91":49,"_92":93,"_94":95,"_96":44,"_97":98},"isOwned",559,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",67,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","joost","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zMEhucWlWR2JJOWNvaGtVRnUzaGZGM21xYWoifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":290,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":291,"_79":292,"_81":293,"_83":24},"tree",[192,193,197,205,206],"files",[192,193,194,195,196,197,198,199,200,201,202,203,204,205,206],"counts",{"_182":155,"_183":61,"_184":155,"_185":186,"_187":188},"contents",[143,144,145,146,147],"upstreamProject",{"_42":93,"_31":138,"_51":139,"_52":140,"_48":49,"_77":141},"upstreamBranch",{"_42":88,"_37":131,"_132":133,"_31":85,"_86":93,"_13":134,"_87":-5,"_89":-5,"_135":136,"_46":-5,"_83":24,"_48":49,"_97":137,"_62":95,"_96":138},"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","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789731523&sig=cb2d274cfb0ae982c2c9d0cab7d8650484fd8c18105f39e4c27d69296bceb6f3",{"_99":137,"_106":142},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789731523&sig=b6c317b6808cd3ba5215fd9ee8ecda1d803746cfee2c0d6f770fcb11f5f33888",{"_42":176,"_31":177,"_29":178,"_151":-5,"_40":41,"_39":179,"_153":57,"_37":180,"_13":155,"_33":169,"_35":-5,"_23":24,"_157":-5,"_26":181},{"_42":171,"_31":172,"_29":173,"_151":-5,"_40":41,"_39":61,"_153":57,"_37":174,"_13":155,"_33":169,"_35":-5,"_23":24,"_157":-5,"_26":175},{"_42":165,"_31":166,"_29":167,"_151":-5,"_40":41,"_39":61,"_153":57,"_37":168,"_13":155,"_33":169,"_35":-5,"_23":24,"_157":-5,"_26":170},{"_42":159,"_31":160,"_29":161,"_151":-5,"_40":41,"_39":61,"_153":24,"_37":162,"_13":155,"_33":20,"_35":163,"_23":24,"_157":-5,"_26":164},{"_42":148,"_31":149,"_29":150,"_151":-5,"_40":41,"_39":152,"_153":57,"_37":154,"_13":155,"_33":20,"_35":156,"_23":24,"_157":-5,"_26":158},"c6b532c8-67f2-11f0-97a0-0224a6c84d84","deno.json","c6b53372-67f2-11f0-97a0-0224a6c84d84","parentId",5,"latest",["D",1753295286180],0,"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}","label",[149],"9158d6a0-67ef-11f0-97a8-0224a6c84d84","README.md","01983875-e8ca-7735-b93b-e26da749ec93",["D",1753293908093],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n## Getting started\n\nGet a copy of this starter template by clicking the **Remix** button in the top-right.\n\n## How it works\n\n- The **entrypoint** is [`/backend/index.ts`](/backend/index.ts). That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is [`/frontend/index.html`](/frontend/index.html)\n - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)\n - which in turn imports the React app from [`/frontend/components/App.tsx`](/frontend/components/App.tsx).\n\nSo if you wanted to get a sense of how this app comes together, we suggest reading the files in this order: \n\n[`/backend/index.ts`](/backend/index.ts) -> [`/frontend/index.html`](/frontend/index.html) -> [`/frontend/index.tsx`](/frontend/index.tsx) -> [`/frontend/components/App.tsx`](/frontend/components/App.tsx)\n\n## Further resources\n\n- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a bigger example project, with a SQLite database table, queries, client-side CSS, a favicon, and shared code that runs on both client and server.",[160],"9158d5b0-67ef-11f0-97a8-0224a6c84d84","frontend","01983875-e8ca-7735-b93b-df00685bcab2",["D",1753293908093],"directory",[166],"9158c5ac-67ef-11f0-97a8-0224a6c84d84","backend","01983875-e8ca-7735-b93b-c2f72a40303c",["D",1753293908093],[172],"c67e6fa4-67f2-11f0-84e8-0224a6c84d84",".idea","c67e704e-67f2-11f0-84e8-0224a6c84d84",2,["D",1753295285829],[177],"pulls","branches","forks","envVars",{"_189":61,"_191":155},"connections",{"_189":155,"_190":155},"count","unfilledCount","emptyCount",{"_42":176,"_31":177,"_29":178,"_151":-5,"_40":41,"_39":179,"_153":57,"_37":287,"_13":155,"_33":169,"_35":-5,"_23":24,"_157":-5,"_208":288,"_26":289},{"_42":171,"_31":172,"_29":173,"_151":-5,"_40":41,"_39":61,"_153":57,"_37":284,"_13":155,"_33":169,"_35":-5,"_23":24,"_157":-5,"_208":285,"_26":286},{"_42":279,"_31":278,"_29":272,"_151":173,"_40":41,"_39":280,"_153":57,"_37":281,"_13":155,"_33":169,"_35":-5,"_23":24,"_157":-5,"_208":282,"_26":283},{"_42":269,"_31":270,"_29":271,"_151":272,"_40":41,"_39":273,"_153":24,"_37":274,"_13":155,"_33":34,"_35":275,"_23":24,"_157":-5,"_208":276,"_26":277},{"_42":262,"_31":263,"_29":55,"_151":173,"_40":41,"_39":61,"_153":24,"_37":264,"_13":155,"_33":265,"_35":266,"_23":24,"_157":44,"_208":267,"_26":268},{"_42":165,"_31":166,"_29":167,"_151":-5,"_40":41,"_39":61,"_153":57,"_37":259,"_13":155,"_33":169,"_35":-5,"_23":24,"_157":-5,"_208":260,"_26":261},{"_42":255,"_31":250,"_29":245,"_151":167,"_40":41,"_39":61,"_153":57,"_37":256,"_13":155,"_33":169,"_35":-5,"_23":24,"_157":-5,"_208":257,"_26":258},{"_42":251,"_31":32,"_29":30,"_151":245,"_40":41,"_39":14,"_153":24,"_37":252,"_13":155,"_33":34,"_35":36,"_23":24,"_157":-5,"_208":253,"_26":254},{"_42":242,"_31":243,"_29":244,"_151":245,"_40":41,"_39":61,"_153":24,"_37":246,"_13":155,"_33":34,"_35":247,"_23":24,"_157":-5,"_208":248,"_26":249},{"_42":235,"_31":236,"_29":237,"_151":167,"_40":41,"_39":61,"_153":24,"_37":238,"_13":155,"_33":20,"_35":239,"_23":24,"_157":-5,"_208":240,"_26":241},{"_42":228,"_31":229,"_29":230,"_151":167,"_40":41,"_39":61,"_153":24,"_37":231,"_13":155,"_33":20,"_35":232,"_23":24,"_157":-5,"_208":233,"_26":234},{"_42":221,"_31":222,"_29":223,"_151":167,"_40":41,"_39":61,"_153":57,"_37":224,"_13":155,"_33":34,"_35":225,"_23":24,"_157":-5,"_208":226,"_26":227},{"_42":214,"_31":215,"_29":216,"_151":167,"_40":41,"_39":61,"_153":24,"_37":217,"_13":155,"_33":20,"_35":218,"_23":24,"_157":-5,"_208":219,"_26":220},{"_42":159,"_31":160,"_29":161,"_151":-5,"_40":41,"_39":61,"_153":24,"_37":211,"_13":155,"_33":20,"_35":163,"_23":24,"_157":-5,"_208":212,"_26":213},{"_42":148,"_31":149,"_29":150,"_151":-5,"_40":41,"_39":152,"_153":57,"_37":207,"_13":155,"_33":20,"_35":156,"_23":24,"_157":-5,"_208":209,"_26":210},["D",1753295286180],"children",[],[149],["D",1753293908093],[],[160],"9158d4a2-67ef-11f0-97a8-0224a6c84d84","style.css","01983875-e8ca-7735-b93b-d99a041ace23",["D",1753293908093],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n}\n\nbutton {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #357ae8;\n}",[],[166,215],"9158d358-67ef-11f0-97a8-0224a6c84d84","index.tsx","01983875-e8ca-7735-b93b-d722f7851bd0",["D",1753293908093],"/** @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();",[],[166,222],"9158d1aa-67ef-11f0-97a8-0224a6c84d84","index.html","01983875-e8ca-7735-b93b-d349eb214392",["D",1753293908093],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[166,229],"9158cb56-67ef-11f0-97a8-0224a6c84d84","favicon.svg","01983875-e8ca-7735-b93b-cf7591f06a1e",["D",1753293908093],"\n",[],[166,236],"9158c728-67ef-11f0-97a8-0224a6c84d84","App.tsx","01983875-e8ca-7735-b93b-c77249497ad5","01983875-e8ca-7735-b93b-cae8cf68bf65",["D",1753293908093],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n return (\n

Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[],[166,250,243],"components","c6bdd8ba-67f2-11f0-bf9d-0224a6c84d84",["D",1753295286172],[],[166,250,32],"9158c8f4-67ef-11f0-97a8-0224a6c84d84",["D",1753293908093],[199,200],[166,250],["D",1753293908093],[198,201,202,203,204],[166],"9158bc06-67ef-11f0-97a8-0224a6c84d84","index.ts",["D",1753293908093],"http","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\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, c) => {\n throw err;\n});\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;",[],[172,263],"c6b2364a-67f2-11f0-9530-0224a6c84d84","posts.ts","c6b236ea-67f2-11f0-9530-0224a6c84d84","c6975654-67f2-11f0-97a0-0224a6c84d84",4,["D",1753295286169],"// Static AITA post data for the game\n\nexport interface AITAPost {\n id: string;\n title: string;\n content: string;\n assholePct: number;\n}\n\nexport const posts: AITAPost[] = [\n {\n id: \"1\",\n title: \"AITA for refusing to babysit my sister's kids after she showed up 3 hours late last time?\",\n content: \"My sister has 3 kids (ages 4, 6, and 8) and she often asks me to babysit them when she and her husband want to go out. I usually don't mind and I love spending time with my nieces and nephews. Last weekend, she asked if I could watch them from 6pm to 11pm. I agreed, but she didn't show up until 2am. No calls, no texts, nothing. When she finally arrived, she wasn't apologetic at all and just said 'you don't have kids, so it's not like you had anything better to do anyway.' I was furious but didn't want to argue in front of the kids. Yesterday she called asking if I could babysit again this weekend. I told her no, and that I wouldn't be babysitting for her anymore unless she starts respecting my time. She called me selfish and said family should help each other out. Our parents are now calling me saying I should forgive her and help my sister. AITA?\",\n assholePct: 12\n }\n];\n",[],[172,278,270],"data","c69755b4-67f2-11f0-97a0-0224a6c84d84",3,["D",1753295285995],[195],[172,278],["D",1753293908093],[194,196],[172],["D",1753295285829],[],[177],["D",1753293908093],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":53,"_103":104,"_105":24},{"_13":84,"_31":85,"_42":41,"_86":43,"_87":88,"_89":90,"_91":49,"_92":93,"_94":95,"_96":44,"_97":98},"ctx",{"_77":-5,"_128":327,"_328":329,"_330":331,"_332":24,"_333":24,"_334":24,"_335":57,"_336":-5,"_337":-7,"_338":-7,"_339":155,"_340":24,"_341":24,"_342":-5,"_343":24,"_344":24,"_345":24,"_346":-5},"ENV",{"_298":299,"_300":301,"_302":85,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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 · v6