classe et espece

src/pages/creation.astro

@@ -44,25 +44,28 @@ const classData = personnages.reduce((acc, p) => {
     return acc;
 }, {});
 
-// 2. Groupement par ESPECE (Bordure HAUT = Classe principale)
+// 2. Groupement par ESPECE (Bordure HAUT = Couleurs des classes)
 const especeData = personnages.reduce((acc, p) => {
     if (!p.data.espece) return acc;
     const key = p.data.espece.toLowerCase();
     if (!acc[key]) acc[key] = [];
 
-    const mainClassName = p.data.classes_detail?.[0]?.nom;
-    const pClassData = classes.find(
-        (cl) =>
-            cl.id.toLowerCase() === mainClassName?.toLowerCase() ||
-            cl.data.title?.toLowerCase() === mainClassName?.toLowerCase(),
-    );
-    const encreKey = pClassData?.data.encre?.toLowerCase();
+    // On récupère les couleurs de TOUTES les classes du personnage
+    const classColors = (p.data.classes_detail || []).map((c) => {
+        const pClassData = classes.find(
+            (cl) =>
+                cl.id.toLowerCase() === c.nom?.toLowerCase() ||
+                cl.data.title?.toLowerCase() === c.nom?.toLowerCase(),
+        );
+        const encreKey = pClassData?.data.encre?.toLowerCase();
+        return SPECTRUM[encreKey] || "#ffffff";
+    });
 
     acc[key].push({
-        id: p.id, // ID nécessaire pour le lien
+        id: p.id,
         nom: p.data.nom,
         niveau: p.data.niveau_global || 1,
-        colorEncre: SPECTRUM[encreKey] || "#ffffff",
+        colors: classColors, // Tableau de couleurs (1 ou plusieurs)
     });
     return acc;
 }, {});
@@ -75,6 +78,12 @@ const especeData = personnages.reduce((acc, p) => {
             <div class="dnd-bar"></div>
             <p class="dnd-intro">
                 La classe définit vos compétences et votre rôle.
+                <br />
+                <span style="color:rgba(147, 72, 255, 1)">Arcane</span>,
+                <span style="color:rgba(230, 57, 70, 1)">Martial</span>,
+                <span style="color:rgba(100, 100, 100, 1)">Neutre</span>
+                <span style="color:rgba(200, 155, 60, 1)">Sacré</span>,
+                <span style="color:rgba(42, 157, 143, 1)">Primal</span>
             </p>
 
             <div class="class-grid">
@@ -125,7 +134,13 @@ const especeData = personnages.reduce((acc, p) => {
             <h2 class="dnd-title">Choisissez votre Espèce</h2>
             <div class="dnd-bar"></div>
             <p class="dnd-intro">
-                L'espèce influence votre apparence et votre histoire.
+                L'espèce influence votre apparence et votre histoire
+                <br />
+                <span style="color: rgba(200, 155, 60, 1)">solaire</span>,
+                <span style="color: rgba(0, 171, 255, 1)">elementaire</span>,
+                <span style="color: rgba(139, 69, 19, 1)">terrestre</span>,
+                <span style="color: rgba(0, 128, 0, 1)">sylvestre</span>,
+                <span style="color:rgba(75, 0, 130, 1)">ombre</span>
             </p>
 
             <div class="class-grid">
@@ -144,18 +159,28 @@ const especeData = personnages.reduce((acc, p) => {
                             >
                                 <h3>{espece.data.title}</h3>
                                 <div class="bubble-container">
-                                    {charactersInEspece.map((p) => (
-                                        <a
-                                            href={`/personnages/${p.id}`}
-                                            class="notification-bubble bubble-class-border"
-                                            style={`--p-color: ${p.colorEncre}`}
-                                        >
-                                            <span class="p-name">{p.nom}</span>
-                                            <span class="p-lvl">
-                                                Niv.{p.niveau}
-                                            </span>
-                                        </a>
-                                    ))}
+                                    {charactersInEspece.map((p) => {
+                                        // Construction du dégradé : si une seule couleur, on la double pour le gradient
+                                        const gradient =
+                                            p.colors.length > 1
+                                                ? `linear-gradient(to right, ${p.colors[0]}, ${p.colors[1]})`
+                                                : p.colors[0];
+
+                                        return (
+                                            <a
+                                                href={`/personnages/${p.id}`}
+                                                class="notification-bubble bubble-class-border"
+                                                style={`--p-gradient: ${gradient}`}
+                                            >
+                                                <span class="p-name">
+                                                    {p.nom}
+                                                </span>
+                                                <span class="p-lvl">
+                                                    Niv.{p.niveau}
+                                                </span>
+                                            </a>
+                                        );
+                                    })}
                                 </div>
                                 <p>{espece.data.description}</p>
                                 <a
@@ -258,7 +283,19 @@ const especeData = personnages.reduce((acc, p) => {
         box-shadow: inset 0 -2px 0 0 var(--p-color);
     }
     .bubble-class-border {
-        border-top: 3px solid var(--p-color) !important;
+        position: relative;
+        border-top: none !important;
+        overflow: hidden;
+    }
+
+    .bubble-class-border::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 4px; /* L'épaisseur de ta bordure haute */
+        background: var(--p-gradient);
     }
     .p-lvl {
         font-size: 0.6rem;