'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const DIALOGUE = [ { id: 1, side: 'left', text: "Hello! Nice to meet you.", cn: "你好！很高兴见到你。" }, { id: 2, side: 'right', text: "Hi there! I am Alice.", cn: "嗨！我是爱丽丝。" }, { id: 3, side: 'left', text: "I am Bob. Do you speak English?", cn: "我是鲍勃。你会说英语吗？" }, { id: 4, side: 'right', text: "Yes, I am learning it now.", cn: "是的，我现在正在学习。" }, { id: 5, side: 'left', text: "Great! Let's practice together.", cn: "太棒了！我们一起练习吧。" }, { id: 6, side: 'right', text: "Sure! Coding is fun too.", cn: "当然！编程也很有趣。" }, ]; const TYPING_SPEED = 50; // ms per char const PAUSE_DURATION = 2000; // ms after sentence export const EnglishConversationView = () => { const [step, setStep] = useState(0); const [displayedText, setDisplayedText] = useState(''); const [isTyping, setIsTyping] = useState(false); const [blink, setBlink] = useState(false); const [particles, setParticles] = useState<{x: number, y: number, r: number, speed: number}[]>([]); // Initialize background particles useEffect(() => { const pts = Array.from({ length: 20 }, () => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 2 + 1, speed: Math.random() * 0.5 + 0.2 })); setParticles(pts); }, []); // Particle animation loop useEffect(() => { let animationFrameId; const animateParticles = () => { setParticles(prev => prev.map(p => ({ ...p, y: p.y - p.speed < 0 ? VIEW_HEIGHT : p.y - p.speed, x: p.x + Math.sin(p.y * 0.01) * 0.2 }))); animationFrameId = requestAnimationFrame(animateParticles); }; animateParticles(); return () => cancelAnimationFrame(animationFrameId); }, []); // Blinking logic useEffect(() => { const interval = setInterval(() => { setBlink(true); setTimeout(() => setBlink(false), 200); }, 4000); return () => clearInterval(interval); }, []); // Conversation Sequencing useEffect(() => { if (step >= DIALOGUE.length) { setTimeout(() => { setStep(0); setDisplayedText(''); }, 3000); return; } const currentLine = DIALOGUE[step]; let charIndex = 0; setIsTyping(true); setDisplayedText(''); const typeInterval = setInterval(() => { charIndex++; setDisplayedText(currentLine.text.slice(0, charIndex)); if (charIndex >= currentLine.text.length) { clearInterval(typeInterval); setIsTyping(false); setTimeout(() => { setStep(s => s + 1); }, PAUSE_DURATION); } }, TYPING_SPEED); return () => clearInterval(typeInterval); }, [step]); // Helper to render a character const Character = ({ x, y, color, isSpeaking, side }: { x: number, y: number, color: string, isSpeaking: boolean, side: 'left' | 'right' }) => { const floatAnim = useMemo(() => `float-${side}`, [side]); return ( {/* Shadow */} {/* Body */} {/* Head */} {/* Face Details */} {/* Eyes */} {blink ? ( <> ) : ( <> )} {/* Mouth */} {isSpeaking ? ( ) : ( )} {/* Headphones / Tech Gear */} ); }; const currentDialogue = DIALOGUE[step]; return ( ); };