\n \n \n \n\n",[],[203,205],"980a8da9-b954-42e3-b35a-b0d28fa2e234","favicon.svg","210a96f2-7a3d-11f1-b1d7-1607ee4eb77e",5,["D",1783453839094],"\n",[],[203,213],"e49ae04a-198c-46b3-b461-5b9b9d6c15e1","Counter.tsx","213ee9f2-7a3d-11f1-b81c-1607ee4eb77e","062b06ed-01a7-471e-98d6-c0ecc69c291c",6,["D",1783453839447],"/** @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",[],[203,229,221],"components","d54835c0-7ec8-4572-a6d7-44ee6e57500d","App.tsx","2165de90-7a3d-11f1-9f05-1607ee4eb77e",["D",1783454644351],10,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Question {\n id: string;\n question: string;\n option_a: string;\n option_b: string;\n option_c: string;\n option_d: string;\n correct_option: string;\n explanation: string;\n category: string;\n}\n\ntype Phase = \"category\" | \"warning\" | \"loading\" | \"playing\" | \"results\";\n\ninterface Answer {\n questionId: string;\n selected: string;\n correct: boolean;\n}\n\nconst SAMPLE_SIZE = 10;\n\nfunction classNames(...parts: (string | false | null | undefined)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\nexport function App() {\n const [phase, setPhase] = useState(\"category\");\n const [categories, setCategories] = useState([]);\n const [loadError, setLoadError] = useState(null);\n const [pendingCategory, setPendingCategory] = useState(null);\n const [pendingCount, setPendingCount] = useState(0);\n const [questions, setQuestions] = useState([]);\n const [answers, setAnswers] = useState([]);\n const [currentIdx, setCurrentIdx] = useState(0);\n const [selected, setSelected] = useState(null);\n const [revealed, setRevealed] = useState(false);\n const [maxStreak, setMaxStreak] = useState(0);\n const [currentStreak, setCurrentStreak] = useState(0);\n const [startTime, setStartTime] = useState(0);\n const [endTime, setEndTime] = useState(0);\n const [currentCategory, setCurrentCategory] = useState(null);\n const [surpriseReveal, setSurpriseReveal] = useState(null);\n\n // Load categories on mount\n useEffect(() => {\n let cancelled = false;\n fetch(\"/api/categories\")\n .then((r) => r.json())\n .then((data) => {\n if (cancelled) return;\n if (Array.isArray(data)) {\n setCategories(data);\n } else {\n setLoadError(\"Unexpected response from /api/categories\");\n }\n })\n .catch((err) => {\n if (cancelled) return;\n setLoadError(String(err));\n });\n return () => {\n cancelled = true;\n };\n }, []);\n\n const startGame = async (category: string, fromSurprise: boolean) => {\n setPhase(\"loading\");\n setSelected(null);\n setRevealed(false);\n setAnswers([]);\n setCurrentIdx(0);\n setMaxStreak(0);\n setCurrentStreak(0);\n try {\n const res = await fetch(\n `/api/questions?category=${encodeURIComponent(category)}&count=${SAMPLE_SIZE}`,\n );\n const data = await res.json();\n const all = Array.isArray(data.questions) ? (data.questions as Question[]) : [];\n const count = typeof data.count === \"number\" ? data.count : all.length;\n // If server returns more than the count but fewer than SAMPLE_SIZE, still use what we got.\n const list = all.slice(0, SAMPLE_SIZE);\n if (list.length === 0) {\n setLoadError(`No questions available for category \"${category}\".`);\n setPhase(\"category\");\n return;\n }\n setPendingCategory(category);\n setPendingCount(count);\n setCurrentCategory(category);\n if (fromSurprise) {\n setSurpriseReveal(category);\n } else {\n setSurpriseReveal(null);\n }\n if (count < SAMPLE_SIZE) {\n setPhase(\"warning\");\n return;\n }\n beginQuestions(list, category);\n } catch (err) {\n setLoadError(String(err));\n setPhase(\"category\");\n }\n };\n\n const beginQuestions = (list: Question[], category: string) => {\n setQuestions(list);\n setAnswers([]);\n setCurrentIdx(0);\n setSelected(null);\n setRevealed(false);\n setMaxStreak(0);\n setCurrentStreak(0);\n setStartTime(Date.now());\n setEndTime(0);\n setCurrentCategory(category);\n // Keep surpriseReveal intact so we can show the picked category during gameplay\n setPhase(\"playing\");\n };\n\n const proceedFromWarning = () => {\n // Re-fetch to get the (shorter) list of questions\n if (!pendingCategory) {\n setPhase(\"category\");\n return;\n }\n setPhase(\"loading\");\n fetch(\n `/api/questions?category=${encodeURIComponent(pendingCategory)}&count=${SAMPLE_SIZE}`,\n )\n .then((r) => r.json())\n .then((data) => {\n const all = Array.isArray(data.questions) ? (data.questions as Question[]) : [];\n const list = all.slice(0, SAMPLE_SIZE);\n beginQuestions(list, pendingCategory);\n })\n .catch((err) => {\n setLoadError(String(err));\n setPhase(\"category\");\n });\n };\n\n const cancelWarning = () => {\n setPendingCategory(null);\n setPendingCount(0);\n setPhase(\"category\");\n };\n\n const handleSurprise = () => {\n if (categories.length === 0) return;\n const pick = categories[Math.floor(Math.random() * categories.length)];\n startGame(pick, true);\n };\n\n const submitAnswer = (option: string) => {\n if (revealed) return;\n const q = questions[currentIdx];\n if (!q) return;\n const correct = option === q.correct_option;\n setSelected(option);\n setRevealed(true);\n const newStreak = correct ? currentStreak + 1 : 0;\n setCurrentStreak(newStreak);\n setMaxStreak((m) => Math.max(m, newStreak));\n setAnswers((a) => [...a, { questionId: q.id, selected: option, correct }]);\n };\n\n const goNext = () => {\n if (currentIdx + 1 >= questions.length) {\n setEndTime(Date.now());\n setPhase(\"results\");\n return;\n }\n setCurrentIdx((i) => i + 1);\n setSelected(null);\n setRevealed(false);\n };\n\n const playAgain = () => {\n if (!currentCategory) {\n setPhase(\"category\");\n return;\n }\n startGame(currentCategory, false);\n };\n\n const newCategory = () => {\n setCurrentCategory(null);\n setQuestions([]);\n setAnswers([]);\n setSelected(null);\n setRevealed(false);\n setMaxStreak(0);\n setCurrentStreak(0);\n setStartTime(0);\n setEndTime(0);\n setPendingCategory(null);\n setPendingCount(0);\n setSurpriseReveal(null);\n setPhase(\"category\");\n };\n\n const total = questions.length;\n const correctCount = answers.filter((a) => a.correct).length;\n const percent = total > 0 ? Math.round((correctCount / total) * 100) : 0;\n const elapsedSec = useMemo(() => {\n if (!startTime) return 0;\n const end = endTime || Date.now();\n return Math.max(0, Math.round((end - startTime) / 1000));\n }, [startTime, endTime]);\n\n const achievements = useMemo(() => {\n const out: string[] = [];\n if (total === SAMPLE_SIZE && correctCount === SAMPLE_SIZE) {\n out.push(\"Perfect Round\");\n }\n if (maxStreak >= 5) {\n out.push(\"Hot Streak\");\n }\n if (maxStreak >= 3) {\n out.push(\"Triple Win\");\n }\n return out;\n }, [correctCount, total, maxStreak]);\n\n return (\n

🧠 Quiz Time

\n \n view source\n \n

\n\n {loadError && (\n \n {loadError}\n

\n )}\n\n {phase === \"category\" && (\n startGame(c, false)}\n onSurprise={handleSurprise}\n />\n )}\n\n {phase === \"loading\" && (\n

\n Loading questions…\n

\n )}\n\n {phase === \"warning\" && pendingCategory && (\n \n )}\n\n {phase === \"playing\" && questions[currentIdx] && (\n = total}\n />\n )}\n\n {phase === \"results\" && (\n \n )}\n\n {surpriseReveal && phase !== \"results\" && (\n

\n 🎲 Surprise category: {surpriseReveal}\n

\n )}\n

\n \n );\n}\n\nfunction CategoryScreen(props: {\n categories: string[];\n onSelect: (cat: string) => void;\n onSurprise: () => void;\n}) {\n const { categories, onSelect, onSurprise } = props;\n return (\n

\n Choose a category\n

\n Pick a topic and answer up to {SAMPLE_SIZE} questions.\n

\n \n 🎲 Surprise Me!\n \n

\n {categories.map((cat) => (\n onSelect(cat)}\n class=\"text-left bg-slate-50 hover:bg-indigo-50 border border-slate-200 hover:border-indigo-300 rounded-lg px-4 py-3 font-medium text-slate-700 transition cursor-pointer\"\n >\n {cat}\n \n ))}\n

\n );\n}\n\nfunction WarningScreen(props: {\n category: string;\n count: number;\n onProceed: () => void;\n onCancel: () => void;\n}) {\n const { category, count, onProceed, onCancel } = props;\n return (\n

\n ⚠️ Heads up\n

\n Not enough questions in this category for all accomplishments (\n {count} available,{\" \"}\n {SAMPLE_SIZE} needed).\n

\n \n Proceed anyway\n \n \n Pick a different category\n \n

\n Category: {category}\n

\n );\n}\n\nfunction PlayScreen(props: {\n question: Question;\n index: number;\n total: number;\n selected: string | null;\n revealed: boolean;\n currentStreak: number;\n onSubmit: (option: string) => void;\n onNext: () => void;\n isLast: boolean;\n}) {\n const { question, index, total, selected, revealed, currentStreak, onSubmit, onNext, isLast } = props;\n const options = [\n { key: \"A\", value: question.option_a },\n { key: \"B\", value: question.option_b },\n { key: \"C\", value: question.option_c },\n { key: \"D\", value: question.option_d },\n ];\n const correctKey = question.correct_option;\n const isCorrect = selected === correctKey;\n return (\n

\n \n Question {index + 1} of {total}\n \n \n {question.category}\n \n

\n \n

\n {question.question}\n

\n {options.map((opt) => {\n const isThisCorrect = opt.key === correctKey;\n const isThisSelected = selected === opt.key;\n let stateClass =\n \"bg-white border-slate-200 hover:border-indigo-300 hover:bg-indigo-50 text-slate-800\";\n if (revealed) {\n if (isThisCorrect) {\n stateClass =\n \"bg-emerald-50 border-emerald-400 text-emerald-800 ring-2 ring-emerald-300\";\n } else if (isThisSelected) {\n stateClass = \"bg-rose-50 border-rose-400 text-rose-800\";\n } else {\n stateClass = \"bg-white border-slate-200 text-slate-500\";\n }\n } else if (isThisSelected) {\n stateClass = \"bg-indigo-50 border-indigo-400 text-indigo-800\";\n }\n return (\n onSubmit(opt.key)}\n class={classNames(\n \"w-full text-left rounded-xl border-2 px-4 py-3 transition cursor-pointer disabled:cursor-not-allowed flex items-center gap-3\",\n stateClass,\n )}\n >\n {opt.key}.\n {opt.value}\n \n );\n })}\n

\n\n {revealed && (\n

\n \n {isCorrect ? \"Correct!\" : \"Incorrect\"}\n

{question.explanation}

\n Current streak: {currentStreak}\n

\n \n {isLast ? \"See Results\" : \"Next Question\"}\n \n

\n )}\n

\n );\n}\n\nfunction ResultsScreen(props: {\n category: string;\n correct: number;\n total: number;\n percent: number;\n elapsedSec: number;\n achievements: string[];\n maxStreak: number;\n onPlayAgain: () => void;\n onNewCategory: () => void;\n}) {\n const { category, correct, total, percent, elapsedSec, achievements, maxStreak, onPlayAgain, onNewCategory } = props;\n return (\n

Round complete!

Category: {category}

\n\n

Score

\n {correct}/{total} Correct ({percent}%)\n

Time

{elapsedSec}s

Max Streak

\n {maxStreak}\n

\n\n

🏆 Achievements

\n {achievements.length === 0 ? (\n

No achievements this round

\n ) : (\n

\n ⭐ {a}\n \n ))}\n

\n )}\n

\n\n

\n \n 🔁 Play Again\n \n \n 🆕 New Category\n \n

\n );\n}\n",[],[203,229,231],"99064e6f-b9c1-4673-a192-42d7373cd1b7",["D",1783453839447],[169,170],[203,229],"d44717be-e6a1-4d90-acc8-2314d6b4abf9",["D",1783453838518],[168,171,172,173],[203],["D",1783453901312],[],[18,64],["D",1783453901312],[166],[18],["D",1783453838282],{"_11":12,"_120":69},{"_11":12,"_116":69,"_68":69,"_31":67,"_117":118,"_119":30},{"_39":107,"_13":16,"_33":36,"_108":73,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":14,"_115":12},"ctx",{"_52":-5,"_139":289,"_290":291,"_292":293,"_294":30,"_295":30,"_296":30,"_297":24,"_298":-5,"_299":-7,"_300":-7,"_301":26,"_302":30,"_303":30,"_304":-5,"_305":30,"_306":30,"_307":30,"_308":-5},"ENV",{"_260":261,"_262":263,"_264":16,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288},"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"]

History · assets