// screens-phrase.jsx — Phrase card v2: leaner, one focus per screen. // locked (subtle hint) → unlock moment (calm, auto-continues) → hear (input first) // → meaning check (idioms ONLY) → say it (mature production review). // Transparent phrase: "Es dzeru kafiju." (skips meaning check) // Idiomatic phrase: "Man garšo kafija." = "I like coffee." (words don't add up) const PP_PHRASES = { clear: { words: [ { lv: 'Es', known: true }, { lv: 'dzeru', lemma: 'dzert', known: false }, { lv: 'kafiju', known: true }, ], en: 'I drink coffee.', seed: 'es-dzeru-kafiju', }, idiom: { words: [ { lv: 'Man', known: true }, { lv: 'garšo', lemma: 'garšot', known: false }, { lv: 'kafija', known: true }, ], en: 'I like coffee.', seed: 'man-garso-kafija', }, }; // one-time keyframes for the unlock moment (gated on reduced motion) if (typeof document !== 'undefined' && !document.getElementById('pp-phrase-kf')) { const s = document.createElement('style'); s.id = 'pp-phrase-kf'; s.textContent = ` @keyframes ppUnlockBloom { 0% { transform: scale(0.7); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } } @keyframes ppUnlockPop { 0% { transform: scale(0.72); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes ppRise { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes ppFillOnce { 0% { width: 0; } 100% { width: 100%; } } @media (prefers-reduced-motion: reduce) { .pp-unlock-bloom, .pp-unlock-pop, .pp-rise, .pp-fill-once { animation: none !important; opacity: 1 !important; transform: none !important; } .pp-fill-once { width: 100% !important; } }`; document.head.appendChild(s); } // soft two-note chime (WebAudio) — quiet, short function ppChime() { try { const ctx = new (window.AudioContext || window.webkitAudioContext)(); const t0 = ctx.currentTime; [[659.3, 0], [880, 0.13]].forEach(([f, d]) => { const o = ctx.createOscillator(), g = ctx.createGain(); o.type = 'sine'; o.frequency.value = f; g.gain.setValueAtTime(0, t0 + d); g.gain.linearRampToValueAtTime(0.07, t0 + d + 0.02); g.gain.exponentialRampToValueAtTime(0.0001, t0 + d + 1.1); o.connect(g); g.connect(ctx.destination); o.start(t0 + d); o.stop(t0 + d + 1.2); }); } catch (e) { /* no audio in this context */ } } // serif phrase line; the one new word subtly highlighted function PhraseLine({ T, t, phrase = PP_PHRASES.clear, dim = false, highlightNew = true, size = 34 }) { const head = ppHeadFont(t); return (
{phrase.words.map((w, i) => ( {i > 0 && ' '} {w.lv} ))} .
); } // ── 1 · LOCKED — a subtle hint, nothing to dwell on ────────────────────── function PhraseLocked({ T, t }) { return (
Upcoming phrase
1 word to go — learn dzert
It appears here as “dzeru”.
); } // ── 2 · UNLOCK MOMENT — one restrained animation + soft chime, then flows on ── function PhraseUnlock({ T, t }) { const [run, setRun] = React.useState(0); // replay key const replay = () => { setRun(r => r + 1); ppChime(); }; return (
{/* single bloom ring + orb — earned, not celebratory */}
Phrase unlocked
You know all its words now.
{/* no button — it flows straight into hearing it */}
Hearing it…
); } // ── 3 · HEAR — first exposure, input first ─────────────────────────────── function PhraseHear({ T, t }) { const phrase = PP_PHRASES.clear; const [playing, setPlaying] = React.useState(false); const [shown, setShown] = React.useState(false); const [speed, setSpeed] = React.useState(1); return (
New phrase
dzert, here as “dzeru”
{/* audio hero */}
setPlaying(p => !p)} />
{/* meaning — demoted, behind a tap */}
{shown ? ( {phrase.en} ) : ( )}
First review tomorrow.
); } // ── 4 · MEANING CHECK — only for idiomatic phrases ─────────────────────── function PhraseMeaning({ T, t }) { const phrase = PP_PHRASES.idiom; const [playing, setPlaying] = React.useState(false); const [picked, setPicked] = React.useState(null); const [speed, setSpeed] = React.useState(1); const options = [ { en: 'I taste the coffee.', ok: false }, { en: 'I like coffee.', ok: true }, { en: 'I\u2019m making coffee.', ok: false }, ]; return (
New phrase · idiom
{/* compact audio row — already modeled, stays close */}
setPlaying(p => !p)} />
What does it mean?
{options.map((o, i) => { const on = picked === i; const good = on && o.ok; return ( ); })}
{picked !== null && options[picked].ok && <>Word-for-word it’s “to-me tastes coffee” — garšot points backwards.}
); } // ── 5 · SAY IT — mature production review: speak, compare, self-rate ───── function PhraseSayIt({ T, t }) { const phrase = PP_PHRASES.clear; const REC = '#C0485A'; const [stage, setStage] = React.useState('cue'); // cue → rec → compare const [rated, setRated] = React.useState(null); // 'good' | 'again' const [playWho, setPlayWho] = React.useState(null); // 'native' | 'you' const [speed, setSpeed] = React.useState(1); const playBoth = () => { const nativeMs = 1300 / speed; // slowed native model takes longer setPlayWho('native'); setTimeout(() => setPlayWho('you'), nativeMs); setTimeout(() => setPlayWho(null), nativeMs + 1300); }; const CompareRow = ({ icon, label, who, seed }) => (
{label}
); return (
Review · say it
{stage !== 'compare' ? ( <> {/* production cue: English in, Latvian out */}
{phrase.en}
Say it in Latvian.
{stage === 'rec' ? 'Listening\u2026 tap to stop' : 'Tap to record'}
) : ( <>
{phrase.en}
{/* native + you, back-to-back */}
{speed < 1 && <>Slows the native voice only.}
{rated === 'good' && <>Next review in 9 days.} {rated === 'again' && <>We’ll come back to it in 10 minutes.}
)}
{stage !== 'compare' ? ( ) : (
)}
); } function PhraseScreen({ T, t, state = 'hear' }) { if (state === 'locked') return ; if (state === 'unlock') return ; if (state === 'meaning') return ; if (state === 'sayit' || state === 'review') return ; return ; } Object.assign(window, { PhraseScreen });