import React, { useState, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Info, Globe, Mic, Volume2 } from 'lucide-react'; const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; // ========================================== // DATA DEFINITIONS // ========================================== // VOWEL DATA (Trapezoid coordinates: x: 0-100 (Front-Back), y: 0-100 (Close-Open)) // Normalized positions for the trapezoid shape const VOWELS = [ { ipa: 'i', x: 5, y: 5, cn: '衣 (yī)', en: 'see', type: 'close front' }, { ipa: 'y', x: 15, y: 5, cn: '迂 (yū)', en: '', type: 'close front rounded' }, { ipa: 'u', x: 95, y: 5, cn: '乌 (wū)', en: 'food', type: 'close back' }, { ipa: 'ɪ', x: 22, y: 20, cn: '', en: 'sit', type: 'near-close near-front' }, { ipa: 'ʊ', x: 78, y: 20, cn: '', en: 'foot', type: 'near-close near-back' }, { ipa: 'e', x: 15, y: 35, cn: '耶 (yē)', en: 'face (eɪ)', type: 'close-mid front' }, { ipa: 'ɤ', x: 80, y: 35, cn: '鹅 (é)', en: '', type: 'close-mid back' }, { ipa: 'o', x: 90, y: 35, cn: '喔 (ō)', en: 'go (oʊ)', type: 'close-mid back rounded' }, { ipa: 'ə', x: 50, y: 50, cn: '恩 (ēn)', en: 'about', type: 'schwa' }, { ipa: 'ɛ', x: 25, y: 60, cn: '叶 (yè)', en: 'bed', type: 'open-mid front' }, { ipa: 'ʌ', x: 75, y: 60, cn: '', en: 'cut', type: 'open-mid back' }, { ipa: 'ɔ', x: 90, y: 60, cn: '我 (wǒ)', en: 'thought', type: 'open-mid back rounded' }, { ipa: 'æ', x: 22, y: 75, cn: '安 (ān)', en: 'cat', type: 'near-open front' }, { ipa: 'a', x: 35, y: 95, cn: '啊 (ā)', en: '', type: 'open front' }, { ipa: 'ɑ', x: 75, y: 95, cn: '昂 (áng)', en: 'father', type: 'open back' }, { ipa: 'ɚ', x: 58, y: 45, cn: '儿 (ér)', en: 'butter', type: 'r-colored' }, ]; // CONSONANT DATA (Grid: Place vs Manner) // Place: Bilabial(0), Labiodental(1), Dental(2), Alveolar(3), Post-Alv(4), Retroflex(5), Alveolo-Palatal(6), Velar(7), Glottal(8) // Manner: Plosive(0), Nasal(1), Fricative(2), Affricate(3), Approx(4), Lateral(5) const CONSONANTS = [ // Plosives { ipa: 'p', row: 0, col: 0, cn: 'b (玻)', en: 'p (spin)', asp: false }, { ipa: 'pʰ', row: 0, col: 0, cn: 'p (坡)', en: 'p (pin)', asp: true }, { ipa: 'b', row: 0, col: 0, cn: '', en: 'b (bin)', asp: false }, { ipa: 't', row: 0, col: 3, cn: 'd (得)', en: 't (stan)', asp: false }, { ipa: 'tʰ', row: 0, col: 3, cn: 't (特)', en: 't (tan)', asp: true }, { ipa: 'd', row: 0, col: 3, cn: '', en: 'd (den)', asp: false }, { ipa: 'k', row: 0, col: 7, cn: 'g (哥)', en: 'k (skin)', asp: false }, { ipa: 'kʰ', row: 0, col: 7, cn: 'k (科)', en: 'k (kin)', asp: true }, { ipa: 'g', row: 0, col: 7, cn: '', en: 'g (go)', asp: false }, // Nasals { ipa: 'm', row: 1, col: 0, cn: 'm (摸)', en: 'm (me)', asp: false }, { ipa: 'n', row: 1, col: 3, cn: 'n (讷)', en: 'n (no)', asp: false }, { ipa: 'ŋ', row: 1, col: 7, cn: 'ng (昂)', en: 'ng (sing)', asp: false }, // Fricatives { ipa: 'f', row: 2, col: 1, cn: 'f (佛)', en: 'f (fan)', asp: false }, { ipa: 'v', row: 2, col: 1, cn: '', en: 'v (van)', asp: false }, { ipa: 'θ', row: 2, col: 2, cn: '', en: 'th (thin)', asp: false }, { ipa: 'ð', row: 2, col: 2, cn: '', en: 'th (this)', asp: false }, { ipa: 's', row: 2, col: 3, cn: 's (思)', en: 's (see)', asp: false }, { ipa: 'z', row: 2, col: 3, cn: '', en: 'z (zoo)', asp: false }, { ipa: 'ʃ', row: 2, col: 4, cn: '', en: 'sh (she)', asp: false }, { ipa: 'ʒ', row: 2, col: 4, cn: '', en: 's (vision)', asp: false }, { ipa: 'ʂ', row: 2, col: 5, cn: 'sh (诗)', en: '', asp: false }, // Retroflex { ipa: 'ʐ', row: 2, col: 5, cn: 'r (日)', en: '', asp: false }, // Voiced Retroflex Fricative (often r) { ipa: 'ɕ', row: 2, col: 6, cn: 'x (希)', en: '', asp: false }, // Alveolo-palatal { ipa: 'x', row: 2, col: 7, cn: 'h (喝)', en: '', asp: false }, { ipa: 'h', row: 2, col: 8, cn: '', en: 'h (hat)', asp: false }, // Affricates { ipa: 'ts', row: 3, col: 3, cn: 'z (资)', en: 'ts (cats)', asp: false }, { ipa: 'tsʰ', row: 3, col: 3, cn: 'c (雌)', en: '', asp: true }, { ipa: 'tʃ', row: 3, col: 4, cn: '', en: 'ch (chin)', asp: false }, { ipa: 'dʒ', row: 3, col: 4, cn: '', en: 'j (joy)', asp: false }, { ipa: 'ʈʂ', row: 3, col: 5, cn: 'zh (知)', en: '', asp: false }, { ipa: 'ʈʂʰ', row: 3, col: 5, cn: 'ch (吃)', en: '', asp: true }, { ipa: 'tɕ', row: 3, col: 6, cn: 'j (基)', en: '', asp: false }, { ipa: 'tɕʰ', row: 3, col: 6, cn: 'q (欺)', en: '', asp: true }, // Approximants { ipa: 'w', row: 4, col: 0, cn: 'w (我)', en: 'w (we)', asp: false }, // Co-articulated, put in Labial for simplicity { ipa: 'ɹ', row: 4, col: 3, cn: '', en: 'r (run)', asp: false }, { ipa: 'j', row: 4, col: 6, cn: 'y (雅)', en: 'y (yes)', asp: false }, // Lateral { ipa: 'l', row: 5, col: 3, cn: 'l (勒)', en: 'l (let)', asp: false }, ]; const COLORS = { bg: '#0f172a', grid: '#334155', text: '#94a3b8', cn: '#f59e0b', // Amber en: '#3b82f6', // Blue overlap: '#10b981', // Emerald highlight: '#ffffff', }; // ========================================== // SUB COMPONENTS // ========================================== const GridBackground = () => ( ); const GlowFilter = () => ( ); const Legend = ({ showCN, setShowCN, showEN, setShowEN }) => ( {/* CN Toggle */} setShowCN(!showCN)} > 汉语 (Pinyin) {/* EN Toggle */} setShowEN(!showEN)} > English (IPA) ); const VowelChart = ({ showCN, showEN }) => { const width = 450; const height = 400; const margin = 40; const xStart = 50; const yStart = 120; // Trapezoid Points relative to chart area // Top-Left, Top-Right, Bottom-Right, Bottom-Left const p1 = { x: 0, y: 0 }; const p2 = { x: width, y: 0 }; const p3 = { x: width * 0.7, y: height }; const p4 = { x: width * 0.3, y: height }; // Calculate actual pixel position based on percentage coordinates const getPos = (vx, vy) => { // Interpolate X based on Y (trapezoid skew) const rowWidth = width - (width * 0.6 * (vy / 100)); // Width shrinks as Y increases const rowStart = (width - rowWidth) / 2; const px = rowStart + (vx / 100) * rowWidth; const py = (vy / 100) * height; return { x: px, y: py }; }; return ( 元音 (Vowels) Trapezoid: Tongue Position (Front/Back vs Close/Open) {/* Trapezoid Shape */} {/* Grid Lines inside */} {/* Labels */} Close (高) Open (低) Central (央) Front (前) Back (后) {/* Vowel Nodes */} {VOWELS.map((v, i) => { const { x, y } = getPos(v.x, v.y); const hasCN = v.cn && showCN; const hasEN = v.en && showEN; if (!hasCN && !hasEN) return null; let dotColor = '#64748b'; if (hasCN && hasEN) dotColor = COLORS.overlap; else if (hasCN) dotColor = COLORS.cn; else if (hasEN) dotColor = COLORS.en; return ( {v.ipa} {hasCN && ( {v.cn} )} {hasEN && ( {v.en} )} ); })} ); }; const ConsonantChart = ({ showCN, showEN }) => { const xStart = 580; const yStart = 120; const colWidth = 65; const rowHeight = 65; const headers = [ 'Bilabial', 'Labio-dental', 'Dental', 'Alveolar', 'Post-Alv', 'Retroflex', 'Alv-Pal', 'Velar', 'Glottal' ]; const cnHeaders = [ '双唇', '唇齿', '齿间', '齿龈', '龈后', '卷舌', '龈腭', '软腭', '声门' ]; const mannerLabels = [ 'Plosive (塞音)', 'Nasal (鼻音)', 'Fricative (擦音)', 'Affricate (塞擦)', 'Approx (近音)', 'Lateral (边音)' ]; return ( 辅音 (Consonants) Grid: Place of Articulation (Horizontal) vs Manner (Vertical) {/* Grid Header */} {headers.map((h, i) => ( {h} {showCN && {cnHeaders[i]}} ))} {/* Grid Rows Labels */} {mannerLabels.map((m, i) => ( {m} ))} {/* Grid Lines */} {Array.from({ length: 7 }).map((_, i) => ( ))} {Array.from({ length: 10 }).map((_, i) => ( ))} {/* Consonant Nodes */} {CONSONANTS.map((c, i) => { const x = c.col * colWidth + colWidth / 2; const y = c.row * rowHeight + rowHeight / 2; const hasCN = c.cn && showCN; const hasEN = c.en && showEN; if (!hasCN && !hasEN) return null; let boxColor = 'rgba(255,255,255,0.05)'; let strokeColor = 'transparent'; if (hasCN && hasEN) strokeColor = COLORS.overlap; else if (hasCN) strokeColor = COLORS.cn; else if (hasEN) strokeColor = COLORS.en; // Spread slightly if multiple in same cell (like unvoiced/voiced pairs) // Simplified: Just center them, but adjust vertical offset if needed // For this demo, we assume the grid is sparse enough or we just stack text return ( {c.ipa} {hasCN && ( {c.cn} )} {hasEN && ( {c.en} )} ); })} ); }; // ========================================== // MAIN COMPONENT // ========================================== export default function IPAPhoneticComparison() { const [showCN, setShowCN] = useState(true); const [showEN, setShowEN] = useState(true); // Background decoration const particles = useMemo(() => { return Array.from({ length: 50 }, (_, i) => ({ cx: Math.random() * VIEW_WIDTH, cy: Math.random() * VIEW_HEIGHT, r: Math.random() * 2, opacity: Math.random() * 0.3 + 0.1, duration: Math.random() * 5 + 3, })); }, []); return (

); }