card cosmo ambient

2026-02-20 23:28:34 +04:00
parent 9f3e5515d1
commit 5b0af6dba7
2 changed files with 158 additions and 97 deletions
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -1,8 +1,8 @@
 ---
-const { frontmatter } = Astro.props;
-const { birthDate, health, manifestations, date } = frontmatter;
+const { frontmatter, streakCount = 1 } = Astro.props;
+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
-const harmonyScore =
+// 3. SCORE D'HARMONIE RAFFINÉ [cite: 32, 33]
+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 harmonyDefPenalty = harmonyScore < -2 ? 2 : 0;
-
+const streakBonus = Math.floor(streakCount / 7);
 const autoAtk = Math.min(
-    10,
-    counts.PRO * 2 + Math.floor(autoMotivation / 4) + harmonyAtkBonus,
+    12,
+    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";
-}
-// 2. ÉQUILIBRE RICHE (BELOUVE) - Priorité si diversité de vie
-else if (uniqueCercles >= 3 && counts.SAN > 0) {
+} else if (uniqueCercles >= 3 && counts.SAN > 0) {
    autoBiome = "BELOUVE";
    biomeReason = "Harmonie des Cercles";
-}
-// 3. FLUX SOCIAL (OCEAN) - Si le social domine le pro
-else if (counts.SOC > counts.PRO || counts.FLX > 2) {
+} else if (counts.SOC > counts.PRO || counts.FLX > 2) {
    autoBiome = "OCEAN";
    biomeReason = "Flux Social & Émotionnel";
-}
-// 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) {
+} 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 {
-                            sleepBase
-                        }h • Hallu {hallucinations}
-                    </li>
-                    <li>
-                        <strong>Harmonie :</strong> Score {
+                        Stress {stress} • Sommeil {sleepBase}h • Harmonie {
                            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>
--- a/src/pages/index.astro
+++ b/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 */
-        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>