Files
ambient/src/components/Card.astro
2026-02-23 03:20:28 +04:00

484 lines
13 KiB
Plaintext

---
const { frontmatter, streakCount = 1 } = Astro.props;
const { birthDate, health, manifestations, date, name } = frontmatter;
const medicationTaken = health?.mental?.medication ?? false;
// 1. CALCUL DU NIVEAU ET VARIABLES DE BASE
const referenceDate = new Date(date);
const birth = new Date(birthDate);
let age = referenceDate.getFullYear() - birth.getFullYear();
if (
new Date(referenceDate.getFullYear(), birth.getMonth(), birth.getDate()) >
referenceDate
)
age--;
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
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É
const rawHarmony =
manifestations?.reduce((acc, m) => {
if (m.type === "pos") return acc + 1;
if (m.type === "neg") return acc - 1;
return acc;
}, 0) || 0;
const uniqueCercles = new Set(manifestations?.map((m) => m.cercle)).size;
const hasAllCercles = uniqueCercles === 5;
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 streakBonus = Math.floor(streakCount / 7);
const autoAtk = Math.min(
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 +
Math.floor(hygieneScore / 2) -
stress -
hallucinations -
sleepPenalty +
streakBonus,
);
const autoCost = Math.max(1, Math.ceil((manifestations?.length || 0) / 2));
// 6. LOGIQUE DES BIOMES [cite: 39, 40, 41, 42, 43, 44]
let autoBiome = "SAVANE";
let biomeReason = "Équilibre par défaut";
if (stress > 7 || hallucinations >= 2 || harmonyScore <= -3) {
autoBiome = "ETANG";
biomeReason = "Alerte Santé / Harmonie critique";
} else if (uniqueCercles >= 3 && counts.SAN > 0) {
autoBiome = "BELOUVE";
biomeReason = "Harmonie des Cercles";
} else if (counts.SOC > counts.PRO || counts.FLX > 2) {
autoBiome = "OCEAN";
biomeReason = "Flux Social & Émotionnel";
} else if (counts.PRO >= 2 && counts.PRO >= counts.SOC) {
autoBiome = "FOURNAISE";
biomeReason = "Dominance Technique (PRO)";
}
const biomes = {
ETANG: {
color: "#737e71",
label: "L'Inerte",
strong: "SAVANE",
weak: "OCEAN",
},
SAVANE: {
color: "#e2d1a4",
label: "La Clarté",
strong: "FOURNAISE",
weak: "BELOUVE",
},
OCEAN: {
color: "#85a9bc",
label: "Le Flux",
strong: "FOURNAISE",
weak: "BELOUVE",
},
BELOUVE: {
color: "#5b8c5d",
label: "La Racine",
strong: "ETANG",
weak: "FOURNAISE",
},
FOURNAISE: {
color: "#b35d4d",
label: "La Forge",
strong: "BELOUVE",
weak: "OCEAN",
},
};
const currentBiome = biomes[autoBiome] || biomes.SAVANE;
const circleSummaries = Object.entries(counts)
.filter(([_, count]) => count > 0)
.map(([type, count]) => ({
type,
count,
dominance:
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" },
{
label: "Traitement",
value: medicationTaken ? "Pris" : "Absent",
status: medicationTaken ? "stable" : "critique",
},
];
// 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
class={`tcg-card ${isShiny ? "shiny" : ""} ${rarity}`}
style={`--biome-color: ${currentBiome.color}`}
>
<div class="card-border">
<header class="card-header">
<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"}
<div class="header-tags">
{
medicationTaken && (
<span class="med-tag" title="Médication prise">
💊
</span>
)
}
<span class="streak-tag">streak {streakCount}</span>
</div>
</div>
<div class="card-body">
{
circleSummaries.map((circle) => (
<div class="effect-line">
<span
class={`type-tag ${circle.type} ${circle.dominance}`}
>
{circle.type} <small>x{circle.count}</small>
{circle.dominance === "pos" && " +"}
{circle.dominance === "neg" && " -"}
</span>
</div>
))
}
</div>
<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>
<footer class="card-footer">
<div class="matchup">
<span>VS {currentBiome.strong} (+)</span>
</div>
<div class="stats-box">
{autoAtk} / {autoDef}
</div>
</footer>
</div>
</article>
<style>
/* Styles de base [cite: 60, 61, 62, 63, 64, 68, 69, 81, 84, 85] */
.tcg-card {
width: 320px;
height: 480px;
background: var(--biome-color);
border-radius: 18px;
padding: 12px;
font-family: "Philosopher", serif;
color: #1e293b;
position: relative;
}
.card-border {
height: 100%;
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 10px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.card-header {
display: flex;
justify-content: space-between;
font-weight: bold;
}
.card-art {
flex: 1;
margin: 5px 0;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.biome-tag {
background: #333;
color: white;
padding: 2px 8px;
font-size: 0.6rem;
border-radius: 5px;
width: fit-content;
margin: 5px;
}
.biome-label {
font-size: 0.6rem;
padding: 2px 8px;
}
.card-type-line {
border-bottom: 1px solid #333;
font-size: 0.75rem;
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;
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.type-tag {
font-size: 0.7rem;
font-weight: bold;
padding: 2px 5px;
border-radius: 3px;
color: white;
background: #333;
}
.type-tag.pos {
border-left: 4px solid #4ade80;
}
.type-tag.neg {
border-left: 4px solid #f87171;
}
.PRO {
border-bottom: 3px solid #f59e0b;
}
.SAN {
border-bottom: 3px solid #3b82f6;
}
.SOC {
border-bottom: 3px solid #ec4899;
}
.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: 1rem;
list-style: none;
line-height: 1.3;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 8px;
}
.stats-box {
background: #333;
color: white;
padding: 3px 8px;
border-radius: 5px;
font-size: 1.1rem;
}
/* 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;
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;
}
.header-tags {
display: flex;
gap: 8px;
align-items: center;
}
.med-tag {
font-size: 0.9rem;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
cursor: help;
}
</style>