From 4bb7f4c97960258c3a840d21042205ab928ff088 Mon Sep 17 00:00:00 2001 From: Matthias Puchstein Date: Wed, 9 Jul 2025 23:27:45 +0200 Subject: [PATCH] added mock daily highlights, new dream entries, and enhanced personalized home page layout and functionality Signed-off-by: Matthias Puchstein --- src/data/MockDailyHighlights.ts | 24 ++ src/data/MockDreams.ts | 37 +++ src/pages/Home.tsx | 485 +++++++++++++++++--------------- 3 files changed, 314 insertions(+), 232 deletions(-) create mode 100644 src/data/MockDailyHighlights.ts diff --git a/src/data/MockDailyHighlights.ts b/src/data/MockDailyHighlights.ts new file mode 100644 index 0000000..7adbf6d --- /dev/null +++ b/src/data/MockDailyHighlights.ts @@ -0,0 +1,24 @@ +/** + * Mock data for daily highlights on the home page + * Contains top dream topics and mood categories with their percentages + */ + +// Top dream topics with percentages +export const topDreamTopics = [ + {label: "Fliegen", percentage: 28}, + {label: "Verfolgung", percentage: 22}, + {label: "Wasser", percentage: 17} +]; + +// Primary mood categories with percentages +export const primaryMoodCategories = [ + {label: "Neugier", percentage: 35}, + {label: "Freude", percentage: 30}, + {label: "Angst", percentage: 20}, + {label: "Überraschung", percentage: 15} +]; + +export default { + topDreamTopics, + primaryMoodCategories +}; \ No newline at end of file diff --git a/src/data/MockDreams.ts b/src/data/MockDreams.ts index b2f17db..78574e5 100644 --- a/src/data/MockDreams.ts +++ b/src/data/MockDreams.ts @@ -77,6 +77,43 @@ export const mockDreams: Dream[] = [new Dream({ interpretation: 'The floating city symbolizes ambition and the desire to rise above limitations. The sunrise and golden light represent hope and new beginnings.', image: 'floating_city_ai.png', }, +}), new Dream({ + id: 9, userId: 4, title: 'Quantenreise', date: new Date('2025-07-04T01:15:00Z'), input: { + inputType: 'text', + input: 'Ich reiste durch einen Tunnel aus pulsierenden Datenströmen. Jede Berührung löste neue Realitäten aus, die sich wie Fraktale vor mir entfalteten.', + } as TextInput, ai: { + interpretation: 'Die Quantenreise symbolisiert deine Faszination für Möglichkeiten und Parallelwelten. Die Datenströme repräsentieren Informationsverarbeitung und Entscheidungsfindung in deinem Unterbewusstsein.', + image: 'quantum_journey.png', + video: 'quantum_journey.mp4', + } +}), new Dream({ + id: 10, userId: 4, title: 'Neuronales Netzwerk', date: new Date('2025-07-05T02:30:00Z'), input: { + inputType: 'text', + input: 'Ich befand mich in einem riesigen neuronalen Netzwerk, wo Gedanken als leuchtende Impulse zwischen synaptischen Verbindungen tanzten. Ich konnte sie mit meinen Händen formen und lenken.', + } as TextInput, ai: { + interpretation: 'Das neuronale Netzwerk spiegelt dein Interesse an künstlicher Intelligenz und dem menschlichen Bewusstsein wider. Die Fähigkeit, Gedanken zu formen, deutet auf deinen Wunsch nach Kontrolle über deine mentalen Prozesse hin.', + image: 'neural_network.png', + audio: 'neural_network.mp3', + } +}), new Dream({ + id: 11, userId: 4, title: 'Digitaler Garten', date: new Date('2025-07-06T03:45:00Z'), input: { + inputType: 'image', + img: 'digital_garden.jpg', + imgAlt: 'Ein Garten aus leuchtenden Codezeilen und holografischen Pflanzen', + description: 'Ich pflegte einen Garten, in dem Pflanzen aus Codezeilen und Algorithmen wuchsen. Jede Blüte entfaltete sich zu einer neuen Technologie.', + } as ImageInput, ai: { + interpretation: 'Der digitale Garten verkörpert deine kreative Verbindung von Natur und Technologie. Er zeigt, wie du Innovation als organischen, wachsenden Prozess betrachtest.', + image: 'digital_garden_ai.png', + } +}), new Dream({ + id: 12, userId: 4, title: 'Zeitschleife', date: new Date('2025-07-07T04:20:00Z'), input: { + inputType: 'text', + input: 'Ich erlebte denselben Tag immer wieder, konnte aber jedes Mal kleine Änderungen vornehmen. Mit jeder Iteration wurde die Realität komplexer und unvorhersehbarer.', + } as TextInput, ai: { + interpretation: 'Die Zeitschleife reflektiert deine Gedanken über Kausalität und die Auswirkungen kleiner Entscheidungen. Sie symbolisiert auch den Wunsch, Fehler zu korrigieren und verschiedene Möglichkeiten zu erkunden.', + image: 'time_loop.png', + audio: 'time_loop.mp3', + } }), ]; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index ae192be..55a40ef 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,255 +1,276 @@ -import {BsMoonStars, BsStars} from 'react-icons/bs'; -import { - FaBed, - FaBook, - FaBrain, - FaChartBar, - FaCloud, - FaEye, - FaHeart, - FaMicrophone, - FaMoon, - FaPen, - FaRobot, - FaStar, - FaVrCardboard, -} from 'react-icons/fa'; -import {HiSparkles} from 'react-icons/hi'; -import logotext from "../assets/logotext.svg"; +import {useState} from 'react'; +import {mockDreams} from '../data/MockDreams'; +import {MockUserMap} from '../data/MockUsers'; +import {getSortedDreamsByDate} from '../data/DreamUtils'; +import {primaryMoodCategories, topDreamTopics} from '../data/MockDailyHighlights'; -interface HomeProps { - isLoggedIn: boolean; - handleLogin: () => void; -} +export default function Home() { + const [inputMode, setInputMode] = useState<'text' | 'drawing'>('text'); + const currentUser = MockUserMap.get(4); // Neo Quantum + const currentDate = new Date(); + const formattedDate = currentDate.toLocaleDateString('de-DE', { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric' + }); -export default function Home({isLoggedIn, handleLogin}: HomeProps) { + // Get personal dreams (latest 3 for user ID 4) + const personalDreams = getSortedDreamsByDate( + mockDreams.filter(dream => dream.userId === 4) + ).slice(0, 3); - if (isLoggedIn) { - return (
-

Hallo Neo!

-
) - } + // Get friends' dreams (latest 5 from other users) + const friendsDreams = getSortedDreamsByDate( + mockDreams.filter(dream => dream.userId !== 4) + ).slice(0, 5); - return (
- {/* Floating Background Elements */} -
-
- + return ( +
+ {/* Welcome Card */} +
+

Hallo Neo!

+

{formattedDate}

+

Willkommen zurück in deiner Traumwelt.

-
- -
-
- -
-
- {/* Hero Section */} -
-
-
- REMind Logo and Text -
-

Träume analysieren, Gesellschaft verstehen

-
-
-
- -

Träume sammeln • KI verstehen • VR erleben

- -
-

- Verwandle deine nächtlichen Reisen in interaktive Traumlandschaften - mit KI-gestützter Analyse und immersiven VR-Erlebnissen -

-
-
- {/* Main Features Grid - Dreamy Cards */} -
- {/* KI-Traumdeutung */} + {/* Streak Notification */}
-
-
- + className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01] floating" + style={{ + background: 'var(--accent-gradient)', + color: 'white', + boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3)' + }}> +
+
+ + + +
+
+

Traum-Streak: {currentUser?.streakDays} Tage

+

Beeindruckend! Du hältst deine Traum-Aufzeichnungen konstant bei.

-

- KI-Traumdeutung -

-

- Deine Träume werden von KI entschlüsselt - - Symbole erkannt, Emotionen analysiert, Bedeutungen offenbart -

- {/* Multimediale Traumerfassung */} -
-
-
- + {/* Input Card */} +
+
+

Neuer Traum

+
+ +
-

- Träume einfangen -

-

- Sprich deine Träume in der Nacht, zeichne traumhafte Skizzen - oder schreibe poetische Beschreibungen -

-
- {/* VR-Traumwelten */} -
-
-
- -
-
-

- VR-Traumreisen -

-

- Betritt deine Träume als begehbare Welten - - schwebe durch Erinnerungen, berühre Traumsymbole -

-
- - {/* Traumarchiv */} -
-
-
- -
-
-

- Traumschatzkammer -

-

- Deine Traumsammlung wächst - durchsuchbar nach Gefühlen, - Symbolen und magischen Momenten -

-
- - {/* Traumstatistiken */} -
-
-
- -
-
-

- Traummuster -

-

- Entdecke die geheimen Muster deiner Nachtreisen - - welche Träume kehren zurück? -

-
- - {/* Schlafrhythmus */} -
-
-
- -
-
-

- Schlafzyklen -

-

- Verstehe deine Schlafrhythmen und wie sie deine - Traumlandschaften formen -

-
-
- - {/* Dreamy Workflow Section */} -
-
- -

Deine magische Traumreise

-
-
-
+ {inputMode === 'text' ? ( + + ) : (
- + className="w-full h-40 rounded-lg mb-3 flex items-center justify-center border-2 border-dashed transition-all duration-200" + style={{ + backgroundColor: 'var(--bg)', + borderColor: 'var(--accent-soft)' + }}> +

Zeichne deinen Traum hier (Canvas-Platzhalter)

-

1. Träumen

-

- In der Nacht zeichnen deine Sensoren sanft deine Traumreisen auf -

-
-
-
- -
-

2. Einfangen

-

- Beim Erwachen flüsterst du deine Träume in die App -

-
-
-
- -
-

3. Verzaubern

-

- KI-Magie verwandelt deine Worte in Bilder, Klänge und Bedeutungen -

-
-
-
- -
-

4. Erleben

-

- Tauche ein in deine VR-Traumwelten und entdecke dich selbst -

-
-
-
+ )} - {/* Dreamy CTA Section */} -
-
-
-
- -

Wo Träume Realität werden

- +
+
+ +
-

- Lass dich von KI-gestützter Traumdeutung, VR-Erlebnissen und personalisierten - Einsichten in eine tiefere Welt deines Unterbewusstseins führen -

-
+ + {/* Personal Feed */} +
+

Deine letzten Träume

+ {personalDreams.length > 0 ? ( +
+ {personalDreams.map((dream, index) => ( +
+

{dream.title}

+

+ {dream.date.toLocaleDateString('de-DE')} +

+
+ ))} +
+ ) : ( +

+ Du hast noch keine Träume aufgezeichnet. Starte jetzt! +

+ )} +
+ + {/* Friends Feed */} +
+

Träume von Freunden

+
+ {friendsDreams.map((dream, index) => { + const dreamUser = MockUserMap.get(dream.userId); + return ( +
+
+
+ {dreamUser?.profilePicture ? ( + {dreamUser.name} + ) : ( + {dreamUser?.name.charAt(0)} + )} +
+ {dreamUser?.name} +
+

{dream.title}

+

+ {dream.date.toLocaleDateString('de-DE')} +

+
+ ); + })} +
+
+ + {/* Daily Highlights */} +
+

Tägliche Highlights

+ +
+
+

Top Traumthemen

+
    + {topDreamTopics.map((topic, index) => ( +
  • + {topic.label}: {topic.percentage}% +
    • + ))} +
+
+ +
+

Stimmungskategorien

+
    + {primaryMoodCategories.map((mood, index) => ( +
  • + {mood.label}: {mood.percentage}% +
    • + ))} +
+
+
+
+ + {/* Ad Banner */} +
+
+
+ + + +
+
+

ReMind Sensor-Gerät

+

Verbessere deine Traumerfahrung mit unserem Sensor mit EEG, + Bewegungserkennung und Vitalzeichen-Überwachung.

+
+ Pro-Funktionen: VR-Räume, Automatische Traumerkennung und Aufzeichnung +
+
+
+
-
) + ); }