/* Dictée libre — entraînement audio -> hangeul sans effet durable ni SRS. */ function lineAudioOptions(line, rate) { const audio = (line && line.audio) || {}; return { rate: rate || 1, ref: audio.ref || audio.id, url: audio.url }; } function DictationRunner() { const [loading, setLoading] = useState(true); const [error, setError] = useState(""); const [scenes, setScenes] = useState([]); const [sceneIndex, setSceneIndex] = useState(0); const [lineIndex, setLineIndex] = useState(0); const [answer, setAnswer] = useState(""); const [checked, setChecked] = useState(null); const [playing, setPlaying] = useState(false); const [levelId, setLevelId] = useState("blocks"); const [unitAnswersByLevel, setUnitAnswersByLevel] = useState({}); const [unitChecked, setUnitChecked] = useState(null); const load = useCallback(() => { if (!window.LangData || !window.LangData.loadExercises) { setLoading(false); setError("Données de dictée indisponibles."); return undefined; } let alive = true; setLoading(true); setError(""); window.LangData.loadExercises() .then(payload => { if (!alive) return; const nextScenes = (payload.dictation_scenes || []) .map(scene => ({ ...scene, lines: (scene.lines || []).filter(line => line.kr && line.audio && line.audio.url), })) .filter(scene => scene.lines.length); setScenes(nextScenes); setSceneIndex(0); setLineIndex(0); setAnswer(""); setChecked(null); setLevelId("blocks"); setUnitAnswersByLevel({}); setUnitChecked(null); }) .catch(() => { if (!alive) return; setError("Impossible de charger les dictées canoniques."); }) .finally(() => { if (alive) setLoading(false); }); return () => { alive = false; }; }, []); useEffect(load, [load]); const scene = scenes[sceneIndex] || null; const lines = scene ? scene.lines : []; const line = lines[lineIndex] || null; const totalLines = scenes.reduce((n, item) => n + item.lines.length, 0); const doneBefore = scenes.slice(0, sceneIndex).reduce((n, item) => n + item.lines.length, 0) + lineIndex; const progress = totalLines ? (doneBefore + 1) / totalLines : 0; const exact = !!checked && !!checked.correct; const feedbackTags = (checked && checked.tags) || []; const levels = line ? dictationLevelsForLine(line) : []; const activeLevel = levels.find(level => level.id === levelId) || levels.find(level => level.id === "blocks") || levels[0] || null; const activeUnits = activeLevel ? activeLevel.units : []; const activeUnitAnswers = unitAnswersByLevel[activeLevel && activeLevel.id] || []; const resetLine = () => { setAnswer(""); setChecked(null); setLevelId("blocks"); setUnitAnswersByLevel({}); setUnitChecked(null); setPlaying(false); if (window.LangAudio) window.LangAudio.stop(); }; const playLine = (rate) => { if (!line || !window.LangAudio) return; setPlaying(true); Promise.resolve(window.LangAudio.speak(line.kr, lineAudioOptions(line, rate))).finally(() => setPlaying(false)); }; const goLine = (delta) => { if (!scenes.length) return; let nextScene = sceneIndex; let nextLine = lineIndex + delta; if (nextLine < 0 && nextScene > 0) { nextScene -= 1; nextLine = scenes[nextScene].lines.length - 1; } if (nextLine >= scenes[nextScene].lines.length && nextScene + 1 < scenes.length) { nextScene += 1; nextLine = 0; } nextLine = Math.max(0, Math.min((scenes[nextScene].lines.length || 1) - 1, nextLine)); setSceneIndex(nextScene); setLineIndex(nextLine); resetLine(); }; const chooseScene = (id) => { const index = scenes.findIndex(item => item.id === id); if (index < 0) return; setSceneIndex(index); setLineIndex(0); resetLine(); }; const setUnitAnswer = (index, value) => { const id = (activeLevel && activeLevel.id) || "blocks"; setUnitAnswersByLevel(prev => { const next = (prev[id] || []).slice(); next[index] = value; return Object.assign({}, prev, { [id]: next }); }); setUnitChecked(null); }; const checkUnits = () => { setUnitChecked(compareDictationUnits(activeUnits, activeUnitAnswers)); }; if (loading) return ; if (error) return ; if (!line) return ; return (
Dictée canonique
Blocs TTS legacy déployés
{scenes.length} scènes {totalLines} lignes tier {line.tier || 1}
{doneBefore + 1} / {totalLines}
Ligne {lineIndex + 1} · locuteur {line.speaker || "A"}
{scene.legacy_id || scene.id}
playLine(1)}>Écouter playLine(.78)}>Lent
{levels.length > 0 && (
{levels.map(level => ( ))} {activeLevel && activeLevel.audioTags && activeLevel.audioTags.length > 0 && À écouter : {activeLevel.audioTags.join(" · ")}}
{activeLevel && activeLevel.kind !== "line" ? ( <>
{activeUnits.map((unit, index) => { const result = unitChecked && unitChecked.results && unitChecked.results[index]; const bg = result ? (result.correct ? "var(--good-tint)" : "var(--warn-tint)") : "var(--card)"; return (
setUnitAnswer(index, ev.target.value)} className="kr" lang="ko" autoCapitalize="off" autoCorrect="off" spellCheck={false} placeholder={`${activeLevel.kind} ${index + 1}`} style={{ minWidth: 0, padding: "8px 10px", borderRadius: "var(--radius-sm)", border: "1px solid var(--rule)", background: bg, color: "var(--ink)", fontSize: 17 }} /> {result && {result.correct ? "OK" : dictationFeedbackLabel(result)}}
); })}
{unitChecked && !unitChecked.correct && unitChecked.tags.length > 0 && Tags niveau : {unitChecked.tags.join(" · ")}} String(v || "").trim())} onClick={checkUnits}>Vérifier ce niveau
) : (
La ligne entière se travaille dans le champ principal.
)}
)}