\n \n \n","label",[18],"pulls","branches","forks","envVars",{"_195":26,"_197":26},"connections",{"_195":26,"_196":26},"count","unfilledCount","emptyCount",{"_35":221,"_13":222,"_68":223,"_45":-5,"_37":38,"_181":42,"_182":109,"_39":224,"_41":26,"_70":217,"_184":225,"_71":24,"_186":-5,"_207":226,"_17":227},{"_35":213,"_13":214,"_68":215,"_45":-5,"_37":38,"_181":42,"_182":109,"_39":216,"_41":26,"_70":217,"_184":218,"_71":24,"_186":-5,"_207":219,"_17":220},{"_35":180,"_13":18,"_68":69,"_45":-5,"_37":38,"_181":91,"_182":109,"_39":210,"_41":84,"_70":21,"_184":185,"_71":24,"_186":-5,"_207":211,"_17":212},{"_35":202,"_13":203,"_68":107,"_45":-5,"_37":38,"_181":132,"_182":109,"_39":204,"_41":42,"_70":205,"_184":206,"_71":24,"_186":-5,"_207":208,"_17":209},"30766a9d-2caf-45fe-9274-ace52836f79f","main.ts",["D",1780943874985],"http","// Learn more: https://docs.val.town/vals/http/\nimport { Hono } from \"npm:hono\";\nimport {\n parseVal,\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\n// View source\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Serve the client app. serveFile transpiles TSX -> JS and sets the right\n// content-type so the browser can actually execute the module.\napp.get(\n \"/app.tsx\",\n (c) => c.redirect(\"https://esm.town/v/tmcw/accent-atlas/app.tsx\"),\n);\n\napp.get(\n \"/\",\n async (c) =>\n new Response(await readFile(\"/index.html\", import.meta.url), {\n headers: { \"Content-Type\": \"text/html\" },\n }),\n);\n\nexport default app.fetch;","children",[],[203],["D",1780943862126],[],[18],"c60798e6-57de-4798-94eb-58b8e9396fca","data.ts","019ea884-f806-7184-90bb-e124dbe824f4",["D",1780943746993],"script","// Accent rounds. Each round uses the browser's SpeechSynthesis voices, which are\n// keyed by BCP-47 locale (e.g. \"en-GB\", \"en-AU\"). We synthesize a sample sentence\n// in a given regional English voice and ask the player to identify the region.\n//\n// This is a LINGUISTIC / GEOGRAPHIC game about regional accents. It is not about\n// — and cannot be used to infer — anyone's race or ethnicity.\n\nexport type Accent = {\n id: string;\n label: string; // human-friendly region name\n locale: string; // BCP-47 tag we try to match a voice for\n flag: string; // emoji for flair\n hint: string; // a fun fact / hint shown after answering\n};\n\nexport const ACCENTS: Accent[] = [\n {\n id: \"gb\",\n label: \"British (England)\",\n locale: \"en-GB\",\n flag: \"🏴󠁧󠁢󠁥󠁮󠁧󠁿\",\n hint: \"Non-rhotic: the 'r' at the end of 'car' usually goes silent.\",\n },\n {\n id: \"us\",\n label: \"American (USA)\",\n locale: \"en-US\",\n flag: \"🇺🇸\",\n hint: \"Rhotic: that final 'r' is pronounced loud and clear.\",\n },\n {\n id: \"au\",\n label: \"Australian\",\n locale: \"en-AU\",\n flag: \"🇦🇺\",\n hint: \"Famous for rising intonation — statements can sound like questions.\",\n },\n {\n id: \"in\",\n label: \"Indian English\",\n locale: \"en-IN\",\n flag: \"🇮🇳\",\n hint: \"Often syllable-timed rather than stress-timed.\",\n },\n {\n id: \"ie\",\n label: \"Irish\",\n locale: \"en-IE\",\n flag: \"🇮🇪\",\n hint: \"The 'th' in 'thing' often softens toward a 't' sound.\",\n },\n {\n id: \"za\",\n label: \"South African\",\n locale: \"en-ZA\",\n flag: \"🇿🇦\",\n hint: \"The 'kit' vowel is often centralized — 'sit' can sound like 'sut'.\",\n },\n];\n\n// Sample sentences chosen to surface accent differences (rhoticity, vowels, etc.)\nexport const SENTENCES: string[] = [\n \"The early bird parks the car in the harbour at dawn.\",\n \"Better water makes the daughter laugh on a hot afternoon.\",\n \"Twenty-three dancers can't quite grasp the answer.\",\n \"Bath, glass, and grass go past the castle path.\",\n \"Tomato or tomahto, either way the herb garden grew.\",\n \"He poured the oil over the boiling kettle near the tower.\",\n];\n",[],[214],"06318cb2-3599-4b91-b97f-1eb24d17f357","app.tsx","019ea884-f806-7184-90bb-dc19bb02006c",["D",1780943746993],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { ACCENTS, SENTENCES, type Accent } from \"https://esm.town/v/potluck/accent-atlas/data.ts\";\n\nconst ROUNDS = 8;\n\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 pick(arr: T[]): T {\n return arr[Math.floor(Math.random() * arr.length)];\n}\n\ntype Round = { answer: Accent; choices: Accent[]; sentence: string };\n\nfunction makeRound(): Round {\n const answer = pick(ACCENTS);\n const distractors = shuffle(ACCENTS.filter((a) => a.id !== answer.id)).slice(0, 3);\n const choices = shuffle([answer, ...distractors]);\n return { answer, choices, sentence: pick(SENTENCES) };\n}\n\n// Try to find a SpeechSynthesis voice whose lang matches the target locale.\nfunction findVoice(locale: string, voices: SpeechSynthesisVoice[]): SpeechSynthesisVoice | undefined {\n const norm = (s: string) => s.toLowerCase().replace(\"_\", \"-\");\n const target = norm(locale);\n // exact match first, then language-prefix match\n return (\n voices.find((v) => norm(v.lang) === target) ||\n voices.find((v) => norm(v.lang).startsWith(target.split(\"-\")[0] + \"-\") && norm(v.lang) === target) ||\n voices.find((v) => norm(v.lang) === target)\n );\n}\n\nfunction useVoices() {\n const [voices, setVoices] = useState([]);\n useEffect(() => {\n const load = () => setVoices(window.speechSynthesis.getVoices());\n load();\n window.speechSynthesis.onvoiceschanged = load;\n return () => {\n window.speechSynthesis.onvoiceschanged = null;\n };\n }, []);\n return voices;\n}\n\nfunction App() {\n const voices = useVoices();\n const [round, setRound] = useState(() => makeRound());\n const [roundNum, setRoundNum] = useState(1);\n const [score, setScore] = useState(0);\n const [streak, setStreak] = useState(0);\n const [bestStreak, setBestStreak] = useState(0);\n const [guess, setGuess] = useState(null);\n const [done, setDone] = useState(false);\n const [speaking, setSpeaking] = useState(false);\n const playedOnce = useRef(false);\n\n const availableLocales = useMemo(\n () => new Set(voices.map((v) => v.lang.toLowerCase().replace(\"_\", \"-\"))),\n [voices],\n );\n\n function speak() {\n if (!(\"speechSynthesis\" in window)) return;\n window.speechSynthesis.cancel();\n const u = new SpeechSynthesisUtterance(round.sentence);\n const v = findVoice(round.answer.locale, voices);\n if (v) {\n u.voice = v;\n u.lang = v.lang;\n } else {\n u.lang = round.answer.locale;\n }\n u.rate = 1.0; // natural pace\n u.pitch = 1.15; // nudge up so voices don't sound too deep/booming\n u.onstart = () => setSpeaking(true);\n u.onend = () => setSpeaking(false);\n u.onerror = () => setSpeaking(false);\n playedOnce.current = true;\n window.speechSynthesis.speak(u);\n }\n\n function choose(a: Accent) {\n if (guess) return;\n setGuess(a.id);\n window.speechSynthesis.cancel();\n setSpeaking(false);\n const correct = a.id === round.answer.id;\n if (correct) {\n setScore((s) => s + 1);\n setStreak((st) => {\n const next = st + 1;\n setBestStreak((b) => Math.max(b, next));\n return next;\n });\n } else {\n setStreak(0);\n }\n }\n\n function next() {\n if (roundNum >= ROUNDS) {\n setDone(true);\n return;\n }\n setRoundNum((n) => n + 1);\n setRound(makeRound());\n setGuess(null);\n playedOnce.current = false;\n }\n\n function restart() {\n setRound(makeRound());\n setRoundNum(1);\n setScore(0);\n setStreak(0);\n setBestStreak(0);\n setGuess(null);\n setDone(false);\n playedOnce.current = false;\n }\n\n const noSpeech = typeof window !== \"undefined\" && !(\"speechSynthesis\" in window);\n\n return (\n

🌍 Accent Atlas

Listen to the clip and guess which region the accent is from.

\n\n {noSpeech && (\n

\n Your browser doesn't support speech synthesis. Try Chrome, Edge, or Safari.\n

\n )}\n\n {!done ? (\n \n ) : (\n \n )}\n\n \n

\n );\n}\n\nfunction StatBadge({ label, value }: { label: string; value: React.ReactNode }) {\n return (\n

{label}

{value}

\n );\n}\n\nfunction Game(props: {\n round: Round;\n roundNum: number;\n score: number;\n streak: number;\n guess: string | null;\n speaking: boolean;\n playedOnce: boolean;\n availableLocales: Set;\n onSpeak: () => void;\n onChoose: (a: Accent) => void;\n onNext: () => void;\n}) {\n const { round, roundNum, score, streak, guess, speaking, playedOnce, availableLocales, onSpeak, onChoose, onNext } = props;\n const answered = guess !== null;\n const localeMissing = !availableLocales.has(round.answer.locale.toLowerCase());\n\n return (\n

\n \n \n \n \n

\n\n \n {speaking ? \"🔊 Playing…\" : playedOnce ? \"🔁 Play again\" : \"▶️ Play clip\"}\n \n {localeMissing && (\n

\n Heads up: your device may not have a distinct voice for this region, so it could sound generic.\n

\n )}\n\n

Which region is this accent from?

\n\n

\n {round.choices.map((c) => {\n let style = \"bg-slate-700 hover:bg-slate-600 border-slate-600\";\n if (answered) {\n if (c.id === round.answer.id) style = \"bg-emerald-600 border-emerald-400\";\n else if (c.id === guess) style = \"bg-rose-700 border-rose-500\";\n else style = \"bg-slate-700/50 border-slate-700 opacity-60\";\n }\n return (\n onChoose(c)}\n className={`flex items-center gap-3 rounded-xl border px-4 py-3 text-left font-medium transition ${style}`}\n >\n {c.flag}\n {c.label}\n \n );\n })}\n

\n\n {answered && (\n

\n {guess === round.answer.id ? \"✅ Correct!\" : `❌ It was ${round.answer.flag} ${round.answer.label}`}\n

💡 {round.answer.hint}

\n \n {roundNum >= ROUNDS ? \"See results →\" : \"Next round →\"}\n \n

\n )}\n

\n );\n}\n\nfunction Results({ score, bestStreak, onRestart }: { score: number; bestStreak: number; onRestart: () => void }) {\n const pct = Math.round((score / ROUNDS) * 100);\n const blurb =\n pct === 100 ? \"Perfect ear! 🏆\" : pct >= 75 ? \"Sharp listening! 👂\" : pct >= 50 ? \"Not bad at all. 🙂\" : \"Keep practicing! 🎧\";\n return (\n

Round complete

\n {score}/{ROUNDS}\n

{blurb}

Best streak: {bestStreak}🔥

\n \n

\n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[222],["D",1780943746993],{"_11":12,"_147":74},{"_11":12,"_143":-5,"_73":74,"_30":72,"_144":145,"_146":24},{"_41":132,"_13":16,"_35":38,"_133":97,"_134":65,"_135":66,"_136":101,"_137":138,"_139":140,"_141":14,"_142":12},"ctx",{"_54":-5,"_168":265,"_266":267,"_268":269,"_270":24,"_271":24,"_272":24,"_273":109,"_274":-5,"_275":-7,"_276":-7,"_277":26,"_278":24,"_279":24,"_280":-5,"_281":24,"_282":24,"_283":24,"_284":-5},"ENV",{"_236":237,"_238":239,"_240":16,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264},"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 · index.html