départ du tavernier
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import GameLayout from "../layouts/GameLayout.astro";
|
||||
import Header from "../components/Header.astro"; // Import du header
|
||||
|
||||
const classes = await getCollection("classes");
|
||||
const especes = await getCollection("especes");
|
||||
@@ -73,23 +74,25 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
|
||||
<GameLayout title="Création de Personnage">
|
||||
<div class="creation-container">
|
||||
<Header />
|
||||
<section class="character-select">
|
||||
<h2 class="dnd-title">Choisissez votre Classe</h2>
|
||||
<div class="dnd-bar"></div>
|
||||
<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
|
||||
<section class="character-select">
|
||||
<h2 class="dnd-title">Choisissez votre Classe</h2>
|
||||
<div class="dnd-bar"></div>
|
||||
<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;
|
||||
@@ -102,10 +105,10 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
color-mix(in srgb, rgba(147, 72, 255, 1), transparent 85%);
|
||||
}
|
||||
"
|
||||
>Arcane</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
>Arcane</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
color: rgba(230, 57, 70, 1);
|
||||
background-color: white;
|
||||
margin: 5px;
|
||||
@@ -118,10 +121,10 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
color-mix(in srgb, rgba(230, 57, 70, 1), transparent 85%);
|
||||
}
|
||||
"
|
||||
>Martial</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
>Martial</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
color: rgba(100, 100, 100, 1);
|
||||
background-color: white;
|
||||
margin: 5px;
|
||||
@@ -134,10 +137,10 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
color-mix(in srgb, rgba(100, 100, 100, 1), transparent 85%);
|
||||
}
|
||||
"
|
||||
>Neutre</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
>Neutre</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
color: rgba(200, 155, 60, 1);
|
||||
background-color: white;
|
||||
margin: 5px;
|
||||
@@ -150,10 +153,10 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
color-mix(in srgb, rgba(200, 155, 60, 1), transparent 85%);
|
||||
}
|
||||
"
|
||||
>Sacré</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
>Sacré</span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
color: rgba(42, 157, 143, 1);
|
||||
background-color: white;
|
||||
margin: 5px;
|
||||
@@ -166,308 +169,314 @@ const especeData = personnages.reduce((acc, p) => {
|
||||
color-mix(in srgb, rgba(42, 157, 143, 1), transparent 85%);
|
||||
}
|
||||
"
|
||||
>Primal</span
|
||||
>
|
||||
</div>
|
||||
>Primal</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="class-grid">
|
||||
{
|
||||
classes.map((charClass) => {
|
||||
const charactersInClass =
|
||||
classData[charClass.id.toLowerCase()] || [];
|
||||
const colorEncre =
|
||||
SPECTRUM[charClass.data.encre] || "#c89b3c";
|
||||
<div class="class-grid">
|
||||
{
|
||||
classes.map((charClass) => {
|
||||
const charactersInClass =
|
||||
classData[charClass.id.toLowerCase()] || [];
|
||||
const colorEncre =
|
||||
SPECTRUM[charClass.data.encre] || "#c89b3c";
|
||||
|
||||
return (
|
||||
<div
|
||||
class="class-card"
|
||||
style={`--accent-color: ${colorEncre}`}
|
||||
>
|
||||
<h3 class="dynamic-title">
|
||||
{charClass.data.title}
|
||||
</h3>
|
||||
<div class="bubble-container">
|
||||
{charactersInClass.map((p) => (
|
||||
<a
|
||||
href={`/personnages/${p.id}`}
|
||||
class="notification-bubble bubble-species-border"
|
||||
style={`--p-color: ${p.colorSpectre}`}
|
||||
>
|
||||
<span class="p-name">{p.nom}</span>
|
||||
<span class="p-lvl">
|
||||
Niv.{p.niveau_classe}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<p>{charClass.data.description}</p>
|
||||
<a
|
||||
href={`/classes/${charClass.id}`}
|
||||
class="select-button"
|
||||
return (
|
||||
<div
|
||||
class="class-card"
|
||||
style={`--accent-color: ${colorEncre}`}
|
||||
>
|
||||
Détails
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="character-select">
|
||||
<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
|
||||
</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>
|
||||
|
||||
<div class="class-grid">
|
||||
{
|
||||
especes.map((espece) => {
|
||||
const charactersInEspece =
|
||||
especeData[espece.id.toLowerCase()] || [];
|
||||
const colorBg =
|
||||
SPECTRUM[espece.data.spectre] ||
|
||||
"rgba(255,255,255,1)";
|
||||
|
||||
return (
|
||||
<div
|
||||
class="class-card species-card"
|
||||
style={`--bg-color: ${colorBg}`}
|
||||
>
|
||||
<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];
|
||||
|
||||
return (
|
||||
<h3 class="dynamic-title">
|
||||
{charClass.data.title}
|
||||
</h3>
|
||||
<div class="bubble-container">
|
||||
{charactersInClass.map((p) => (
|
||||
<a
|
||||
href={`/personnages/${p.id}`}
|
||||
class="notification-bubble bubble-class-border"
|
||||
style={`--p-gradient: ${gradient}`}
|
||||
class="notification-bubble bubble-species-border"
|
||||
style={`--p-color: ${p.colorSpectre}`}
|
||||
>
|
||||
<span class="p-name">
|
||||
{p.nom}
|
||||
</span>
|
||||
<span class="p-lvl">
|
||||
Niv.{p.niveau}
|
||||
Niv.{p.niveau_classe}
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</div>
|
||||
<p>{charClass.data.description}</p>
|
||||
<a
|
||||
href={`/classes/${charClass.id}`}
|
||||
class="select-button"
|
||||
>
|
||||
Détails
|
||||
</a>
|
||||
</div>
|
||||
<p>{espece.data.description}</p>
|
||||
<a
|
||||
href={`/especes/${espece.id}`}
|
||||
class="select-button species-button"
|
||||
>
|
||||
Détails
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</GameLayout>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.creation-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.character-select {
|
||||
margin: 4rem 0;
|
||||
}
|
||||
.dnd-title {
|
||||
font-family: "Playfair Display", serif;
|
||||
font-size: 2.5rem;
|
||||
color: #c89b3c;
|
||||
text-align: center;
|
||||
}
|
||||
.dnd-bar {
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
#c89b3c,
|
||||
transparent
|
||||
);
|
||||
margin: 4px auto 1rem;
|
||||
width: 50%;
|
||||
}
|
||||
.dnd-intro {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.class-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
.class-card {
|
||||
background-color: white;
|
||||
padding: 2rem 1.5rem;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
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%);
|
||||
}
|
||||
.dynamic-title {
|
||||
color: var(--accent-color) !important;
|
||||
font-family: "Playfair Display", serif;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.species-card {
|
||||
background-color: var(--bg-color) !important;
|
||||
}
|
||||
.notification-bubble {
|
||||
background: #1a1a1a !important;
|
||||
color: white !important;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.7rem;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
text-decoration: none; /* Important pour les liens */
|
||||
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);
|
||||
}
|
||||
.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 */
|
||||
background: var(--p-gradient);
|
||||
}
|
||||
.p-lvl {
|
||||
font-size: 0.6rem;
|
||||
opacity: 0.7;
|
||||
padding-left: 5px;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.bubble-container {
|
||||
<section class="character-select">
|
||||
<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
|
||||
</p>
|
||||
<div
|
||||
class="dnd-intro"
|
||||
style="
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 1.5rem;
|
||||
min-height: 30px;
|
||||
}
|
||||
.select-button {
|
||||
font-family: "Cinzel", serif;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
color: var(--accent-color);
|
||||
background: color-mix(in srgb, var(--accent-color), transparent 50%);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.select-button:hover {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
.species-button {
|
||||
border-color: #1a1a1a;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.species-button:hover {
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
}
|
||||
.class-card p {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
"
|
||||
>
|
||||
<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>
|
||||
|
||||
<div class="class-grid">
|
||||
{
|
||||
especes.map((espece) => {
|
||||
const charactersInEspece =
|
||||
especeData[espece.id.toLowerCase()] || [];
|
||||
const colorBg =
|
||||
SPECTRUM[espece.data.spectre] ||
|
||||
"rgba(255,255,255,1)";
|
||||
|
||||
return (
|
||||
<div
|
||||
class="class-card species-card"
|
||||
style={`--bg-color: ${colorBg}`}
|
||||
>
|
||||
<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];
|
||||
|
||||
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
|
||||
href={`/especes/${espece.id}`}
|
||||
class="select-button species-button"
|
||||
>
|
||||
Détails
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.creation-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.character-select {
|
||||
margin: 4rem 0;
|
||||
}
|
||||
.dnd-title {
|
||||
font-family: "Playfair Display", serif;
|
||||
font-size: 2.5rem;
|
||||
color: #c89b3c;
|
||||
text-align: center;
|
||||
}
|
||||
.dnd-bar {
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
#c89b3c,
|
||||
transparent
|
||||
);
|
||||
margin: 4px auto 1rem;
|
||||
width: 50%;
|
||||
}
|
||||
.dnd-intro {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.class-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
.class-card {
|
||||
background-color: white;
|
||||
padding: 2rem 1.5rem;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
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%);
|
||||
}
|
||||
.dynamic-title {
|
||||
color: var(--accent-color) !important;
|
||||
font-family: "Playfair Display", serif;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.species-card {
|
||||
background-color: var(--bg-color) !important;
|
||||
}
|
||||
.notification-bubble {
|
||||
background: #1a1a1a !important;
|
||||
color: white !important;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.7rem;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
text-decoration: none; /* Important pour les liens */
|
||||
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);
|
||||
}
|
||||
.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 */
|
||||
background: var(--p-gradient);
|
||||
}
|
||||
.p-lvl {
|
||||
font-size: 0.6rem;
|
||||
opacity: 0.7;
|
||||
padding-left: 5px;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.bubble-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 1.5rem;
|
||||
min-height: 30px;
|
||||
}
|
||||
.select-button {
|
||||
font-family: "Cinzel", serif;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
color: var(--accent-color);
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--accent-color),
|
||||
transparent 50%
|
||||
);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.select-button:hover {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
.species-button {
|
||||
border-color: #1a1a1a;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.species-button:hover {
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
}
|
||||
.class-card p {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
</GameLayout>
|
||||
|
||||
Reference in New Issue
Block a user