/* Dialogues — hub de 20 + lecteur complet. Variantes lecteur : 'transcript' / 'ligne'. Modes : lecture seule / entraînement. Tokens glosés cliquables, evidence lines, reconstruction à tuiles, shadowing, signalement audio par ligne et par token. */ const SPEAKER_TONE = { rose: { bar: "var(--accent)", tint: "var(--accent-tint)", text: "var(--accent-deep)" }, ochre: { bar: "var(--ochre)", tint: "var(--warn-tint)", text: "var(--warn)" }, }; // Délègue à la couche partagée polishLabel (ui.jsx, chargé avant dialogues.jsx). function polishFrenchText(text) { return window.polishLabel ? window.polishLabel(text) : text; } function sentenceEnd(text) { const s = String(text || "").trim(); if (!s) return ""; return /[.!?。！？]$/.test(s) ? s : `${s}.`; } function levelLabel(level) { if (level === "A0") return "Débutant"; if (level === "A1") return "Élémentaire"; return level || "Débutant"; } const DIALOGUE_KIND_ORDER = { progressive: 0, micro: 1, micro_p1_04: 2 }; const DIALOGUE_KIND_LABEL = { progressive: "Progressif", micro: "Micro", micro_p1_04: "Situations", }; function dialogueSortKey(d) { const kindRank = Object.prototype.hasOwnProperty.call(DIALOGUE_KIND_ORDER, d && d.kind) ? DIALOGUE_KIND_ORDER[d.kind] : 9; const order = Number.isFinite(d && d.order) ? d.order : 9999; return { kindRank, order, id: String((d && d.id) || "") }; } function sortDialoguesForHub(items) { return (items || []).slice().sort((a, b) => { const aa = dialogueSortKey(a); const bb = dialogueSortKey(b); if (aa.kindRank !== bb.kindRank) return aa.kindRank - bb.kindRank; if (aa.order !== bb.order) return aa.order - bb.order; return aa.id.localeCompare(bb.id); }); } function canonicalHubItem(d, displayIndex) { return { id: d.id, day: Number.isFinite(displayIndex) ? displayIndex + 1 : (d.order || 1), series: DIALOGUE_KIND_LABEL[d.kind] || "Dialogue", title: polishFrenchText(d.title || d.id), titleKr: d.kind === "micro" ? "짧은 대화" : "대화", summary: polishFrenchText(d.summary || ""), lines: d.line_count || (d.lines ? d.lines.length : 0), level: levelLabel(d.level), done: false, progress: Number.isFinite(d.progress) ? d.progress : null, audioReady: !!d.audio_ready, locked: false, canonical: d, }; } function readerFromCanonical(d) { if (!d || d.turns) return d || window.LANGUES_DATA.dialogueCafe; const tones = ["rose", "ochre"]; const speakers = {}; (d.speakers || []).forEach((speaker, index) => { speakers[speaker] = { name: speaker, kr: speaker, tone: tones[index % tones.length] }; }); const turns = (d.lines || []).map(line => { if (!speakers[line.speaker]) speakers[line.speaker] = { name: line.speaker, kr: line.speaker, tone: tones[Object.keys(speakers).length % tones.length] }; return { s: line.speaker, kr: line.kr, ro: line.reading || "", fr: polishFrenchText(line.fr), audio: line.audio || null, tokens: (line.tokens || []).map(token => ({ t: token.kr, g: polishFrenchText(token.fr || token.reading || token.kr), audio: token.audio || null })), }; }); return { id: d.id, title: polishFrenchText(d.title || d.id), titleKr: d.kind === "micro" ? "짧은 대화" : "대화", level: levelLabel(d.level), turns, speakers, grammar: [], vocabNew: Array.from(new Map(turns.flatMap(turn => (turn.tokens || []).map(token => [token.t, { kr: token.t, fr: token.g, audio: token.audio }]))).values()).slice(0, 14), vocabSeen: [], questions: (d.questions || []).map(q => ({ q: polishFrenchText(q.q), choices: q.choices, a: q.answer, evidence: Math.max(0, (d.lines || []).findIndex(line => line.id === q.evidence_line_id)), explain: polishFrenchText(q.explain || ""), })), reconstruct: d.reconstruction ? { fr: polishFrenchText(d.reconstruction.fr), tiles: d.reconstruction.tiles || [], answer: d.reconstruction.answer || [], } : null, shadowing: (d.shadowing || []).map(item => ({ kr: item.kr, ro: item.reading || "", fr: polishFrenchText(item.fr || ""), audio: item.audio || null })), }; } /* ---------- Hub ---------- */ function DialoguesHub({ onOpen, loading, error, onRetry, items, stats, imageBank }) { const list = items && items.length ? sortDialoguesForHub(items).map((d, i) => canonicalHubItem(d, i)) : window.LANGUES_DATA.dialogueList; const [filter, setFilter] = useState("Tous"); const levels = ["Tous", ...Array.from(new Set(list.map(d => d.level)))]; const shown = filter === "Tous" ? list : list.filter(d => d.level === filter); const corpus = stats || window.LANGUES_DATA.corpus; return (
Apprendre par l'oral

Dialogues

{corpus.dialogues} dialogues · {corpus.dialogueLines} lignes. Le coréen au centre, la traduction reste volontaire.

{shown.length} dialogues
{error ? ( ) : loading ? (
{[0, 1, 2].map(i => )}
) : shown.length === 0 ? ( ) : (
{shown.map((d, i) => { const scene = window.primaryImageForItem ? window.primaryImageForItem(imageBank, [d.id], "dialogue_context") : null; return (
{scene ? ( ) : (
{d.locked ? : d.day}
)}
{d.titleKr} {d.title}
{d.level} {d.series && {d.series}} {d.lines} lignes {d.audioReady && audio} {d.done && terminé}
{d.done || d.progress > 0 ? ( <>
{Math.round((d.done ? 1 : d.progress) * 100)}% lu
) : (
Lecture libre
)}
onOpen(d.id, "lecture")} disabled={d.locked}>Lire onOpen(d.id, "entrainement")} disabled={d.locked}>S'entraîner
);})}
)}
); } /* ---------- Audio bar ---------- */ function AudioBar({ idx, total, playing, speed, onFirst, onPrev, onPlay, onRepeat, onNext, onSpeed }) { const Ctrl = ({ icon, label, onClick, big }) => ( ); return (
{idx + 1} / {total}
); } /* ---------- Ligne lue mot par mot ---------- On affiche TOUJOURS la ligne complète (turn.kr = ce qui est réellement lu), découpée en mots de surface cliquables. La glose vient du token aligné (sens en contexte, ex. un prénom) sinon du résolveur partagé. Ceci évite l'écart « texte affiché ≠ audio » qd les tokens sont des radicaux (저 vs 저는). */ function LineWords({ turn, glossFor }) { const words = String(turn.kr || "").trim().split(/\s+/).filter(Boolean); const tokens = Array.isArray(turn.tokens) ? turn.tokens : []; const aligned = tokens.length === words.length; return ( <> {words.map((w, i) => { const tok = aligned ? tokens[i] : null; const gloss = (tok && (tok.fr || tok.reading)) || (glossFor ? glossFor(w) : "") || undefined; return {i ? " " : ""}{w}; })} ); } /* ---------- Turn line (with glossed tokens) ---------- */ function TurnLine({ turn, speaker, showRomaja, active, big, transMode, glossed, glossFor, onReport, onClick }) { const tone = SPEAKER_TONE[speaker.tone] || SPEAKER_TONE.rose; return (
{speaker.name} {speaker.kr} {turn.audio && { e.stopPropagation(); onReport && onReport("ligne", turn); }} style={{ color: "var(--ink-faint)", cursor: "pointer", display: "inline-flex" }}>}
{glossed ? : turn.kr}
{showRomaja &&
{turn.ro}
}
{turn.fr}
); } /* ---------- Panels ---------- */ function GrammarPanel({ d }) { return (
{(!d.grammar || d.grammar.length === 0) && (

Aucun point dédié pour ce dialogue. Utilisez les gloses et la reconstruction pour fixer les formes.

)} {d.grammar.map((g, i) => (
{g.form} {g.note}
))}

{window.LANGUES_DATA.corpus.miniGrammar} points de mini-grammaire au total.

); } function VocabPanel({ items, reused }) { return (
{items.map((v, i) => { const audioRef = (v.audio && (v.audio.ref || v.audio.id)) || v.kr; const audioUrl = (v.audio && v.audio.url) || ""; return (
{v.kr} {v.fr}
); })}
); } function shuffledQuestionChoices(q, qi) { const choices = (q.choices || []).map((text, index) => ({ text, index })); if (choices.length <= 1) return choices; const shift = (qi + 1) % choices.length; return choices.slice(shift).concat(choices.slice(0, shift)); } function QuestionsPanel({ d, onGoLine }) { const [ans, setAns] = useState({}); return (
{d.questions.map((q, qi) => { const selected = ans[qi]; const reveal = selected != null; const answeredCorrectly = selected === q.a; const correctChoice = (q.choices || [])[q.a] || ""; const choices = shuffledQuestionChoices(q, qi); return (
{qi + 1}. {q.q}
{choices.map((choice, ci) => { const correct = choice.index === q.a; let bg = "var(--card)", bd = "var(--rule)", col = "var(--ink-soft)"; if (reveal && correct) { bg = "var(--good-tint)"; bd = "transparent"; col = "var(--good)"; } else if (ans[qi] === choice.index && !correct) { bg = "var(--warn-tint)"; bd = "transparent"; col = "var(--warn)"; } return ; })}
{reveal && (
{answeredCorrectly ? "Correct." : "Pas encore."}{" "} {answeredCorrectly ? ( <>{q.explain || "Reliez la réponse à la ligne du dialogue."} ) : ( <>Bonne réponse : {sentenceEnd(correctChoice)} {q.explain || "Relisez la ligne citée, puis continuez."} )}
)}
); })}

{window.LANGUES_DATA.corpus.comprehension} questions de compréhension dans le corpus.

); } // Première tuile mal placée : les tuiles disponibles SONT exactement les mots du // modèle, donc une reconstruction fausse est toujours un problème d'ordre. On // localise la première position qui diverge pour un retour précis, pas générique. function reconstructionMismatch(built, answer) { for (let i = 0; i < answer.length; i++) { if (built[i] !== answer[i]) return { pos: i + 1, expected: answer[i], got: built[i] }; } return null; } function ReconstructionPanel({ d }) { const r = d.reconstruct; const [pool, setPool] = useState(() => [...r.tiles]); const [built, setBuilt] = useState([]); const [done, setDone] = useState(null); const [miss, setMiss] = useState(null); const place = (tile, i) => { setBuilt(b => [...b, tile]); setPool(p => p.filter((_, j) => j !== i)); setDone(null); setMiss(null); }; const remove = (i) => { const tile = built[i]; setBuilt(b => b.filter((_, j) => j !== i)); setPool(p => [...p, tile]); setDone(null); setMiss(null); }; const check = () => { const ok = built.join(" ") === r.answer.join(" "); setDone(ok); setMiss(ok ? null : reconstructionMismatch(built, r.answer)); }; const reset = () => { setPool([...r.tiles]); setBuilt([]); setDone(null); setMiss(null); }; return (

Remettez les tuiles dans l'ordre pour reconstruire : « {r.fr} »

{built.length === 0 && Touchez les tuiles ci-dessous…} {built.map((tile, i) => )}
{pool.map((tile, i) => )}
0}>Vérifier Recommencer {done === true && Correct !} {done === false && ( {miss ? <>Position {miss.pos} : le modèle attend « {miss.expected} » ici, pas « {miss.got} ». : "Pas encore — vérifiez l'ordre et les particules."} )}

{window.LANGUES_DATA.corpus.reconstruction} exercices de reconstruction au total.

); } function ShadowingPanel({ d }) { const [active, setActive] = useState(null); const play = (s, i) => { if (active === i) { setActive(null); if (window.LangAudio) window.LangAudio.stop(); return; } setActive(i); if (window.LangAudio) window.LangAudio.speak(s.kr, { ref: s.audio && (s.audio.ref || s.audio.id), url: s.audio && s.audio.url }); }; return (

Écoutez, puis répétez juste après le modèle, en rythme.

{d.shadowing.map((s, i) => (
{s.kr}
{s.fr &&
{s.fr}
}
{s.ro}
{ setActive(i); if (window.LangAudio) window.LangAudio.speak(s.kr, { ref: s.audio && (s.audio.ref || s.audio.id), url: s.audio && s.audio.url }); }}>Répéter
))}

{window.LANGUES_DATA.corpus.shadowing} blocs de shadowing au total.

); } function normalizeKoreanAnswer(text) { return String(text || "") .replace(/[.,!?;:。！？…]/g, "") .replace(/\s+/g, " ") .trim(); } function productionTargetFromDialogue(d) { const r = d && d.reconstruct; if (r && r.fr && Array.isArray(r.answer) && r.answer.length) { return { fr: r.fr, model: r.answer.join(" "), source: "Réplique reconstruite", }; } const turn = d && Array.isArray(d.turns) ? d.turns.find(item => item && item.fr && item.kr) : null; return { fr: turn ? turn.fr : "Produisez une réplique courte.", model: turn ? turn.kr : "", source: "Ligne du dialogue", }; } function ProductionGuidedPanel({ d }) { const [text, setText] = useState(""); const [compared, setCompared] = useState(false); const target = productionTargetFromDialogue(d); const normalizedText = normalizeKoreanAnswer(text); const normalizedModel = normalizeKoreanAnswer(target.model); const hasAnswer = normalizedText.length > 0; const correct = hasAnswer && normalizedModel && normalizedText === normalizedModel; // Nomme l'erreur principale (morphème + rôle, ou ordre) plutôt qu'un rappel générique. const contrast = compared && !correct && normalizedModel && window.LangValidate && window.LangValidate.contrast ? window.LangValidate.contrast(target.model, text, { ignorePunct: true }) : null; const updateText = (value) => { setText(value); setCompared(false); }; return (

Produisez une réplique à partir du sens français.

{target.source}
« {target.fr} »