\n \n \n \n\n",[],[223,225],"9d019d76-369d-11f0-9186-9e149126039e","VowelComparison.tsx","9d019e2a-369d-11f0-9186-9e149126039e","6c71f67a-9171-484a-91ca-562baae4d08b",11,["D",1747871102034],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface Language {\n id: string;\n name: string;\n family: string;\n region: string;\n vowelCount: number;\n}\n\ninterface LanguageDetail {\n id: string;\n name: string;\n family: string;\n region: string;\n description: string;\n vowels: Vowel[];\n}\n\ninterface Vowel {\n ipa: string;\n description: string;\n frontness: 'front' | 'central' | 'back';\n height: 'close' | 'near-close' | 'close-mid' | 'mid' | 'open-mid' | 'near-open' | 'open';\n rounded: boolean;\n examples: Example[];\n}\n\ninterface Example {\n word: string;\n transcription: string;\n meaning: string;\n}\n\ninterface VowelComparisonProps {\n languages: Language[];\n selectedLanguageIds: string[];\n onToggleLanguage: (id: string) => void;\n}\n\nexport function VowelComparison({ languages, selectedLanguageIds, onToggleLanguage }: VowelComparisonProps) {\n const [languageDetails, setLanguageDetails] = useState>({});\n const [loading, setLoading] = useState(true);\n const [allVowels, setAllVowels] = useState([]);\n const [error, setError] = useState(null);\n \n useEffect(() => {\n // Fetch details for all selected languages\n const fetchLanguageDetails = async () => {\n setLoading(true);\n try {\n const details: Record = {};\n \n for (const id of selectedLanguageIds) {\n const response = await fetch(`/api/languages/${id}`);\n if (!response.ok) {\n throw new Error(`Failed to fetch details for language: ${id}`);\n }\n const data = await response.json();\n details[id] = data;\n }\n \n setLanguageDetails(details);\n \n // Extract all unique vowels\n const vowelSet = new Set();\n Object.values(details).forEach(lang => {\n lang.vowels.forEach(vowel => {\n vowelSet.add(vowel.ipa);\n });\n });\n \n setAllVowels(Array.from(vowelSet).sort());\n setLoading(false);\n } catch (err) {\n setError(err instanceof Error ? err.message : 'An error occurred');\n setLoading(false);\n }\n };\n \n if (selectedLanguageIds.length > 0) {\n fetchLanguageDetails();\n } else {\n setLanguageDetails({});\n setAllVowels([]);\n setLoading(false);\n }\n }, [selectedLanguageIds]);\n \n if (loading) {\n return (\n

Loading language data...

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

Error

{error}

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

Compare Vowel Systems

\n \n

Select Languages to Compare

\n {languages.map(lang => (\n onToggleLanguage(lang.id)}\n >\n

{lang.name}

{lang.vowelCount} vowels

\n ))}\n

\n \n {selectedLanguageIds.length > 0 ? (\n <>\n

\n \n \n \n \n {selectedLanguageIds.map(id => (\n \n ))}\n \n \n \n {allVowels.map(vowel => (\n \n \n {selectedLanguageIds.map(id => {\n const langVowel = languageDetails[id]?.vowels.find(v => v.ipa === vowel);\n return (\n \n );\n })}\n \n ))}\n \n

\n Vowel\n	\n {languageDetails[id]?.name \|\| id}\n
\n {vowel} \n	\n {langVowel ? (\n \n {langVowel.description} \n {langVowel.examples.length > 0 && (\n \n Example: {langVowel.examples[0].word} {langVowel.examples[0].transcription}\n \n )}\n \n ) : (\n —\n )}\n

\n \n

Vowel System Comparison

\n \n

\n {selectedLanguageIds.map(id => {\n const lang = languageDetails[id];\n if (!lang) return null;\n \n return (\n

{lang.name}

{lang.family} • {lang.region}

\n \n

\n Total vowels: {lang.vowels.length}\n

\n Front vowels: {lang.vowels.filter(v => v.frontness === 'front').length}\n

\n Central vowels: {lang.vowels.filter(v => v.frontness === 'central').length}\n

\n Back vowels: {lang.vowels.filter(v => v.frontness === 'back').length}\n

\n Rounded vowels: {lang.vowels.filter(v => v.rounded).length}\n

\n );\n })}\n

\n \n

Insights

Select more languages to compare their vowel systems.
\n {selectedLanguageIds.map(id => languageDetails[id]?.name).join(' and ')} \n {selectedLanguageIds.length === 2 ? ' have ' : ' all have '}\n {allVowels.filter(vowel => \n selectedLanguageIds.every(id => \n languageDetails[id]?.vowels.some(v => v.ipa === vowel)\n )\n ).length} vowels in common.\n
\n {languageDetails[selectedLanguageIds[0]]?.name} has {\n languageDetails[selectedLanguageIds[0]]?.vowels.filter(v => \n !languageDetails[selectedLanguageIds[1]]?.vowels.some(v2 => v2.ipa === v.ipa)\n ).length\n } vowels that {languageDetails[selectedLanguageIds[1]]?.name} doesn't have.\n
\n {Math.max(...selectedLanguageIds.map(id => languageDetails[id]?.vowels.filter(v => v.rounded).length || 0)) > 0 ? \n `${languageDetails[selectedLanguageIds.find(id => \n (languageDetails[id]?.vowels.filter(v => v.rounded).length || 0) === \n Math.max(...selectedLanguageIds.map(id => languageDetails[id]?.vowels.filter(v => v.rounded).length || 0))\n ) || '']?.name} has the most rounded vowels.` : \n 'None of these languages have rounded vowels.'\n }\n

\n \n ) : (\n

Select at least one language to see comparison data

\n )}\n \n );\n}",[],[223,241,233],"components","72dc1f30-369d-11f0-98c9-9e149126039e","VowelChart.tsx","72dc1fd0-369d-11f0-98c9-9e149126039e",9,["D",1747871031324],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Vowel {\n ipa: string;\n description: string;\n frontness: 'front' | 'central' | 'back';\n height: 'close' | 'near-close' | 'close-mid' | 'mid' | 'open-mid' | 'near-open' | 'open';\n rounded: boolean;\n examples: {\n word: string;\n transcription: string;\n meaning: string;\n }[];\n}\n\ninterface VowelChartProps {\n vowels: Vowel[];\n}\n\nexport function VowelChart({ vowels }: VowelChartProps) {\n const [selectedVowel, setSelectedVowel] = useState(null);\n \n // Map vowel height to y-coordinate (percentage)\n const heightToY = (height: string): number => {\n const heightMap: Record = {\n 'close': 10,\n 'near-close': 20,\n 'close-mid': 30,\n 'mid': 50,\n 'open-mid': 70,\n 'near-open': 80,\n 'open': 90\n };\n return heightMap[height] || 50;\n };\n \n // Map vowel frontness to x-coordinate (percentage)\n const frontnessToX = (frontness: string): number => {\n const frontnessMap: Record = {\n 'front': 20,\n 'central': 50,\n 'back': 80\n };\n return frontnessMap[frontness] || 50;\n };\n \n // Get color based on vowel roundedness\n const getColor = (rounded: boolean): string => {\n return rounded ? 'bg-blue-100' : 'bg-red-100';\n };\n \n const handleVowelClick = (vowel: Vowel) => {\n setSelectedVowel(vowel === selectedVowel ? null : vowel);\n };\n \n return (\n

Vowel Chart

\n \n

\n {/* Chart grid lines and labels */}\n

\n {/* Horizontal lines for height */}\n

\n \n {/* Vertical lines for frontness */}\n

\n \n {/* Height labels */}\n

Close-mid

Mid

Open-mid

Open

\n \n {/* Frontness labels */}\n

Front

Central

Back

\n \n {/* Vowel points */}\n {vowels.map((vowel) => {\n const x = frontnessToX(vowel.frontness);\n const y = heightToY(vowel.height);\n \n return (\n handleVowelClick(vowel)}\n >\n {vowel.ipa}\n

\n );\n })}\n

\n \n {/* Legend */}\n

\n Unrounded vowels\n

\n Rounded vowels\n

\n \n {/* Selected vowel details */}\n {selectedVowel && (\n

\n {selectedVowel.ipa}\n {selectedVowel.description}\n

\n \n

\n Height: {selectedVowel.height}\n

\n Frontness: {selectedVowel.frontness}\n

\n Rounded: {selectedVowel.rounded ? 'Yes' : 'No'}\n

\n \n

Examples:

\n {selectedVowel.examples.map((example, index) => (\n

{example.word}

{example.transcription}

{example.meaning}

\n ))}\n

\n )}\n \n );\n}",[],[223,241,243],"6207e2e8-369d-11f0-bfd7-9e149126039e","LanguageSelector.tsx","6207e3a6-369d-11f0-bfd7-9e149126039e",8,["D",1747871003090],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Language {\n id: string;\n name: string;\n family: string;\n region: string;\n vowelCount: number;\n}\n\ninterface LanguageSelectorProps {\n languages: Language[];\n selectedLanguageId: string;\n onLanguageChange: (id: string) => void;\n}\n\nexport function LanguageSelector({ languages, selectedLanguageId, onLanguageChange }: LanguageSelectorProps) {\n const [searchTerm, setSearchTerm] = useState('');\n const [filterFamily, setFilterFamily] = useState(null);\n \n // Get unique language families\n const families = Array.from(new Set(languages.map(lang => lang.family)));\n \n // Filter languages based on search and family filter\n const filteredLanguages = languages.filter(lang => {\n const matchesSearch = lang.name.toLowerCase().includes(searchTerm.toLowerCase());\n const matchesFamily = filterFamily ? lang.family === filterFamily : true;\n return matchesSearch && matchesFamily;\n });\n \n return (\n

Select a Language

\n \n

\n setSearchTerm(e.target.value)}\n />\n

\n \n

\n Filter by Family\n setFilterFamily(e.target.value || null)}\n >\n \n {families.map(family => (\n \n ))}\n \n

\n \n

\n {filteredLanguages.map(language => (\n onLanguageChange(language.id)}\n >\n

{language.name}

{language.family}

\n {language.region}\n {language.vowelCount} vowels\n

\n ))}\n \n {filteredLanguages.length === 0 && (\n

\n No languages found matching your criteria\n

\n )}\n

\n \n );\n}",[],[223,241,251],"84a28e84-369d-11f0-a3f9-9e149126039e","LanguageDetails.tsx","84a28f10-369d-11f0-a3f9-9e149126039e",10,["D",1747871061145],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Example {\n word: string;\n transcription: string;\n meaning: string;\n}\n\ninterface Vowel {\n ipa: string;\n description: string;\n frontness: 'front' | 'central' | 'back';\n height: 'close' | 'near-close' | 'close-mid' | 'mid' | 'open-mid' | 'near-open' | 'open';\n rounded: boolean;\n examples: Example[];\n}\n\ninterface Language {\n id: string;\n name: string;\n family: string;\n region: string;\n description: string;\n vowels: Vowel[];\n}\n\ninterface LanguageDetailsProps {\n language: Language;\n}\n\nexport function LanguageDetails({ language }: LanguageDetailsProps) {\n const [activeTab, setActiveTab] = useState<'list' | 'facts'>('list');\n \n return (\n

\n \n

\n {activeTab === 'list' && (\n

Vowel Inventory

\n {language.vowels.map(vowel => (\n

\n {vowel.ipa}\n {vowel.description}\n

\n \n

Height: {vowel.height}

Frontness: {vowel.frontness}

Rounded: {vowel.rounded ? 'Yes' : 'No'}

\n \n

Examples:

\n {example.word} {example.transcription}\n
{example.meaning}
\n

\n ))}\n

\n )}\n \n {activeTab === 'facts' && (\n

About {language.name}

\n \n

Language Family

{language.family}

Region

{language.region}

Number of Vowels

{language.vowels.length}

Rounded Vowels

{language.vowels.filter(v => v.rounded).length} out of {language.vowels.length}

\n \n

Vowel System Characteristics

{language.description}

\n \n

Fun Facts

English has one of the most complex vowel systems among the world's languages.
English vowels vary significantly between dialects, with American, British, Australian, and other varieties having different vowel inventories.
The Great Vowel Shift was a major change in pronunciation that began in the 15th century, affecting all Middle English long vowels.
Spanish has one of the simplest vowel systems among major world languages, with just five vowels.
Unlike English, Spanish vowels are pronounced consistently across different dialects.
Spanish doesn't have reduced vowels like the schwa sound in English.
Japanese has a simple five-vowel system but distinguishes between short and long vowels.
The Japanese 'u' sound is actually an unrounded high back vowel, different from the English 'u'.
Japanese vowels can be \"devoiced\" (whispered) when they occur between voiceless consonants.
French has several front rounded vowels, which are rare in the world's languages.
French is one of the few major languages with distinctive nasal vowels.
The French 'e muet' (mute e) is often not pronounced, especially at the end of words.
Arabic has a simple three-vowel system with length distinction.
The pronunciation of vowels in Arabic can be influenced by neighboring consonants.
Classical Arabic preserves the vowel system of the language as it was spoken in the 7th century.
Mandarin Chinese has relatively few vowels but combines them with tones to create more distinctions.
The pronunciation of vowels in Mandarin can change based on the tone.
Mandarin has both rounded and unrounded front vowels.

\n )}\n

\n );\n}",[],[223,241,259],"59b3d87c-369d-11f0-8d82-9e149126039e","Header.tsx","59b3d93a-369d-11f0-8d82-9e149126039e",7,["D",1747870989114],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nexport function Header() {\n return (\n

\n 🔊 Language Vowels Explorer\n

\n Discover and compare vowel systems from languages around the world\n

\n \n

\n {['a', 'e', 'i', 'o', 'u', 'y', 'ø', 'œ'].map(vowel => (\n

\n {vowel}\n

\n ))}\n

\n );\n}",[],[223,241,267],"530d3220-369d-11f0-a425-9e149126039e","App.tsx","530d32ca-369d-11f0-a425-9e149126039e",6,["D",1747870977955],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { Header } from \"./Header.tsx\";\nimport { LanguageSelector } from \"./LanguageSelector.tsx\";\nimport { VowelChart } from \"./VowelChart.tsx\";\nimport { LanguageDetails } from \"./LanguageDetails.tsx\";\nimport { VowelComparison } from \"./VowelComparison.tsx\";\n\ninterface Language {\n id: string;\n name: string;\n family: string;\n region: string;\n vowelCount: number;\n}\n\ninterface LanguageDetail extends Language {\n description: string;\n vowels: Vowel[];\n}\n\ninterface Vowel {\n ipa: string;\n description: string;\n frontness: 'front' | 'central' | 'back';\n height: 'close' | 'near-close' | 'close-mid' | 'mid' | 'open-mid' | 'near-open' | 'open';\n rounded: boolean;\n examples: Example[];\n}\n\ninterface Example {\n word: string;\n transcription: string;\n meaning: string;\n}\n\nexport function App() {\n const [languages, setLanguages] = useState([]);\n const [selectedLanguage, setSelectedLanguage] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [view, setView] = useState<'language' | 'comparison'>('language');\n const [comparisonLanguages, setComparisonLanguages] = useState([]);\n\n useEffect(() => {\n // Fetch all languages\n fetch('/api/languages')\n .then(response => {\n if (!response.ok) {\n throw new Error('Failed to fetch languages');\n }\n return response.json();\n })\n .then(data => {\n setLanguages(data);\n setLoading(false);\n \n // Select the first language by default\n if (data.length > 0) {\n fetchLanguageDetails(data[0].id);\n }\n })\n .catch(err => {\n setError(err.message);\n setLoading(false);\n });\n }, []);\n\n const fetchLanguageDetails = (id: string) => {\n setLoading(true);\n fetch(`/api/languages/${id}`)\n .then(response => {\n if (!response.ok) {\n throw new Error('Failed to fetch language details');\n }\n return response.json();\n })\n .then(data => {\n setSelectedLanguage(data);\n setLoading(false);\n })\n .catch(err => {\n setError(err.message);\n setLoading(false);\n });\n };\n\n const handleLanguageChange = (id: string) => {\n fetchLanguageDetails(id);\n setView('language');\n };\n\n const toggleComparisonLanguage = (id: string) => {\n setComparisonLanguages(prev => {\n if (prev.includes(id)) {\n return prev.filter(langId => langId !== id);\n } else {\n return [...prev, id];\n }\n });\n };\n\n const switchToComparison = () => {\n if (selectedLanguage) {\n setComparisonLanguages([selectedLanguage.id]);\n setView('comparison');\n }\n };\n\n if (loading && !selectedLanguage) {\n return (\n

Loading language data...

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

Error

{error}

\n \n

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

\n \n

\n \n \n

\n \n Compare Vowel Systems\n \n

\n \n

\n {view === 'language' && selectedLanguage && (\n

{selectedLanguage.name} Vowel System

{selectedLanguage.description}

\n \n \n \n \n

\n )}\n \n {view === 'comparison' && (\n \n )}\n

\n \n \n

\n );\n}",[],[223,241,275],"530d57dc-369d-11f0-a425-9e149126039e",["D",1747870977955],[197,198,199,200,201,202],[223,241],"41c29bea-369d-11f0-9ac0-9e149126039e",["D",1747870948948],[196,203,204],[223],["D",1747871105877],[],[18,81],["D",1747870919787],[],[18,66],["D",1747870919787],[193,194],[18],["D",1747870712841],["D",1789560647748],{"_11":12,"_143":72},{"_11":12,"_139":-5,"_71":72,"_31":70,"_140":141,"_142":30},{"_41":84,"_13":16,"_35":38,"_131":94,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":-5,"_137":14,"_138":12},"ctx",{"_54":-5,"_162":337,"_338":339,"_340":341,"_342":30,"_343":30,"_344":30,"_345":24,"_346":-5,"_347":-7,"_348":-7,"_349":26,"_350":30,"_351":30,"_352":-5,"_353":30,"_354":30,"_355":30,"_356":-5},"ENV",{"_308":309,"_310":311,"_312":16,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336},"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"]

History · backend