initial commit (frontend)
This commit is contained in:
@@ -0,0 +1,494 @@
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useLanguage } from '../i18n/LanguageContext';
|
||||
import { fonts, radius } from '../styles/theme';
|
||||
import { getNextTypingSentence, checkTypingSentence, getTypingHint, getTypingProgress, getTTS } from '../api';
|
||||
|
||||
interface TypingSentence {
|
||||
completed: boolean;
|
||||
sentence_id: number;
|
||||
translation: string;
|
||||
level: string;
|
||||
}
|
||||
|
||||
const TypingPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { t } = useLanguage();
|
||||
const [sentence, setSentence] = useState<TypingSentence | null>(null);
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isCorrect, setIsCorrect] = useState<boolean | null>(null);
|
||||
const [showAnswer, setShowAnswer] = useState(false);
|
||||
const [correctAnswer, setCorrectAnswer] = useState('');
|
||||
const [totalCompleted, setTotalCompleted] = useState(0);
|
||||
const [totalSentences, setTotalSentences] = useState(0);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||
|
||||
const brandColor = '#2ECC71';
|
||||
const textColor = '#1A1A2E';
|
||||
const subColor = '#6B7280';
|
||||
const bgColor = '#F4F5F7';
|
||||
const cardBg = 'rgba(255,255,255,0.55)';
|
||||
|
||||
const glass = (extra: React.CSSProperties = {}): React.CSSProperties => ({
|
||||
background: cardBg,
|
||||
backdropFilter: 'blur(24px) saturate(180%)',
|
||||
WebkitBackdropFilter: 'blur(24px) saturate(180%)',
|
||||
border: '1px solid rgba(255,255,255,0.7)',
|
||||
boxShadow: '0 8px 32px rgba(31,38,73,0.10), inset 0 1px 0 rgba(255,255,255,0.85)',
|
||||
...extra,
|
||||
});
|
||||
|
||||
const fetchSentence = useCallback(() => {
|
||||
setLoading(true);
|
||||
setIsCorrect(null);
|
||||
setShowAnswer(false);
|
||||
setInputValue('');
|
||||
setCorrectAnswer('');
|
||||
setIsPlaying(false);
|
||||
|
||||
if (audioRef.current) {
|
||||
audioRef.current.pause();
|
||||
audioRef.current = null;
|
||||
}
|
||||
|
||||
getNextTypingSentence()
|
||||
.then((data: any) => {
|
||||
if (data.completed) {
|
||||
setSentence({ completed: true, sentence_id: 0, translation: '', level: '' });
|
||||
} else {
|
||||
setSentence(data);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
navigate('/menu');
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
|
||||
getTypingProgress()
|
||||
.then((data: any) => {
|
||||
setTotalCompleted(data.completed || 0);
|
||||
setTotalSentences(data.total || 0);
|
||||
})
|
||||
.catch(() => {});
|
||||
}, [navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchSentence();
|
||||
return () => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.pause();
|
||||
audioRef.current = null;
|
||||
}
|
||||
if ('speechSynthesis' in window) {
|
||||
window.speechSynthesis.cancel();
|
||||
}
|
||||
};
|
||||
}, [fetchSentence]);
|
||||
|
||||
const handleCheck = async () => {
|
||||
if (!sentence || !inputValue.trim()) return;
|
||||
|
||||
try {
|
||||
const data = await checkTypingSentence(sentence.sentence_id, inputValue);
|
||||
setIsCorrect(data.correct);
|
||||
setCorrectAnswer(data.correct_answer);
|
||||
|
||||
if (data.correct) {
|
||||
setTotalCompleted(prev => prev + 1);
|
||||
setTimeout(() => {
|
||||
fetchSentence();
|
||||
}, 1500);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error checking sentence:', e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShowAnswer = async () => {
|
||||
if (!sentence) return;
|
||||
try {
|
||||
const data = await getTypingHint(sentence.sentence_id);
|
||||
setCorrectAnswer(data.correct_answer);
|
||||
setShowAnswer(true);
|
||||
} catch (e) {
|
||||
console.error('Error getting hint:', e);
|
||||
}
|
||||
};
|
||||
|
||||
const playAnswer = async () => {
|
||||
if (!correctAnswer) return;
|
||||
|
||||
if (audioRef.current) {
|
||||
audioRef.current.pause();
|
||||
audioRef.current = null;
|
||||
}
|
||||
|
||||
if ('speechSynthesis' in window) {
|
||||
window.speechSynthesis.cancel();
|
||||
}
|
||||
|
||||
setIsPlaying(true);
|
||||
|
||||
try {
|
||||
const audioBlob = await getTTS(correctAnswer, 'male');
|
||||
const audioUrl = URL.createObjectURL(audioBlob);
|
||||
const audio = new Audio(audioUrl);
|
||||
audioRef.current = audio;
|
||||
|
||||
audio.onended = () => setIsPlaying(false);
|
||||
audio.onerror = () => setIsPlaying(false);
|
||||
|
||||
await audio.play();
|
||||
} catch (e) {
|
||||
console.error('Error playing TTS:', e);
|
||||
setIsPlaying(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
background: bgColor,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: subColor,
|
||||
fontFamily: fonts.main,
|
||||
fontSize: '18px',
|
||||
}}>
|
||||
{t('loading')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
background: bgColor,
|
||||
color: textColor,
|
||||
fontFamily: fonts.main,
|
||||
padding: '24px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<div style={{ position: 'fixed', top: '-80px', right: '-60px', width: '260px', height: '260px', borderRadius: '50%', background: brandColor, opacity: 0.18, filter: 'blur(90px)', pointerEvents: 'none', zIndex: 0 }} />
|
||||
|
||||
<style>{`
|
||||
@keyframes fadeInUp {
|
||||
0% { transform: translateY(10px); opacity: 0; }
|
||||
100% { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
@keyframes modalFadeIn {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
@keyframes modalSlideUp {
|
||||
0% { transform: translateY(20px); opacity: 0; }
|
||||
100% { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
@keyframes correctPop {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-5px); }
|
||||
75% { transform: translateX(5px); }
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', flex: 1 }}>
|
||||
|
||||
{/* Модалка с ответом */}
|
||||
{showAnswer && correctAnswer && (
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
|
||||
background: 'rgba(20,22,35,0.25)', zIndex: 500,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
animation: 'modalFadeIn 0.2s ease', padding: '20px',
|
||||
backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)',
|
||||
}}
|
||||
onClick={(e) => { if (e.target === e.currentTarget) setShowAnswer(false); }}
|
||||
>
|
||||
<div style={{
|
||||
...glass({
|
||||
borderRadius: radius.lg,
|
||||
padding: '24px',
|
||||
width: '100%',
|
||||
maxWidth: '380px',
|
||||
textAlign: 'center',
|
||||
boxShadow: '0 24px 60px rgba(31,38,73,0.20), inset 0 1px 0 rgba(255,255,255,0.85)',
|
||||
}),
|
||||
animation: 'modalSlideUp 0.3s ease',
|
||||
}}>
|
||||
<div style={{ fontSize: '32px', marginBottom: '12px' }}>🇵🇱</div>
|
||||
<h3 style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: 700, color: subColor }}>
|
||||
{t('typingShowAnswer')}:
|
||||
</h3>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '10px',
|
||||
marginBottom: '20px',
|
||||
flexWrap: 'wrap',
|
||||
}}>
|
||||
<div style={{ fontSize: '22px', fontWeight: 800, color: '#1A1A2E' }}>
|
||||
{correctAnswer}
|
||||
</div>
|
||||
<button
|
||||
onClick={playAnswer}
|
||||
style={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '50%',
|
||||
border: `1px solid ${brandColor}40`,
|
||||
background: isPlaying ? `${brandColor}30` : 'rgba(255,255,255,0.9)',
|
||||
color: brandColor,
|
||||
fontSize: '18px',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
animation: isPlaying ? 'pulse 0.5s ease infinite' : 'none',
|
||||
flexShrink: 0,
|
||||
boxShadow: '0 2px 8px rgba(31,38,73,0.08)',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
onTouchStart={(e) => { e.currentTarget.style.transform = 'scale(0.9)'; }}
|
||||
onTouchEnd={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
|
||||
>
|
||||
🔊
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowAnswer(false)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '14px',
|
||||
borderRadius: radius.md,
|
||||
border: 'none',
|
||||
background: `linear-gradient(135deg, #2ECC71, #27AE60)`,
|
||||
color: '#FFFFFF',
|
||||
fontSize: '15px',
|
||||
fontWeight: 700,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{t('teacherClose')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Заголовок */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '16px',
|
||||
marginBottom: '20px',
|
||||
animation: 'fadeInUp 0.3s ease',
|
||||
}}>
|
||||
<button
|
||||
onClick={() => navigate('/menu')}
|
||||
style={{
|
||||
...glass({
|
||||
padding: '10px 18px',
|
||||
borderRadius: radius.md,
|
||||
}),
|
||||
color: textColor,
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 0.2s ease',
|
||||
}}
|
||||
onTouchStart={(e) => { e.currentTarget.style.transform = 'scale(0.95)'; }}
|
||||
onTouchEnd={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
|
||||
>
|
||||
← {t('back')}
|
||||
</button>
|
||||
<h1 style={{ fontSize: '22px', fontWeight: 900, margin: 0, color: textColor, flex: 1, textAlign: 'center' }}>
|
||||
⌨️ {t('typingTitle')}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Прогресс */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '20px', color: subColor, fontSize: '13px' }}>
|
||||
{t('completed')}: {totalCompleted} / {totalSentences}
|
||||
</div>
|
||||
|
||||
{sentence?.completed ? (
|
||||
<div style={{ textAlign: 'center', padding: '60px 20px', animation: 'fadeInUp 0.3s ease' }}>
|
||||
<div style={{ fontSize: '64px', marginBottom: '16px' }}>🎉</div>
|
||||
<div style={{ fontSize: '18px', fontWeight: 700, color: textColor }}>
|
||||
{t('allSentencesCompleted')}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => navigate('/menu')}
|
||||
style={{
|
||||
marginTop: '20px',
|
||||
padding: '14px 28px',
|
||||
borderRadius: radius.lg,
|
||||
border: 'none',
|
||||
background: `linear-gradient(135deg, #2ECC71, #27AE60)`,
|
||||
color: '#FFFFFF',
|
||||
fontSize: '15px',
|
||||
fontWeight: 700,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{t('back')}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Перевод */}
|
||||
<div style={{
|
||||
...glass({
|
||||
padding: '24px',
|
||||
borderRadius: radius.lg,
|
||||
marginBottom: '20px',
|
||||
}),
|
||||
animation: 'fadeInUp 0.3s ease 0.1s both',
|
||||
}}>
|
||||
<div style={{ fontSize: '13px', color: subColor, marginBottom: '8px', fontWeight: 500 }}>
|
||||
{t('typingInstructions')}
|
||||
</div>
|
||||
<div style={{ fontSize: '20px', fontWeight: 700, color: brandColor, lineHeight: '1.4' }}>
|
||||
{sentence?.translation}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Поле ввода */}
|
||||
<input
|
||||
type="text"
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
placeholder={t('typingPlaceholder')}
|
||||
disabled={isCorrect === true}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '16px',
|
||||
borderRadius: radius.lg,
|
||||
border: isCorrect === false ? `2px solid #E74C3C` : isCorrect === true ? `2px solid #2ECC71` : '1px solid rgba(255,255,255,0.7)',
|
||||
background: isCorrect === true ? 'rgba(46,204,113,0.1)' : cardBg,
|
||||
color: textColor,
|
||||
fontSize: '18px',
|
||||
fontWeight: 600,
|
||||
fontFamily: fonts.main,
|
||||
outline: 'none',
|
||||
textAlign: 'center',
|
||||
transition: 'all 0.2s ease',
|
||||
boxShadow: isCorrect === false ? '0 0 15px rgba(231,76,60,0.3)' : '0 2px 8px rgba(31,38,73,0.06)',
|
||||
animation: isCorrect === false ? 'shake 0.4s ease' : 'none',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Статус */}
|
||||
{isCorrect === true && (
|
||||
<div style={{
|
||||
textAlign: 'center',
|
||||
marginTop: '16px',
|
||||
padding: '12px',
|
||||
background: 'rgba(46,204,113,0.1)',
|
||||
borderRadius: radius.md,
|
||||
animation: 'correctPop 0.3s ease',
|
||||
}}>
|
||||
<span style={{ fontSize: '16px', fontWeight: 700, color: '#2ECC71' }}>
|
||||
✅ {t('typingCorrect')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{isCorrect === false && (
|
||||
<div style={{
|
||||
textAlign: 'center',
|
||||
marginTop: '16px',
|
||||
padding: '12px',
|
||||
background: 'rgba(231,76,60,0.1)',
|
||||
borderRadius: radius.md,
|
||||
}}>
|
||||
<span style={{ fontSize: '16px', fontWeight: 700, color: '#E74C3C' }}>
|
||||
❌ {t('typingIncorrect')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Кнопки */}
|
||||
<div style={{ display: 'flex', gap: '10px', marginTop: '20px', animation: 'fadeInUp 0.3s ease 0.2s both' }}>
|
||||
{isCorrect === true ? (
|
||||
<button
|
||||
onClick={fetchSentence}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '16px',
|
||||
borderRadius: radius.lg,
|
||||
border: 'none',
|
||||
background: `linear-gradient(135deg, #2ECC71, #27AE60)`,
|
||||
color: '#FFFFFF',
|
||||
fontSize: '16px',
|
||||
fontWeight: 700,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{t('next')} →
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={handleShowAnswer}
|
||||
style={{
|
||||
flex: 1,
|
||||
...glass({
|
||||
padding: '16px',
|
||||
borderRadius: radius.lg,
|
||||
}),
|
||||
color: textColor,
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
👁️ {t('typingShowAnswer')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCheck}
|
||||
disabled={!inputValue.trim()}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '16px',
|
||||
borderRadius: radius.lg,
|
||||
border: 'none',
|
||||
background: inputValue.trim()
|
||||
? `linear-gradient(135deg, #2ECC71, #27AE60)`
|
||||
: 'rgba(0,0,0,0.1)',
|
||||
color: '#FFFFFF',
|
||||
fontSize: '16px',
|
||||
fontWeight: 700,
|
||||
cursor: inputValue.trim() ? 'pointer' : 'default',
|
||||
opacity: inputValue.trim() ? 1 : 0.5,
|
||||
}}
|
||||
>
|
||||
✓ {t('check')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TypingPage;
|
||||
Reference in New Issue
Block a user