card cosmo ambient

src/components/Card.astro

@@ -1,8 +1,8 @@
 ---
-const { frontmatter } = Astro.props;
+const { frontmatter, streakCount = 1 } = Astro.props;
-const { birthDate, health, manifestations, date } = frontmatter;
+const { birthDate, health, manifestations, date, name } = frontmatter;
 
-// 1. CALCUL DU NIVEAU
+// 1. CALCUL DU NIVEAU ET VARIABLES DE BASE [cite: 25, 26, 27]
 const referenceDate = new Date(date);
 const birth = new Date(birthDate);
 let age = referenceDate.getFullYear() - birth.getFullYear();
@@ -12,11 +12,11 @@ if (
 )
     age--;
 
-// 2. VARIABLES ET COMPTAGES
 const stress = health?.somatic?.stress_level ?? 2;
 const hallucinations = health?.mental?.hallucinations ?? 0;
 const sleepBase = health?.somatic?.sleep_avg ?? 7.5;
 
+// 2. RÉINTÉGRATION DES COMPTAGES (Le fix pour l'erreur) [cite: 28, 29, 30, 31]
 const counts = {
     PRO: manifestations?.filter((m) => m.cercle === "PRO").length || 0,
     SAN: manifestations?.filter((m) => m.cercle === "SAN").length || 0,
@@ -24,54 +24,64 @@ const counts = {
     FLX: manifestations?.filter((m) => m.cercle === "FLX").length || 0,
 };
 
-// 3. SCORE D'HARMONIE
+// 3. SCORE D'HARMONIE RAFFINÉ [cite: 32, 33]
-const harmonyScore =
+const rawHarmony =
     manifestations?.reduce((acc, m) => {
         if (m.type === "pos") return acc + 1;
         if (m.type === "neg") return acc - 1;
         return acc;
     }, 0) || 0;
 
-// 4. STATS TCG
 const uniqueCercles = new Set(manifestations?.map((m) => m.cercle)).size;
+const hasAllCercles = uniqueCercles === 4;
+const harmonyScore = rawHarmony + (hasAllCercles ? 2 : 0);
+
+// 4. SYSTÈME DE RARETÉ ET SHINY
+let rarity = "COMMUNE";
+let isShiny = false;
+
+// Condition Shiny : Dès 3 jours de série + équilibre des cercles
+if (streakCount >= 3 && uniqueCercles >= 3) {
+    isShiny = true;
+}
+
+// Paliers de Rareté
+if (streakCount >= 3) rarity = "PEU COMMUNE";
+if (streakCount >= 6) rarity = "RARE"; // Ta situation actuelle
+if (streakCount >= 10 && harmonyScore >= 4) rarity = "LÉGENDAIRE";
+if (streakCount >= 20 && hallucinations === 0) rarity = "MYTHIQUE";
+
+// 5. STATS TCG (Avec bonus de série)
 const autoMotivation =
     health?.mental?.motivation ?? Math.min(10, uniqueCercles * 2.5);
-const harmonyAtkBonus = harmonyScore > 0 ? 1 : 0;
+const streakBonus = Math.floor(streakCount / 7);
-const harmonyDefPenalty = harmonyScore < -2 ? 2 : 0;
-
 const autoAtk = Math.min(
-    10,
+    12,
-    counts.PRO * 2 + Math.floor(autoMotivation / 4) + harmonyAtkBonus,
+    counts.PRO * 2 +
+        Math.floor(autoMotivation / 4) +
+        (harmonyScore > 0 ? 1 : 0) +
+        streakBonus,
 );
 const sleepPenalty = sleepBase - (counts.PRO > 5 ? 1 : 0) < 6 ? 2 : 0;
 const autoDef = Math.max(
     0,
-    10 - stress - hallucinations - sleepPenalty - harmonyDefPenalty,
+    10 - stress - hallucinations - sleepPenalty + streakBonus,
 );
 const autoCost = Math.max(1, Math.ceil((manifestations?.length || 0) / 2));
 
-// 5. LOGIQUE DES BIOMES (L'ÉQUILIBRE FINAL)
+// 6. LOGIQUE DES BIOMES [cite: 39, 40, 41, 42, 43, 44]
 let autoBiome = "SAVANE";
 let biomeReason = "Équilibre par défaut";
-
-// 1. SANTÉ (ÉTANG) - Priorité critique
 if (stress > 7 || hallucinations >= 2 || harmonyScore <= -3) {
     autoBiome = "ETANG";
     biomeReason = "Alerte Santé / Harmonie critique";
-}
+} else if (uniqueCercles >= 3 && counts.SAN > 0) {
-// 2. ÉQUILIBRE RICHE (BELOUVE) - Priorité si diversité de vie
-else if (uniqueCercles >= 3 && counts.SAN > 0) {
     autoBiome = "BELOUVE";
     biomeReason = "Harmonie des Cercles";
-}
+} else if (counts.SOC > counts.PRO || counts.FLX > 2) {
-// 3. FLUX SOCIAL (OCEAN) - Si le social domine le pro
-else if (counts.SOC > counts.PRO || counts.FLX > 2) {
     autoBiome = "OCEAN";
     biomeReason = "Flux Social & Émotionnel";
-}
+} else if (counts.PRO >= 2 && counts.PRO >= counts.SOC) {
-// 4. LA FORGE (FOURNAISE) - Si le pro domine OU si on a une accumulation (>= 2)
-// mais qu'on n'est pas déjà tombé dans Belouve ou Ocean
-else if (counts.PRO >= 2 && counts.PRO >= counts.SOC) {
     autoBiome = "FOURNAISE";
     biomeReason = "Dominance Technique (PRO)";
 }
@@ -108,7 +118,6 @@ const biomes = {
         weak: "OCEAN",
     },
 };
-
 const currentBiome = biomes[autoBiome] || biomes.SAVANE;
 
 const circleSummaries = Object.entries(counts)
@@ -122,20 +131,25 @@ const circleSummaries = Object.entries(counts)
     }));
 ---
 
-<article class="tcg-card" style={`--biome-color: ${currentBiome.color}`}>
+<article
+    class={`tcg-card ${isShiny ? "shiny" : ""} ${rarity}`}
+    style={`--biome-color: ${currentBiome.color}`}
+>
     <div class="card-border">
         <header class="card-header">
-            <span class="name">{frontmatter.name}</span>
+            <span class="name">{name}</span>
             <span class="cost">{autoCost}</span>
         </header>
 
         <div class="card-art">
             <div class="biome-tag">{autoBiome}</div>
             <div class="biome-label">{currentBiome.label}</div>
+            <div class="rarity-label">{rarity}</div>
         </div>
 
         <div class="card-type-line">
             Niveau {age} — {frontmatter.identity?.job || "PROTO"}
+            <span class="streak-tag">streak {streakCount}</span>
         </div>
 
         <div class="card-body">
@@ -157,19 +171,14 @@ const circleSummaries = Object.entries(counts)
         <div class="rules-box">
             <div class="mechanics-summary">
                 <ul>
-                    <li><strong>Origine Biome :</strong> {biomeReason}</li>
+                    <li><strong>Origine :</strong> {biomeReason}</li>
                     <li>
-                        <strong>Surcharge :</strong> PRO &gt; 5 ➔ Sommeil -1h
+                        <strong>Série :</strong> Bonus +{streakBonus} ATK/DEF
                     </li>
                     <li class="manual-values">
-                        <strong>Apports :</strong> Stress {stress} • Sommeil {
+                        Stress {stress} • Sommeil {sleepBase}h • Harmonie {
-                            sleepBase
-                        }h • Hallu {hallucinations}
-                    </li>
-                    <li>
-                        <strong>Harmonie :</strong> Score {
                             harmonyScore > 0 ? `+${harmonyScore}` : harmonyScore
-                        } (Motiv. +{autoMotivation})
+                        }
                     </li>
                 </ul>
             </div>
@@ -178,7 +187,6 @@ const circleSummaries = Object.entries(counts)
         <footer class="card-footer">
             <div class="matchup">
                 <span>VS {currentBiome.strong} (+)</span>
-                <span>VS {currentBiome.weak} (-)</span>
             </div>
             <div class="stats-box">
                 {autoAtk} / {autoDef}
@@ -188,7 +196,7 @@ const circleSummaries = Object.entries(counts)
 </article>
 
 <style>
-    /* Ton CSS reste identique */
+    /* Styles de base [cite: 60, 61, 62, 63, 64, 68, 69, 81, 84, 85] */
     .tcg-card {
         width: 320px;
         height: 480px;
@@ -197,6 +205,7 @@ const circleSummaries = Object.entries(counts)
         padding: 12px;
         font-family: "Philosopher", serif;
         color: #1e293b;
+        position: relative;
     }
     .card-border {
         height: 100%;
@@ -204,6 +213,7 @@ const circleSummaries = Object.entries(counts)
         display: flex;
         flex-direction: column;
         padding: 10px;
+        border: 1px solid rgba(0, 0, 0, 0.1);
     }
     .card-header {
         display: flex;
@@ -214,6 +224,8 @@ const circleSummaries = Object.entries(counts)
         flex: 1;
         margin: 5px 0;
         position: relative;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
     }
     .biome-tag {
         background: #333;
@@ -222,10 +234,11 @@ const circleSummaries = Object.entries(counts)
         font-size: 0.6rem;
         border-radius: 5px;
         width: fit-content;
+        margin: 5px;
     }
     .biome-label {
         font-size: 0.6rem;
-        padding: 2px 0;
+        padding: 2px 8px;
     }
     .card-type-line {
         border-bottom: 1px solid #333;
@@ -233,6 +246,10 @@ const circleSummaries = Object.entries(counts)
         padding: 2px 5px;
         margin-bottom: 5px;
         font-weight: bold;
+        /* Ajout du flex pour l'alignement */
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
     }
     .card-body {
         flex: 0.8;
@@ -248,10 +265,6 @@ const circleSummaries = Object.entries(counts)
         color: white;
         background: #333;
     }
-    .type-tag small {
-        font-size: 0.6rem;
-        opacity: 0.8;
-    }
     .type-tag.pos {
         border-left: 4px solid #4ade80;
     }
@@ -275,19 +288,12 @@ const circleSummaries = Object.entries(counts)
         padding: 6px;
         background: rgba(255, 255, 255, 0.25);
         border-radius: 6px;
-        border: 1px solid rgba(0, 0, 0, 0.1);
     }
     .mechanics-summary li {
         font-size: 0.58rem;
         list-style: none;
         line-height: 1.3;
     }
-    .manual-values {
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-        margin-top: 3px;
-        padding-top: 3px;
-        font-weight: bold;
-    }
     .card-footer {
         display: flex;
         justify-content: space-between;
@@ -301,9 +307,40 @@ const circleSummaries = Object.entries(counts)
         border-radius: 5px;
         font-size: 1.1rem;
     }
-    .matchup {
+
+    /* Effets Shiny & Rareté */
+    .tcg-card.shiny {
+        animation: cardShine 5s infinite;
+    }
+    @keyframes cardShine {
+        0%,
+        100% {
+            filter: brightness(1);
+        }
+        50% {
+            filter: brightness(1.15);
+            box-shadow: 0 0 15px var(--biome-color);
+        }
+    }
+    .rarity-label {
+        position: absolute;
+        bottom: 5px;
+        right: 5px;
         font-size: 0.5rem;
-        text-transform: uppercase;
+        font-weight: bold;
+        background: rgba(0, 0, 0, 0.7);
+        color: white;
+        padding: 2px 5px;
+        border-radius: 3px;
+    }
+    .MYTHIQUE .card-border {
+        border: 2px solid #a855f7;
+    }
+    .LÉGENDAIRE .card-border {
+        border: 2px solid #fbbf24;
+    }
+    .streak-tag {
+        font-size: 0.8rem;
         font-weight: bold;
     }
 </style>

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,9 +72,16 @@ const latestPerUser = Array.from(
 
     <main class="hero-flex">
         {
-            latestPerUser.map((entry) => (
+            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} />
+                        <Card
+                            frontmatter={entry.data}
+                            streakCount={currentStreak}
+                        />
                         <div class="entry-meta">
                             <p>
                                 Dernier souffle :{" "}
@@ -45,13 +91,14 @@ const latestPerUser = Array.from(
                             </p>
                         </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 */
+        flex-wrap: wrap;
-        justify-content: center; /* Centre les cartes sur la ligne */
+        justify-content: center;
-        gap: 20px; /* Espacement simple et constant */
+        gap: 20px;
-        padding: 100px 20px; /* Padding haut pour le header fixé */
+        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 */
+        flex: 0 1 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;
-        }
     }
 </style>