card cosmo ambient

2026-02-21 17:52:28 +04:00
parent e1f9e3a6e8
commit cf10410f2f
4 changed files with 347 additions and 58 deletions
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -2,7 +2,7 @@
 const { frontmatter, streakCount = 1 } = Astro.props;
 const { birthDate, health, manifestations, date, name } = frontmatter;

-// 1. CALCUL DU NIVEAU ET VARIABLES DE BASE [cite: 25, 26, 27]
+// 1. CALCUL DU NIVEAU ET VARIABLES DE BASE
 const referenceDate = new Date(date);
 const birth = new Date(birthDate);
 let age = referenceDate.getFullYear() - birth.getFullYear();
@@ -15,16 +15,19 @@ if (
 const stress = health?.somatic?.stress_level ?? 2;
 const hallucinations = health?.mental?.hallucinations ?? 0;
 const sleepBase = health?.somatic?.sleep_avg ?? 7.5;
+const energy = health?.somatic?.energy_level ?? 5;
+const hygieneScore = health?.somatic?.hygiene_level ?? 5;

-// 2. RÉINTÉGRATION DES COMPTAGES (Le fix pour l'erreur) [cite: 28, 29, 30, 31]
+// 2. RÉINTÉGRATION DES COMPTAGES
 const counts = {
    PRO: manifestations?.filter((m) => m.cercle === "PRO").length || 0,
    SAN: manifestations?.filter((m) => m.cercle === "SAN").length || 0,
    SOC: manifestations?.filter((m) => m.cercle === "SOC").length || 0,
    FLX: manifestations?.filter((m) => m.cercle === "FLX").length || 0,
+    HYG: manifestations?.filter((m) => m.cercle === "HYG").length || 0,
 };

-// 3. SCORE D'HARMONIE RAFFINÉ [cite: 32, 33]
+// 3. SCORE D'HARMONIE RAFFINÉ
 const rawHarmony =
    manifestations?.reduce((acc, m) => {
        if (m.type === "pos") return acc + 1;
@@ -33,7 +36,7 @@ const rawHarmony =
    }, 0) || 0;

 const uniqueCercles = new Set(manifestations?.map((m) => m.cercle)).size;
-const hasAllCercles = uniqueCercles === 4;
+const hasAllCercles = uniqueCercles === 5;
 const harmonyScore = rawHarmony + (hasAllCercles ? 2 : 0);

 // 4. SYSTÈME DE RARETÉ ET SHINY
@@ -56,16 +59,22 @@ const autoMotivation =
    health?.mental?.motivation ?? Math.min(10, uniqueCercles * 2.5);
 const streakBonus = Math.floor(streakCount / 7);
 const autoAtk = Math.min(
-    12,
+    15,
    counts.PRO * 2 +
        Math.floor(autoMotivation / 4) +
+        Math.floor(energy / 3) + // L'énergie booste l'attaque
        (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 + streakBonus,
+    10 +
+        Math.floor(hygieneScore / 2) -
+        stress -
+        hallucinations -
+        sleepPenalty +
+        streakBonus,
 );
 const autoCost = Math.max(1, Math.ceil((manifestations?.length || 0) / 2));

@@ -129,6 +138,36 @@ const circleSummaries = Object.entries(counts)
            manifestations?.find((m) => m.cercle === type && m.type)?.type ||
            "neu",
    }));
+
+// LAYER AUTO : Les constantes biologiques et calculées
+const autoLayer = [
+    {
+        label: "Sommeil",
+        value: `${sleepBase}h`,
+        status: sleepBase < 6 ? "critique" : "stable",
+    },
+    {
+        label: "Énergie",
+        value: `${energy}/10`,
+        status: energy < 3 ? "bas" : "normal",
+    },
+    {
+        label: "Hallucinations",
+        value: hallucinations,
+        status: hallucinations > 4 ? "alerte" : "calme",
+    },
+    { label: "Stabilité", value: currentBiome.label, status: "info" },
+];
+
+// LAYER MANUEL : Les leviers d'action et ressentis
+const manualLayer = [
+    { label: "Stress ressenti", value: `${stress}/10` },
+    { label: "Hygiène foyer", value: `${hygieneScore}/10` },
+    {
+        label: "Harmonie globale",
+        value: harmonyScore > 0 ? `+${harmonyScore}` : harmonyScore,
+    },
+];
 ---

 <article
@@ -168,19 +207,35 @@ const circleSummaries = Object.entries(counts)
            }
        </div>

-        <div class="rules-box">
-            <div class="mechanics-summary">
-                <ul>
-                    <li><strong>Origine :</strong> {biomeReason}</li>
-                    <li>
-                        <strong>Série :</strong> Bonus +{streakBonus} ATK/DEF
-                    </li>
-                    <li class="manual-values">
-                        Stress {stress} • Sommeil {sleepBase}h • Harmonie {
-                            harmonyScore > 0 ? `+${harmonyScore}` : harmonyScore
-                        }
-                    </li>
-                </ul>
+        <div class="rules-box medical-dashboard">
+            <div class="layer-auto">
+                <header class="layer-title">Indicateurs Somatiques</header>
+                <div class="stats-grid">
+                    {
+                        autoLayer.map((stat) => (
+                            <div class={`stat-item ${stat.status}`}>
+                                <span class="stat-label">{stat.label}</span>
+                                <span class="stat-value">{stat.value}</span>
+                            </div>
+                        ))
+                    }
+                </div>
+            </div>
+
+            <hr class="layer-divider" />
+
+            <div class="layer-manual">
+                <header class="layer-title">Ressentis & Hygiène</header>
+                <div class="stats-grid">
+                    {
+                        manualLayer.map((stat) => (
+                            <div class="stat-item">
+                                <span class="stat-label">{stat.label}</span>
+                                <span class="stat-value">{stat.value}</span>
+                            </div>
+                        ))
+                    }
+                </div>
            </div>
        </div>

@@ -283,14 +338,71 @@ const circleSummaries = Object.entries(counts)
    .FLX {
        border-bottom: 3px solid #10b981;
    }
+    .HYG {
+        border-bottom: 3px solid #9400ff;
+    }
    .rules-box {
        margin-top: auto;
        padding: 6px;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 6px;
    }
+    .medical-dashboard {
+        color: #0f172a;
+        padding: 8px;
+    }
+
+    .layer-title {
+        font-size: 0.65rem;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        font-weight: 800;
+        margin-bottom: 5px;
+        color: #475569;
+    }
+
+    .stats-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 4px;
+    }
+
+    .stat-item {
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.8rem;
+        padding: 2px 4px;
+        border-radius: 3px;
+        background: rgba(0, 0, 0, 0.05);
+    }
+
+    /* Alertes visuelles pour le médecin */
+    .stat-item.critique {
+        background: #fee2e27d;
+        color: #991b1b;
+        border-left: 3px solid #ef4444;
+    }
+    .stat-item.alerte {
+        background: #fef3c77d;
+        color: #92400e;
+        border-left: 3px solid #f59e0b;
+    }
+
+    .layer-divider {
+        border: 0;
+        border-top: 1px dashed #cbd5e1;
+        margin: 8px 0;
+    }
+
+    .stat-label {
+        font-weight: 500;
+    }
+    .stat-value {
+        font-family: monospace;
+        font-weight: bold;
+    }
    .mechanics-summary li {
-        font-size: 0.58rem;
+        font-size: 1rem;
        list-style: none;
        line-height: 1.3;
    }
--- a/src/pages/[...id].astro
+++ b/src/pages/[...id].astro
@@ -18,9 +18,24 @@ export async function getStaticPaths() {

 const { entry, sortedEntries } = Astro.props;
 const manifestations = entry.data.manifestations || [];
+
+// Groupement des manifestations par catégorie (cercle)
+const groupedManifestations = manifestations.reduce((acc, m) => {
+    if (!acc[m.cercle]) {
+        acc[m.cercle] = [];
+    }
+    acc[m.cercle].push(m);
+    return acc;
+}, {});
+
+// Définition de l'ordre d'affichage des cercles
+const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
 ---

-<Layout title={`Hebel - ${entry.data.name}`}>
+<Layout title={`${entry.data.name}`}>
+    <header class="collection-header">
+        <a href="/collection" class="back-link">← Retour à la collection</a>
+    </header>
    <div class="hebel-dashboard">
        <aside class="nav-column">
            <TimelineBoard entry={entry} sortedEntries={sortedEntries} />
@@ -33,17 +48,41 @@ const manifestations = entry.data.manifestations || [];
        </main>

        <aside class="details-column">
-            <h2 class="section-title">Émanations</h2>
+            <h2 class="section-title">Émanations (Détails par Cercle)</h2>
            <div class="details-scroll">
                {
-                    manifestations.map((m) => (
-                        <div class={`detail-card ${m.cercle}`}>
-                            <header>
-                                <span class="cercle-label">{m.cercle}</span>
-                            </header>
-                            <p>{m.content}</p>
-                        </div>
-                    ))
+                    circleOrder.map(
+                        (cercle) =>
+                            groupedManifestations[cercle] && (
+                                <section class={`cercle-group ${cercle}`}>
+                                    <h3 class="cercle-header">
+                                        {cercle} (
+                                        {groupedManifestations[cercle].length} )
+                                    </h3>
+                                    <div class="cercle-content">
+                                        {groupedManifestations[cercle].map(
+                                            (m) => (
+                                                <details
+                                                    class={`detail-item ${m.type || "neu"}`}
+                                                >
+                                                    <summary class="note-summary">
+                                                        <span
+                                                            class={`status-dot ${m.type || "neu"}`}
+                                                        />
+                                                        <span class="note-label">
+                                                            Séquence
+                                                        </span>
+                                                    </summary>
+                                                    <p class="private-content">
+                                                        {m.content}
+                                                    </p>
+                                                </details>
+                                            ),
+                                        )}
+                                    </div>
+                                </section>
+                            ),
+                    )
                }
            </div>
        </aside>
@@ -51,6 +90,16 @@ const manifestations = entry.data.manifestations || [];
 </Layout>

 <style>
+    .collection-header {
+        padding: 40px;
+        text-align: center;
+    }
+
+    .back-link {
+        color: #64748b;
+        text-decoration: none;
+        font-size: 0.9rem;
+    }
    .hebel-dashboard {
        display: grid;
        grid-template-columns: 280px 1fr 320px;
@@ -64,18 +113,13 @@ const manifestations = entry.data.manifestations || [];

    /* Aligner le style des colonnes sur la Card */
    .details-column {
-        background: rgba(255, 255, 255, 0.6);
-        backdrop-filter: blur(10px);
-        border-radius: 18px; /* Comme la Card [cite: 48] */
-        padding: 20px;
-        border: 1px solid #e2e8f0;
        height: calc(100vh - 40px);
        display: flex;
        flex-direction: column;
    }

    .section-title {
-        font-family: "Philosopher", serif; /* Cohérence [cite: 127] */
+        font-family: "Philosopher", serif; /* Cohérence */
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 2px;
@@ -88,11 +132,8 @@ const manifestations = entry.data.manifestations || [];
        flex: 1;
    }

-    /* Style des items calqué sur les types de la Card [cite: 107, 108, 109, 110] */
+    /* Style des items calqué sur les types de la Card */
    .detail-card {
-        background: white;
-        padding: 15px;
-        border-radius: 10px;
        margin-bottom: 12px;
        border-bottom: 4px solid #666;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
@@ -117,6 +158,105 @@ const manifestations = entry.data.manifestations || [];
        color: #94a3b8;
    }

+    .cercle-group {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 8px;
+    }
+
+    .cercle-header {
+        font-family: "Philosopher", serif;
+        border-bottom: 2px solid var(--border-color, #666);
+        padding: 5px 0;
+        margin: 15px 0 10px 0;
+    }
+
+    .detail-item summary {
+        cursor: pointer;
+        font-size: 0.85rem;
+        color: #64748b;
+        list-style: none; /* Cache la flèche par défaut */
+    }
+
+    .note-summary {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        cursor: pointer;
+        padding: 4px 0;
+        list-style: none; /* Cache la flèche par défaut */
+    }
+
+    /* Le petit point de statut minimaliste */
+    .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: #cbd5e1; /* Neutre par défaut */
+        display: inline-block;
+    }
+
+    .status-dot.pos {
+        background-color: #4ade80; /* Vert succès */
+        box-shadow: 0 0 5px rgba(74, 222, 128, 0.5);
+    }
+
+    .status-dot.neg {
+        background-color: #f87171; /* Rouge alerte */
+        box-shadow: 0 0 5px rgba(248, 113, 113, 0.5);
+    }
+
+    .note-label {
+        font-family: "Philosopher", serif;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        color: #64748b;
+    }
+
+    /* Style du contenu révélé */
+    .private-content {
+        font-size: 0.85rem;
+        line-height: 1.4;
+        padding: 10px;
+        margin-top: 5px;
+        border-left: 1px solid #e2e8f0;
+        color: #334155;
+    }
+
+    /* Couleurs des cercles basées sur tes fichiers */
+    .PRO {
+        --border-color: #f59e0b;
+    }
+    .SAN {
+        --border-color: #3b82f6;
+    }
+    .HYG {
+        --border-color: #9400ff;
+    }
+    .SOC {
+        --border-color: #ec4899;
+    }
+    .FLX {
+        --border-color: #10b981;
+    }
+
+    .detail-item {
+        font-size: 0.9rem;
+        padding: 8px;
+        margin-bottom: 6px;
+        background: white;
+        border-left: 3px solid #cbd5e1;
+        border-radius: 4px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    }
+
+    .detail-item.pos {
+        border-left-color: #4ade80;
+    }
+    .detail-item.neg {
+        border-left-color: #f87171;
+    }
+
    /* CONTROLE DU SCROLL HORIZONTAL (MOBILE) */
    .focus-column {
        display: flex;
@@ -125,32 +265,44 @@ const manifestations = entry.data.manifestations || [];
    }

    .card-scaling-container {
-        max-width: 100%; /* Empêche le débordement [cite: 128] */
+        max-width: 100%; /* Empêche le débordement */
    }

    /* RESPONSIVE : Passage en colonne pour ton Samsung */
    @media (max-width: 1100px) {
        .hebel-dashboard {
-            grid-template-columns: 1fr;
-            height: auto;
-            padding: 10px;
-        }
-
-        .nav-column,
-        .details-column {
-            order: 2;
-            height: auto;
+            display: flex; /* On passe en flex pour mieux contrôler l'empilement */
+            flex-direction: column;
+            align-items: center; /* Centre tout ce qui est dans le dashboard */
+            padding: 0;
+            margin: 0;
+            width: 100%;
+            overflow-x: hidden;
        }

        .focus-column {
-            order: 1;
+            width: 100%;
+            margin: 0;
            padding: 20px 0;
+            display: flex;
+            justify-content: center; /* Centre la carte horizontalement */
+            align-items: center;
        }

-        /* Réduction de la carte si l'écran est trop petit */
        .card-scaling-container {
+            display: block;
+            margin: 0 auto; /* Centrage automatique via les marges */
+            width: fit-content; /* S'adapte à la taille de la Card */
            transform: scale(0.9);
-            transform-origin: top center;
+            transform-origin: center center;
+        }
+
+        /* Important : On s'assure que la nav et les détails ne poussent pas le layout */
+        .nav-column,
+        .details-column {
+            width: 95%; /* Laisse une petite marge visuelle sur les côtés */
+            margin: 0 auto;
+            padding: 15px 0;
        }
    }
 </style>
--- a/src/pages/collection.astro
+++ b/src/pages/collection.astro
@@ -18,10 +18,11 @@ const groupedHumans = sortedEntries.reduce((acc, entry) => {
 }, {});
 ---

-<Layout title="Hebel - Collection">
+<Layout title="Collection">
    <header class="collection-header">
        <a href="/" class="back-link">← Retour au flux</a>
-        <h1>Toute la Collection</h1>
+        <h1>Collection</h1>
+        <p class="back-link">Cliquer sur une carte pour en voir les détails.</p>
    </header>

    <main class="collection-container">
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -12,15 +12,20 @@ const sortedAll = allHumans.sort(

 // 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
+    // 1. On récupère les données utiles (date + si HYG était présent)
    const userDates = entries
        .filter((e) => e.data.name === name)
-        .map((e) => new Date(e.data.date).toISOString().split("T")[0]);
+        .map((e) => ({
+            date: new Date(e.data.date).toISOString().split("T")[0],
+            hasHyg:
+                e.data.manifestations?.some((m) => m.cercle === "HYG") || false,
+        }));

    // On dédoublonne et on trie (plus récent au plus ancien)
    const uniqueDates = [...new Set(userDates)].sort().reverse();

    let streak = 0;
+    let hygCountLast7Days = 0;
    let today = new Date();
    // On cale la date de vérification sur aujourd'hui à minuit
    let checkDate = new Date(
@@ -45,6 +50,24 @@ const getStreak = (name, entries) => {
            break;
        }
    }
+
+    // 2. Logique Malus HYG (7 derniers jours glissants)
+    const last7Days = [];
+    for (let j = 0; j < 7; j++) {
+        let d = new Date();
+        d.setDate(d.getDate() - j);
+        last7Days.push(d.toISOString().split("T")[0]);
+    }
+
+    hygCountLast7Days = userDates.filter(
+        (e) => last7Days.includes(e.date) && e.hasHyg,
+    ).length;
+
+    // Si moins de 3 sessions HYG sur les 7 derniers jours, malus de 1
+    if (hygCountLast7Days < 3 && streak > 0) {
+        streak = Math.max(0, streak - 1);
+    }
+
    return streak;
 };

@@ -62,6 +85,7 @@ const latestPerUser = Array.from(
 ---

 <Layout title="Derniers Souffles">
+    <h1 style="text-align: center;">Ambient</h1>
    <header class="minimal-header">
        <nav>
            <a href="/collection" class="menu-link">
@@ -100,7 +124,7 @@ const latestPerUser = Array.from(
 <style>
    .minimal-header {
        position: fixed;
-        top: 0;
+        top: 50px;
        right: 0;
        padding: 20px 30px;
        z-index: 100;