ajout de descriptions et mécaniques
This commit is contained in:
@@ -1,34 +1,19 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import GameLayout from "../layouts/GameLayout.astro";
|
||||
import Header from "../components/Header.astro"; // Import du header
|
||||
import Header from "../components/Header.astro";
|
||||
|
||||
const classes = await getCollection("classes");
|
||||
const especes = await getCollection("especes");
|
||||
const personnages = await getCollection("personnages");
|
||||
|
||||
const SPECTRUM = {
|
||||
// Encres (Classes) - Opacité 1.0
|
||||
martial: "rgba(230, 57, 70, 1)",
|
||||
arcane: "rgba(147, 72, 255, 1)",
|
||||
divin: "rgba(200, 155, 60, 1)",
|
||||
primal: "rgba(42, 157, 143, 1)",
|
||||
hybride: "rgba(100, 100, 100, 1)",
|
||||
|
||||
// Spectres (Espèces) - Opacité 0.4 (pour une meilleure visibilité)
|
||||
solaire: "rgba(200, 155, 60, 0.4)",
|
||||
elementaire: "rgba(0, 171, 255, 0.4)",
|
||||
terrestre: "rgba(139, 69, 19, 0.4)",
|
||||
sylvestre: "rgba(0, 128, 0, 0.4)",
|
||||
ombre: "rgba(75, 0, 130, 0.4)",
|
||||
};
|
||||
|
||||
// 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(),
|
||||
);
|
||||
const spectreKey = pEspeceData?.data.spectre?.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;
|
||||
@@ -36,10 +21,10 @@ const classData = personnages.reduce((acc, p) => {
|
||||
if (!acc[key]) acc[key] = [];
|
||||
|
||||
acc[key].push({
|
||||
id: p.id, // ID nécessaire pour le lien
|
||||
id: p.id,
|
||||
nom: p.data.nom,
|
||||
niveau_classe: c.niveau,
|
||||
colorSpectre: SPECTRUM[spectreKey] || "rgba(200, 200, 200, 0.5)",
|
||||
spectreVar: `var(--color-${spectreKey})`,
|
||||
});
|
||||
});
|
||||
return acc;
|
||||
@@ -51,22 +36,21 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
const key = p.data.espece.toLowerCase();
|
||||
if (!acc[key]) acc[key] = [];
|
||||
|
||||
// On récupère les couleurs de TOUTES les classes du personnage
|
||||
const classColors = (p.data.classes_detail || []).map((c) => {
|
||||
// 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(),
|
||||
);
|
||||
const encreKey = pClassData?.data.encre?.toLowerCase();
|
||||
return SPECTRUM[encreKey] || "#ffffff";
|
||||
return pClassData?.data.encre?.toLowerCase() || "default";
|
||||
});
|
||||
|
||||
acc[key].push({
|
||||
id: p.id,
|
||||
nom: p.data.nom,
|
||||
niveau: p.data.niveau_global || 1,
|
||||
colors: classColors, // Tableau de couleurs (1 ou plusieurs)
|
||||
inks: classInks,
|
||||
});
|
||||
return acc;
|
||||
}, {});
|
||||
@@ -82,95 +66,13 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
<p class="dnd-intro">
|
||||
La classe définit vos compétences et votre rôle.
|
||||
</p>
|
||||
<div
|
||||
class="dnd-intro"
|
||||
style="
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
color: rgba(147, 72, 255, 1);
|
||||
background-color: white;
|
||||
margin: 5px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow:
|
||||
0 10px 25px -5px
|
||||
color-mix(in srgb, rgba(147, 72, 255, 1), transparent 80%),
|
||||
0 8px 10px -6px
|
||||
color-mix(in srgb, rgba(147, 72, 255, 1), transparent 85%);
|
||||
}
|
||||
"
|
||||
>Arcane</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
color: rgba(230, 57, 70, 1);
|
||||
background-color: white;
|
||||
margin: 5px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow:
|
||||
0 10px 25px -5px
|
||||
color-mix(in srgb, rgba(230, 57, 70, 1), transparent 80%),
|
||||
0 8px 10px -6px
|
||||
color-mix(in srgb, rgba(230, 57, 70, 1), transparent 85%);
|
||||
}
|
||||
"
|
||||
>Martial</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
color: rgba(100, 100, 100, 1);
|
||||
background-color: white;
|
||||
margin: 5px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow:
|
||||
0 10px 25px -5px
|
||||
color-mix(in srgb, rgba(100, 100, 100, 1), transparent 80%),
|
||||
0 8px 10px -6px
|
||||
color-mix(in srgb, rgba(100, 100, 100, 1), transparent 85%);
|
||||
}
|
||||
"
|
||||
>Neutre</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
color: rgba(200, 155, 60, 1);
|
||||
background-color: white;
|
||||
margin: 5px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow:
|
||||
0 10px 25px -5px
|
||||
color-mix(in srgb, rgba(200, 155, 60, 1), transparent 80%),
|
||||
0 8px 10px -6px
|
||||
color-mix(in srgb, rgba(200, 155, 60, 1), transparent 85%);
|
||||
}
|
||||
"
|
||||
>Sacré</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
color: rgba(42, 157, 143, 1);
|
||||
background-color: white;
|
||||
margin: 5px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow:
|
||||
0 10px 25px -5px
|
||||
color-mix(in srgb, rgba(42, 157, 143, 1), transparent 80%),
|
||||
0 8px 10px -6px
|
||||
color-mix(in srgb, rgba(42, 157, 143, 1), transparent 85%);
|
||||
}
|
||||
"
|
||||
>Primal</span
|
||||
>
|
||||
|
||||
<div class="dnd-intro-badges">
|
||||
<span class="ink-badge ink-arcane">Arcane</span>
|
||||
<span class="ink-badge ink-martial">Martial</span>
|
||||
<span class="ink-badge ink-hybride">Neutre</span>
|
||||
<span class="ink-badge ink-divin">Sacré</span>
|
||||
<span class="ink-badge ink-primal">Primal</span>
|
||||
</div>
|
||||
|
||||
<div class="class-grid">
|
||||
@@ -178,13 +80,14 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
classes.map((charClass) => {
|
||||
const charactersInClass =
|
||||
classData[charClass.id.toLowerCase()] || [];
|
||||
const colorEncre =
|
||||
SPECTRUM[charClass.data.encre] || "#c89b3c";
|
||||
const encreKey =
|
||||
charClass.data.encre?.toLowerCase() ||
|
||||
"default";
|
||||
|
||||
return (
|
||||
<div
|
||||
class="class-card"
|
||||
style={`--accent-color: ${colorEncre}`}
|
||||
style={`--accent-color: var(--color-${encreKey})`}
|
||||
>
|
||||
<h3 class="dynamic-title">
|
||||
{charClass.data.title}
|
||||
@@ -194,7 +97,7 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
<a
|
||||
href={`/personnages/${p.id}`}
|
||||
class="notification-bubble bubble-species-border"
|
||||
style={`--p-color: ${p.colorSpectre}`}
|
||||
style={`--p-color: ${p.spectreVar}`}
|
||||
>
|
||||
<span class="p-name">
|
||||
{p.nom}
|
||||
@@ -225,60 +128,13 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
<p class="dnd-intro">
|
||||
L'espèce influence votre apparence et votre histoire
|
||||
</p>
|
||||
<div
|
||||
class="dnd-intro"
|
||||
style="
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
background-color: rgba(200, 155, 60, 0.4);
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>Solaire</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
background-color: rgba(0, 171, 255, 0.4);
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>Elementaire</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
background-color: rgba(139, 69, 19, 0.4);
|
||||
margin: 5px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>Terrestre</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
background-color: rgba(0, 128, 0, 0.4);
|
||||
margin: 5px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>Sylvestre</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
background-color: rgba(75, 0, 130, 0.4);
|
||||
margin: 5px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>Ombre</span
|
||||
>
|
||||
|
||||
<div class="dnd-intro-badges">
|
||||
<span class="spec-badge spec-solaire">Solaire</span>
|
||||
<span class="spec-badge spec-elementaire">Elementaire</span>
|
||||
<span class="spec-badge spec-terrestre">Terrestre</span>
|
||||
<span class="spec-badge spec-sylvestre">Sylvestre</span>
|
||||
<span class="spec-badge spec-ombre">Ombre</span>
|
||||
</div>
|
||||
|
||||
<div class="class-grid">
|
||||
@@ -286,23 +142,24 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
especes.map((espece) => {
|
||||
const charactersInEspece =
|
||||
especeData[espece.id.toLowerCase()] || [];
|
||||
const colorBg =
|
||||
SPECTRUM[espece.data.spectre] ||
|
||||
"rgba(255,255,255,1)";
|
||||
const spectreKey =
|
||||
espece.data.spectre?.toLowerCase() || "default";
|
||||
|
||||
return (
|
||||
<div
|
||||
class="class-card species-card"
|
||||
style={`--bg-color: ${colorBg}`}
|
||||
style={`--bg-color: var(--color-${spectreKey})`}
|
||||
>
|
||||
<h3>{espece.data.title}</h3>
|
||||
<div class="bubble-container">
|
||||
{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];
|
||||
// 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 (
|
||||
<a
|
||||
@@ -337,6 +194,7 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* [Tes styles existants restent identiques sauf les ajouts ci-dessous] */
|
||||
.creation-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
@@ -368,6 +226,69 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
opacity: 0.8;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.dnd-intro-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Badges d'Encre avec ombres colorées basées sur les variables du Layout */
|
||||
.ink-badge {
|
||||
background-color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.ink-arcane {
|
||||
color: var(--color-arcane);
|
||||
box-shadow: 0 4px 15px -5px var(--color-arcane);
|
||||
}
|
||||
.ink-martial {
|
||||
color: var(--color-martial);
|
||||
box-shadow: 0 4px 15px -5px var(--color-martial);
|
||||
}
|
||||
.ink-hybride {
|
||||
color: var(--color-hybride);
|
||||
box-shadow: 0 4px 15px -5px var(--color-hybride);
|
||||
}
|
||||
.ink-divin {
|
||||
color: var(--color-divin);
|
||||
box-shadow: 0 4px 15px -5px var(--color-divin);
|
||||
}
|
||||
.ink-primal {
|
||||
color: var(--color-primal);
|
||||
box-shadow: 0 4px 15px -5px var(--color-primal);
|
||||
}
|
||||
|
||||
/* Badges de Spectre */
|
||||
.spec-badge {
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.8rem;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.spec-solaire {
|
||||
background-color: var(--color-solaire);
|
||||
}
|
||||
.spec-elementaire {
|
||||
background-color: var(--color-elementaire);
|
||||
}
|
||||
.spec-terrestre {
|
||||
background-color: var(--color-terrestre);
|
||||
}
|
||||
.spec-sylvestre {
|
||||
background-color: var(--color-sylvestre);
|
||||
}
|
||||
.spec-ombre {
|
||||
background-color: var(--color-ombre);
|
||||
}
|
||||
|
||||
.class-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
@@ -382,11 +303,8 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow:
|
||||
0 10px 25px -5px
|
||||
color-mix(in srgb, var(--accent-color), transparent 80%),
|
||||
0 8px 10px -6px
|
||||
color-mix(in srgb, var(--accent-color), transparent 85%);
|
||||
box-shadow: 0 10px 25px -5px
|
||||
color-mix(in srgb, var(--accent-color), transparent 80%);
|
||||
}
|
||||
.dynamic-title {
|
||||
color: var(--accent-color) !important;
|
||||
@@ -396,6 +314,7 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
.species-card {
|
||||
background-color: var(--bg-color) !important;
|
||||
}
|
||||
|
||||
.notification-bubble {
|
||||
background: #1a1a1a !important;
|
||||
color: white !important;
|
||||
@@ -407,33 +326,34 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
text-decoration: none; /* Important pour les liens */
|
||||
text-decoration: none;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.notification-bubble:hover {
|
||||
transform: translateY(-2px);
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
.bubble-species-border {
|
||||
background-color: var(--p-color) !important;
|
||||
border-bottom: 3px solid var(--p-color) !important;
|
||||
box-shadow: inset 0 -2px 0 0 var(--p-color);
|
||||
border-bottom: 3px solid rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
.bubble-class-border {
|
||||
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 */
|
||||
height: 4px;
|
||||
background: var(--p-gradient);
|
||||
}
|
||||
|
||||
.p-lvl {
|
||||
font-size: 0.6rem;
|
||||
opacity: 0.7;
|
||||
@@ -448,6 +368,7 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
margin-bottom: 1.5rem;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.select-button {
|
||||
font-family: "Cinzel", serif;
|
||||
text-decoration: none;
|
||||
@@ -456,7 +377,7 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--accent-color),
|
||||
transparent 50%
|
||||
transparent 85%
|
||||
);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
@@ -464,14 +385,17 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.species-button {
|
||||
border-color: #1a1a1a;
|
||||
color: #1a1a1a;
|
||||
background: transparent;
|
||||
}
|
||||
.species-button:hover {
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.class-card p {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.85rem;
|
||||
|
||||
Reference in New Issue
Block a user