chim1chim2/ambient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

backlog

Browse Source
This commit is contained in:
LATCHIMY Nicolas
2026-02-24 18:12:52 +04:00
parent d1a5008cb8
commit d872e808a0
3 changed files with 168 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/liestral.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 KiB

66
src/pages/collection.astro
View File

@@ -33,36 +33,6 @@ const groupedHumans = sortedEntries.reduce((acc, entry) => {
</header>
<main class="collection-container">
{/* SECTION ÉVÉNEMENTS (Même structure que les humains) */}
{
sortedEvents.length > 0 && (
<section class="user-collection">
<h2 class="user-title">
Événements <span>({sortedEvents.length} cartes)</span>
</h2>
<div class="user-flex-row">
{sortedEvents.map((event) => (
<a
href={`/${event.id.replace(/\.md$/, "")}`}
class="card-link"
>
<div class="card-scaler">
<EventCard frontmatter={event.data} />
<div class="entry-meta">
<p>
Détecté le :{" "}
{event.data.target_date}
</p>
</div>
</div>
</a>
))}
</div>
<hr class="separator" />
</section>
)
}
{/* SECTION HUMAINS */}
{
Object.entries(groupedHumans).map(([userName, cards]) => (
@@ -94,6 +64,36 @@ const groupedHumans = sortedEntries.reduce((acc, entry) => {
</section>
))
}
{/* SECTION ÉVÉNEMENTS (Même structure que les humains) */}
{
sortedEvents.length > 0 && (
<section class="user-collection">
<h2 class="user-title">
Événements <span>({sortedEvents.length} cartes)</span>
</h2>
<div class="user-flex-row">
{sortedEvents.map((event) => (
<a
href={`/${event.id.replace(/\.md$/, "")}`}
class="card-link"
>
<div class="card-scaler">
<EventCard frontmatter={event.data} />
<div class="entry-meta">
<p>
Détecté le :{" "}
{event.data.target_date}
</p>
</div>
</div>
</a>
))}
</div>
<hr class="separator" />
</section>
)
}
</main>
</Layout>
@@ -159,8 +159,8 @@ const groupedHumans = sortedEntries.reduce((acc, entry) => {
/* 1. On définit la taille "réelle" que prendra la carte dans le flux */
/* Si ta Card fait 300px de large, on met 150px ici */
width: 150px;
height: 220px;
width: 230px;
height: 375px;
/* 2. On autorise le contenu à déborder visuellement de la boîte logicielle */
overflow: visible;
@@ -172,7 +172,7 @@ const groupedHumans = sortedEntries.reduce((acc, entry) => {
.card-scaler {
/* 3. On réduit l'échelle */
transform: scale(0.5);
transform: scale(0.8);
/* 4. On fixe l'origine en haut à gauche pour que la carte
se cale parfaitement dans le coin du .card-link */

135
src/pages/index.astro
View File

@@ -110,7 +110,74 @@ const activeSynergies = latestPerUser.map((user) => {
<main>
<h1 class="main-title">Ambient</h1>
<section class="design-intent">
<header class="rules-header">
<h2>🛠️ Chantier Ergonomique (en cours)</h2>
<p class="intent-quote">
<em
>"Repenser la visualisation des cartes pour un parcours
utilisateur en totale concordance avec les besoins du
type d'utilisateur."</em
>
</p>
</header>
<div class="work-todo-grid">
<div class="todo-column">
<h3>🎴 Ergonomie des Cartes</h3>
<ul>
<li>
Optimiser le ratio d'aspect pour une lecture
mobile-first sur Samsung/Android.
</li>
<li>
Intégrer les indicateurs de "Synergie" directement
sur le visuel de la carte.
</li>
<li>
Refondre le système de rareté (Shiny/Légendaire)
avec des effets CSS avancés.
</li>
</ul>
</div>
<div class="todo-column">
<h3>🛤️ Parcours Utilisateur</h3>
<ul>
<li>
Simplifier la transition entre la vue "Dashboard" et
la "Collection" complète.
</li>
<li>
Créer des points d'entrée contextuels selon le
cercle dominant (PRO, SAN, etc.).
</li>
<li>
Améliorer la narration visuelle entre le manuel de
jeu et les logs d'événements.
</li>
</ul>
</div>
<div class="todo-column">
<h3>⚙️ Technique & Backlog</h3>
<ul>
<li>
Automatiser la mise à jour des versions (Changelog)
via les fichiers Markdown.
</li>
<li>
Améliorer la performance du rendu Astro sur le
serveur Raspberry Pi 4.
</li>
<li>
Finaliser les composants EventCard pour les
correctifs (Fixes).
</li>
</ul>
</div>
</div>
</section>
<section class="hero-flex">
{
latestPerUser.map((entry) => {
@@ -292,6 +359,74 @@ const activeSynergies = latestPerUser.map((user) => {
</main>
</Layout>
<style>
.design-intent {
max-width: 1400px; /* Occupation maximale de l'espace */
margin: 60px auto 100px auto;
padding: 40px;
background: #f8fafc;
border-radius: 24px;
border: 1px dashed #cbd5e1; /* Aspect "travail en cours" */
}
.intent-quote {
max-width: 800px;
margin: 20px auto;
font-size: 1.1rem;
color: #475569;
text-align: center;
}
.work-todo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.todo-column {
background: white;
padding: 25px;
border-radius: 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}
.todo-column h3 {
font-family: "Philosopher", serif;
font-size: 1.2rem;
margin-bottom: 20px;
color: #1e293b;
border-bottom: 2px solid #e2e8f0;
padding-bottom: 10px;
}
.todo-column ul {
list-style: none;
padding: 0;
}
.todo-column li {
margin-bottom: 15px;
font-size: 0.95rem;
line-height: 1.5;
color: #64748b;
position: relative;
padding-left: 20px;
}
.todo-column li::before {
content: "→";
position: absolute;
left: 0;
color: #3b82f6;
font-weight: bold;
}
@media (max-width: 1024px) {
.work-todo-grid {
grid-template-columns: 1fr;
}
}
.main-title {
text-align: center;
font-family: "Philosopher", serif;