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}","deleted","label",[168,169,150],"frontend","components","permalink","https://www.val.town/x/neverstew/voweltown/code/frontend/components/VowelChart.tsx","extension","actionData","errors"]