+ +

+ ) + } + + if (!user || !user.username || !user.language_native || !user.language_target) { + return + } + + const PageComponent = PAGES[page] || Feed + + return ( +

+ + +

+ ) +} + +export default function App() { + return ( + + + + ) +} diff --git a/src/BottomNav.css b/src/BottomNav.css new file mode 100644 index 0000000..f46db1b --- /dev/null +++ b/src/BottomNav.css @@ -0,0 +1,44 @@ +.bottom-nav { + display: flex; + background: #C4A882; + border-top: 1px solid #D4B896; + padding-bottom: env(safe-area-inset-bottom); +} + +.nav-item { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 10px 0; + border: none; + background: none; + cursor: pointer; + color: rgba(74, 55, 40, 0.45); + transition: color 0.2s; + gap: 3px; +} + +.nav-item.active { + color: #7A5C3A; +} + +.nav-icon { + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; +} + +.nav-icon svg { + width: 24px; + height: 24px; +} + +.nav-label { + font-family: 'Nunito', sans-serif; + font-size: 11px; + font-weight: 700; +} diff --git a/src/BottomNav.jsx b/src/BottomNav.jsx new file mode 100644 index 0000000..c9209e2 --- /dev/null +++ b/src/BottomNav.jsx @@ -0,0 +1,53 @@ +import './BottomNav.css' + +const IconHouse = () => ( + +) + +const IconPlay = () => ( + +) + +const IconMountain = () => ( + +) + +const IconGoal = () => ( + +) + +const tabs = [ + { id: 'feed', label: 'Feed', Icon: IconHouse }, + { id: 'game', label: 'Game', Icon: IconPlay }, + { id: 'pro', label: 'Pro', Icon: IconMountain }, + { id: 'profil', label: 'Profil', Icon: IconGoal }, +] + +export default function BottomNav({ active, onNavigate }) { + return ( + + ) +} diff --git a/src/api/directus.js b/src/api/directus.js new file mode 100644 index 0000000..32678c4 --- /dev/null +++ b/src/api/directus.js @@ -0,0 +1,270 @@ +const BASE = import.meta.env.VITE_DIRECTUS_URL + +const json = { 'Content-Type': 'application/json' } +const auth = (token) => ({ 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }) + +export async function login(email, password) { + const res = await fetch(`${BASE}/auth/login`, { + method: 'POST', + headers: json, + body: JSON.stringify({ email, password }), + }) + const data = await res.json() + if (!res.ok) throw new Error(data.errors?.[0]?.message || 'Login fehlgeschlagen.') + return data.data +} + +export async function getMe(userToken) { + const res = await fetch(`${BASE}/users/me?fields=id,username,language_native,language_target`, { + headers: auth(userToken), + }) + const data = await res.json() + if (!res.ok) throw new Error('Profil konnte nicht geladen werden.') + return data.data +} + +// Nutzt den öffentlichen Registrierungsendpunkt — kein Admin-Token nötig +export async function registerUser(email, password) { + const res = await fetch(`${BASE}/users/register`, { + method: 'POST', + headers: json, + body: JSON.stringify({ email, password }), + }) + if (res.status === 204) return null + const data = await res.json() + if (!res.ok) throw new Error(data.errors?.[0]?.message || 'Registrierung fehlgeschlagen.') + return data.data +} + +export async function checkUsername(username, userToken) { + const clean = username.toLowerCase().replace(/[^a-z0-9_]/g, '') + const res = await fetch( + `${BASE}/items/users_language?filter[username_lowercases][_eq]=${encodeURIComponent(clean)}&fields=id&limit=1`, + { headers: auth(userToken) } + ) + const data = await res.json() + return Array.isArray(data.data) && data.data.length === 0 +} + +export async function createProfile({ userId, username, nativeLang, targetLang, userToken }) { + const clean = username.toLowerCase().replace(/[^a-z0-9_]/g, '') + const h = auth(userToken) + + const profileRes = await fetch(`${BASE}/items/users_language`, { + method: 'POST', + headers: h, + body: JSON.stringify({ username_public: username, username_lowercases: clean }), + }) + const profileData = await profileRes.json() + if (!profileRes.ok) throw new Error(profileData.errors?.[0]?.message || 'Profil konnte nicht erstellt werden.') + const profileId = profileData.data.id + + await fetch(`${BASE}/users/${userId}`, { + method: 'PATCH', + headers: h, + body: JSON.stringify({ username: profileId, language_native: nativeLang, language_target: targetLang }), + }) + + await fetch(`${BASE}/items/users_language/${profileId}`, { + method: 'PATCH', + headers: h, + body: JSON.stringify({ user: userId }), + }) + + await fetch(`${BASE}/items/learning_pairs`, { + method: 'POST', + headers: h, + body: JSON.stringify({ user: profileId, language_from: nativeLang, language_to: targetLang, active: true, current_level: 1, points: 0 }), + }) + + return profileId +} + +const LANG_META = { + de: { flag: '🇩🇪', speech: 'de-DE' }, + en: { flag: '🇬🇧', speech: 'en-US' }, + se: { flag: '🇸🇪', speech: 'sv-SE' }, +} + +// Lädt Sprachen aus Directus (public, kein Token nötig) +export async function getLanguageOptions() { + const res = await fetch( + `${BASE}/items/language_options?filter[status][_eq]=published&fields=id,title_de,short&sort=title_en` + ) + const data = await res.json() + return (data.data || []).map(l => ({ + id: l.id, + label: l.title_de, + suffix: l.short, + ...(LANG_META[l.short] || { flag: '🌐', speech: l.short }), + })) +} + +export function langById(id, options) { + return (options || []).find(l => l.id === id) || null +} + +export async function getActiveLearningPair(profileId, userToken) { + const res = await fetch( + `${BASE}/items/learning_pairs?filter[user][_eq]=${profileId}&filter[active][_eq]=true` + + `&fields=id,language_from,language_to,current_level,points&limit=1`, + { headers: auth(userToken) } + ) + const data = await res.json() + return data.data?.[0] || null +} + +export async function getWords(userToken, limit = 100) { + const res = await fetch( + `${BASE}/items/words?filter[status][_eq]=published` + + `&fields=id,title_de,title_en,title_se,level&limit=${limit}`, + { headers: auth(userToken) } + ) + const data = await res.json() + return data.data || [] +} + +export async function getQuestions(userToken, limit = 100) { + const res = await fetch( + `${BASE}/items/questions?filter[status][_eq]=published` + + `&fields=id,question_de,question_en,question_se,answer_de,answer_en,answer_se,level,related_words.words_id` + + `&limit=${limit}`, + { headers: auth(userToken) } + ) + const data = await res.json() + return data.data || [] +} + +// Holt Progress für einen Nutzer, optional gefiltert auf eine Zielsprache +export async function getUserProgress(profileId, userToken, toLangId = null) { + let url = `${BASE}/items/user_progress?filter[user][_eq]=${profileId}` + + `&fields=id,word,question,card_type,result,language_from,language_to&limit=-1` + if (toLangId) url += `&filter[language_to][_eq]=${toLangId}` + const res = await fetch(url, { headers: auth(userToken) }) + const data = await res.json() + return data.data || [] +} + +export async function saveProgress(payload, userToken) { + const res = await fetch(`${BASE}/items/user_progress`, { + method: 'POST', + headers: auth(userToken), + body: JSON.stringify(payload), + }) + const data = await res.json() + if (!res.ok) return null + return data.data +} + +export async function addPointsToPair(pairId, newPoints, userToken) { + const res = await fetch(`${BASE}/items/learning_pairs/${pairId}`, { + method: 'PATCH', + headers: auth(userToken), + body: JSON.stringify({ points: newPoints }), + }) + return res.ok +} + +export async function addPointsToUser(userId, newTotal, userToken) { + const res = await fetch(`${BASE}/users/${userId}`, { + method: 'PATCH', + headers: auth(userToken), + body: JSON.stringify({ points_total: newTotal }), + }) + return res.ok +} + +// Asset-URL inkl. User-Token, da Directus Hetzner-Storage standardmäßig nicht öffentlich ist +export function assetUrl(fileId, userToken) { + if (!fileId) return null + const base = `${BASE}/assets/${fileId}` + return userToken ? `${base}?access_token=${encodeURIComponent(userToken)}` : base +} + +// Lädt qa_pairs (db_pairs) auf einem bestimmten Level und liefert pro Pair +// das zugehörige Bild + den fertig aufgelösten Statement-Satz zurück. +export async function getQAPairsAtLevel(level, userToken, langSuffix = 'de') { + const fields = [ + 'id', + 'picture.picture', + 'selections', + 'word_main.db_words_id.id', + 'word_main.db_words_id.titel_de', + 'word_main.db_words_id.titel_en', + 'word_main.db_words_id.titel_se', + 'pairs.db_pairs_id.id', + 'pairs.db_pairs_id.level', + 'pairs.db_pairs_id.status', + 'pairs.db_pairs_id.statement.db_statement_id.statement_de', + 'pairs.db_pairs_id.statement.db_statement_id.statement_en', + 'pairs.db_pairs_id.statement.db_statement_id.statement_se', + ].join(',') + + const filter = encodeURIComponent( + JSON.stringify({ pairs: { db_pairs_id: { level: { _eq: level } } } }) + ) + + const res = await fetch( + `${BASE}/items/db_objects?fields=${fields}&filter=${filter}&limit=-1`, + { headers: auth(userToken) } + ) + const data = await res.json() + if (!res.ok) return [] + + const statementKey = `statement_${langSuffix}` + const titelKey = `titel_${langSuffix}` + const result = [] + + for (const obj of data.data || []) { + const wordsById = {} + let primaryWord = '' + for (const w of obj.word_main || []) { + const word = w.db_words_id + if (!word) continue + const text = word[titelKey] || word.titel_de || '' + if (text) wordsById[word.id] = text + if (!primaryWord && text) primaryWord = text + } + + for (const p of obj.pairs || []) { + const pair = p.db_pairs_id + if (!pair) continue + if (pair.level !== level) continue + if (pair.status === 'archived') continue + + const stmtRow = pair.statement?.[0]?.db_statement_id + if (!stmtRow) continue + const raw = stmtRow[statementKey] || stmtRow.statement_de || '' + if (!raw) continue + + const statement = raw.replace(/\{([^}]+)\}/g, (_m, ref) => { + const parts = ref.split('.') + const wid = parts[parts.length - 1] + return wordsById[wid] || primaryWord + }) + + result.push({ + pairId: pair.id, + level: pair.level, + statement, + pictureFileId: obj.picture?.picture || null, + objectId: obj.id, + primaryWord, + selections: obj.selections || null, + }) + } + } + + return result +} + +export async function getProfilData(userToken) { + const res = await fetch( + `${BASE}/users/me?fields=id,username.id,username.username_public,` + + `language_native,language_target,points_total,streak_days`, + { headers: auth(userToken) } + ) + const data = await res.json() + if (!res.ok) throw new Error('Profil konnte nicht geladen werden.') + return data.data +} diff --git a/src/components/AudioQuizCard.css b/src/components/AudioQuizCard.css new file mode 100644 index 0000000..9785ddd --- /dev/null +++ b/src/components/AudioQuizCard.css @@ -0,0 +1,191 @@ +/* Dark card */ +.aq-card { background: #F5EFE6; } + +.aq-header { + background: #2C1A0E; +} + +.aq-points-pill { + background: #2C1A0E !important; + border-color: #4A3020 !important; + color: #C4A882 !important; +} + +/* Dark image area */ +.aq-image { + background: #2C1A0E; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 14px; + padding: 32px 20px 20px; + min-height: 220px; + cursor: pointer; +} + +/* Speaker ring */ +.aq-speaker-ring { + width: 100px; + height: 100px; + border-radius: 50%; + border: 2px solid rgba(196, 168, 130, 0.25); + display: flex; + align-items: center; + justify-content: center; + transition: border-color 0.3s; +} + +.aq-speaker-ring.aq-playing { + border-color: rgba(196, 168, 130, 0.6); + animation: aq-pulse 1.2s ease-in-out infinite; +} + +@keyframes aq-pulse { + 0%, 100% { box-shadow: 0 0 0 0 rgba(196, 168, 130, 0.15); } + 50% { box-shadow: 0 0 0 14px rgba(196, 168, 130, 0.05); } +} + +.aq-speaker-icon { + width: 68px; + height: 68px; + border-radius: 14px; + background: rgba(196, 168, 130, 0.08); + border: 1.5px solid rgba(196, 168, 130, 0.2); + display: flex; + align-items: center; + justify-content: center; +} + +/* Dots */ +.aq-dots { + display: flex; + gap: 5px; +} + +.aq-dot { + width: 5px; + height: 5px; + border-radius: 50%; + background: rgba(196, 168, 130, 0.3); +} + +/* Hint */ +.aq-tap-hint { + font-family: 'Nunito', sans-serif; + font-size: 12px; + color: rgba(196, 168, 130, 0.5); + letter-spacing: 0.02em; +} + +/* Question */ +.aq-question { + font-family: 'Nunito', sans-serif; + font-size: 15px; + font-weight: 700; + color: #4A3728; + margin-bottom: 14px; +} + +/* Options */ +.aq-options { + display: flex; + flex-direction: column; + gap: 8px; + margin-bottom: 16px; +} + +.aq-option { + display: flex; + align-items: center; + gap: 14px; + padding: 14px 16px; + border-radius: 14px; + background: #EDE0CE; + border: 1px solid transparent; + cursor: pointer; + text-align: left; + transition: background 0.15s, border-color 0.15s; +} + +.aq-option:hover { background: #D4C4AE; } + +.aq-option-label { + font-family: 'Nunito', sans-serif; + font-size: 12px; + font-weight: 700; + color: #8C7A65; + width: 16px; + flex-shrink: 0; +} + +.aq-option-text { + font-family: 'Nunito', sans-serif; + font-size: 14px; + font-weight: 600; + color: #4A3728; +} + +.aq-option-selected { + background: rgba(122, 92, 58, 0.12); + border-color: #7A5C3A; +} + +.aq-option-correct { + background: rgba(90, 122, 58, 0.12); + border-color: #5a7a3a; +} +.aq-option-correct .aq-option-label, +.aq-option-correct .aq-option-text { color: #3a5a1e; } + +.aq-option-wrong { + background: rgba(160, 90, 58, 0.12); + border-color: #a05a3a; +} +.aq-option-wrong .aq-option-label, +.aq-option-wrong .aq-option-text { color: #a05a3a; } + +.aq-option-reveal { + background: rgba(90, 122, 58, 0.08); + border-color: rgba(90, 122, 58, 0.4); +} + +/* Success / retry */ +.aq-success-bar { + display: flex; + justify-content: space-between; + align-items: center; + background: #EDE0CE; + border: 0.5px solid #D4B896; + border-radius: 12px; + padding: 12px 16px; +} + +.aq-success-left { + font-family: 'Nunito', sans-serif; + font-size: 13px; + font-weight: 700; + color: #4A3728; +} + +.aq-success-right { + font-family: 'Nunito', sans-serif; + font-size: 12px; + color: #8C7A65; +} + +.aq-retry-btn { + width: 100%; + padding: 13px; + border: none; + border-radius: 14px; + background: #7A5C3A; + color: #F5EFE6; + font-family: 'Nunito', sans-serif; + font-size: 14px; + font-weight: 700; + cursor: pointer; + transition: background 0.15s; +} + +.aq-retry-btn:hover { background: #4A3728; } diff --git a/src/components/AudioQuizCard.jsx b/src/components/AudioQuizCard.jsx new file mode 100644 index 0000000..3bf1b73 --- /dev/null +++ b/src/components/AudioQuizCard.jsx @@ -0,0 +1,106 @@ +import { useState, useRef } from 'react' +import './CardShared.css' +import './AudioQuizCard.css' +import { triggerConfetti } from '../utils/confetti' + +export default function AudioQuizCard({ card }) { + const [playing, setPlaying] = useState(false) + const [selected, setSelected] = useState(null) + const [status, setStatus] = useState('idle') // idle | correct | wrong + const timerRef = useRef(null) + + const playAudio = () => { + if (playing) return + setPlaying(true) + if (card.audioSrc) { + const audio = new Audio(card.audioSrc) + audio.play() + audio.onended = () => setPlaying(false) + } else { + // Simulate playback + timerRef.current = setTimeout(() => setPlaying(false), 1800) + } + } + + const pick = (id) => { + if (status === 'correct') return + setSelected(id) + const correct = id === card.correct + setStatus(correct ? 'correct' : 'wrong') + if (correct) triggerConfetti() + } + + const reset = () => { setSelected(null); setStatus('idle') } + + const optionClass = (id) => { + let cls = 'aq-option' + if (status === 'idle' && selected === id) cls += ' aq-option-selected' + if (status === 'correct' && id === card.correct) cls += ' aq-option-correct' + if (status === 'wrong' && id === selected) cls += ' aq-option-wrong' + if (status === 'wrong' && id === card.correct) cls += ' aq-option-reveal' + return cls + } + + return ( +

+ {card.language} + ★ +{card.points} Punkt +

+ +

+ {card.options.map((_, i) => ( + + ))} +

+ +

Tippe zum Abspielen

+ +

{card.prompt}

+ +

+ {card.options.map(opt => ( + + ))} +

+ +

+ + {status === 'correct' && ( +

+ ★ +{card.points} Punkt erhalten + Gesamt: {card.totalPoints} Punkte +

+ )} + {status === 'wrong' && ( + + )} +

+ ) +} diff --git a/src/components/CardShared.css b/src/components/CardShared.css new file mode 100644 index 0000000..eeb93a1 --- /dev/null +++ b/src/components/CardShared.css @@ -0,0 +1,114 @@ +/* Shared styles for all feed cards */ +.nw-card { + width: 100%; + max-width: 360px; + border-radius: 24px; + overflow: hidden; + border: 0.5px solid #D4B896; + box-shadow: 0 4px 24px rgba(74, 55, 40, 0.1); + background: #F5EFE6; +} + +/* Pills row above the image */ +.nw-card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 14px 10px; + background: #F5EFE6; +} + +.nw-lang-pill { + background: #7A5C3A; + color: #EDE0CE; + font-size: 12px; + font-weight: 700; + padding: 5px 12px; + border-radius: 99px; + font-family: 'Nunito', sans-serif; + letter-spacing: 0.03em; +} + +.nw-points-pill { + background: #F5EFE6; + color: #7A5C3A; + font-size: 12px; + font-weight: 700; + padding: 5px 12px; + border-radius: 99px; + border: 0.5px solid #D4B896; + font-family: 'Nunito', sans-serif; +} + +/* 1:1 square image area */ +.nw-image { + background: #C4A882; + position: relative; + width: 100%; + aspect-ratio: 1 / 1; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.nw-bubble { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -70%); + background: rgba(237, 224, 206, 0.55); + color: rgba(74, 55, 40, 0.7); + font-family: 'Lora', Georgia, serif; + font-size: 26px; + font-weight: 700; + width: 100px; + height: 100px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + backdrop-filter: blur(4px); +} + +.nw-content { + padding: 18px 20px 20px; +} + +.nw-word-row { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 12px; +} + +.nw-word { + font-family: 'Lora', Georgia, serif; + font-size: 28px; + font-weight: 700; + color: #4A3728; +} + +.nw-translation { + background: #D4B896; + color: #4A3728; + font-size: 12px; + font-weight: 600; + padding: 5px 12px; + border-radius: 99px; + font-family: 'Nunito', sans-serif; +} + +.nw-divider { + height: 0.5px; + background: #D4B896; + margin-bottom: 14px; +} + +.nw-label { + display: block; + font-size: 12px; + color: #8C7A65; + font-family: 'Nunito', sans-serif; + margin-bottom: 10px; +} diff --git a/src/components/ImagePickCard.css b/src/components/ImagePickCard.css new file mode 100644 index 0000000..44a94f6 --- /dev/null +++ b/src/components/ImagePickCard.css @@ -0,0 +1,95 @@ +.ip-image { + flex-direction: column; + justify-content: flex-end; + gap: 0; + padding-bottom: 12px; +} + +/* Pagination dots */ +.ip-dots { + display: flex; + gap: 5px; + margin-top: 10px; +} + +.ip-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: rgba(74, 55, 40, 0.25); + transition: background 0.2s; +} + +.ip-dot-active { + background: rgba(74, 55, 40, 0.7); +} + +/* Buttons */ +.ip-btn-row { + display: flex; + gap: 10px; +} + +.ip-btn { + flex: 1; + padding: 13px 8px; + border-radius: 14px; + border: 1px solid #D4B896; + background: #F5EFE6; + font-family: 'Nunito', sans-serif; + font-size: 14px; + font-weight: 700; + color: #8C7A65; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + transition: background 0.15s, color 0.15s; +} + +.ip-btn:disabled { + opacity: 0.4; + cursor: default; +} + +.ip-btn-ja { + background: #7A5C3A; + color: #F5EFE6; + border-color: #7A5C3A; +} + +.ip-btn-ja:hover:not(:disabled) { background: #4A3728; border-color: #4A3728; } +.ip-btn-nein:hover:not(:disabled) { background: #EDE0CE; } + +/* Feedback */ +.ip-wrong-text { + font-family: 'Nunito', sans-serif; + font-size: 12px; + color: #a05a3a; + margin-bottom: 10px; +} + +/* Success bar */ +.ip-success-bar { + display: flex; + justify-content: space-between; + align-items: center; + background: #EDE0CE; + border: 0.5px solid #D4B896; + border-radius: 12px; + padding: 12px 16px; +} + +.ip-success-left { + font-family: 'Nunito', sans-serif; + font-size: 13px; + font-weight: 700; + color: #4A3728; +} + +.ip-success-right { + font-family: 'Nunito', sans-serif; + font-size: 12px; + color: #8C7A65; +} diff --git a/src/components/ImagePickCard.jsx b/src/components/ImagePickCard.jsx new file mode 100644 index 0000000..ff4bccd --- /dev/null +++ b/src/components/ImagePickCard.jsx @@ -0,0 +1,125 @@ +import { useState } from 'react' +import './CardShared.css' +import './ImagePickCard.css' +import { triggerConfetti } from '../utils/confetti' + +const ILLUSTRATIONS = { + sofa: ( + + ), + lamp: ( + + ), + table: ( + + ), + chair: ( + + ), +} + +export default function ImagePickCard({ card }) { + const [index, setIndex] = useState(0) + const [status, setStatus] = useState('idle') // idle | correct | wrong + + const currentImage = card.images[index] + const isLast = index === card.images.length - 1 + + const handleJa = () => { + if (currentImage === card.correctImage) { + setStatus('correct') + triggerConfetti() + } else { + setStatus('wrong') + } + } + + const handleNein = () => { + if (status === 'wrong') setStatus('idle') + if (index < card.images.length - 1) { + setIndex(index + 1) + setStatus('idle') + } + } + + const reset = () => { setIndex(0); setStatus('idle') } + + return ( +

+ {card.language} + ★ +{card.points} Punkt +

+ +

+ {ILLUSTRATIONS[currentImage]} +

+ {card.images.map((_, i) => ( + + ))} +

+ +

+ {card.word} + {card.translation} +

{card.prompt}

+ + {status === 'correct' ? ( +

+ ★ +{card.points} Punkt erhalten + Gesamt: {card.totalPoints} Punkte +

+ ) : ( + <> + {status === 'wrong' && ( +

Das ist nicht richtig — weiter suchen!

+ )} +

+ + +

+ + )} +

+ ) +} diff --git a/src/components/ImageQuizCard.css b/src/components/ImageQuizCard.css new file mode 100644 index 0000000..9136852 --- /dev/null +++ b/src/components/ImageQuizCard.css @@ -0,0 +1,140 @@ +.iq-image { + flex-direction: column; + gap: 0; +} + +.iq-scene-label { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-family: 'Lora', Georgia, serif; + font-size: 22px; + font-weight: 700; + color: rgba(74, 55, 40, 0.55); + letter-spacing: 0.01em; + z-index: 1; + pointer-events: none; +} + +/* Question row */ +.iq-question-row { + display: flex; + align-items: baseline; + gap: 8px; + margin-bottom: 14px; +} + +.iq-question { + font-family: 'Nunito', sans-serif; + font-size: 15px; + font-weight: 700; + color: #4A3728; +} + +.iq-hint { + font-family: 'Nunito', sans-serif; + font-size: 12px; + color: #8C7A65; +} + +/* Chip grid */ +.iq-chips { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 16px; +} + +.iq-chip { + font-family: 'Nunito', sans-serif; + font-size: 14px; + font-weight: 600; + color: #4A3728; + background: transparent; + border: 1.5px solid #C4A882; + border-radius: 99px; + padding: 7px 16px; + cursor: pointer; + transition: background 0.15s, border-color 0.15s, color 0.15s; +} + +.iq-chip:hover { + background: rgba(196, 168, 130, 0.15); +} + +.iq-chip-selected { + background: rgba(122, 92, 58, 0.12); + border-color: #7A5C3A; + color: #4A3728; +} + +.iq-chip-correct { + background: rgba(90, 122, 58, 0.12); + border-color: #5a7a3a; + color: #3a5a1e; +} + +.iq-chip-wrong { + background: rgba(160, 90, 58, 0.12); + border-color: #a05a3a; + color: #a05a3a; +} + +/* Confirm button */ +.iq-confirm-btn { + width: 100%; + padding: 14px; + border: none; + border-radius: 14px; + background: #7A5C3A; + color: #F5EFE6; + font-family: 'Nunito', sans-serif; + font-size: 15px; + font-weight: 700; + cursor: pointer; + transition: background 0.15s; +} + +.iq-confirm-btn:hover:not(.iq-confirm-disabled) { + background: #4A3728; +} + +.iq-confirm-btn.iq-confirm-disabled { + background: #D4B896; + color: #8C7A65; + cursor: default; +} + +/* Feedback text */ +.iq-feedback { + font-size: 12px; + font-family: 'Nunito', sans-serif; + margin-bottom: 10px; +} + +.iq-wrong-text { color: #a05a3a; } + +/* Success bar */ +.iq-success-bar { + display: flex; + justify-content: space-between; + align-items: center; + background: #EDE0CE; + border: 0.5px solid #D4B896; + border-radius: 12px; + padding: 12px 16px; +} + +.iq-success-left { + font-size: 13px; + font-weight: 700; + color: #4A3728; + font-family: 'Nunito', sans-serif; +} + +.iq-success-right { + font-size: 12px; + color: #8C7A65; + font-family: 'Nunito', sans-serif; +} diff --git a/src/components/ImageQuizCard.jsx b/src/components/ImageQuizCard.jsx new file mode 100644 index 0000000..0f77bbf --- /dev/null +++ b/src/components/ImageQuizCard.jsx @@ -0,0 +1,110 @@ +import { useState } from 'react' +import './CardShared.css' +import './ImageQuizCard.css' +import { triggerConfetti } from '../utils/confetti' + +function LivingRoomIllustration() { + return ( + + ) +} + +export default function ImageQuizCard({ card }) { + const [selected, setSelected] = useState([]) + const [status, setStatus] = useState('idle') // idle | correct | wrong + + const toggle = (word) => { + if (status !== 'idle') return + setSelected(prev => + prev.includes(word) ? prev.filter(w => w !== word) : [...prev, word] + ) + } + + const confirm = () => { + if (selected.length === 0) return + const isCorrect = + selected.length === card.correct.length && + selected.every(w => card.correct.includes(w)) + setStatus(isCorrect ? 'correct' : 'wrong') + if (isCorrect) triggerConfetti() + } + + const reset = () => { setSelected([]); setStatus('idle') } + + return ( +

+ {card.language} + ★ +{card.points} Punkt +

+ +

+ {card.scene} + +

+ +

+ {card.prompt} + Mehrere möglich +

+ +

+ {card.choices.map(word => { + const isSelected = selected.includes(word) + const isCorrectWord = card.correct.includes(word) + let chipClass = 'iq-chip' + if (status === 'correct' && isCorrectWord) chipClass += ' iq-chip-correct' + else if (status === 'wrong' && isSelected && !isCorrectWord) chipClass += ' iq-chip-wrong' + else if (isSelected) chipClass += ' iq-chip-selected' + return ( + + ) + })} +

+ +

+ + {status === 'correct' ? ( +

+ ★ +{card.points} Punkt erhalten + Gesamt: {card.totalPoints} Punkte +

+ ) : ( + <> + {status === 'wrong' && ( +

Nicht alle richtig — versuch es nochmal.

+ )} + + + )} +

+ ) +} diff --git a/src/components/LanguageParentCard.css b/src/components/LanguageParentCard.css new file mode 100644 index 0000000..bf4a076 --- /dev/null +++ b/src/components/LanguageParentCard.css @@ -0,0 +1,145 @@ +.lp-card { background: #F5EFE6; } + +/* 1:1 Bild */ +.lp-image { + width: 100%; + aspect-ratio: 1 / 1; + background: #C4A882; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.lp-image img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +/* Polygon-Overlay: liegt deckungsgleich über dem Bild */ +.lp-overlay { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.lp-polygon { + fill: rgba(255, 236, 170, 0.45); + stroke: #FFD86B; + stroke-width: 5; + stroke-linejoin: round; + stroke-dasharray: 18 7; + vector-effect: non-scaling-stroke; + opacity: 0; +} + +.lp-overlay-on .lp-polygon { + animation: + lp-flash 1.9s ease-out forwards, + lp-shimmer 0.45s linear infinite; +} + +@keyframes lp-flash { + 0% { opacity: 0; filter: none; } + 7% { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 216, 107, 1)) + drop-shadow(0 0 22px rgba(255, 216, 107, 0.9)) + drop-shadow(0 0 44px rgba(255, 195, 30, 0.75)); } + 32% { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 216, 107, 0.85)) + drop-shadow(0 0 16px rgba(255, 216, 107, 0.55)); } + 78% { opacity: 0.4; filter: drop-shadow(0 0 4px rgba(255, 216, 107, 0.4)); } + 100% { opacity: 0; filter: none; } +} + +@keyframes lp-shimmer { + to { stroke-dashoffset: -25; } +} + +.lp-image-fallback { + font-size: 56px; + color: rgba(74, 55, 40, 0.4); +} + +.lp-statement { + font-family: 'Lora', Georgia, serif; + font-size: 20px; + font-weight: 700; + color: #4A3728; + line-height: 1.35; + margin: 4px 0 14px; +} + +/* Buttons-Reihe: Lautsprecher + Mikro */ +.lp-actions { + display: flex; + gap: 12px; + align-items: stretch; +} + +.lp-btn { + flex: 1; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + height: 52px; + border-radius: 12px; + background: #F5EFE6; + border: 1px solid #D4B896; + color: #7A5C3A; + font-family: 'Nunito', sans-serif; + font-size: 14px; + font-weight: 700; + cursor: pointer; + position: relative; + overflow: visible; + transition: background 0.15s, border-color 0.15s, transform 0.15s; +} + +.lp-btn:hover { background: #EDE0CE; } +.lp-btn:active { transform: scale(0.98); } + +.lp-btn-stt.lp-listening { + border-color: #7A5C3A; + background: #EDE0CE; +} + +.lp-btn-stt.lp-wrong { + border-color: #c0826a; +} + +.lp-pulse { + position: absolute; + inset: -6px; + border-radius: 16px; + border: 2px solid #7A5C3A; + animation: lp-pulse 1.2s ease-out infinite; + pointer-events: none; +} + +@keyframes lp-pulse { + 0% { opacity: 0.7; transform: scale(1); } + 100% { opacity: 0; transform: scale(1.2); } +} + +.lp-hint { + margin-top: 10px; + font-size: 13px; + color: #7A5C3A; + font-family: 'Nunito', sans-serif; + font-weight: 600; +} + +.lp-feedback { + margin-top: 10px; + font-size: 13px; + font-family: 'Nunito', sans-serif; + font-weight: 700; +} + +.lp-wrong-text { color: #a05a3a; } +.lp-correct-text { color: #5a7a3a; } diff --git a/src/components/LanguageParentCard.jsx b/src/components/LanguageParentCard.jsx new file mode 100644 index 0000000..3b4e70a --- /dev/null +++ b/src/components/LanguageParentCard.jsx @@ -0,0 +1,222 @@ +import { useState, useRef } from 'react' +import './CardShared.css' +import './NewWordVoiceCard.css' +import './LanguageParentCard.css' +import { triggerConfetti } from '../utils/confetti' + +function normalize(s) { + return (s || '') + .toLowerCase() + .normalize('NFD') + .replace(/[̀-ͯ]/g, '') + .replace(/[^\p{L}\p{N}\s]/gu, ' ') + .replace(/\s+/g, ' ') + .trim() +} + +function similarity(a, b) { + const A = normalize(a) + const B = normalize(b) + if (!A || !B) return 0 + if (A === B) return 1 + const wa = A.split(' ') + const wb = new Set(B.split(' ')) + let hits = 0 + for (const w of wa) if (wb.has(w)) hits++ + return hits / Math.max(wa.length, wb.size) +} + +export default function LanguageParentCard({ card, onComplete }) { + const [status, setStatus] = useState('idle') // idle | listening | correct | wrong + const [heard, setHeard] = useState('') + const [imgSize, setImgSize] = useState(null) // { w, h } natural image dims + const [highlight, setHighlight] = useState(false) + const recognitionRef = useRef(null) + const reportedRef = useRef(false) + const speakGenRef = useRef(0) + + const polygon = (() => { + const sel = card.selections?.[0] + if (!sel) return null + if (sel.mode === 'polygon' && Array.isArray(sel.polygon)) return sel.polygon + if (Array.isArray(sel.points)) return sel.points + return null + })() + + const report = (result) => { + if (reportedRef.current) return + reportedRef.current = true + onComplete?.(result) + } + + const speak = () => { + // Eigener Generationszähler: nur der jeweils letzte Aufruf darf den Glow am Ende abschalten + const gen = ++speakGenRef.current + const start = performance.now() + const minMs = 1400 + setHighlight(true) + + const finish = () => { + if (speakGenRef.current !== gen) return // ein neuerer Klick läuft schon + const elapsed = performance.now() - start + const wait = Math.max(0, minMs - elapsed) + setTimeout(() => { + if (speakGenRef.current === gen) setHighlight(false) + }, wait) + } + + if (!('speechSynthesis' in window)) { + finish() + return + } + window.speechSynthesis.cancel() + const u = new SpeechSynthesisUtterance(card.statement) + u.lang = card.speechLang || 'de-DE' + u.rate = 0.70 + u.onend = finish + u.onerror = finish + window.speechSynthesis.speak(u) + // Fallback, falls onend nicht feuert (manche Engines) + setTimeout(finish, 6000) + } + + const startListening = () => { + const SR = window.SpeechRecognition || window.webkitSpeechRecognition + if (!SR) { + setStatus('listening') + setTimeout(() => { setStatus('correct'); triggerConfetti(); report('correct') }, 1500) + return + } + const rec = new SR() + rec.lang = card.speechLang || 'de-DE' + rec.interimResults = false + rec.maxAlternatives = 3 + recognitionRef.current = rec + + setStatus('listening') + setHeard('') + + rec.onresult = (e) => { + const alts = Array.from(e.results[0]).map(r => r.transcript.trim()) + let best = 0 + let bestText = alts[0] || '' + for (const a of alts) { + const s = similarity(a, card.statement) + if (s > best) { best = s; bestText = a } + } + setHeard(bestText) + if (best >= 0.7) { + setStatus('correct') + triggerConfetti() + report('correct') + } else { + setStatus('wrong') + } + } + rec.onerror = () => setStatus('wrong') + rec.onend = () => { if (status === 'listening') setStatus(prev => prev === 'listening' ? 'wrong' : prev) } + try { rec.start() } catch { setStatus('idle') } + } + + const reset = () => { + recognitionRef.current?.abort() + setStatus('idle') + setHeard('') + } + + return ( +

+ {card.language} + ★ +{card.points} Punkt +

+ +

+ {card.imageUrl ? ( + <> + {card.primaryWord

setImgSize({ w: e.currentTarget.naturalWidth, h: e.currentTarget.naturalHeight })} + /> + {polygon && imgSize && ( + + )} + + ) : ( + + )} +

+ +

{card.statement}

+ +

+ + {status !== 'correct' ? ( + <> +

+ + + +

+ + {status === 'listening' &&

Ich höre dir zu …

} + {status === 'wrong' && ( +

+ {heard ? <>Verstanden: „{heard}" — versuch's nochmal. : <>Nicht erkannt — versuch's nochmal.} +

+ )} + + ) : ( + <> +

Perfekt! 🎉

+ ★ +{card.points} Punkt erhalten + Gesamt: {card.totalPoints} Punkte +

+ + )} +

+ ) +} diff --git a/src/components/LetterOrderCard.css b/src/components/LetterOrderCard.css new file mode 100644 index 0000000..afe7554 --- /dev/null +++ b/src/components/LetterOrderCard.css @@ -0,0 +1,129 @@ +.lo-prompt-row { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 12px; + margin-bottom: 14px; +} + +.lo-prompt { + font-family: 'Nunito', sans-serif; + font-size: 13px; + color: #8C7A65; + line-height: 1.5; + flex: 1; +} + +/* Answer slot */ +.lo-answer-area { + display: flex; + flex-wrap: wrap; + gap: 6px; + min-height: 52px; + border: 1.5px solid #D4B896; + border-radius: 14px; + padding: 10px 12px; + margin-bottom: 14px; + transition: border-color 0.2s; + background: rgba(255,255,255,0.4); +} + +.lo-answer-correct { border-color: #5a7a3a; background: rgba(90,122,58,0.06); } +.lo-answer-wrong { border-color: #c0826a; background: rgba(160,90,58,0.06); } + +/* Chips */ +.lo-chip { + width: 38px; + height: 38px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + font-family: 'Lora', Georgia, serif; + font-size: 17px; + font-weight: 700; +} + +.lo-chip-placed { + background: #7A5C3A; + color: #F5EFE6; +} + +.lo-chip-available { + background: #7A5C3A; + color: #F5EFE6; + border: none; + cursor: pointer; + transition: background 0.15s, transform 0.1s; +} + +.lo-chip-available:hover { background: #4A3728; } +.lo-chip-available:active { transform: scale(0.93); } + +/* Available letters row */ +.lo-available { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-bottom: 12px; + min-height: 38px; +} + +/* Back / Reset button */ +.lo-back-btn { + font-family: 'Nunito', sans-serif; + font-size: 13px; + font-weight: 700; + color: #7A5C3A; + background: transparent; + border: none; + cursor: pointer; + padding: 2px 0; + opacity: 1; + transition: opacity 0.15s; +} + +.lo-back-btn.lo-back-disabled { + opacity: 0.35; + cursor: default; +} + +/* Feedback */ +.lo-wrong-text { + font-family: 'Nunito', sans-serif; + font-size: 12px; + color: #a05a3a; + margin-bottom: 8px; +} + +/* Success */ +.lo-success-text { + font-family: 'Nunito', sans-serif; + font-size: 14px; + font-weight: 700; + color: #5a7a3a; + margin-bottom: 12px; +} + +.lo-success-bar { + display: flex; + justify-content: space-between; + align-items: center; + background: #EDE0CE; + border: 0.5px solid #D4B896; + border-radius: 12px; + padding: 12px 16px; +} + +.lo-success-left { + font-family: 'Nunito', sans-serif; + font-size: 13px; + font-weight: 700; + color: #4A3728; +} + +.lo-success-right { + font-family: 'Nunito', sans-serif; + font-size: 12px; + color: #8C7A65; +} diff --git a/src/components/LetterOrderCard.jsx b/src/components/LetterOrderCard.jsx new file mode 100644 index 0000000..e53e6e6 --- /dev/null +++ b/src/components/LetterOrderCard.jsx @@ -0,0 +1,131 @@ +import { useState, useMemo, useRef } from 'react' +import './CardShared.css' +import './LetterOrderCard.css' +import { triggerConfetti } from '../utils/confetti' + +function shuffle(arr) { + const a = [...arr] + for (let i = a.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [a[i], a[j]] = [a[j], a[i]] + } + return a +} + +function SofaIllustration() { + return ( + + ) +} + +export default function LetterOrderCard({ card, onComplete }) { + const scrambled = useMemo(() => shuffle(card.word.split('')), [card.word]) + const [placed, setPlaced] = useState([]) + const [available, setAvailable] = useState(scrambled) + const [status, setStatus] = useState('idle') // idle | correct | wrong + const reportedRef = useRef(false) + + const report = (result) => { + if (reportedRef.current) return + reportedRef.current = true + onComplete?.(result) + } + + const placeLetter = (idx) => { + if (status === 'correct') return + const letter = available[idx] + const newPlaced = [...placed, letter] + const newAvailable = available.filter((_, i) => i !== idx) + + if (newPlaced.length === card.word.length) { + const correct = newPlaced.join('') === card.word + setPlaced(newPlaced) + setAvailable(newAvailable) + setStatus(correct ? 'correct' : 'wrong') + if (correct) { triggerConfetti(); report('correct') } + } else { + setPlaced(newPlaced) + setAvailable(newAvailable) + } + } + + const removeLast = () => { + if (placed.length === 0) return + const letter = placed[placed.length - 1] + setPlaced(placed.slice(0, -1)) + setAvailable([...available, letter]) + setStatus('idle') + } + + const reset = () => { + setPlaced([]) + setAvailable(scrambled) + setStatus('idle') + } + + return ( +

+ {card.language} + ★ +{card.points} Punkt +

+ +

+ {card.prompt} + {card.translation} +

+ +

+ {placed.map((letter, i) => ( + {letter} + ))} +

+ +

+ + {status === 'correct' ? ( + <> +

Perfekt! Bra jobbat!

+ ★ +{card.points} Punkt erhalten + Gesamt: {card.totalPoints} Punkte +

+ + ) : ( + <> +

+ {available.map((letter, i) => ( + + ))} +

+ {status === 'wrong' && ( +

Nicht ganz — versuch es nochmal.

+ )} + + + )} +

+ ) +} diff --git a/src/components/NewWordTextCard.css b/src/components/NewWordTextCard.css new file mode 100644 index 0000000..1e34ebb --- /dev/null +++ b/src/components/NewWordTextCard.css @@ -0,0 +1,77 @@ +.nwt-input-row { + display: flex; + align-items: center; + gap: 8px; + background: #fff; + border: 1px solid #D4B896; + border-radius: 12px; + padding: 4px 6px 4px 12px; + transition: border-color 0.2s; +} + +.nwt-input-row.nwt-wrong { + border-color: #c0826a; +} + +.nwt-input { + flex: 1; + border: none; + outline: none; + background: transparent; + font-family: 'Lora', Georgia, serif; + font-size: 16px; + color: #4A3728; + padding: 6px 0; +} + +.nwt-input::placeholder { + color: rgba(74, 55, 40, 0.3); +} + +.nwt-submit-btn { + width: 36px; + height: 36px; + border-radius: 8px; + background: #7A5C3A; + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: #F5EFE6; + flex-shrink: 0; + transition: background 0.15s; +} + +.nwt-submit-btn:hover { background: #4A3728; } + +.nwt-feedback { + font-size: 12px; + font-family: 'Nunito', sans-serif; + margin-top: 8px; +} + +.nwt-wrong-text { color: #a05a3a; } + +.nwt-success-bar { + display: flex; + justify-content: space-between; + align-items: center; + background: #EDE0CE; + border: 0.5px solid #D4B896; + border-radius: 12px; + padding: 12px 16px; +} + +.nwt-success-left { + font-size: 13px; + font-weight: 700; + color: #4A3728; + font-family: 'Nunito', sans-serif; +} + +.nwt-success-right { + font-size: 12px; + color: #8C7A65; + font-family: 'Nunito', sans-serif; +} diff --git a/src/components/NewWordTextCard.jsx b/src/components/NewWordTextCard.jsx new file mode 100644 index 0000000..42e12e2 --- /dev/null +++ b/src/components/NewWordTextCard.jsx @@ -0,0 +1,80 @@ +import { useState, useRef } from 'react' +import './CardShared.css' +import './NewWordTextCard.css' +import TableIllustration from './TableIllustration' +import { triggerConfetti } from '../utils/confetti' + +export default function NewWordTextCard({ card, onComplete }) { + const [input, setInput] = useState('') + const [status, setStatus] = useState('idle') // idle | correct | wrong + const reportedRef = useRef(false) + + const report = (result) => { + if (reportedRef.current) return + reportedRef.current = true + onComplete?.(result) + } + + const check = () => { + if (!input.trim()) return + const correct = input.trim().toLowerCase() === card.word.toLowerCase() + setStatus(correct ? 'correct' : 'wrong') + if (correct) { + triggerConfetti() + report('correct') + } + } + + const reset = () => { setInput(''); setStatus('idle') } + + return ( +

+ {card.language} + ★ +{card.points} Punkt +

{card.baseForm}

+ +

+ {card.word} + {card.translation} +

+ + {status !== 'correct' ? ( + <> + {card.prompt} +

+ setInput(e.target.value)} + onKeyDown={(e) => e.key === 'Enter' && check()} + placeholder={`${card.word} …`} + autoCorrect="off" autoCapitalize="none" spellCheck={false} + /> + +

+ {status === 'wrong' && ( +

Nicht ganz — versuch es nochmal.

+ )} + + ) : ( +

+ ★ +{card.points} Punkt erhalten + Gesamt: {card.totalPoints} Punkte +

+ )} +

+ ) +} diff --git a/src/components/NewWordVoiceCard.css b/src/components/NewWordVoiceCard.css new file mode 100644 index 0000000..946ed94 --- /dev/null +++ b/src/components/NewWordVoiceCard.css @@ -0,0 +1,95 @@ +.nwv-mic-row { + display: flex; + align-items: center; + gap: 14px; + min-height: 52px; +} + +.nwv-mic-btn { + width: 52px; + height: 52px; + border-radius: 12px; + background: #F5EFE6; + border: 1px solid #D4B896; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: #7A5C3A; + flex-shrink: 0; + position: relative; + transition: background 0.15s, border-color 0.15s; + overflow: visible; +} + +.nwv-mic-btn:hover { background: #EDE0CE; } + +.nwv-mic-btn.nwv-listening { + border-color: #7A5C3A; + background: #EDE0CE; +} + +.nwv-mic-btn.nwv-wrong { + border-color: #c0826a; +} + +.nwv-mic-btn.nwv-done { + border-color: #5a7a3a; + color: #5a7a3a; + cursor: default; +} + +/* Pulse animation when listening */ +.nwv-pulse-ring { + position: absolute; + inset: -6px; + border-radius: 16px; + border: 2px solid #7A5C3A; + animation: mic-pulse 1.2s ease-out infinite; + pointer-events: none; +} + +@keyframes mic-pulse { + 0% { opacity: 0.7; transform: scale(1); } + 100% { opacity: 0; transform: scale(1.25); } +} + +.nwv-hint { + font-size: 13px; + color: #7A5C3A; + font-family: 'Nunito', sans-serif; + font-weight: 600; +} + +.nwv-feedback { + font-size: 13px; + font-family: 'Nunito', sans-serif; + font-weight: 700; +} + +.nwv-wrong-text { color: #a05a3a; } +.nwv-correct-text { color: #5a7a3a; } + +.nwv-success-bar { + display: flex; + justify-content: space-between; + align-items: center; + background: #EDE0CE; + border: 0.5px solid #D4B896; + border-radius: 12px; + padding: 12px 16px; + margin-top: 14px; +} + +.nwv-success-left { + font-size: 13px; + font-weight: 700; + color: #4A3728; + font-family: 'Nunito', sans-serif; +} + +.nwv-success-right { + font-size: 12px; + color: #8C7A65; + font-family: 'Nunito', sans-serif; +} diff --git a/src/components/NewWordVoiceCard.jsx b/src/components/NewWordVoiceCard.jsx new file mode 100644 index 0000000..2deb7c9 --- /dev/null +++ b/src/components/NewWordVoiceCard.jsx @@ -0,0 +1,128 @@ +import { useState, useRef } from 'react' +import './CardShared.css' +import './NewWordVoiceCard.css' +import TableIllustration from './TableIllustration' +import { triggerConfetti } from '../utils/confetti' + +export default function NewWordVoiceCard({ card, onComplete }) { + const [status, setStatus] = useState('idle') // idle | listening | correct | wrong + const recognitionRef = useRef(null) + const reportedRef = useRef(false) + + const report = (result) => { + if (reportedRef.current) return + reportedRef.current = true + onComplete?.(result) + } + + const startListening = () => { + const SR = window.SpeechRecognition || window.webkitSpeechRecognition + if (!SR) { + // Simulate for browsers without speech API + setStatus('listening') + setTimeout(() => { setStatus('correct'); triggerConfetti(); report('correct') }, 2000) + return + } + + const rec = new SR() + rec.lang = card.speechLang || 'sv-SE' + rec.interimResults = false + rec.maxAlternatives = 3 + recognitionRef.current = rec + + setStatus('listening') + + rec.onresult = (e) => { + const heard = Array.from(e.results[0]) + .map((r) => r.transcript.trim().toLowerCase()) + const target = card.word.toLowerCase() + const correct = heard.some((h) => h === target || h.includes(target)) + setStatus(correct ? 'correct' : 'wrong') + if (correct) { triggerConfetti(); report('correct') } + } + + rec.onerror = () => setStatus('wrong') + rec.onend = () => { if (status === 'listening') setStatus('wrong') } + rec.start() + } + + const reset = () => { + recognitionRef.current?.abort() + setStatus('idle') + } + + return ( +

+ {card.language} + ★ +{card.points} Punkt +

{card.baseForm}

+ +

+ {card.word} + {card.translation} +

+ + {status !== 'correct' ? ( + <> + {card.prompt} +

+ + + {status === 'listening' && ( +

Hören …

+ )} + {status === 'wrong' && ( +

Nicht erkannt — versuch es nochmal.

+ )} + {status === 'correct' && ( +

Bra! Aussprache erkannt.

+ )} +

+ + ) : ( + <> + {card.prompt} +

+ +

Bra! Aussprache erkannt.

+ ★ +{card.points} Punkt erhalten + Gesamt: {card.totalPoints} Punkte +

+ + )} +

+ ) +} diff --git a/src/components/SentenceFillCard.jsx b/src/components/SentenceFillCard.jsx new file mode 100644 index 0000000..75734bf --- /dev/null +++ b/src/components/SentenceFillCard.jsx @@ -0,0 +1,97 @@ +import { useState, useRef } from 'react' +import './CardShared.css' +import './NewWordTextCard.css' +import { triggerConfetti } from '../utils/confetti' + +export default function SentenceFillCard({ card, onComplete }) { + const [input, setInput] = useState('') + const [status, setStatus] = useState('idle') // idle | correct | wrong + const [revealed, setRevealed] = useState(false) + const reportedRef = useRef(false) + + const report = (result) => { + if (reportedRef.current) return + reportedRef.current = true + onComplete?.(result) + } + + const check = () => { + if (!input.trim()) return + const correct = input.trim().toLowerCase() === card.word.toLowerCase() + setStatus(correct ? 'correct' : 'wrong') + if (correct) { + triggerConfetti() + report('correct') + } + } + + return ( +

+ {card.language} + ★ +{card.points} Punkt +

+ +

+ Frage +

+ {card.translation} +

+ +

+ + {status !== 'correct' ? ( + <> + {card.prompt} +

+ setInput(e.target.value)} + onKeyDown={(e) => e.key === 'Enter' && check()} + placeholder="Deine Antwort …" + autoCorrect="off" autoCapitalize="none" spellCheck={false} + /> + +

+ {status === 'wrong' && ( + <> +

Nicht ganz — versuch es nochmal.

+ {!revealed ? ( + + ) : ( +

+ Lösung: {card.word} +

+ )} + + )} + + ) : ( +

+ ★ +{card.points} Punkt erhalten + Gesamt: {card.totalPoints} Punkte +

+ )} +

+ ) +} diff --git a/src/components/TableIllustration.jsx b/src/components/TableIllustration.jsx new file mode 100644 index 0000000..fa38b86 --- /dev/null +++ b/src/components/TableIllustration.jsx @@ -0,0 +1,11 @@ +export default function TableIllustration() { + return ( + + ) +} diff --git a/src/components/auth/AuthScreen.jsx b/src/components/auth/AuthScreen.jsx new file mode 100644 index 0000000..b381a73 --- /dev/null +++ b/src/components/auth/AuthScreen.jsx @@ -0,0 +1,90 @@ +import { useState } from 'react' +import LoginForm from './LoginForm' +import RegisterStep1 from './RegisterStep1' +import RegisterStep2 from './RegisterStep2' + +const css = ` + :root { + --bg: #F5F0E8; --surface: #FFFCF7; --border: #E2DAD0; + --text: #2C2520; --muted: #9A8F85; --accent: #5C7A5E; + --accent-lt: #EAF0EA; --danger: #C0544A; --danger-lt: #FBF0EF; + --radius: 14px; + } + @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap'); + @keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } +` + +export default function AuthScreen() { + const [mode, setMode] = useState(() => localStorage.getItem('hejyou_last_mode') || 'login') + const [step, setStep] = useState('main') + const [pendingUserId, setPendingUserId] = useState(null) + const [pendingToken, setPendingToken] = useState(null) + const [successName, setSuccessName] = useState('') + + const handleModeChange = (m) => { + setMode(m); localStorage.setItem('hejyou_last_mode', m); setStep('main') + } + + const handleNeedsProfile = (userId, token) => { + setPendingUserId(userId); setPendingToken(token); setStep('profile') + } + + return ( + <> + +

+ + {/* Brand */} +

+ +

HejYou

Sprachen lernen wie ein Kind

+ + {/* Toggle */} + {step === 'main' && ( +

+ {['login', 'register'].map(m => ( + + ))} +

+ )} + + {/* Screens */} + {step === 'main' && mode === 'login' && } + {step === 'main' && mode === 'register' && handleNeedsProfile(id, t)} />} + {step === 'profile' && { setSuccessName(name); setStep('success') }} />} + + {/* Erfolg */} + {step === 'success' && ( +

+ +

+ + Willkommen, {successName}! + +

Dein Abenteuer beginnt jetzt.

+ )} +

+ + ) +} diff --git a/src/components/auth/LoginForm.jsx b/src/components/auth/LoginForm.jsx new file mode 100644 index 0000000..b8a4fd4 --- /dev/null +++ b/src/components/auth/LoginForm.jsx @@ -0,0 +1,48 @@ +import { useState } from 'react' +import { login, getMe } from '../../api/directus' +import { useAuth } from '../../context/AuthContext' +import { FormGroup, Input, Button, Alert } from './ui' + +export default function LoginForm({ onNeedsProfile }) { + const { saveToken, setUser } = useAuth() + const [email, setEmail] = useState('') + const [pw, setPw] = useState('') + const [error, setError] = useState('') + const [loading, setLoading] = useState(false) + + const handleSubmit = async (e) => { + e?.preventDefault() + if (!email || !pw) { setError('Bitte E-Mail und Passwort eingeben.'); return } + setError(''); setLoading(true) + try { + const { access_token } = await login(email, pw) + saveToken(access_token) + const me = await getMe(access_token) + setUser(me) + if (!me.username || !me.language_native || !me.language_target) { + onNeedsProfile(me.id, access_token) + } + } catch (err) { + setError(err.message) + } finally { + setLoading(false) + } + } + + return ( +

+ + + setEmail(e.target.value)} autoComplete="email" autoFocus /> + + + setPw(e.target.value)} autoComplete="current-password" /> + + + + ) +} diff --git a/src/components/auth/RegisterStep1.jsx b/src/components/auth/RegisterStep1.jsx new file mode 100644 index 0000000..bd2c02b --- /dev/null +++ b/src/components/auth/RegisterStep1.jsx @@ -0,0 +1,48 @@ +import { useState } from 'react' +import { registerUser, login, getMe } from '../../api/directus' +import { useAuth } from '../../context/AuthContext' +import { FormGroup, Input, Button, Alert, StepDots } from './ui' + +export default function RegisterStep1({ onSuccess }) { + const { saveToken } = useAuth() + const [email, setEmail] = useState('') + const [pw, setPw] = useState('') + const [error, setError] = useState('') + const [loading, setLoading] = useState(false) + + const handleSubmit = async (e) => { + e?.preventDefault() + if (!email || !pw) { setError('Bitte alle Felder ausfüllen.'); return } + if (pw.length < 8) { setError('Passwort muss mindestens 8 Zeichen haben.'); return } + setError(''); setLoading(true) + try { + await registerUser(email, pw) + const { access_token } = await login(email, pw) + saveToken(access_token) + const me = await getMe(access_token) + onSuccess(me.id, access_token) + } catch (err) { + setError(err.message) + } finally { + setLoading(false) + } + } + + return ( +

+ + + + setEmail(e.target.value)} autoComplete="email" autoFocus /> + + + setPw(e.target.value)} autoComplete="new-password" /> + + + + ) +} diff --git a/src/components/auth/RegisterStep2.jsx b/src/components/auth/RegisterStep2.jsx new file mode 100644 index 0000000..60acd29 --- /dev/null +++ b/src/components/auth/RegisterStep2.jsx @@ -0,0 +1,85 @@ +import { useState, useEffect } from 'react' +import { checkUsername, createProfile, getLanguageOptions } from '../../api/directus' +import { useAuth } from '../../context/AuthContext' +import { FormGroup, Input, Select, Button, Alert, StepDots } from './ui' + +export default function RegisterStep2({ userId, userToken, onSuccess }) { + const { setUser } = useAuth() + const [username, setUsername] = useState('') + const [nativeLang, setNativeLang] = useState('') + const [targetLang, setTargetLang] = useState('') + const [languages, setLanguages] = useState([]) + const [error, setError] = useState('') + const [loading, setLoading] = useState(false) + + useEffect(() => { + getLanguageOptions() + .then(setLanguages) + .catch(() => setError('Sprachen konnten nicht geladen werden.')) + }, []) + + const handleSubmit = async (e) => { + e?.preventDefault() + if (!username || !nativeLang || !targetLang) { + setError('Bitte alle Felder ausfüllen.'); return + } + if (nativeLang === targetLang) { + setError('Muttersprache und Zielsprache dürfen nicht gleich sein.'); return + } + if (!/^[a-zA-Z0-9_]{3,20}$/.test(username)) { + setError('Username: 3–20 Zeichen, nur Buchstaben, Zahlen und _'); return + } + setError(''); setLoading(true) + try { + const available = await checkUsername(username, userToken) + if (!available) { + setError('Dieser Username ist bereits vergeben.'); setLoading(false); return + } + await createProfile({ userId, username, nativeLang, targetLang, userToken }) + setUser({ id: userId, username: userId, language_native: nativeLang, language_target: targetLang }) + onSuccess(username) + } catch (err) { + setError(err.message) + } finally { + setLoading(false) + } + } + + return ( +

+ + + + setUsername(e.target.value)} + autoFocus + autoComplete="username" + /> + + + + + + + + + + ) +} diff --git a/src/components/auth/auth.module.css b/src/components/auth/auth.module.css new file mode 100644 index 0000000..8c75324 --- /dev/null +++ b/src/components/auth/auth.module.css @@ -0,0 +1,79 @@ +.formGroup { margin-bottom: 16px; } + +.label { + display: block; + font-size: 11px; + font-weight: 500; + color: var(--muted); + letter-spacing: 0.06em; + text-transform: uppercase; + margin-bottom: 6px; +} + +.input { + width: 100%; + padding: 12px 14px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: var(--bg); + font-family: 'DM Sans', sans-serif; + font-size: 15px; + color: var(--text); + outline: none; + transition: border-color 0.2s, box-shadow 0.2s; + appearance: none; + -webkit-appearance: none; +} +.input:focus { + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(92,122,94,0.12); + background: var(--surface); +} + +.selectWrap { position: relative; } +.selectArrow { + position: absolute; right: 14px; top: 50%; + transform: translateY(-50%); + width: 0; height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 6px solid var(--muted); + pointer-events: none; +} +.selectWrap .input { padding-right: 36px; cursor: pointer; } + +.btn { + width: 100%; padding: 13px; margin-top: 8px; + background: var(--accent); color: #fff; + border: none; border-radius: var(--radius); + font-family: 'DM Sans', sans-serif; + font-size: 15px; font-weight: 500; cursor: pointer; + display: flex; align-items: center; justify-content: center; gap: 8px; + transition: background 0.2s, transform 0.1s; +} +.btn:hover:not(:disabled) { background: #4a6650; } +.btn:active:not(:disabled) { transform: scale(0.98); } +.btn:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; } + +.spinner { + width: 14px; height: 14px; + border: 2px solid rgba(255,255,255,0.35); + border-top-color: #fff; + border-radius: 50%; + animation: spin 0.7s linear infinite; +} + +.alert { + background: var(--danger-lt); + border: 1px solid #EBCBC8; + border-radius: var(--radius); + padding: 10px 14px; + font-size: 13px; color: var(--danger); + margin-bottom: 16px; +} + +.stepDots { display: flex; align-items: center; gap: 6px; margin-bottom: 24px; } +.stepDot { height: 6px; border-radius: 3px; transition: all 0.25s ease; } +.stepLabel { font-size: 11px; color: var(--muted); margin-left: 4px; } + +@keyframes spin { to { transform: rotate(360deg); } } diff --git a/src/components/auth/ui.jsx b/src/components/auth/ui.jsx new file mode 100644 index 0000000..261258e --- /dev/null +++ b/src/components/auth/ui.jsx @@ -0,0 +1,51 @@ +import styles from './auth.module.css' + +export function FormGroup({ label, children }) { + return ( +

+ {label && {label}} + {children} +

+ ) +} + +export function Input(props) { + return +} + +export function Select({ children, ...props }) { + return ( +

+ +

+ ) +} + +export function Button({ loading, children, ...props }) { + return ( + + ) +} + +export function Alert({ message }) { + if (!message) return null + return

{message}

+} + +export function StepDots({ current, total }) { + return ( +

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

+ ))} + Schritt {current + 1} von {total} +

+ ) +} diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.jsx new file mode 100644 index 0000000..f7dab78 --- /dev/null +++ b/src/context/AuthContext.jsx @@ -0,0 +1,29 @@ +import { createContext, useContext, useState, useEffect } from 'react' +import { getMe } from '../api/directus' + +const AuthContext = createContext(null) + +export function AuthProvider({ children }) { + const [token, setToken] = useState(() => localStorage.getItem('hejyou_token')) + const [user, setUser] = useState(null) + const [loading, setLoading] = useState(true) + + useEffect(() => { + if (!token) { setLoading(false); return } + getMe(token) + .then(setUser) + .catch(() => { localStorage.removeItem('hejyou_token'); setToken(null) }) + .finally(() => setLoading(false)) + }, [token]) + + const saveToken = (t) => { localStorage.setItem('hejyou_token', t); setToken(t) } + const logout = () => { localStorage.removeItem('hejyou_token'); setToken(null); setUser(null) } + + return ( + + {children} + + ) +} + +export const useAuth = () => useContext(AuthContext) diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..92c5585 --- /dev/null +++ b/src/index.css @@ -0,0 +1,22 @@ +@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Nunito:wght@400;500;600;700;800&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; + background: #EDE0CE; + color: #4A3728; + height: 100dvh; + overflow: hidden; + line-height: 1.7; +} + +#root { + height: 100dvh; + display: flex; + flex-direction: column; +} diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 0000000..54b39dd --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.jsx' +import './index.css' + +ReactDOM.createRoot(document.getElementById('root')).render( + + + , +) diff --git a/src/pages/Feed.css b/src/pages/Feed.css new file mode 100644 index 0000000..6548892 --- /dev/null +++ b/src/pages/Feed.css @@ -0,0 +1,17 @@ +.feed { + height: 100%; + background: #EDE0CE; + overflow-y: auto; + scroll-snap-type: y mandatory; + -webkit-overflow-scrolling: touch; +} + +.feed-slot { + scroll-snap-align: start; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 24px 20px; + flex-shrink: 0; +} diff --git a/src/pages/Feed.jsx b/src/pages/Feed.jsx new file mode 100644 index 0000000..3e38053 --- /dev/null +++ b/src/pages/Feed.jsx @@ -0,0 +1,324 @@ +import { useEffect, useRef, useState } from 'react' +import './Feed.css' +import { useAuth } from '../context/AuthContext' +import { + getActiveLearningPair, getWords, getQuestions, getUserProgress, + getLanguageOptions, langById, + saveProgress, addPointsToPair, + getQAPairsAtLevel, assetUrl, +} from '../api/directus' +import NewWordTextCard from '../components/NewWordTextCard' +import NewWordVoiceCard from '../components/NewWordVoiceCard' +import LetterOrderCard from '../components/LetterOrderCard' +import SentenceFillCard from '../components/SentenceFillCard' +import LanguageParentCard from '../components/LanguageParentCard' + +// Ein Wort gilt als gemeistert, wenn es in der aktiven Sprachrichtung +// mindestens MASTERY_THRESHOLD korrekt beantwortete Kacheln gesammelt hat. +const MASTERY_THRESHOLD = 3 +// Wie viele verschiedene Wörter gleichzeitig im Feed erscheinen +const FEED_WORD_BUDGET = 6 + +// Punkteformel: selbes/niedrigeres Level = 1 Punkt, jeder Level höher = +1 Punkt +function computePoints(cardLevel, userLevel) { + return Math.max(1, 1 + ((cardLevel || 1) - (userLevel || 1))) +} + +function shuffle(arr) { + const a = [...arr] + for (let i = a.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)) + ;[a[i], a[j]] = [a[j], a[i]] + } + return a +} + +const pickN = (arr, n) => shuffle(arr).slice(0, Math.max(0, n)) + +function pickWordsToLearn(unmastered, userLevel, budget) { + if (unmastered.length === 0) return [] + const same = unmastered.filter(w => (w.level || 1) === userLevel) + const higher = unmastered.filter(w => (w.level || 1) > userLevel && (w.level || 1) <= userLevel + 2) + const farHigher = unmastered.filter(w => (w.level || 1) > userLevel + 2) + const lower = unmastered.filter(w => (w.level || 1) < userLevel) + + if (same.length > 0) { + const sameN = Math.ceil(budget * 0.8) + const higherN = budget - sameN + let result = [ + ...pickN(same, Math.min(sameN, same.length)), + ...pickN(higher, Math.min(higherN, higher.length)), + ] + if (result.length < budget) { + const used = new Set(result.map(w => w.id)) + const rest = unmastered.filter(w => !used.has(w.id)) + result = [...result, ...pickN(rest, budget - result.length)] + } + return shuffle(result) + } + if (higher.length > 0) return pickN(higher, budget) + if (farHigher.length > 0) return pickN(farHigher, budget) + return pickN(lower, budget) +} + +function buildWordCards(words, userLevel, fromLang, toLang) { + const cards = [] + words.forEach(w => { + const word = w[`title_${toLang.suffix}`] + const translation = w[`title_${fromLang.suffix}`] + if (!word || !translation) return + const level = w.level || 1 + const points = computePoints(level, userLevel) + + const base = { language: toLang.label, points, word, translation, level } + + cards.push({ + type: 'text', + meta: { wordId: w.id, cardType: 'write', points, level }, + card: { ...base, baseForm: word, prompt: `Schreib das Wort auf ${toLang.label}` }, + }) + cards.push({ + type: 'voice', + meta: { wordId: w.id, cardType: 'speak', points, level }, + card: { ...base, baseForm: word, prompt: `Sprich das Wort auf ${toLang.label}`, speechLang: toLang.speech }, + }) + if (word.length >= 4) { + cards.push({ + type: 'letter', + meta: { wordId: w.id, cardType: 'write', points, level }, + card: { ...base, prompt: 'Tippe die Buchstaben in der richtigen Reihenfolge' }, + }) + } + }) + return cards +} + +function buildLanguageParentCards(qaPairs, userLevel, toLang, token) { + return qaPairs.map(qp => { + const points = computePoints(qp.level, userLevel) + return { + type: 'languparent', + meta: { pairId: qp.pairId, cardType: 'speak', points, level: qp.level }, + card: { + language: toLang.label, + points, + level: qp.level, + statement: qp.statement, + imageUrl: assetUrl(qp.pictureFileId, token), + primaryWord: qp.primaryWord, + speechLang: toLang.speech, + selections: qp.selections, + }, + } + }) +} + +function buildQuestionCardsFor(questions, masteredWordIds, userLevel, toLang) { + const cards = [] + questions.forEach(q => { + const wordIds = (q.related_words || []).map(rw => rw.words_id).filter(Boolean) + if (wordIds.length === 0) return + if (!wordIds.every(id => masteredWordIds.has(id))) return + + const qText = q[`question_${toLang.suffix}`] + const answer = q[`answer_${toLang.suffix}`] + if (!qText || !answer) return + + const level = q.level || 1 + const points = computePoints(level, userLevel) + + cards.push({ + type: 'sentence', + meta: { questionId: q.id, wordIds, cardType: 'sentence_fill', points, level }, + card: { + language: toLang.label, points, level, + word: answer, + translation: qText, + prompt: 'Antworte auf die Frage', + }, + }) + }) + return cards +} + +export default function Feed() { + const { user, token } = useAuth() + const [cards, setCards] = useState([]) + const [loading, setLoading] = useState(true) + const [ctx, setCtx] = useState(null) + const [runningPoints, setRunningPoints] = useState(0) + const [empty, setEmpty] = useState(false) + + // Laufende Mastery-Verwaltung für diese Session + const correctsRef = useRef({}) // wordId -> Anzahl korrekter Antworten (persistiert + session) + const masteredRef = useRef(new Set()) + const questionsRef = useRef([]) + const appendedQRef = useRef(new Set()) // bereits angehängte questionIds + const userLevelRef = useRef(1) + const toLangRef = useRef(null) + const pointsQueueRef = useRef(Promise.resolve()) // serialisiert Punkte-Updates + + useEffect(() => { + async function load() { + try { + const [pair, langs] = await Promise.all([ + getActiveLearningPair(user.username, token), + getLanguageOptions(), + ]) + if (!pair) { setEmpty(true); setLoading(false); return } + + const fromLang = langById(pair.language_from, langs) + const toLang = langById(pair.language_to, langs) + if (!fromLang || !toLang) { setEmpty(true); setLoading(false); return } + + const userLevel = pair.current_level || 1 + + const [words, questions, progress, qaPairs] = await Promise.all([ + getWords(token), + getQuestions(token), + getUserProgress(user.username, token, pair.language_to), + getQAPairsAtLevel(userLevel, token, toLang.suffix), + ]) + + const correctsByWord = {} + progress.forEach(p => { + if (p.result === 'correct' && p.word) { + correctsByWord[p.word] = (correctsByWord[p.word] || 0) + 1 + } + }) + const mastered = new Set( + Object.entries(correctsByWord) + .filter(([, c]) => c >= MASTERY_THRESHOLD) + .map(([id]) => id) + ) + + correctsRef.current = correctsByWord + masteredRef.current = mastered + questionsRef.current = questions + userLevelRef.current = userLevel + toLangRef.current = toLang + + const unmastered = words.filter(w => !mastered.has(w.id)) + const chosen = pickWordsToLearn(unmastered, userLevel, FEED_WORD_BUDGET) + + const wordCards = buildWordCards(chosen, userLevel, fromLang, toLang) + const questionCards = buildQuestionCardsFor(questions, mastered, userLevel, toLang) + const lpCards = buildLanguageParentCards(qaPairs, userLevel, toLang, token) + + // bereits angehängte Frage-IDs merken, damit wir sie nicht doppelt einstreuen + questionCards.forEach(c => appendedQRef.current.add(c.meta.questionId)) + + const allCards = [...lpCards, ...wordCards, ...questionCards] + setCards(allCards) + setEmpty(allCards.length === 0) + setCtx({ + pair, + fromLangId: pair.language_from, + toLangId: pair.language_to, + profileId: user.username, + }) + setRunningPoints(pair.points || 0) + } catch (err) { + console.error('Feed load error', err) + setEmpty(true) + } finally { + setLoading(false) + } + } + load() + }, [user.username, token]) + + async function handleComplete(item, result) { + if (!ctx) return + const earned = result === 'correct' ? (item.meta.points || 1) : 0 + + saveProgress({ + user: ctx.profileId, + word: item.meta.wordId || null, + question: item.meta.questionId || null, + card_type: item.meta.cardType, + result, + points_earned: earned, + language_from: ctx.fromLangId, + language_to: ctx.toLangId, + }, token).catch(() => {}) + + // Punkte serialisiert patchen, damit parallele Karten nicht denselben Basiswert überschreiben + if (earned > 0) { + setRunningPoints(p => p + earned) + pointsQueueRef.current = pointsQueueRef.current.then(async () => { + ctx.pair.points = (ctx.pair.points || 0) + earned + try { await addPointsToPair(ctx.pair.id, ctx.pair.points, token) } catch {} + }) + } + + // In-Session-Mastery: korrekte Wort-Antwort erhöht Zähler; neu gemasterte + // Wörter können Frage-Kacheln freischalten. + if (result === 'correct' && item.meta.wordId) { + const wid = item.meta.wordId + const newCount = (correctsRef.current[wid] || 0) + 1 + correctsRef.current[wid] = newCount + + if (!masteredRef.current.has(wid) && newCount >= MASTERY_THRESHOLD) { + masteredRef.current.add(wid) + + const newQuestions = questionsRef.current.filter(q => { + if (appendedQRef.current.has(q.id)) return false + const wordIds = (q.related_words || []).map(rw => rw.words_id).filter(Boolean) + if (wordIds.length === 0) return false + return wordIds.every(id => masteredRef.current.has(id)) + }) + + if (newQuestions.length > 0) { + const extra = buildQuestionCardsFor( + newQuestions, + masteredRef.current, + userLevelRef.current, + toLangRef.current, + ) + extra.forEach(c => appendedQRef.current.add(c.meta.questionId)) + setCards(prev => [...prev, ...extra]) + setEmpty(false) + } + } + } + } + + if (loading) { + return ( +

+ Lade Karten… +

+ ) + } + + if (empty) { + return ( +

+ Super! Du hast alle Wörter deines Levels gemeistert. Neue Wörter kommen bald. +

+ ) + } + + return ( +

+ {cards.map((item, i) => { + const enrichedCard = { ...item.card, totalPoints: runningPoints } + const handler = (r) => handleComplete(item, r) + return ( +

+ {item.type === 'text' && } + {item.type === 'voice' && } + {item.type === 'letter' && } + {item.type === 'sentence' && } + {item.type === 'languparent' && } +

+ ) + })} +

+ ) +} diff --git a/src/pages/Game.jsx b/src/pages/Game.jsx new file mode 100644 index 0000000..fe8b55e --- /dev/null +++ b/src/pages/Game.jsx @@ -0,0 +1,7 @@ +export default function Game() { + return ( +

Dieser Bereich wird später kommen.

+ ) +} diff --git a/src/pages/Pro.jsx b/src/pages/Pro.jsx new file mode 100644 index 0000000..c92dcaf --- /dev/null +++ b/src/pages/Pro.jsx @@ -0,0 +1,7 @@ +export default function Pro() { + return ( +

Dieser Bereich wird später kommen.

+ ) +} diff --git a/src/pages/Profil.css b/src/pages/Profil.css new file mode 100644 index 0000000..12521d5 --- /dev/null +++ b/src/pages/Profil.css @@ -0,0 +1,194 @@ +/* ── Layout ────────────────────────────────────────────────── */ +.profil { + min-height: 100%; + background: #EDE0CE; + padding: 0 16px 32px; + overflow-y: auto; +} + +/* ── Header ────────────────────────────────────────────────── */ +.profil-header { + display: flex; + align-items: center; + gap: 14px; + padding: 20px 4px 16px; +} + +.avatar-wrap { + position: relative; + flex-shrink: 0; +} + +/* Animated ring */ +.avatar-ring { + width: 64px; + height: 64px; + border-radius: 50%; + background: conic-gradient(from 0deg, #EDE0CE, #C4A882, #7A5C3A, #D4B896, #EDE0CE); + animation: spin-ring 4s linear infinite; + padding: 2px; +} + +@keyframes spin-ring { + to { transform: rotate(360deg); } +} + +.avatar-inner { + width: 100%; + height: 100%; + border-radius: 50%; + background: #EDE0CE; + padding: 2px; + display: flex; + align-items: center; + justify-content: center; +} + +.avatar { + width: 100%; + height: 100%; + border-radius: 50%; + background: linear-gradient(135deg, #7A5C3A, #4A3728); + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + font-weight: 800; + color: #F5EFE6; + letter-spacing: 1px; +} + +/* Online dot */ +.online-dot { + position: absolute; + bottom: 2px; + right: 2px; + width: 11px; + height: 11px; + background: #7A5C3A; + border-radius: 50%; + border: 2px solid #EDE0CE; + z-index: 2; +} + +.online-dot::after { + content: ''; + position: absolute; + inset: -4px; + border-radius: 50%; + border: 2px solid #7A5C3A; + animation: pulse-ring 1.8s ease-out infinite; +} + +@keyframes pulse-ring { + 0% { opacity: 0.7; transform: scale(0.8); } + 100% { opacity: 0; transform: scale(1.8); } +} + +/* Level badge on avatar */ +.avatar-level-badge { + position: absolute; + top: -4px; + right: -6px; + z-index: 3; + filter: drop-shadow(0 1px 3px rgba(74, 55, 40, 0.3)); +} + +.profil-info { + display: flex; + flex-direction: column; + gap: 2px; +} + +.profil-name { + font-family: 'Lora', Georgia, serif; + font-size: 18px; + font-weight: 700; + color: #4A3728; +} + +.profil-handle { + font-size: 12px; + color: #7A5C3A; +} + +/* ── Cards ──────────────────────────────────────────────────── */ +.progress-card, +.skills-card { + background: #F5EFE6; + border: 0.5px solid #D4B896; + border-radius: 16px; + padding: 16px; + margin-bottom: 12px; +} + +.card-title { + font-size: 11px; + font-weight: 500; + color: #8C7A65; + letter-spacing: 0.07em; + margin-bottom: 12px; +} + +/* ── XP Section ─────────────────────────────────────────────── */ +.xp-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; +} + +.lang-label { + font-size: 13px; + font-weight: 500; + color: #4A3728; +} + +.xp-value { + font-size: 13px; + font-weight: 500; + color: #7A5C3A; +} + +.xp-bar { + background: #D4B896; + border-radius: 99px; + height: 8px; + width: 100%; + margin-bottom: 8px; + overflow: hidden; +} + +.xp-fill { + height: 100%; + border-radius: 99px; + background: #7A5C3A; +} + +/* Level row */ +.level-row { + display: flex; + justify-content: space-between; + align-items: center; +} + +.level-pill { + background: #7A5C3A; + color: #EDE0CE; + font-size: 11px; + font-weight: 500; + padding: 3px 10px; + border-radius: 99px; +} + +.level-hint { + font-size: 11px; + color: #8C7A65; +} + +/* ── Radar ───────────────────────────────────────────────────── */ +.radar-wrap { + display: flex; + justify-content: center; + padding: 8px 0 4px; +} diff --git a/src/pages/Profil.jsx b/src/pages/Profil.jsx new file mode 100644 index 0000000..800a650 --- /dev/null +++ b/src/pages/Profil.jsx @@ -0,0 +1,195 @@ +import { useEffect, useState } from 'react' +import './Profil.css' +import { useAuth } from '../context/AuthContext' +import { getProfilData, getActiveLearningPair, getLanguageOptions, langById } from '../api/directus' + +const SKILLS = [ + { label: 'Vokabular', value: 0.78 }, + { label: 'Grammatik', value: 0.65 }, + { label: 'Sprechen', value: 0.60 }, + { label: 'Hören', value: 0.52 }, + { label: 'Lesen', value: 0.62 }, +] + +/* ── Radar Chart ─────────────────────────────────────────────── */ +function RadarChart({ skills, animate }) { + const size = 220 + const cx = 110 + const cy = 105 + const r = 70 + const n = skills.length + + const angle = (i) => (Math.PI * 2 * i) / n - Math.PI / 2 + + const point = (i, ratio) => ({ + x: cx + r * ratio * Math.cos(angle(i)), + y: cy + r * ratio * Math.sin(angle(i)), + }) + + const gridPoly = (ratio) => + skills.map((_, i) => `${point(i, ratio).x},${point(i, ratio).y}`).join(' ') + + const dataPoly = skills + .map((s, i) => `${point(i, animate ? s.value : 0).x},${point(i, animate ? s.value : 0).y}`) + .join(' ') + + const labelAnchor = (i) => { + const x = Math.cos(angle(i)) + if (x > 0.1) return 'start' + if (x < -0.1) return 'end' + return 'middle' + } + + const labelOffset = (i) => { + const y = Math.sin(angle(i)) + return y > 0.1 ? 10 : y < -0.1 ? -4 : 4 + } + + return ( + + ) +} + +/* ── Main Component ──────────────────────────────────────────── */ +export default function Profil() { + const { user, token } = useAuth() + const [radarReady, setRadarReady] = useState(false) + const [profil, setProfil] = useState(null) + const [pair, setPair] = useState(null) + const [langs, setLangs] = useState([]) + + useEffect(() => { + const t = setTimeout(() => setRadarReady(true), 120) + return () => clearTimeout(t) + }, []) + + useEffect(() => { + async function load() { + try { + const [p, lp, langs] = await Promise.all([ + getProfilData(token), + getActiveLearningPair(user.username, token), + getLanguageOptions(), + ]) + setProfil(p) + setPair(lp) + setLangs(langs) + } catch { + // Profildaten nicht ladbar – zeige Fallback + } + } + load() + }, [token, user.username]) + + const displayName = profil?.username?.username_public || user?.username || '…' + const initials = displayName.slice(0, 2).toUpperCase() + const points = pair?.points ?? profil?.points_total ?? 0 + const level = pair?.current_level ?? 1 + const xpMax = level * 500 + const xpPct = Math.min((points / xpMax) * 100, 100) + const toLang = pair ? langById(pair.language_to, langs) : null + const langLabel = toLang ? `${toLang.flag} ${toLang.label}` : 'Zielsprache' + const streak = profil?.streak_days ?? 0 + + return ( +

+ {/* ── Header ── */} +

{initials}

+ +

{displayName}

@{displayName.toLowerCase()}

+ {streak > 0 && ( +

+ 🔥 {streak} Tag{streak !== 1 ? 'e' : ''} Streak +

+ )} +

+ + {/* ── Progress Card ── */} +

DEIN FORTSCHRITT

+ +

+ {langLabel} + {points.toLocaleString('de')} / {xpMax.toLocaleString('de')} XP +

+ +

+ Level {level} + {(xpMax - points).toLocaleString('de')} XP bis Level {level + 1} +

+ + {/* ── Skills Card ── */} +

FÄHIGKEITEN

+ +

+ ) +} diff --git a/src/utils/confetti.js b/src/utils/confetti.js new file mode 100644 index 0000000..101d430 --- /dev/null +++ b/src/utils/confetti.js @@ -0,0 +1,10 @@ +import confetti from 'canvas-confetti' + +export function triggerConfetti() { + confetti({ + particleCount: 120, + spread: 70, + origin: { y: 0.55 }, + colors: ['#7A5C3A', '#C4A882', '#EDE0CE', '#D4B896', '#F5EFE6'], + }) +} 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()], +})

Kachel-Übersicht

HejYou

{displayName}