/* Pilotage — diagnostic sobre + bibliothèque (Liste, Familles sino, Phrases audio). */
function Donut({ data, size = 120 }) {
const total = data.reduce((a, d) => a + d.n, 0);
const colors = ["var(--accent)", "var(--ochre)", "var(--good)", "var(--warn)", "var(--ink-faint)"];
let acc = 0;
const segs = data.map((d, i) => { const start = acc / total; acc += d.n; return { ...d, start, end: acc / total, color: colors[i % colors.length] }; });
const grad = segs.map(s => `${s.color} ${s.start * 360}deg ${s.end * 360}deg`).join(", ");
return (
{segs.map((s, i) =>
{s.t || s.m}{s.n}
)}
);
}
/* ---- Bibliothèque : Liste (réelle, sur vocab_freq + état SRS) ---- */
const STATUS_FR = { tous: "Tous", vus: "Vus", nonvus: "Non vus" };
function ListeView({ onBack, initialQuery = "", initialStatus = "" }) {
const settings = window.LangStore ? window.LangStore.settings.get() : {};
const pageSize = Math.max(10, Number(settings.listSize) || 50);
const [payload, setPayload] = useState(null);
const [q, setQ] = useState(initialQuery || "");
const [status, setStatus] = useState(() => initialStatus || STATUS_FR[settings.statusFilter] || "Tous");
useEffect(() => {
if (!window.LangData || !window.LangData.loadVocabFreq) { setPayload({ items: [] }); return undefined; }
let alive = true;
window.LangData.loadVocabFreq().then(p => { if (alive) setPayload(p); }).catch(() => { if (alive) setPayload({ items: [] }); });
return () => { alive = false; };
}, []);
useEffect(() => { setQ(initialQuery || ""); }, [initialQuery]);
useEffect(() => { if (initialStatus) setStatus(initialStatus); }, [initialStatus]);
if (!payload) return Pilotage
;
const cards = window.LangStore && window.LangStore.cards ? window.LangStore.cards : null;
const rows = (payload.items || []).map(it => {
const st = cards ? cards.state(it.id) : null;
return {
kr: it.kr, ro: it.reading || it.ro || "",
fr: it.fr || it.meaning_fr || "",
level: it.level || it.niveau_cible || "—",
pos: it.classe || it.pos || it.part_of_speech || "",
box: st ? (st.box || 1) : null,
seen: !!st,
};
});
const matched = rows.filter(it => (status === "Tous" || (status === "Vus" ? it.seen : !it.seen)) && (q === "" || it.kr.includes(q) || it.fr.toLowerCase().includes(q.toLowerCase())));
const shown = matched.slice(0, pageSize);
return (
{["Coréen", "Sens", "Niveau", "Type", "Boîte"].map(h => {h})}
{shown.length === 0 ?
: shown.map((it, i) => (
{it.kr} {it.ro}
{it.fr}
{it.level}
{it.pos}
{it.box ? B{it.box} : —}
))}
{shown.length} affichés sur {matched.length} résultats · {(payload.items || []).length.toLocaleString("fr-FR")} entrées au total.
);
}
/* ---- Bibliothèque : Familles sino (réelles, sur chunk_index.roots) ---- */
const SINO_MAX_FAMILIES = 40;
const SINO_MAX_WORDS = 8;
function SinoView({ onBack }) {
const [fams, setFams] = useState(null);
useEffect(() => {
if (!window.LangData || !window.LangData.loadChunkIndex) { setFams([]); return undefined; }
let alive = true;
Promise.all([window.LangData.loadChunkIndex(), window.LangData.loadVocabFreq()])
.then(([idx, voc]) => {
if (!alive) return;
const byId = Object.create(null);
(voc.items || []).forEach(it => { byId[it.id] = it; });
const built = Object.keys(idx.roots || {})
.map(root => ({
root,
words: (idx.roots[root] || []).map(id => byId[id]).filter(Boolean).map(it => [it.kr, it.fr || it.meaning_fr || ""]),
}))
.filter(f => f.words.length >= 2)
.sort((a, b) => b.words.length - a.words.length)
.slice(0, SINO_MAX_FAMILIES);
setFams(built);
})
.catch(() => { if (alive) setFams([]); });
return () => { alive = false; };
}, []);
if (!fams) return Pilotage
;
return (
PilotageRacines hanja partagées · {fams.length} familles (les plus larges)
{fams.length === 0 ?
: (
{fams.map((f, i) => (
{f.root}{f.words.length} mots
{f.words.slice(0, SINO_MAX_WORDS).map((w, k) =>
{w[0]}{w[1]}
)}
{f.words.length > SINO_MAX_WORDS &&
+ {f.words.length - SINO_MAX_WORDS} autres}
))}
)}
);
}
/* ---- Bibliothèque : Phrases audio / Audio validé ---- */
function PhrasesView({ onBack }) {
const phrases = window.LANGUES_DATA.audioPhrases;
const [onlyValid, setOnlyValid] = useState(false);
const [active, setActive] = useState(null);
const [toast, setToast] = useState(null);
const shown = onlyValid ? phrases.filter(p => p.validated) : phrases;
const play = (p, i) => {
if (active === i) {
setActive(null);
if (window.LangAudio) window.LangAudio.stop();
return;
}
setActive(i);
if (window.LangAudio) window.LangAudio.speak(p.kr);
};
const report = (p) => { setToast(`Phrase signalée : ${p.kr}`); setTimeout(() => setToast(null), 2200); };
return (
Pilotage
{window.LANGUES_DATA.corpus.audioPhrases} phrases audio · l'audio est intégré au fil de l'apprentissage, sans validation globale bloquante.
{shown.map((p, i) => (
{p.validated ?
validé :
report(p)}>Signaler}
))}
{toast &&
{toast}
}
);
}
function Panel({ title, hint, children }) {
return {title}{hint && {hint}}
{children}
go("today")}>Lancer une séance} />
Bibliothèque
setView("liste")} />
setView("sino")} />
setView("phrases")} />
);
}
function PilotagePage({ go, routeParams = {} }) {
const D = window.LANGUES_DATA;
const [view, setView] = useState(routeParams.view || "dashboard");
useEffect(() => { if (routeParams.view) setView(routeParams.view); }, [routeParams.view]);
if (view === "liste") return setView("dashboard")} initialQuery={routeParams.query || ""} initialStatus={routeParams.status || ""} />
;
if (view === "sino") return setView("dashboard")} />
;
if (view === "phrases") return ;
const live = liveStats();
const hasData = live && (live.agg.sessions > 0 || live.cardsTracked > 0);
if (!hasData) return ;
const agg = live.agg;
const maxBox = Math.max(...live.boxes.map(b => b.n), 1);
const maxStrand = Math.max(...STRAND_LADDER.map(k => agg.strands[k] || 0), 1);
const resultDonut = [
{ t: "Réussites", n: agg.correct },
{ t: "Erreurs", n: agg.errors },
].filter(d => d.n > 0);
const accuracyPct = agg.accuracy != null ? Math.round(agg.accuracy * 100) : null;
return (
{STRAND_LADDER.every(k => !agg.strands[k]) ? Pas encore de temps enregistré.
: (
{STRAND_LADDER.map(k => (
{STRAND_FR[k]}{agg.strands[k] || 0}′
))}
Aucune carte encore notée.
: (
{live.boxes.map(b => (
{b.n}
= 4 ? "var(--good)" : b.box >= 2 ? "var(--accent)" : "var(--ochre)", borderRadius: "5px 5px 0 0", transition: "height .5s" }} />
B{b.box}
))}
)}
{resultDonut.length ? : Pas encore d'exercice noté correct/incorrect.
}
{agg.produced}
productions journalisées
{agg.reviewed} cartes revues au total · {agg.errors} erreurs.
Points faibles à réparer go("today")}>Séance ciblée
{agg.topErrors && agg.topErrors.length ? (
{agg.topErrors.map(w => (
{w.tag}
{w.count} occurrence{w.count > 1 ? "s" : ""}
))}
) :
Aucune erreur nommée pour l'instant — les dictées et corrections en généreront.
}
1 ? "s" : ""}`} defaultOpen>
{live.recent.length ? (
{live.recent.map((s, i) => (
{s.date}
{s.kind}
{s.min} min
{s.cards} cartes
))}
Aucune séance terminée encore.
}
Bibliothèque
setView("liste")} />
setView("sino")} />
setView("phrases")} />
);
}
Object.assign(window, { PilotagePage });