+
+
-
-
- {action.label}
-
-
- {action.description}
-
+
+
Direkt hochladen
+
Kamera öffnen oder ein Foto aus deiner Galerie wählen.
-
-
-
-
+
+
+
+
);
}
-
-function formatLatestUpload(isoDate: string | null, t: TranslateFn) {
- if (!isoDate) {
- return t('home.latestUpload.none');
- }
- const date = new Date(isoDate);
- if (Number.isNaN(date.getTime())) {
- return t('home.latestUpload.invalid');
- }
- const diffMs = Date.now() - date.getTime();
- const diffMinutes = Math.round(diffMs / 60000);
- if (diffMinutes < 1) {
- return t('home.latestUpload.justNow');
- }
- if (diffMinutes < 60) {
- return t('home.latestUpload.minutes').replace('{count}', `${diffMinutes}`);
- }
- const diffHours = Math.round(diffMinutes / 60);
- if (diffHours < 24) {
- return t('home.latestUpload.hours').replace('{count}', `${diffHours}`);
- }
- const diffDays = Math.round(diffHours / 24);
- return t('home.latestUpload.days').replace('{count}', `${diffDays}`);
-}
diff --git a/resources/js/guest/pages/TaskPickerPage.tsx b/resources/js/guest/pages/TaskPickerPage.tsx
index 3c4f819..48bfbcb 100644
--- a/resources/js/guest/pages/TaskPickerPage.tsx
+++ b/resources/js/guest/pages/TaskPickerPage.tsx
@@ -1,10 +1,15 @@
import React from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Sparkles, RefreshCw, Smile, Timer as TimerIcon, CheckCircle2, AlertTriangle } from 'lucide-react';
+import { Sparkles, RefreshCw, Smile, Camera, Timer as TimerIcon, Heart, ChevronRight } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useEventBranding } from '../context/EventBrandingContext';
+import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
interface Task {
id: number;
@@ -24,26 +29,169 @@ type EmotionOption = {
name: string;
};
-const TASK_PROGRESS_TARGET = 5;
-const TIMER_VIBRATION = [0, 60, 120, 60];
+type EventPhoto = {
+ id: number;
+ thumbnail_path?: string | null;
+ file_path?: string | null;
+ likes_count?: number | null;
+ task_id?: number | null;
+};
+
+const SWIPE_THRESHOLD_PX = 40;
+const SIMILAR_PHOTO_LIMIT = 6;
+type EmotionTheme = {
+ gradientClass: string;
+ gradientBackground: string;
+ suggestionGradient: string;
+ suggestionBorder: string;
+};
+
+type EmotionIdentity = {
+ slug?: string | null;
+ name?: string | null;
+};
+
+const themeFreude: EmotionTheme = {
+ gradientClass: 'from-amber-300 via-orange-400 to-rose-500',
+ gradientBackground: 'linear-gradient(135deg, #fde68a, #fb923c, #fb7185)',
+ suggestionGradient: 'from-amber-50 via-white to-orange-50 dark:from-amber-500/20 dark:via-gray-900 dark:to-orange-500/10',
+ suggestionBorder: 'border-amber-200/60 dark:border-amber-400/30',
+};
+const themeLiebe: EmotionTheme = {
+ gradientClass: 'from-rose-400 via-fuchsia-500 to-purple-600',
+ gradientBackground: 'linear-gradient(135deg, #fb7185, #ec4899, #9333ea)',
+ suggestionGradient: 'from-rose-50 via-white to-fuchsia-50 dark:from-rose-500/20 dark:via-gray-900 dark:to-fuchsia-500/10',
+ suggestionBorder: 'border-rose-200/60 dark:border-rose-400/30',
+};
+const themeEkstase: EmotionTheme = {
+ gradientClass: 'from-fuchsia-400 via-purple-500 to-indigo-500',
+ gradientBackground: 'linear-gradient(135deg, #f472b6, #a855f7, #6366f1)',
+ suggestionGradient: 'from-fuchsia-50 via-white to-indigo-50 dark:from-fuchsia-500/20 dark:via-gray-900 dark:to-indigo-500/10',
+ suggestionBorder: 'border-fuchsia-200/60 dark:border-fuchsia-400/30',
+};
+const themeEntspannt: EmotionTheme = {
+ gradientClass: 'from-teal-300 via-emerald-400 to-cyan-500',
+ gradientBackground: 'linear-gradient(135deg, #5eead4, #34d399, #22d3ee)',
+ suggestionGradient: 'from-teal-50 via-white to-emerald-50 dark:from-teal-500/20 dark:via-gray-900 dark:to-emerald-500/10',
+ suggestionBorder: 'border-emerald-200/60 dark:border-emerald-400/30',
+};
+const themeBesinnlich: EmotionTheme = {
+ gradientClass: 'from-slate-500 via-blue-500 to-indigo-600',
+ gradientBackground: 'linear-gradient(135deg, #64748b, #3b82f6, #4f46e5)',
+ suggestionGradient: 'from-slate-50 via-white to-blue-50 dark:from-slate-600/20 dark:via-gray-900 dark:to-blue-500/10',
+ suggestionBorder: 'border-slate-200/60 dark:border-slate-500/30',
+};
+const themeUeberraschung: EmotionTheme = {
+ gradientClass: 'from-indigo-300 via-violet-500 to-rose-500',
+ gradientBackground: 'linear-gradient(135deg, #a5b4fc, #a855f7, #fb7185)',
+ suggestionGradient: 'from-indigo-50 via-white to-violet-50 dark:from-indigo-500/20 dark:via-gray-900 dark:to-violet-500/10',
+ suggestionBorder: 'border-indigo-200/60 dark:border-indigo-400/30',
+};
+const themeDefault: EmotionTheme = {
+ gradientClass: 'from-pink-500 via-purple-500 to-indigo-600',
+ gradientBackground: 'linear-gradient(135deg, #ec4899, #a855f7, #4f46e5)',
+ suggestionGradient: 'from-pink-50 via-white to-indigo-50 dark:from-pink-500/20 dark:via-gray-900 dark:to-indigo-500/10',
+ suggestionBorder: 'border-pink-200/60 dark:border-pink-400/30',
+};
+
+const EMOTION_THEMES: Record
= {
+ freude: themeFreude,
+ happy: themeFreude,
+ liebe: themeLiebe,
+ romance: themeLiebe,
+ romantik: themeLiebe,
+ nostalgie: themeEntspannt,
+ relaxed: themeEntspannt,
+ ruehrung: themeBesinnlich,
+ traurigkeit: themeBesinnlich,
+ teamgeist: themeFreude,
+ gemeinschaft: themeFreude,
+ ueberraschung: themeUeberraschung,
+ surprise: themeUeberraschung,
+ ekstase: themeEkstase,
+ excited: themeEkstase,
+ besinnlichkeit: themeBesinnlich,
+ sad: themeBesinnlich,
+ default: themeDefault,
+};
+
+const EMOTION_ICONS: Record = {
+ freude: '😊',
+ happy: '😊',
+ liebe: '❤️',
+ romantik: '💞',
+ nostalgie: '📼',
+ ruehrung: '🥲',
+ teamgeist: '🤝',
+ ueberraschung: '😲',
+ surprise: '😲',
+ ekstase: '🤩',
+ besinnlichkeit: '🕯️',
+};
+
+function sluggify(value?: string | null): string {
+ return (value ?? '')
+ .toString()
+ .toLowerCase()
+ .normalize('NFD')
+ .replace(/[\u0300-\u036f]/g, '')
+ .replace(/[^a-z0-9]+/g, '')
+ .trim();
+}
+
+function resolveEmotionKey(identity?: EmotionIdentity | null): string {
+ if (!identity) return 'default';
+ const nameKey = sluggify(identity.name);
+ if (nameKey && EMOTION_THEMES[nameKey]) {
+ return nameKey;
+ }
+ const slugKey = sluggify(identity.slug);
+ if (slugKey && EMOTION_THEMES[slugKey]) {
+ return slugKey;
+ }
+ return 'default';
+}
+
+function getEmotionTheme(identity?: EmotionIdentity | null): EmotionTheme {
+ const key = resolveEmotionKey(identity);
+ return EMOTION_THEMES[key] ?? themeDefault;
+}
+
+function getEmotionIcon(identity?: EmotionIdentity | null): string {
+ const key = resolveEmotionKey(identity);
+ return EMOTION_ICONS[key] ?? '✨';
+}
export default function TaskPickerPage() {
const { token } = useParams<{ token: string }>();
const eventKey = token ?? '';
const navigate = useNavigate();
const [searchParams, setSearchParams] = useSearchParams();
+ const { branding } = useEventBranding();
+ const { t } = useTranslation();
- const { completedCount, markCompleted, isCompleted } = useGuestTaskProgress(eventKey);
+ const { completedCount, isCompleted } = useGuestTaskProgress(eventKey);
const [tasks, setTasks] = React.useState([]);
const [currentTask, setCurrentTask] = React.useState(null);
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState(null);
const [selectedEmotion, setSelectedEmotion] = React.useState('all');
- const [timeLeft, setTimeLeft] = React.useState(0);
- const [timerRunning, setTimerRunning] = React.useState(false);
- const [timeUp, setTimeUp] = React.useState(false);
const [isFetching, setIsFetching] = React.useState(false);
+ const [photoPool, setPhotoPool] = React.useState([]);
+ const [photoPoolLoading, setPhotoPoolLoading] = React.useState(false);
+ const [photoPoolError, setPhotoPoolError] = React.useState(null);
+ const [hasSwiped, setHasSwiped] = React.useState(false);
+ const [emotionPickerOpen, setEmotionPickerOpen] = React.useState(false);
+ const [recentEmotionSlug, setRecentEmotionSlug] = React.useState(null);
+
+ const heroCardRef = React.useRef(null);
+
+ const cameraButtonStyle = React.useMemo(() => ({
+ background: `radial-gradient(circle at 20% 20%, ${branding.secondaryColor}, ${branding.primaryColor})`,
+ boxShadow: `0 18px 30px ${branding.primaryColor}44`,
+ color: '#ffffff',
+ }), [branding.primaryColor, branding.secondaryColor]);
const recentTaskIdsRef = React.useRef([]);
const initialEmotionRef = React.useRef(false);
@@ -95,11 +243,25 @@ export default function TaskPickerPage() {
return Array.from(map.entries()).map(([slugValue, name]) => ({ slug: slugValue, name }));
}, [tasks]);
+ const emotionCounts = React.useMemo(() => {
+ const map = new Map();
+ tasks.forEach((task) => {
+ const slugValue = task.emotion?.slug;
+ if (!slugValue) return;
+ map.set(slugValue, (map.get(slugValue) ?? 0) + 1);
+ });
+ return map;
+ }, [tasks]);
+
const filteredTasks = React.useMemo(() => {
if (selectedEmotion === 'all') return tasks;
return tasks.filter((task) => task.emotion?.slug === selectedEmotion);
}, [tasks, selectedEmotion]);
+ const alternativeTasks = React.useMemo(() => {
+ return filteredTasks.filter((task) => task.id !== currentTask?.id).slice(0, 6);
+ }, [filteredTasks, currentTask]);
+
const selectRandomTask = React.useCallback(
(list: Task[]) => {
if (!list.length) {
@@ -120,6 +282,51 @@ export default function TaskPickerPage() {
[isCompleted]
);
+ const handleSelectEmotion = React.useCallback(
+ (slugValue: string) => {
+ setSelectedEmotion(slugValue);
+ const next = new URLSearchParams(searchParams.toString());
+ if (slugValue === 'all') {
+ next.delete('emotion');
+ } else {
+ next.set('emotion', slugValue);
+ setRecentEmotionSlug(slugValue);
+ }
+ setSearchParams(next, { replace: true });
+ },
+ [searchParams, setSearchParams]
+ );
+
+ const handleNewTask = React.useCallback(() => {
+ selectRandomTask(filteredTasks);
+ }, [filteredTasks, selectRandomTask]);
+
+ const handleStartUpload = () => {
+ if (!currentTask || !eventKey) return;
+ navigate(`/e/${encodeURIComponent(eventKey)}/upload?task=${currentTask.id}&emotion=${currentTask.emotion?.slug || ''}`);
+ };
+
+ const handleViewSimilar = React.useCallback(() => {
+ if (!currentTask || !eventKey) return;
+ navigate(`/e/${encodeURIComponent(eventKey)}/gallery?task=${currentTask.id}`);
+ }, [currentTask, eventKey, navigate]);
+
+ const handleSelectTask = React.useCallback((task: Task) => {
+ setCurrentTask(task);
+ }, []);
+
+ const handleRetryFetch = () => {
+ fetchTasks();
+ };
+
+ const handlePhotoPreview = React.useCallback(
+ (photoId: number) => {
+ if (!eventKey) return;
+ navigate(`/e/${encodeURIComponent(eventKey)}/gallery?photoId=${photoId}&task=${currentTask?.id ?? ''}`);
+ },
+ [eventKey, navigate, currentTask?.id]
+ );
+
React.useEffect(() => {
if (!filteredTasks.length) {
setCurrentTask(null);
@@ -127,158 +334,164 @@ export default function TaskPickerPage() {
}
if (!currentTask || !filteredTasks.some((task) => task.id === currentTask.id)) {
selectRandomTask(filteredTasks);
- return;
}
- const matchingTask = filteredTasks.find((task) => task.id === currentTask.id);
- const durationMinutes = matchingTask?.duration ?? currentTask.duration;
- setTimeLeft(durationMinutes * 60);
- setTimerRunning(false);
- setTimeUp(false);
}, [filteredTasks, currentTask, selectRandomTask]);
React.useEffect(() => {
- if (!currentTask) {
- setTimeLeft(0);
- setTimerRunning(false);
- setTimeUp(false);
- return;
+ if (currentTask?.emotion?.slug) {
+ setRecentEmotionSlug(currentTask.emotion.slug);
}
- setTimeLeft(currentTask.duration * 60);
- setTimerRunning(false);
- setTimeUp(false);
- }, [currentTask]);
+ }, [currentTask?.emotion?.slug]);
React.useEffect(() => {
- if (!timerRunning) return;
- if (timeLeft <= 0) {
- setTimerRunning(false);
- triggerTimeUp();
- return;
- }
- const tick = window.setInterval(() => {
- setTimeLeft((prev) => {
- if (prev <= 1) {
- window.clearInterval(tick);
- triggerTimeUp();
- return 0;
+ if (!eventKey || photoPool.length) return;
+ const controller = new AbortController();
+ setPhotoPoolLoading(true);
+ setPhotoPoolError(null);
+ fetch(`/api/v1/events/${encodeURIComponent(eventKey)}/photos?locale=de`, {
+ signal: controller.signal,
+ })
+ .then((res) => {
+ if (!res.ok) {
+ throw new Error(t('tasks.page.inspirationError'));
+ }
+ return res.json();
+ })
+ .then((payload) => {
+ const data = Array.isArray(payload?.data) ? (payload.data as EventPhoto[]) : [];
+ setPhotoPool(data);
+ })
+ .catch((err) => {
+ if (controller.signal.aborted) return;
+ console.error('Failed to load photos', err);
+ setPhotoPoolError(t('tasks.page.inspirationError'));
+ })
+ .finally(() => {
+ if (!controller.signal.aborted) {
+ setPhotoPoolLoading(false);
}
- return prev - 1;
});
- }, 1000);
- return () => window.clearInterval(tick);
- }, [timerRunning, timeLeft]);
- function triggerTimeUp() {
- const supportsVibration = typeof navigator !== 'undefined' && typeof navigator.vibrate === 'function';
- setTimerRunning(false);
- setTimeUp(true);
- if (supportsVibration) {
- try {
- navigator.vibrate(TIMER_VIBRATION);
- } catch (error) {
- console.warn('Vibration not permitted', error);
- }
- }
- window.setTimeout(() => setTimeUp(false), 4000);
- return;
-}
+ return () => controller.abort();
+ }, [eventKey, photoPool.length, t]);
- const formatTime = React.useCallback((seconds: number) => {
- const mins = Math.floor(seconds / 60);
- const secs = Math.max(0, seconds % 60);
- return `${mins}:${secs.toString().padStart(2, '0')}`;
- }, []);
+ const similarPhotos = React.useMemo(() => {
+ if (!currentTask) return [];
+ const matches = photoPool.filter((photo) => photo.task_id === currentTask.id);
+ return matches.slice(0, SIMILAR_PHOTO_LIMIT);
+ }, [photoPool, currentTask]);
- const progressRatio = currentTask ? Math.min(1, completedCount / TASK_PROGRESS_TARGET) : 0;
+ React.useEffect(() => {
+ const card = heroCardRef.current;
+ if (!card) return;
+ let startX: number | null = null;
+ let startY: number | null = null;
- const handleSelectEmotion = (slugValue: string) => {
- setSelectedEmotion(slugValue);
- const next = new URLSearchParams(searchParams.toString());
- if (slugValue === 'all') {
- next.delete('emotion');
- } else {
- next.set('emotion', slugValue);
- }
- setSearchParams(next, { replace: true });
- };
+ const onTouchStart = (event: TouchEvent) => {
+ const touch = event.touches[0];
+ startX = touch.clientX;
+ startY = touch.clientY;
+ };
- const handleNewTask = () => {
- selectRandomTask(filteredTasks);
- };
-
- const handleStartUpload = () => {
- if (!currentTask || !eventKey) return;
- if (!eventKey) return;
- navigate(`/e/${encodeURIComponent(eventKey)}/upload?task=${currentTask.id}&emotion=${currentTask.emotion?.slug || ''}`);
- };
-
- const handleMarkCompleted = () => {
- if (!currentTask) return;
- markCompleted(currentTask.id);
- selectRandomTask(filteredTasks);
- };
-
- const handleRetryFetch = () => {
- fetchTasks();
- };
-
- const handleTimerToggle = () => {
- if (!currentTask) return;
- if (timerRunning) {
- setTimerRunning(false);
- setTimeLeft(currentTask.duration * 60);
- setTimeUp(false);
- } else {
- if (timeLeft <= 0) {
- setTimeLeft(currentTask.duration * 60);
+ const onTouchEnd = (event: TouchEvent) => {
+ if (startX === null || startY === null) return;
+ const touch = event.changedTouches[0];
+ const deltaX = touch.clientX - startX;
+ const deltaY = touch.clientY - startY;
+ if (Math.abs(deltaX) > SWIPE_THRESHOLD_PX && Math.abs(deltaY) < 60) {
+ if (deltaX < 0) {
+ handleNewTask();
+ } else {
+ handleViewSimilar();
+ }
+ setHasSwiped(true);
}
- setTimerRunning(true);
- setTimeUp(false);
- }
- };
+ startX = null;
+ startY = null;
+ };
+
+ card.addEventListener('touchstart', onTouchStart, { passive: true });
+ card.addEventListener('touchend', onTouchEnd);
+ return () => {
+ card.removeEventListener('touchstart', onTouchStart);
+ card.removeEventListener('touchend', onTouchEnd);
+ };
+ }, [handleNewTask, handleViewSimilar]);
const emptyState = !loading && (!filteredTasks.length || !currentTask);
+ const heroTheme = React.useMemo(() => getEmotionTheme(currentTask?.emotion ?? null), [currentTask?.emotion]);
+ const heroEmotionIcon = getEmotionIcon(currentTask?.emotion ?? null);
+ const recentEmotionOption = React.useMemo(
+ () => emotionOptions.find((option) => option.slug === recentEmotionSlug) ?? null,
+ [emotionOptions, recentEmotionSlug]
+ );
+ const toggleValue = selectedEmotion === 'all' ? 'none' : 'recent';
+
+ const handleToggleChange = React.useCallback(
+ (value: string) => {
+ if (!value) return;
+ if (value === 'picker') {
+ setEmotionPickerOpen(true);
+ return;
+ }
+ if (value === 'none') {
+ handleSelectEmotion('all');
+ return;
+ }
+ if (value === 'recent') {
+ if (recentEmotionSlug) {
+ handleSelectEmotion(recentEmotionSlug);
+ } else {
+ setEmotionPickerOpen(true);
+ }
+ }
+ },
+ [handleSelectEmotion, recentEmotionSlug]
+ );
return (
-
-
-
-
Aufgabe auswählen
-
- Schon {completedCount} Aufgaben erledigt
-
-
-
-
- Auf dem Weg zum nächsten Erfolg
-
- {completedCount >= TASK_PROGRESS_TARGET
- ? 'Stark!'
- : `${Math.max(0, TASK_PROGRESS_TARGET - completedCount)} bis zum Badge`}
-
-
-
+ <>
+