correction config.ts et evolution
This commit is contained in:
257
src/components/BankCard.astro
Normal file
257
src/components/BankCard.astro
Normal file
@@ -0,0 +1,257 @@
|
||||
---
|
||||
// BankCard.astro
|
||||
const { frontmatter, allHumans } = Astro.props;
|
||||
const { name, monthly_allowance, type = "FLUX" } = frontmatter;
|
||||
|
||||
// --- LOGIQUE DE COULEUR SUBTILE ---
|
||||
const bankConfigs = {
|
||||
UpDéjeuner: { color: "#f97316", icon: "🍴" }, // Orange Up
|
||||
"La Banque Postale": { color: "#137bb1", icon: "🏦" }, // Bleu BP
|
||||
Sumeria: { color: "#116853", icon: "⚡" }, // Vert d'eau
|
||||
};
|
||||
|
||||
const config = bankConfigs[name as keyof typeof bankConfigs] || {
|
||||
color: "#85a9bc",
|
||||
icon: "◈",
|
||||
};
|
||||
const color = config.color;
|
||||
|
||||
const now = new Date();
|
||||
// Importe le type si nécessaire (Astro le génère pour toi)
|
||||
// import type { CollectionEntry } from 'astro:content';
|
||||
|
||||
const currentMonthEntries = allHumans.filter((h: any) => {
|
||||
// Remplace 'any' par 'CollectionEntry<"humans">' si tu veux être strict
|
||||
const d = new Date(h.data.date);
|
||||
return (
|
||||
d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()
|
||||
);
|
||||
});
|
||||
|
||||
// Somme des flux
|
||||
// BankCard.astro (Partie Logique)
|
||||
const totalFlux = currentMonthEntries.reduce((acc: number, entry: any) => {
|
||||
const flxManifests =
|
||||
entry.data.manifestations?.filter((m: any) => {
|
||||
// ON FILTRE : cercle FLX ET la source doit correspondre au nom de la carte
|
||||
return m.cercle === "FLX" && m.source === name;
|
||||
}) || [];
|
||||
|
||||
return (
|
||||
acc +
|
||||
flxManifests.reduce(
|
||||
(sum: number, m: any) => sum + (Number(m.amount) || 0),
|
||||
0,
|
||||
)
|
||||
);
|
||||
}, 0);
|
||||
|
||||
const percentage = Math.max(
|
||||
0,
|
||||
Math.min(100, Math.round((totalFlux / monthly_allowance) * 100)),
|
||||
);
|
||||
|
||||
// État du Hebel
|
||||
let status = { label: "ABONDANCE", color: "#10b981" };
|
||||
if (percentage < 20) status = { label: "ÉPUISEMENT", color: "#ef4444" };
|
||||
else if (percentage < 50) status = { label: "FLUX TENDU", color: "#f59e0b" };
|
||||
else if (percentage < 85) status = { label: "ÉQUILIBRE", color: "#3b82f6" };
|
||||
---
|
||||
|
||||
<article
|
||||
class="tcg-card bank-card"
|
||||
style={`--accent: ${color}; --state-color: ${status.color}`}
|
||||
>
|
||||
<div class="card-inner">
|
||||
<header class="card-header">
|
||||
<span class="card-name">{name}</span>
|
||||
<span class="card-cost">{config.icon}</span>
|
||||
</header>
|
||||
|
||||
<div class="visual-container">
|
||||
<div class="source-gauge">
|
||||
<svg viewBox="0 0 36 36" class="circular-chart">
|
||||
<path
|
||||
class="circle-bg"
|
||||
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
||||
></path>
|
||||
<path
|
||||
class="circle"
|
||||
stroke-dasharray={`${percentage}, 100`}
|
||||
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
||||
></path>
|
||||
<text x="18" y="20.35" class="percentage"
|
||||
>{percentage}%</text
|
||||
>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="status-badge">{status.label}</div>
|
||||
</div>
|
||||
|
||||
<div class="card-type-line">
|
||||
Ressource — {type}
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="flavor-text">
|
||||
{
|
||||
percentage > 50
|
||||
? "Le souffle circule avec aisance."
|
||||
: "Le flux se raréfie, prudence."
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="mechanics">
|
||||
<div class="stat-row">
|
||||
<span>Intégrité</span>
|
||||
<div class="power-bar">
|
||||
{
|
||||
Array.from({ length: 5 }).map((_, i) => (
|
||||
<div
|
||||
class={`segment ${i < percentage / 20 ? "active" : ""}`}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="card-footer">
|
||||
<span class="rarity-symbol">✦✦✧</span>
|
||||
<div class="reserve-level">RÉSERVE {percentage}/100</div>
|
||||
</footer>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.bank-card {
|
||||
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
|
||||
color: #1a202c;
|
||||
border-color: var(
|
||||
--accent
|
||||
) !important; /* Bordure subtile de la couleur de la banque */
|
||||
}
|
||||
|
||||
.card-inner {
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e2e8f0; /* Souligné subtil */
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-weight: bold;
|
||||
font-family: "Philosopher", serif;
|
||||
font-size: 1.1rem;
|
||||
color: var(--accent); /* Nom coloré subtilement */
|
||||
}
|
||||
|
||||
.visual-container {
|
||||
flex: 1;
|
||||
background: #f1f5f9;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
gap: 10px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.circular-chart {
|
||||
max-width: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
.circle-bg {
|
||||
fill: none;
|
||||
stroke: rgba(0, 0, 0, 0.05);
|
||||
stroke-width: 3.8;
|
||||
}
|
||||
.circle {
|
||||
fill: none;
|
||||
stroke: var(--accent); /* La jauge prend la couleur de la banque */
|
||||
stroke-width: 2.8;
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dasharray 1s ease;
|
||||
}
|
||||
.percentage {
|
||||
fill: #1a202c;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 0.5rem;
|
||||
text-anchor: middle;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
background: var(
|
||||
--state-color
|
||||
); /* Garde la couleur d'état (vert/orange/rouge) pour la sécurité */
|
||||
color: white;
|
||||
font-size: 0.5rem;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.card-type-line {
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
margin: 8px 0;
|
||||
padding-bottom: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.flavor-text {
|
||||
font-size: 0.65rem;
|
||||
font-style: italic;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 10px;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
color: #475569;
|
||||
}
|
||||
.power-bar {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
}
|
||||
.segment {
|
||||
width: 14px;
|
||||
height: 4px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.segment.active {
|
||||
background: var(--accent); /* Segments de la couleur de la banque */
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.6rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user