// screens-a.jsx — Home, Word Card, Minimal-pair drill // Each screen takes (theme T, t tweaks). Locally interactive. // ════════════════════════════════════════════════════════════════════════ // 1 · HOME / DAILY SESSION // ════════════════════════════════════════════════════════════════════════ function HomeScreen({ T, t }) { const head = ppHeadFont(t); const label = { fontFamily: PP_UI, fontSize: 12, fontWeight: 600, letterSpacing: 1.4, textTransform: 'uppercase', color: T.faint }; return ( {/* header */}
Wednesday, 10 June
Labrīt, Gabrial.
A few new words, and the ones to review.
{t.folk &&
}
{/* hero session card */}
Today’s session ~10 min
12 words
5 new · 7 to review
{/* spacer pushes secondary + coverage down */}
{/* slim secondary: podcast */}
Rīta saruna
3 min · only words you know
{/* coverage footnote */}
615 / 1000 words
); } // ════════════════════════════════════════════════════════════════════════ // 2 · AUDIO-FIRST WORD CARD (hear → meaning → spelling → phrase) // ════════════════════════════════════════════════════════════════════════ function WordCardScreen({ T, t }) { const head = ppHeadFont(t); const [stage, setStage] = React.useState(0); // 0 listen+choose, 1 answered, 2 spelling, 3 phrase const [choice, setChoice] = React.useState(null); // picked meaning const [playing, setPlaying] = React.useState(false); const [speed, setSpeed] = React.useState(1); const [phraseSpeed, setPhraseSpeed] = React.useState(1); const next = () => setStage(s => Math.min(3, s + 1)); const correct = 'good morning'; const options = ['thank you', 'good morning', 'see you later', 'excuse me']; const right = choice === correct; const ctaLabel = [null, 'Reveal spelling', 'Hear it in a phrase', 'Got it'][stage]; return (
{stage === 0 ? 'Listen — what does it mean?' : 'New word'}
{/* spelling — hidden until stage 2 */}
{stage >= 2 ? ( labrīt ) : (
{[0,1,2,3,4,5].map(i =>
)}
)}
{/* meaning — confirmed after answering */}
{stage >= 1 && ( good morning )}
{/* waveform hero + play */}
setPlaying(p => !p)} />
{stage > 0 && Tap to replay · 0:01}
{/* meaning choices — the recall check that feeds scheduling */} {stage === 0 && (
{options.map(opt => { const isPicked = choice === opt; const isCorrect = opt === correct; let bg = T.surface, bd = T.hair, fg = T.ink; if (choice) { if (isCorrect) { bg = T.goodSoft; bd = hexA(T.good, 0.5); fg = T.good; } else if (isPicked) { bg = T.dark ? 'rgba(224,116,138,0.12)' : 'rgba(158,43,58,0.07)'; bd = hexA('#C0485A', 0.45); fg = '#C0485A'; } else { fg = T.faint; } } return ( ); })}
)} {/* phrase card — appears at stage 3 */}
= 3 ? 200 : 0, opacity: stage >= 3 ? 1 : 0, transition: 'max-height .35s ease, opacity .3s ease', }}>
In a phrase
Labrīt! Kā tev klājas?
Good morning! How are you?
{/* CTA / scheduling feedback */}
{stage === 0 ? ( choice ? (
{right ? <>Recalled — next review in 4 days. : <>No problem — we’ll bring it back sooner.}
) : (
Your answer tunes when this word returns.
) ) : ( )}
); } // ════════════════════════════════════════════════════════════════════════ // 3 · MINIMAL-PAIR PERCEPTION DRILL (L vs Ļ) // ════════════════════════════════════════════════════════════════════════ function DrillScreen({ T, t }) { const head = ppHeadFont(t); const [picked, setPicked] = React.useState(null); // 'L' | 'Ļ' const [playing, setPlaying] = React.useState(false); const [speed, setSpeed] = React.useState(1); const [say, setSay] = React.useState(null); // null | 'idle' | 'rec' | 'done' — saying it back closes the loop const correct = 'Ļ'; const pairs = [ { key: 'L', glyph: 'L', word: 'lācis', gloss: 'bear', hint: 'as in “love”' }, { key: 'Ļ', glyph: 'Ļ', word: 'ļoti', gloss: 'very', hint: 'soft, “ly”' }, ]; const card = (p) => { const isPicked = picked === p.key; const isCorrect = p.key === correct; let bg = T.surface, bd = T.hair, fg = T.ink, accent = false; if (picked) { if (isCorrect) { bg = T.goodSoft; bd = hexA(T.good, 0.5); fg = T.good; accent = true; } else if (isPicked) { bg = T.dark ? 'rgba(224,116,138,0.12)' : 'rgba(158,43,58,0.07)'; bd = hexA('#C0485A', 0.45); } } return ( ); }; return (
Sound check
{say ? 'Say it back' : 'Which did you hear?'}
{say ? ( /* audio out — say the sound you just picked */
ļoti very · LYO-tee
setPlaying(p => !p)} />
{say === 'done' ? (
Sounded right — a nice soft Ļ.
) : ( <> setSay(say === 'rec' ? 'done' : 'rec')} />
{say === 'rec' ? 'Listening… tap to stop' : 'Now say it'}
)}
) : (<> {/* the played sound */}
setPlaying(p => !p)} />
{/* the two options */}
{pairs.map(card)}
{/* feedback line */}
{picked && (
{picked === correct ? <>Right — that’s the soft Ļ. : <>Listen again — it was the soft Ļ.}
)}
)}
{/* bottom action */}
{say === 'done' ? ( ) : say ? (
Saying it locks the sound in.
) : picked ? ( ) : ( )}
); } // ════════════════════════════════════════════════════════════════════════ // 2b · INVERSE WORD CARD — meaning out → audio out: pick the word, then say it // ════════════════════════════════════════════════════════════════════════ function WordSayScreen({ T, t }) { const head = ppHeadFont(t); // inverse of the recognition card: the meaning is the cue — // meaning out (pick the word) → audio out (say it) → compare const [stage, setStage] = React.useState('choose'); // choose → speak → rec → result const [choice, setChoice] = React.useState(null); // picked Latvian word const [nativePlay, setNativePlay] = React.useState(false); const [playWho, setPlayWho] = React.useState(null); // 'native' | 'you' const [speed, setSpeed] = React.useState(1); const correct = 'labrīt'; const options = [ { lv: 'paldies', en: 'thank you' }, { lv: 'labrīt', en: 'good morning' }, { lv: 'uz redzēšanos', en: 'see you later' }, { lv: 'atvainojiet', en: 'excuse me' }, ]; const right = choice === correct; const pickedEn = choice ? options.find(o => o.lv === choice).en : ''; const playOne = (who, ms) => { setPlayWho(who); setTimeout(() => setPlayWho(w => (w === who ? null : w)), ms); }; const playBoth = () => { const nativeMs = 1100 / speed; // slowed native model takes longer setPlayWho('native'); setTimeout(() => setPlayWho('you'), nativeMs); setTimeout(() => setPlayWho(null), nativeMs + 1100); }; const CompareRow = ({ icon, label, who, seed }) => (
playOne(who, who === 'native' ? 1100 / speed : 1100)} style={{ display: 'flex', alignItems: 'center', gap: 14, background: T.surface, borderRadius: 18, padding: '13px 18px', border: `0.5px solid ${playWho === who ? hexA(T.primary, 0.4) : T.hair}`, boxShadow: T.shadow, cursor: 'pointer' }}> {label}
); return (
Review · say it
{stage === 'choose' && ( <> {/* the meaning is the cue — inverse of the recognition card */}
good morning
Which word says it?
{options.map(o => { const isPicked = choice === o.lv; const isCorrect = o.lv === correct; let bg = T.surface, bd = T.hair, fg = T.ink; if (choice) { if (isCorrect) { bg = T.goodSoft; bd = hexA(T.good, 0.5); fg = T.good; } else if (isPicked) { bg = T.dark ? 'rgba(224,116,138,0.12)' : 'rgba(158,43,58,0.07)'; bd = hexA('#C0485A', 0.45); fg = '#C0485A'; } else { fg = T.faint; } } return ( ); })}
{choice && (right ? <>That’s it — now say it out loud. : <>It’s labrīt — {choice} means “{pickedEn}”.)}
)} {(stage === 'speak' || stage === 'rec') && ( <> {/* cue stays quiet; the recalled word becomes the hero */}
good morning
labrīt
LAH-breet
{/* native model — hear it again before speaking */}
setNativePlay(p => !p)} />
{/* audio out — say it back */}
setStage(stage === 'rec' ? 'result' : 'rec')} />
{stage === 'rec' ? 'Listening… tap to stop' : 'Now say it'}
)} {stage === 'result' && ( <> {/* revealed word */}
labrīt
good morning · LAH-breet
{/* compare: native model vs your attempt */}
{/* the pick and the speaking both feed scheduling */}
{right ? <>Sounded right — next review in 6 days. : <>Sounded right — the missed pick brings it back in 2 days.}
)}
{/* bottom */}
{stage === 'choose' ? ( choice ? ( ) : (
Recalling the word from its meaning is the strongest review.
) ) : stage === 'result' ? ( ) : (
Speaking it closes the loop.
)}
); } // router for the two word-card directions function WordFlowScreen({ T, t, state = 'hear' }) { if (state === 'pic-review') return ; if (state && state.indexOf('learn-') === 0) return ; if (state === 'say') return ; return ; } Object.assign(window, { HomeScreen, WordCardScreen, WordSayScreen, WordFlowScreen, DrillScreen });