diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx index 869b93b..3c34e05 100644 --- a/src/components/HomePage.tsx +++ b/src/components/HomePage.tsx @@ -10,6 +10,7 @@ interface Prayer { text: string; prayFor?: string; answered?: boolean; + answerDetails?: string; } interface HomePageProps { @@ -26,7 +27,53 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect const totalPrayers = prayers.length; const uniqueDays = new Set(prayers.map(p => p.date)).size; const answeredPrayers = prayers.filter(p => p.answered).length; - const streak = Math.floor(Math.random() * 30) + 1; // Calculate actual streak + + // Calculate actual streak - consecutive days with prayers + const calculateStreak = () => { + if (prayers.length === 0) return 0; + + const prayerDates = Array.from(new Set(prayers.map(p => p.date))).sort().reverse(); + let streak = 0; + let checkDate = new Date(today); + + for (let i = 0; i < 365; i++) { + const dateStr = checkDate.toISOString().split('T')[0]; + if (prayerDates.includes(dateStr)) { + streak++; + } else if (i === 0) { + // If today has no prayer, streak is broken (unless we haven't prayed today yet, which is ok) + break; + } else { + break; + } + checkDate.setDate(checkDate.getDate() - 1); + } + + return streak; + }; + + const streak = calculateStreak(); + + // Calculate more stats + const avgPrayerLength = totalPrayers > 0 + ? Math.round(prayers.reduce((sum, p) => sum + p.text.length, 0) / totalPrayers) + : 0; + + const answeredPercentage = totalPrayers > 0 + ? Math.round((answeredPrayers / totalPrayers) * 100) + : 0; + + // Get most prayed for person/topic + const prayerForCounts: Record = {}; + prayers.forEach(p => { + if (p.prayFor) { + prayerForCounts[p.prayFor] = (prayerForCounts[p.prayFor] || 0) + 1; + } + }); + const mostPrayedFor = Object.entries(prayerForCounts).sort((a, b) => b[1] - a[1])[0]; + + // Recent answered prayers + const recentAnswered = prayers.filter(p => p.answered).slice(0, 3); return (
@@ -67,7 +114,7 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
- {/* Stats Grid */} + {/* Main Stats Grid */}
{/* Total Prayers */}
@@ -83,20 +130,39 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
Consistent
- {/* Answered */} + {/* Answered Prayers */}
✅ Answered
{answeredPrayers}
-
Blessings
+
{answeredPercentage}% answered
{/* Streak */}
🔥 Streak
-
{streak} days
-
Keep going!
+
{streak}
+
consecutive days
+ + {/* Secondary Stats */} +
+ {/* Avg Prayer Length */} +
+
📊 Avg Length
+
{avgPrayerLength}
+
characters
+
+ + {/* Most Prayed For */} + {mostPrayedFor && ( +
+
💝 Most Prayed For
+
{mostPrayedFor[0]}
+
{mostPrayedFor[1]} times
+
+ )} +
{/* CTA Button */} @@ -112,7 +178,7 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect {/* Recent Prayers */} {recentPrayers.length > 0 && ( -
+

📖 Recent Prayers

@@ -144,6 +210,43 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
)} + {/* Recent Answered Prayers */} + {recentAnswered.length > 0 && ( +
+

+ ✨ Recently Answered +

+
+ {recentAnswered.map((prayer) => ( +
+
+
✅
+
+ {prayer.prayFor && ( +
+ 🙏 {prayer.prayFor} +
+ )} +

{prayer.text}

+ {prayer.answerDetails && ( +

+ 💬 "{prayer.answerDetails.substring(0, 60)}..." +

+ )} +
+ {new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} +
+
+
+
+ ))} +
+
+ )} + {/* Empty State */} {prayers.length === 0 && (