--- import { getCollection } from "astro:content"; import GameLayout from "../layouts/GameLayout.astro"; import Header from "../components/Header.astro"; const classes = await getCollection("classes"); const especes = await getCollection("especes"); const personnages = await getCollection("personnages"); // 1. Groupement par CLASSE (Bordure BAS = Espèce) const classData = personnages.reduce((acc, p) => { const pEspeceData = especes.find( (e) => e.id.toLowerCase() === p.data.espece?.toLowerCase(), ); // On récupère juste la clé du spectre (ex: 'solaire', 'ombre') const spectreKey = pEspeceData?.data.spectre?.toLowerCase() || "default"; p.data.classes_detail.forEach((c) => { if (!c.nom) return; const key = c.nom.toLowerCase(); if (!acc[key]) acc[key] = []; acc[key].push({ id: p.id, nom: p.data.nom, niveau_classe: c.niveau, spectreVar: `var(--color-${spectreKey})`, }); }); return acc; }, {}); // 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] = []; // On récupère les clés d'encre pour construire le dégradé en CSS const classInks = (p.data.classes_detail || []).map((c) => { const pClassData = classes.find( (cl) => cl.id.toLowerCase() === c.nom?.toLowerCase() || cl.data.title?.toLowerCase() === c.nom?.toLowerCase(), ); return pClassData?.data.encre?.toLowerCase() || "default"; }); acc[key].push({ id: p.id, nom: p.data.nom, niveau: p.data.niveau_global || 1, inks: classInks, }); return acc; }, {}); ---

Choisissez votre Classe

La classe définit vos compétences et votre rôle.

Arcane Martial Neutre Sacré Primal
{ classes.map((charClass) => { const charactersInClass = classData[charClass.id.toLowerCase()] || []; const encreKey = charClass.data.encre?.toLowerCase() || "default"; return (

{charClass.data.title}

{charactersInClass.map((p) => ( {p.nom} Niv.{p.niveau_classe} ))}

{charClass.data.description}

Détails
); }) }

Choisissez votre Espèce

L'espèce influence votre apparence et votre histoire

Solaire Elementaire Terrestre Sylvestre Ombre
{ especes.map((espece) => { const charactersInEspece = especeData[espece.id.toLowerCase()] || []; const spectreKey = espece.data.spectre?.toLowerCase() || "default"; return (

{espece.data.title}

{charactersInEspece.map((p) => { // Création du dégradé basé sur les variables CSS des encres const c1 = `var(--color-${p.inks[0]})`; const c2 = p.inks.length > 1 ? `var(--color-${p.inks[1]})` : c1; const gradient = `linear-gradient(to right, ${c1}, ${c2})`; return ( {p.nom} Niv.{p.niveau} ); })}

{espece.data.description}

Détails
); }) }