card cosmo ambient

src/pages/index.astro

@@ -4,12 +4,51 @@ import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
 
 const allHumans = await getCollection("humans");
-// 1. On trie d'abord par date décroissante pour avoir les plus récents en premier [cite: 65]
+
+// 1. Tri par date décroissante
 const sortedAll = allHumans.sort(
     (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
 );
 
-// 2. On utilise une Map pour ne garder que la première occurrence (la plus récente) de chaque nom
+// 2. Fonction de calcul de Streak (Série) corrigée
+const getStreak = (name, entries) => {
+    // On extrait toutes les dates pour cet utilisateur au format YYYY-MM-DD
+    const userDates = entries
+        .filter((e) => e.data.name === name)
+        .map((e) => new Date(e.data.date).toISOString().split("T")[0]);
+
+    // On dédoublonne et on trie (plus récent au plus ancien)
+    const uniqueDates = [...new Set(userDates)].sort().reverse();
+
+    let streak = 0;
+    let today = new Date();
+    // On cale la date de vérification sur aujourd'hui à minuit
+    let checkDate = new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate(),
+    );
+
+    for (let i = 0; i < 31; i++) {
+        const dateStr = checkDate.toISOString().split("T")[0];
+
+        if (uniqueDates.includes(dateStr)) {
+            streak++;
+            checkDate.setDate(checkDate.getDate() - 1);
+        } else {
+            // Tolérance : si pas de note aujourd'hui, on vérifie si la série continue depuis hier
+            if (i === 0) {
+                checkDate.setDate(checkDate.getDate() - 1);
+                const yesterdayStr = checkDate.toISOString().split("T")[0];
+                if (uniqueDates.includes(yesterdayStr)) continue;
+            }
+            break;
+        }
+    }
+    return streak;
+};
+
+// 3. Unicité par utilisateur pour l'affichage (dernière version de chaque profil)
 const latestPerUser = Array.from(
     sortedAll
         .reduce((map, obj) => {
@@ -33,25 +72,33 @@ const latestPerUser = Array.from(
 
     <main class="hero-flex">
         {
-            latestPerUser.map((entry) => (
-                <div class="card-focus">
-                    <Card frontmatter={entry.data} />
-                    <div class="entry-meta">
-                        <p>
-                            Dernier souffle :{" "}
-                            {new Date(entry.data.date).toLocaleDateString(
-                                "fr-FR",
-                            )}
-                        </p>
+            latestPerUser.map((entry) => {
+                // On calcule la streak ICI pour l'envoyer à la carte
+                const currentStreak = getStreak(entry.data.name, allHumans);
+
+                return (
+                    <div class="card-focus">
+                        <Card
+                            frontmatter={entry.data}
+                            streakCount={currentStreak}
+                        />
+                        <div class="entry-meta">
+                            <p>
+                                Dernier souffle :{" "}
+                                {new Date(entry.data.date).toLocaleDateString(
+                                    "fr-FR",
+                                )}
+                            </p>
+                        </div>
                     </div>
-                </div>
-            ))
+                );
+            })
         }
     </main>
 </Layout>
 
 <style>
-    /* Header minimaliste pour le menu */
+    [cite_start]/* Ton CSS existant [cite: 9-23] */
     .minimal-header {
         position: fixed;
         top: 0;
@@ -59,7 +106,6 @@ const latestPerUser = Array.from(
         padding: 20px 30px;
         z-index: 100;
     }
-
     .menu-link {
         display: flex;
         align-items: center;
@@ -75,42 +121,20 @@ const latestPerUser = Array.from(
         backdrop-filter: blur(5px);
         transition: transform 0.2s ease;
     }
-
-    .menu-link:hover {
-        transform: scale(1.05);
-    }
-
-    /* Centrage absolu de la carte */
     .hero-flex {
         display: flex;
-        flex-wrap: wrap; /* Permet le retour à la ligne */
-        justify-content: center; /* Centre les cartes sur la ligne */
-        gap: 20px; /* Espacement simple et constant */
-        padding: 100px 20px; /* Padding haut pour le header fixé */
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
+        padding: 100px 20px;
         width: 100%;
         min-height: 100vh;
     }
-
     .card-focus {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 15px;
-        flex: 0 1 320px; /* Ne grandit pas, peut rétrécir, base à 320px */
-    }
-    .entry-meta {
-        font-family: "Inter", sans-serif;
-        font-size: 0.8rem;
-        color: #94a3b8;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-    }
-
-    /* Ajustement Mobile pour ton Samsung */
-    @media (max-width: 480px) {
-        .hero-flex {
-            gap: 10px; /* Gap plus serré sur téléphone */
-            padding: 80px 10px;
-        }
+        flex: 0 1 320px;
     }
 </style>