Beug

+ + +

+ {scr !== 'menu' + ? + :

Beug

} +

+ {scr === 'practice' && } + 🔥 {st.streak||0} +

+ + {/* MENU */} + {scr === 'menu' && ( +

+ {TABS.map(t => ( + + ))} +

+ +

+ {tab === 'prep' && ( +

{ setLearnStep(0); setScr('learn'); }}> +

📚 Lernen

Chunk the lists first — Akkusativ, Dativ, Wechsel, Genitiv

+ )} + {LEVELS.filter(l => l.tab === tab).sort((a,b)=>a.id-b.id).map(l => { + const u = unlocked(l.id); + const s = st.sc[l.id]; + const p = s ? Math.round(s.c/s.t*100) : null; + return ( +

startLv(l.id)}> +

{l.name} {!u && locked}

{l.desc}

+ {s &&

{s.c}/{s.t}

} +

+ {p !== null &&

=70?GREEN:RED}}>{p}%

} +

+ ); + })} +

+ + +

+ )} + + {/* LEARN: chunked study cards for prepositions */} + {scr === 'learn' && (() => { + const card = LEARN_CARDS[learnStep]; + const isLast = learnStep === LEARN_CARDS.length - 1; + return ( +

+ {LEARN_CARDS.map((c,i)=>( +

+ ))} +

+ +

{card.label}

{card.desc}

+ +

+ {card.words.map(w=>( +

+ {w.de} + {w.en} +

+ ))} +

+ + {card.mnemonics.length > 0 && ( +

Merkhilfe

+ {card.mnemonics.map((m,i)=>( +

+ {m.label} + {m.text} +

+ ))} +

+ )} + + {card.note && ( +

+ {card.note} +

+ )} + + {card.audio.length > 0 && ( +

+ {card.audio.map(a=>( +

{a.label}

+ ))} +

+ )} +

+ +

+ {learnStep > 0 && ( + + )} + {!isLast + ? + : } +

+ ); + })()} + + {/* PRACTICE: sentence-based (article, poss, pronoun) */} + {scr === 'practice' && (q?.type === 'article' || q?.type === 'chunk' || q?.type === 'poss' || q?.type === 'pronoun') && ( +

+ {q.sentence.split('_____').map((part,i,a)=>( + + {part} + {i < a.length-1 && ( + + {rev ? q.ans : (inp || '\u00A0\u00A0\u00A0\u00A0\u00A0')} + + )} + + ))} +

+ +

{q.translation}

+ +

+ {(q.type === 'article' || q.type === 'chunk') && <> + {DEF[q.noun.g].nominative} + {' '}{q.noun.w} + ({q.noun.en}) + } + {q.type === 'poss' && <> + {q.stem}- + ({q.possMeaning}) + } + {q.type === 'pronoun' && <> + {q.pron.nom} + ({q.pron.en}) + · {q.pron.tag} + } +

+ +

+ {CL[q.cas]} + {q.prepKey && <> · {q.prepKey} ({PREPS[q.prepKey].en})} + {q.tw !== null && q.tw !== undefined && <> · {q.tw ? '→ motion' : '● location'}} + {q.type === 'poss' && <> · {DEF[q.noun.g].nominative} {q.noun.w}} +

+ + {!rev ? ( + (q.type === 'article' || q.type === 'chunk') ? ( +

+ {q.choices.map((choice, i) => ( + + ))} +

+ ) : ( +

+ setInp(e.target.value)} + style={S.input} + placeholder={q.type==='poss' ? 'form…' : q.type==='pronoun' ? 'pronoun…' : 'article…'} + autoComplete="off" autoCapitalize="off" spellCheck={false} + enterKeyHint="go" + inputMode="text"/> + +

or press Enter

+ ) + ) : ( + q.type === 'pronoun' + ? + : q.type === 'chunk' + ? + : + )} +

+ )} + + {/* PRACTICE: preposition (which case?) */} + {scr === 'practice' && q?.type === 'prep' && ( +

Which case does this preposition take?

{q.prepKey}

{q.prepEn}

+ {!rev ? ( +

+ {[ + ['accusative','Akkusativ','1'],['dative','Dativ','2'], + ['genitive','Genitiv','3'],['wechsel','Wechsel','4'], + ].map(([val,lab,key]) => ( + + ))} +

+ ) : ( + + )} +

+ )} + + {/* PRACTICE: wechsel in context */} + {scr === 'practice' && q?.type === 'wechselContext' && ( +

{q.sentence}

{q.translation}

+ +

+ {q.prepKey} + ({PREPS[q.prepKey].en}) +

Wechselpräposition · motion or location?

+ + {!rev ? ( +

+ {[['accusative','Akkusativ','1','motion'],['dative','Dativ','2','location']].map(([val,lab,key,hint]) => ( + + ))} +

+ ) : ( + + )} +

+ )} + + {/* PRACTICE: contractions */} + {scr === 'practice' && q?.type === 'contraction' && ( +

Contract the preposition and article

+ {q.prep} + {q.art} = ? +

+ {CL[q.cas]} +

+ {!rev ? ( +

+ setInp(e.target.value)} + style={S.input} placeholder="contraction…" + autoComplete="off" autoCapitalize="off" spellCheck={false} + enterKeyHint="go" inputMode="text"/> + +

or press Enter

+ ) : ( + + )} +

+ )} + + {scr === 'practice' && ( +

+ {Array.from({length:ROUND},(_,i)=>( +

+ ))} + {Math.min(res.length+(rev?0:1), ROUND)}/{ROUND} · {cur?.name} +

+ )} + + {scr === 'practice' && rev && ( +

+ +

+ )} + + {/* SUMMARY */} + {scr === 'summary' && ( +

Complete

+ {rc}/{ROUND} +

+ {res.map((r,i)=>

)} +

=7?GREEN:'#d97706', fontSize:15, fontWeight:600, margin:'24px 0'}}> + {rc>=9?'Ausgezeichnet!':rc>=7?'Gut gemacht!':rc>=5?'Keep practicing.':'Review the charts.'} +

+ {rc>=7 && nextInTab && unlocked(nextInTab.id) && ( +

{nextInTab.name} unlocked.

+ )} + + {rc>=7 && nextInTab && unlocked(nextInTab.id) && ( + + )} +

+ +

+ )} +

+ + {chart && setChart(false)}/>} + + +

+ ); +} + +// ═══════════════════════════════════════════ +// FEEDBACK COMPONENTS +// ═══════════════════════════════════════════ + +function FillFeedback({ q, inp, ok }) { + const genders = ['masculine','feminine','neuter','plural']; + const stripCells = genders.map(g => { + if (q.type === 'article') { + const tbl = q.artType === 'indefinite' ? INDEF : DEF; + return tbl[g][q.cas]; + } + return combinePoss(q.stem, POSS_ENDINGS[g][q.cas]); + }); + const stripLabel = q.type === 'article' + ? (q.artType === 'indefinite' ? 'ein…' : 'der/die') + : `${q.stem}-`; + + return ( +

+ {ok ? '✓ Correct' : <>✗ {inp} → {q.ans}} +

{q.rule}

+ {!ok && ( +

+ {q.noun.w} is {q.noun.g}. {CL[q.cas]} + {q.noun.g} = {q.ans} +

+ )} + + + + {genders.map(g => )} + + + + {genders.map((g, i) => { + const hl = g === q.noun.g; + return ; + })} + +

{CL[q.cas]}	{g.slice(0,4)}.
{stripLabel}	{stripCells[i]}

+ ); +} + +function PrepFeedback({ q, inp, ok }) { + const motEx = q.ans === 'wechsel' ? wechselExample(q.prepKey, true) : null; + const locEx = q.ans === 'wechsel' ? wechselExample(q.prepKey, false) : null; + + return ( +

+ {ok ? <>✓ {CL[q.ans]} : <>✗ {CL[inp]||inp} → {CL[q.ans]}} +

+ „{q.prepKey}" → {q.ans === 'wechsel' ? 'Wechselpräposition (Akkusativ for motion, Dativ for location)' : `always ${CL[q.ans]}`} +

+ {q.ans !== 'wechsel' && ( +

+ Example: {q.example} ({q.prepEn} the {q.exampleEn}) +

+ )} + {q.ans === 'wechsel' && ( +

Motion: Er geht {motEx.de} (Akk) — "{motEx.en}"

Location: Er ist {locEx.de} (Dat) — "{locEx.en}"

+ )} +

+ ); +} + +function WechselContextFeedback({ q, inp, ok }) { + return ( +

+ {ok ? <>✓ {CL[q.ans]} : <>✗ {CL[inp]||inp} → {CL[q.ans]}} +

+ „{q.verb}" {q.isMotion ? 'implies motion (wohin?)' : 'implies location (wo?)'} → {CL[q.ans]} +

+ Wechselpräpositionen take Akkusativ with motion verbs (gehen, fahren, laufen, kommen) and Dativ with location verbs (sein, stehen, sitzen, warten). +

+ ); +} + +function ChunkFeedback({ q, inp, ok }) { + const article = DEF[q.noun.g][q.cas]; + return ( +

+ {ok + ? <>✓ {q.ans} + : <>✗ {inp} → {q.ans}} +

+ {q.contracts + ? <>{q.prepKey} + {article} = {q.ans} + : <>„{q.prepKey}" + {CL[q.cas]} → {q.ans}} +

+ {q.contracts + ? 'Preferred — these fuse, so use the contraction in speech and writing.' + : <>{article} doesn’t fuse with „{q.prepKey}" — keep them as two words.} +

+ ); +} + +function ContractionFeedback({ q, inp, ok }) { + return ( +

+ {ok + ? <>✓ {q.prep} + {q.art} = {q.ans} + : <>✗ {inp} → {q.ans}} +

+ {q.prep} + {q.art} = {q.ans} +

+ {q.pref + ? 'Preferred — use this contraction in both speech and writing.' + : 'Informal — common when speaking, but the two-word form is more usual in writing.'} +

+ ); +} + +function PronounFeedback({ q, inp, ok }) { + const cases = ['nominative','accusative','dative']; + const labels = { nominative:'Nom', accusative:'Acc', dative:'Dat' }; + const keys = { nominative:'nom', accusative:'acc', dative:'dat' }; + return ( +

+ {ok ? '✓ Correct' : <>✗ {inp} → {q.ans}} +

+ {q.pron.en} ({q.pron.tag}) — {CL[q.cas]} form +

+ + + + {cases.map(c => )} + + + + {cases.map(c => { + const hl = c === q.cas; + return ; + })} + +

{q.pron.nom}	{labels[c]}
{q.pron.en}	{q.pron[keys[c]]}

+ ); +} + +// ═══════════════════════════════════════════ +// CHART MODAL +// ═══════════════════════════════════════════ + +function ChartModal({ section, q, onClose }) { + const genders = ['masculine','feminine','neuter','plural']; + const cases = ['nominative','accusative','dative','genitive']; + + return ( +

e.stopPropagation()}> +

+ {section==='article'?'Articles':section==='prep'?'Prepositions':section==='poss'?'Possessives':section==='pronoun'?'Personal Pronouns':'Charts'} +

+ +

+ + {section === 'article' && <> +

All-in-One Declension Chart

Strong (S): no article carries the case. Weak (W): after a definite article.

+ + + + + {genders.map(g => )} + + + {genders.map(g => ( + + + + + ))} + + + + {cases.map(c => ( + + + {genders.map(g => { + const hl = q && (q.type==='article'||q.type==='poss') && c === q.cas && g === q.noun?.g; + return ( + + + + + ); + })} + + ))} + +

	{g}
S	W
{CL[c]}	{STRONG[g][c]}	{WEAK[g][c]}

Unbestimmter Artikel (ein/eine/kein)

+ +

Bestimmter Artikel (der/die/das)

+ +

+ } + + {section === 'prep' && ( +

Prepositions by Case

Akkusativ: durch, für, gegen, ohne, um, bis

Dativ: aus, außer, bei, gegenüber, mit, nach, seit, von, zu

Genitiv: trotz, während, wegen, statt, anstatt, außerhalb, innerhalb

Wechsel: an, auf, hinter, in, neben, über, unter, vor, zwischen

+ Wechsel: accusative for motion (wohin?), dative for location (wo?). +

+ )} + + {section === 'poss' && ( +

Possessive Determiners

+ {POSSESSIVES.map(p =>

{p.stem}- {p.en}

)} +

Endings follow the ein/kein pattern. euer drops to eur- when an ending is added.

+ +

+ )} + + {section === 'pronoun' && ( +

Personal Pronouns

+ +

+ )} + + +

+ ); +} + +function Frag2({ children }) { return <>{children}; } + +function SimpleChart({ table, highlightCase, highlightGender, active }) { + const genders = ['masculine','feminine','neuter','plural']; + const cases = ['nominative','accusative','dative','genitive']; + return ( + + {genders.map(g => )} + + {cases.map(c => ( + + + {genders.map(g => { + const hl = active && c === highlightCase && g === highlightGender; + return ; + })} + + ))} + +

	{g}
{CL[c]}	{table[g][c]}

+ ); +} + +function PossessiveChart({ highlightCase, highlightGender, active, highlightStem }) { + const genders = ['masculine','feminine','neuter','plural']; + const cases = ['nominative','accusative','dative','genitive']; + const stem = highlightStem || 'mein'; + return ( +

+ + + + {genders.map(g => )} + + + {cases.map(c => ( + + + {genders.map(g => { + const hl = active && c === highlightCase && g === highlightGender; + const display = combinePoss(stem, POSS_ENDINGS[g][c]); + return ; + })} + + ))} + +

	{g}
{CL[c]}	{display}

Showing forms for {stem}-. Same endings apply to all possessive bases.

+ ); +} + +function PronounsChartCombined({ highlightCase, highlightKey, active }) { + const cases = ['nominative','accusative','dative']; + const labels = { nominative:'Nom', accusative:'Acc', dative:'Dat' }; + const keys = { nominative:'nom', accusative:'acc', dative:'dat' }; + return ( + + + + + {cases.map(c => )} + + + {PRONOUNS.map((p, idx) => { + const sep = idx === 6; + return ( + + + + {cases.map(c => { + const hl = active && c === highlightCase && p.key === highlightKey; + return ; + })} + + ); + })} + +

english	person	{labels[c]}
{p.en}	{p.tag}	{p[keys[c]]}

+ ); +} + +// ═══════════════════════════════════════════ +// STYLES +// ═══════════════════════════════════════════ + +const S = { + wrap: { background:'#f7f7f7', minHeight:'100vh', color:'#1a1a1a', fontFamily:'"DM Sans",system-ui,sans-serif' }, + inner: { maxWidth:520, margin:'0 auto', padding:'16px 20px 100px' }, + + hdr: { display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 0 8px', position:'sticky', top:0, background:'#f7f7f7', zIndex:10 }, + logo: { fontSize:17, fontWeight:700, color:'#1a1a1a' }, + linkBtn: { background:'none', border:'none', color:'#999', fontSize:13, cursor:'pointer', padding:0, fontWeight:500, fontFamily:'inherit' }, + stat: { fontSize:13, color:'#999', fontWeight:500 }, + + tabs: { display:'flex', gap:0, borderBottom:'1px solid #eee', marginTop:6, marginBottom:12 }, + tab: { flex:1, background:'none', border:'none', padding:'12px 8px', cursor:'pointer', color:'#999', fontSize:13, fontWeight:600, fontFamily:'inherit', borderBottom:'2px solid transparent', marginBottom:-1, transition:'all 0.15s' }, + tabActive: { color:'#1a1a1a', borderBottomColor:GREEN }, + + lvRow: { display:'flex', alignItems:'center', gap:14, padding:'13px 16px', marginBottom:6, background:'#fff', borderRadius:10, border:'1px solid #eee' }, + lvName: { fontSize:14, fontWeight:700, color:'#1a1a1a' }, + lvDesc: { fontSize:12, color:'#999', marginTop:1 }, + lvPct: { fontSize:14, fontWeight:700 }, + chartLinkBtn: { width:'100%', padding:12, marginTop:20, background:'#fff', border:'1px solid #eee', borderRadius:10, color:'#888', fontSize:13, cursor:'pointer', fontFamily:'inherit' }, + + sentence: { fontSize:26, fontWeight:600, color:'#1a1a1a', lineHeight:1.5, margin:'0 0 10px', letterSpacing:'-0.3px' }, + blank: { display:'inline-block', minWidth:80, borderBottom:'2px solid', textAlign:'center', padding:'0 6px', margin:'0 2px', fontWeight:700, transition:'all 0.15s' }, + translation: { fontSize:14, color:'#999', marginBottom:10 }, + + keyInfo: { fontSize:16, color:'#333', fontWeight:600, marginBottom:4 }, + keyInfoMute: { color:'#aaa', fontWeight:400 }, + secondaryContext: { fontSize:12, color:'#aaa', marginBottom:16, lineHeight:1.5 }, + + inputWrap: { display:'flex', flexDirection:'column', alignItems:'center', gap:6 }, + inputRow: { display:'flex', gap:8, alignItems:'center' }, + input: { width:170, padding:'12px 14px', borderRadius:8, border:'1.5px solid #ddd', background:'#fff', color:'#1a1a1a', fontSize:18, fontWeight:600, outline:'none', textAlign:'center', fontFamily:'inherit' }, + checkBtn: { padding:'12px 20px', borderRadius:8, background:GREEN, color:'#fff', border:'none', fontSize:14, fontWeight:700, cursor:'pointer', fontFamily:'inherit' }, + hintText: { fontSize:11, color:'#bbb' }, + kbd: { background:'#f0f0f0', padding:'1px 5px', borderRadius:3, fontSize:10, color:'#888', border:'1px solid #e0e0e0' }, + kbdSmall: { background:'#f0f0f0', padding:'1px 4px', borderRadius:3, fontSize:9, color:'#888', border:'1px solid #e0e0e0' }, + + articleGrid: { display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, maxWidth:320, margin:'12px auto 0' }, + articleBtn: { padding:'18px 16px', borderRadius:10, border:'1.5px solid #ddd', background:'#fff', color:'#1a1a1a', cursor:'pointer', fontFamily:'inherit', textAlign:'center', transition:'all 0.12s' }, + + choiceBtn: { flex:'1 1 auto', minWidth:90, padding:'14px 16px', borderRadius:10, border:'1.5px solid', background:'#fff', color:'#1a1a1a', cursor:'pointer', fontSize:14, fontFamily:'inherit', textAlign:'center', transition:'all 0.12s' }, + + feedback: { textAlign:'left', background:'#fff', borderRadius:10, padding:'14px 18px', margin:'0 auto', maxWidth:400, border:'1px solid #eee' }, + + stripTbl: { width:'100%', borderCollapse:'collapse', marginTop:10 }, + stripH: { padding:'4px 6px', fontSize:10, fontWeight:600, textTransform:'uppercase', letterSpacing:0.3, color:'#bbb', textAlign:'center' }, + stripD: { padding:'6px', textAlign:'center', fontSize:13 }, + + dotsRow: { display:'flex', gap:5, justifyContent:'center', alignItems:'center', position:'fixed', bottom:20, left:0, right:0 }, + dotsLabel: { fontSize:11, color:'#aaa', marginLeft:10 }, + dot: { width:7, height:7, borderRadius:4, transition:'background 0.2s' }, + + nextBtn: { padding:'11px 22px', borderRadius:8, border:'none', background:GREEN, color:'#fff', fontSize:14, fontWeight:700, cursor:'pointer', fontFamily:'inherit' }, + + overlay: { position:'fixed', inset:0, background:'rgba(0,0,0,0.35)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:100, padding:16 }, + modal: { background:'#fff', borderRadius:14, padding:'22px 22px', maxWidth:520, width:'100%', maxHeight:'88vh', overflow:'auto', boxShadow:'0 8px 30px rgba(0,0,0,0.12)' }, + + chartH: { fontSize:13, fontWeight:700, color:'#1a1a1a', marginBottom:6 }, + fullChart: { width:'100%', borderCollapse:'collapse', fontSize:14 }, + fcTh: { padding:'6px 4px', fontSize:11, fontWeight:600, textAlign:'center', color:'#888', textTransform:'capitalize' }, + fcTd: { padding:'7px 4px', textAlign:'center', fontSize:14, borderBottom:'1px solid #f3f3f3' }, +}; diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 0000000..3d9da8a --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,9 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import App from './App.jsx' + +createRoot(document.getElementById('root')).render( + + + , +) diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..9ffcc67 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +export default defineConfig({ + plugins: [react()], +})