// Achievements / Auszeichnungen system // Definitions: each achievement has id, name, description, emoji, condition fn. // User progress is computed from local activity: downloads, prints, mappenCount, collectedCount, // suggestionsCount, friendsInvited, commentsCount, premiumSince, daysActive. const ACHIEVEMENTS = [ // === Onboarding === { id: 'first_steps', name: 'Erste Schritte', desc: 'Profil erstellt', emoji: '🌱', tier: 'bronze', test: (s) => s.daysActive >= 1 }, { id: 'first_collect', name: 'Erstes Bild gesammelt', desc: 'Erstes Bild in einer Mappe', emoji: '🎒', tier: 'bronze', test: (s) => s.collectedCount >= 1 }, { id: 'first_print', name: 'Erstmals gedruckt', desc: 'Erstes Bild ausgedruckt', emoji: '🖨️', tier: 'bronze', test: (s) => s.prints >= 1 }, // === Sammler === { id: 'collector_10', name: 'Sammler:in', desc: '10 Bilder gesammelt', emoji: '🌟', tier: 'silver', test: (s) => s.collectedCount >= 10 }, { id: 'collector_50', name: 'Großsammler:in', desc: '50 Bilder gesammelt', emoji: '💎', tier: 'gold', test: (s) => s.collectedCount >= 50 }, // === Künstler:in === { id: 'artist_25', name: 'Fleißige:r Maler:in', desc: '25 Bilder gedruckt', emoji: '🎨', tier: 'silver', test: (s) => s.prints >= 25 }, { id: 'artist_100', name: 'Künstler:in', desc: '100 Bilder gedruckt', emoji: '🏆', tier: 'gold', test: (s) => s.prints >= 100 }, // === Organisator === { id: 'organizer_3', name: 'Organisator:in', desc: '3 Sammelmappen angelegt', emoji: '🗂️', tier: 'silver', test: (s) => s.mappenCount >= 3 }, { id: 'organizer_5', name: 'Mappen-Profi', desc: '5 Sammelmappen angelegt', emoji: '📚', tier: 'gold', test: (s) => s.mappenCount >= 5 }, // === Soziales === { id: 'inviter_1', name: 'Freund geworben', desc: '1 Freund eingeladen', emoji: '🎁', tier: 'silver', test: (s) => s.friendsInvited >= 1 }, { id: 'inviter_5', name: 'Botschafter:in', desc: '5 Freunde eingeladen', emoji: '🤝', tier: 'gold', test: (s) => s.friendsInvited >= 5 }, // === Community === { id: 'commenter_5', name: 'Kommunikativ', desc: '5 Kommentare geschrieben', emoji: '💬', tier: 'silver', test: (s) => s.commentsCount >= 5 }, { id: 'commenter_25', name: 'Vielredner:in', desc: '25 Kommentare geschrieben', emoji: '🎤', tier: 'gold', test: (s) => s.commentsCount >= 25 }, // === Ideen === { id: 'idea_1', name: 'Ideenfunke', desc: 'Ersten Vorschlag eingereicht', emoji: '💡', tier: 'silver', test: (s) => s.suggestionsCount >= 1 }, { id: 'idea_5', name: 'Visionär:in', desc: '5 Vorschläge eingereicht', emoji: '🚀', tier: 'gold', test: (s) => s.suggestionsCount >= 5 }, // === Treue === { id: 'active_7', name: 'Eine Woche dabei', desc: '7 Tage aktiv', emoji: '⭐', tier: 'silver', test: (s) => s.daysActive >= 7 }, { id: 'active_30', name: 'Stammgast', desc: '30 Tage aktiv', emoji: '🌳', tier: 'gold', test: (s) => s.daysActive >= 30 }, // === Premium === { id: 'premium', name: 'Premium-Mitglied', desc: 'Du unterstützt uns mit Premium', emoji: '👑', tier: 'gold', test: (s) => s.premium }, ]; const TIER_COLORS = { bronze: { bg: 'bg-[#E5A772]/30', ring: 'ring-[#C68642]', text: 'text-[#7A4F1E]' }, silver: { bg: 'bg-[#D6DCE5]/50', ring: 'ring-[#9CA8B5]', text: 'text-[#3A4651]' }, gold: { bg: 'bg-sun/50', ring: 'ring-sunDeep', text: 'text-amber-900' }, }; // Build the activity snapshot from local storage for a given user. const computeUserStats = (user, mappen, suggestions) => { if (!user) return null; const email = (user.email || '').toLowerCase(); // Mappen-derived const mappenCount = (mappen || []).length; const collectedCount = (mappen || []).reduce((s, m) => s + m.items.length, 0); // Comments by this user let commentsCount = 0; try { const all = JSON.parse(localStorage.getItem('aw.comments') || '{}'); Object.values(all).forEach(arr => { (arr || []).forEach(c => { if (c.email === email) commentsCount++; }); }); } catch {} // Friends invited (own referral redeems) let friendsInvited = 0; try { const r = JSON.parse(localStorage.getItem('aw.referrals') || '{}'); Object.values(r).forEach(entry => { if (entry.ownerEmail === email) friendsInvited += (entry.redeemed || []).length; }); } catch {} // Days since joined let daysActive = 1; try { if (user.joined) { daysActive = Math.max(1, Math.floor((Date.now() - new Date(user.joined).getTime()) / 86400e3)); } } catch {} // Prints/downloads, approximated by mappen total prints/downloads. We don't track per-user prints yet, // so we use a synthetic counter stored in 'aw.userStats.'. let userPrints = 0, userDownloads = 0; try { const s = JSON.parse(localStorage.getItem(`aw.userStats.${email}`) || '{}'); userPrints = s.prints || 0; userDownloads = s.downloads || 0; } catch {} return { daysActive, mappenCount, collectedCount, prints: userPrints, downloads: userDownloads, commentsCount, suggestionsCount: (suggestions || []).length, friendsInvited, premium: !!(user.premium && user.premium.active), }; }; // Bump per-user download/print counter (called from print-utils side) const bumpUserActivity = (kind) => { try { const u = JSON.parse(localStorage.getItem('aw.user') || 'null'); if (u) { const k = `aw.userStats.${(u.email || '').toLowerCase()}`; const s = JSON.parse(localStorage.getItem(k) || '{}'); s[kind] = (s[kind] || 0) + 1; localStorage.setItem(k, JSON.stringify(s)); } } catch {} // Site-wide daily counter (works for anonymous + logged-in) try { const today = new Date().toISOString().slice(0, 10); // YYYY-MM-DD const cur = JSON.parse(localStorage.getItem('aw.todayStats') || '{}'); const stats = cur.date === today ? cur : { date: today, downloads: 0, prints: 0 }; stats[kind] = (stats[kind] || 0) + 1; localStorage.setItem('aw.todayStats', JSON.stringify(stats)); window.dispatchEvent(new CustomEvent('aw:today-stats-changed')); } catch {} }; // Read today's counters const getTodayStats = () => { try { const today = new Date().toISOString().slice(0, 10); const cur = JSON.parse(localStorage.getItem('aw.todayStats') || '{}'); return cur.date === today ? cur : { date: today, downloads: 0, prints: 0 }; } catch { return { downloads: 0, prints: 0 }; } }; // React hook for live today-stats const useTodayStats = () => { const [s, setS] = React.useState(getTodayStats); React.useEffect(() => { const h = () => setS(getTodayStats()); window.addEventListener('aw:today-stats-changed', h); window.addEventListener('storage', h); return () => { window.removeEventListener('aw:today-stats-changed', h); window.removeEventListener('storage', h); }; }, []); return s; }; // Returns earned/unearned achievements list. const evaluateAchievements = (user, mappen, suggestions) => { const stats = computeUserStats(user, mappen, suggestions); if (!stats) return { earned: [], all: ACHIEVEMENTS.map(a => ({ ...a, earned: false })), stats: null }; const all = ACHIEVEMENTS.map(a => ({ ...a, earned: a.test(stats) })); return { earned: all.filter(a => a.earned), all, stats, }; }; // === Display components === const AchievementBadge = ({ achievement, size = 'md' }) => { const t = TIER_COLORS[achievement.tier] || TIER_COLORS.bronze; const dim = size === 'sm' ? 'w-10 h-10 text-xl' : size === 'lg' ? 'w-20 h-20 text-4xl' : 'w-14 h-14 text-2xl'; return (
); }; const AchievementGrid = ({ list }) => (
{list.map(a => { const t = TIER_COLORS[a.tier] || TIER_COLORS.bronze; return (
{a.name}
{a.desc}
{a.earned &&
{a.tier}
}
); })}
); Object.assign(window, { ACHIEVEMENTS, TIER_COLORS, computeUserStats, evaluateAchievements, AchievementBadge, AchievementGrid, bumpUserActivity, getTodayStats, useTodayStats, });