\n \n

\n \n );\n}\n\nfunction Home() {\n const [gameState, setGameState] = React.useState<\"quiz\" | \"results\">(\"quiz\");\n const [questions, setQuestions] = React.useState(() => generateQuestions());\n const [currentQuestion, setCurrentQuestion] = React.useState(0);\n const [answers, setAnswers] = React.useState([]);\n\n const handleAnswer = (answer: string) => {\n const newAnswers = [...answers, answer];\n setAnswers(newAnswers);\n\n if (currentQuestion < questions.length - 1) {\n setCurrentQuestion(currentQuestion + 1);\n } else {\n setGameState(\"results\");\n }\n };\n\n const resetQuiz = () => {\n setQuestions(generateQuestions());\n setCurrentQuestion(0);\n setAnswers([]);\n setGameState(\"quiz\");\n };\n\n if (gameState === \"results\") {\n const score = answers.filter(\n (answer, idx) => answer === questions[idx].correctAnswer\n ).length;\n\n return (\n

\n Quiz Complete! 🎉\n

\n {score}/10\n

\n {score === 10 ? \"Perfect score!\" : score >= 7 ? \"Great job!\" : score >= 5 ? \"Good effort!\" : \"Keep practicing!\"}\n

\n\n

\n {questions.map((q, idx) => {\n const isCorrect = answers[idx] === q.correctAnswer;\n return (\n \n

\n {q.flag}\n

\n \n {isCorrect ? \"✓\" : \"✗\"}\n \n \n {isCorrect ? (\n {q.correctAnswer}\n ) : (\n <>\n Your answer: {answers[idx]}\n
\n Correct: {q.correctAnswer}\n \n )}\n \n

\n );\n })}\n

\n\n \n Play Again\n \n \n );\n }\n\n const question = questions[currentQuestion];\n\n return (\n

\n Question {currentQuestion + 1} of {questions.length}\n

\n \n

\n\n

\n Which country's flag is this?\n

\n\n

{question.flag}

\n\n

\n {question.options.map((option) => (\n handleAnswer(option)}\n className=\"w-full bg-indigo-50 hover:bg-indigo-100 border-2 border-indigo-200 hover:border-indigo-400 text-gray-800 py-4 px-6 rounded-lg font-semibold text-lg transition-colors\"\n >\n {option}\n \n ))}\n

\n );\n}\n\nexport const routes = [\n {\n Component: Layout,\n children: [\n {\n Component: Home,\n index: true,\n },\n ],\n },\n];\n\nexport default routes;\n",[105],"d75640ee771214995093b52107217c98732238482164b5cd7a4ff7ee39e56eb6","2356ce6a-6276-11f0-8e20-0224a6c84d84","9bfb0133-e2c8-42fb-a214-94d8dc039ec6",32,["D",1752691998693],10,"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { useLoaderData, Link, Outlet } from \"https://esm.sh/react-router@7\";\n\n// provide the full URL so that both the client and server can fetch\nconst API_URL = \"https://react-router-hono.val.run/api\";\n\nfunction HTML ({ children }: {\n children: React.ReactNode;\n}) {\n return (\n \n \n React Router Hono Starter\n \n \n {children}\n \n \n )\n}\n\nfunction Layout () {\n return (\n \n

React Router Hono Starter

\n \n

\n \n \n

\n \n );\n}\n\nfunction Home () {\n const [count, setCount] = React.useState(0);\n return (\n

Hello, Home page

{count}

\n \n

\n );\n}\n\nfunction About () {\n const data = useLoaderData();\n \n return (\n

Hello, About page

{JSON.stringify(data, null, 2)}

\n )\n}\n\nasync function catsLoader () {\n const data = await fetch(API_URL)\n .then(res => res.json());\n return data;\n}\n\nexport const routes = [\n {\n Component: Layout,\n children: [\n {\n Component: Home,\n index: true,\n },\n {\n Component: About,\n path: \"about\",\n loader: catsLoader,\n },\n ]\n },\n]\n\nexport default routes;",[105],"124204645915c0a4c98fbdace23266c8b61ed2eced3f989a41444fc39876acfd","README.md",{"_32":134,"_13":124,"_80":135,"_82":-5,"_83":33,"_84":136,"_85":26,"_34":137,"_40":110,"_87":130,"_89":138,"_66":48,"_91":-5,"_92":-7,"_73":139,"_94":140},{"_32":127,"_13":124,"_80":128,"_82":-5,"_83":58,"_84":57,"_85":26,"_34":129,"_40":22,"_87":130,"_89":131,"_66":48,"_91":-5,"_92":-7,"_73":132,"_94":133},"4ffe0872-a2ed-11f0-bcd2-0224a6c84d84","0199bb04-a625-7637-997b-58d142ae541b",["D",1759780058141],"file","# Flag Quiz\n\nA fun, interactive flag quiz game built with React Router and Hono on Val Town.\n\n## How to Play\n\nTest your knowledge of world flags! Each game presents 10 randomly selected flags with multiple choice questions. Try to identify which country each flag belongs to.\n\n## Features\n\n- **55 Country Flags** - Diverse selection from around the world\n- **Random Questions** - Each game randomly selects 10 flags with shuffled answer options\n- **Progress Tracking** - Visual progress bar shows your position in the quiz\n- **Detailed Results** - Review all questions at the end with:\n - Your score out of 10\n - Color-coded correct/incorrect answers\n - Side-by-side comparison of your answers vs. correct answers\n- **Play Again** - Restart with a fresh set of random questions\n- **Responsive Design** - Works great on desktop and mobile devices\n\n## Tech Stack\n\n- **React 19** with React Router 7 for routing\n- **Hono** for server-side rendering\n- **TailwindCSS** for styling\n- **Val Town** for hosting\n\n## How it Works\n\nThe `server.tsx` file handles server-side rendering with Hono and React Router. The `client.tsx` file hydrates the app for client-side interactivity. All game logic runs on the client side with no backend storage required.\n",[124],"f09160cc895355c5a6cced38e02d3a9be969d586e4075953ad72a41e4dd200c6","76e1de0e-3264-11f0-9183-569c3dd06744","464521c8-11e4-44a1-ba06-fc0039bc9dca",29,["D",1747406752100],"# React Router Hono Starter\n\nMinimal React Router + Hono starter example in [\"data mode\"][modes] with server-side rendering for Val Town\n\n[View demo][demo]\n\n## How it works\n\nThe `server.tsx` file is the main server that responds with an HTML stream, using React Router, or an API response.\nThe HTML includes a `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[154],"b740560111ede7f6f6839a473a9bd87458ce4b5e38bce6ec9334739dcc0c99a5",".vtignore",{"_32":165,"_13":163,"_80":166,"_82":-5,"_83":58,"_84":167,"_85":26,"_34":168,"_40":150,"_87":130,"_89":169,"_66":48,"_91":-5,"_92":-7,"_73":170,"_94":171},"30912096-a2ed-11f0-b436-0224a6c84d84","30912154-a2ed-11f0-b436-0224a6c84d84",4,["D",1759780005382],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[163],"18f4273e0b959a6002030663e4e449119845617823d38fc9fbbb206c591a8ff5",["D",1759779268048],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","019977b1-1bd1-730d-a575-2665305dd849","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019977b1-1bd1-730d-a575-2afdc309b42c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_210":206},"org",{"_11":12,"_203":204,"_205":206,"_177":178,"_207":208,"_209":48},"branch","displayName","WHP","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zMzZ1Q1ZnYnREY3RBMjh5TWtPbU5vS01MejYifQ","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":297,"_46":-5,"_173":48,"_49":50,"_174":50,"_175":-5,"_176":-5,"_177":178,"_179":81,"_180":26,"_181":26,"_182":-5,"_183":150,"_53":184,"_185":-5,"_186":-5,"_187":-5,"_188":-5,"_189":190,"_191":190,"_192":193,"_194":193,"_195":193,"_196":190,"_197":190,"_198":298,"_200":299,"_202":300,"_47":48},"tree",[275,276,277,278,279,280,281],"files",[275,276,277,278,279,280,281],"counts",{"_265":150,"_266":22,"_267":150,"_268":269,"_270":271},"contents",[240,241,242,243,244,245,246],"upstreamProject",{"_32":39,"_13":56,"_175":236,"_176":237,"_49":50,"_198":238},"upstreamBranch",{"_32":33,"_34":234,"_36":235,"_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",1747318612210],["D",1779898921971],"Minimal React Router + Hono starter example","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c6ac4b2d-2d7e-4ea8-c2bf-7e369bfdb600/square512?exp=1789606874&sig=b3c90f9efe05a2033ebe6eecdcaf4d461aeacd144b00932e806f04fdd76ed7ce",{"_11":52,"_210":239},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512?exp=1789606874&sig=c2e8e842d2ebf32838f6f76733ce6019893744501c4c6c14302d2f3fcb3976db",{"_32":165,"_13":163,"_80":166,"_82":-5,"_83":58,"_84":167,"_85":26,"_34":263,"_40":150,"_87":130,"_89":169,"_66":48,"_91":-5,"_73":264},{"_32":156,"_13":154,"_80":157,"_82":-5,"_83":58,"_84":158,"_85":26,"_34":261,"_40":150,"_87":130,"_89":160,"_66":48,"_91":-5,"_73":262},{"_32":127,"_13":124,"_80":128,"_82":-5,"_83":58,"_84":57,"_85":26,"_34":259,"_40":22,"_87":130,"_89":131,"_66":48,"_91":-5,"_73":260},{"_32":253,"_13":254,"_80":255,"_82":-5,"_83":58,"_84":22,"_85":26,"_34":256,"_40":150,"_87":112,"_89":257,"_66":48,"_91":-5,"_73":258},{"_32":146,"_13":144,"_80":147,"_82":-5,"_83":58,"_84":148,"_85":26,"_34":251,"_40":150,"_87":130,"_89":151,"_66":48,"_91":-5,"_73":252},{"_32":108,"_13":105,"_80":109,"_82":-5,"_83":58,"_84":110,"_85":26,"_34":249,"_40":22,"_87":112,"_89":113,"_66":48,"_91":-5,"_73":250},{"_32":79,"_13":74,"_80":81,"_82":-5,"_83":58,"_84":20,"_85":26,"_34":247,"_40":22,"_87":88,"_89":90,"_66":48,"_91":-5,"_73":248},["D",1759780005398],[74],["D",1759780005427],[105],["D",1759780005363],[144],"791d7320-a2eb-11f0-82e9-0224a6c84d84","client.tsx","0199bb04-a625-7637-997b-5c08c64460c0",["D",1759779268048],"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport ReactDOM from \"https://esm.sh/react-dom@19/client\";\nimport { createBrowserRouter, RouterProvider } from \"https://esm.sh/react-router\";\nimport routes from \"./routes.tsx\";\n\nconsole.log(\"client\");\n\nconst router = createBrowserRouter(routes);\n\nReactDOM.hydrateRoot(\n document, \n \n);",[254],["D",1759780058141],[124],["D",1759780005376],[154],["D",1759780005382],[163],"pulls","branches","forks","envVars",{"_272":150,"_274":150},"connections",{"_272":150,"_273":150},"count","unfilledCount","emptyCount",{"_32":165,"_13":163,"_80":166,"_82":-5,"_83":58,"_84":167,"_85":26,"_34":168,"_40":150,"_87":130,"_89":169,"_66":48,"_91":-5,"_92":295,"_73":296},{"_32":156,"_13":154,"_80":157,"_82":-5,"_83":58,"_84":158,"_85":26,"_34":159,"_40":150,"_87":130,"_89":160,"_66":48,"_91":-5,"_92":293,"_73":294},{"_32":127,"_13":124,"_80":128,"_82":-5,"_83":58,"_84":57,"_85":26,"_34":129,"_40":22,"_87":130,"_89":131,"_66":48,"_91":-5,"_92":291,"_73":292},{"_32":253,"_13":254,"_80":255,"_82":-5,"_83":58,"_84":22,"_85":26,"_34":288,"_40":150,"_87":112,"_89":257,"_66":48,"_91":-5,"_92":289,"_73":290},{"_32":146,"_13":144,"_80":147,"_82":-5,"_83":58,"_84":148,"_85":26,"_34":149,"_40":150,"_87":130,"_89":151,"_66":48,"_91":-5,"_92":286,"_73":287},{"_32":108,"_13":105,"_80":109,"_82":-5,"_83":58,"_84":110,"_85":26,"_34":111,"_40":22,"_87":112,"_89":113,"_66":48,"_91":-5,"_92":284,"_73":285},{"_32":79,"_13":74,"_80":81,"_82":-5,"_83":58,"_84":20,"_85":26,"_34":86,"_40":22,"_87":88,"_89":90,"_66":48,"_91":-5,"_92":282,"_73":283},[],[74],[],[105],[],[144],["D",1759779268048],[],[254],[],[124],[],[154],[],[163],["D",1759779268048],{"_11":12,"_210":206},{"_11":12,"_203":204,"_205":206,"_177":178,"_207":208,"_209":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_198":-5,"_231":334,"_335":336,"_337":338,"_339":48,"_340":48,"_341":48,"_342":26,"_343":-5,"_344":-7,"_345":-7,"_346":150,"_347":48,"_348":48,"_349":-5,"_350":48,"_351":48,"_352":48,"_353":-5},"ENV",{"_305":306,"_307":308,"_309":16,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","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

Mergewillemhelmet/mainintojxnblk/main

README.md+22-14

routes.tsx+220-60

Hserver.tsx+0-8

.vtignore+6-0

AGENTS.md+290-0

deno.json+37-0