Refonte visuelle : direction artistique Grèce antique

Remplace le thème générique (tokens navy/gold/ivory re-thématisables par
édition) par une direction artistique fixe et codée en dur : tribunal
égéen de nuit — marbre, or, mer sombre, sceaux de cire.

Fondations (globals.css, layout.tsx) :
- Polices next/font/google : Cinzel (titres, tracking large), Cormorant
  Garamond (citations italiques), Manrope (interface).
- Nouveaux tokens couleur : ink/ink-2 (fond mer de nuit), marble/marble-2
  (surfaces claires), gold/gold-bright (accents), oxblood (blâmes/erreurs),
  olive (honneurs/succès), sea, text-marble/text-mut (texte sur marbre —
  jamais de doré en texte courant, contraste insuffisant).
- Classes utilitaires : .marble-surface (texture par dégradés, pas
  d'image de bruit), .meander-divider (frise à méandre grecque en SVG
  data-URI).

Composants d'ornement (aucune image bitmap) :
- components/laurel-wreath.tsx : couronne de laurier calculée par
  trigonométrie (deux arcs symétriques de feuilles), réutilisée en logo,
  favicon (icon.svg régénéré avec les mêmes coordonnées) et couronne du
  rang 1 du podium.
- components/diamond-divider.tsx : séparateur ◆ avec filets dégradés.

Header global (components/header.tsx, remplace nav-bar.tsx) :
- Logo laurier + "LE TRIBUNAL" à gauche (cliquable vers le leaderboard).
- Chip utilisateur à droite : avatar (bordure dorée), pseudo, badge de
  rôle (Archonte/Citoyen), points de gloire, menu déroulant (Mon profil,
  Le Conseil des Archontes si juge, Se déconnecter).
- Onglets L'Agora / Le Crieur, frise à méandre en séparateur.
- Responsive : nom du site et pseudo masqués sous le breakpoint sm,
  l'avatar reste toujours visible.

Vocabulaire diégétique (toujours avec le terme fonctionnel à côté) :
juges → Archontes, membres → Citoyens, leaderboard → L'Agora, journal →
Le Crieur (décrets avec sceau de cire oxblood), points positifs/négatifs
→ Honneurs/Blâmes, points → gloires, section admin → Le Conseil des
Archontes.

Avatar : bordure dorée, couleur de fallback dérivée d'un hash du pseudo
(au lieu d'une couleur fixe).

Toutes les pages (login, signup, leaderboard/podium, journal, admin,
profil) sont passées sur les nouveaux tokens/polices/vocabulaire.

README.md et CLAUDE.md : section "Ré-thématisation" remplacée par
"Direction artistique" documentant la palette, les polices et les
ornements ; toute mention du système de re-thème par édition retirée.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Valentin ROBIN
2026-07-12 13:13:54 +02:00
parent e6f4463cb0
commit 9f4e58019b
25 changed files with 541 additions and 291 deletions
+36 -18
View File
@@ -1,6 +1,6 @@
# Le Tribunal
Application web pour animer et scorer le jeu **« Le Tribunal »** entre amis pendant une semaine de vacances : comptes, rôles, leaderboard en direct, attribution de points par les juges et journal public des événements. Le socle est **ré-thématisable par édition** (un thème différent chaque année).
Application web pour animer et scorer le jeu **« Le Tribunal »** entre amis pendant une semaine de vacances : comptes, rôles, leaderboard en direct, attribution de points par les juges et journal public des événements. Habillée sur le thème d'un tribunal de la Grèce antique (voir [Direction artistique](#direction-artistique)).
---
@@ -8,9 +8,9 @@ Application web pour animer et scorer le jeu **« Le Tribunal »** entre amis pe
- 🔐 **Création de compte** par email + mot de passe (email confirmé, un compte par email)
- 👤 **Connexion / déconnexion**, pseudo affiché partout (jamais l'email)
- 🖼️ **Profil éditable** : pseudo modifiable **une seule fois** puis figé (sauf par un juge), photo recadrée en rond, redimensionnée et compressée côté client
- 🖼️ **Profil éditable** : pseudo modifiable **une seule fois** puis figé (sauf par un Archonte), photo recadrée en rond, redimensionnée et compressée côté client
- 🏆 **Leaderboard en direct** (Supabase Realtime) : podium top 3 (or/argent/bronze, gestion des égalités), flèches ▲▼ de progression depuis le dernier « round »
- ⚖️ **Rôles** : `public` / `judge`. Les juges attribuent des points (+/- avec montant personnalisé et motif, confirmation explicite avant envoi) et gèrent les membres depuis une section **Admin**
- ⚖️ **Rôles** : `public` / `judge`. Les Archontes (juges) attribuent des points (+/- avec montant personnalisé et motif, confirmation explicite avant envoi) et gèrent les Citoyens depuis **Le Conseil des Archontes**
- 📣 **Le crieur** : journal public et en direct de toutes les attributions de points
- 📱 **Responsive**, pensé mobile-first et propre en vidéoprojection
@@ -21,7 +21,8 @@ Application web pour animer et scorer le jeu **« Le Tribunal »** entre amis pe
| Rôle | Techno |
|--------------------------|---------------------------------|
| Framework | Next.js 16 (App Router) + TypeScript |
| Style | Tailwind CSS v4 |
| Style | Tailwind CSS v4 (tokens Grèce antique, voir `globals.css`) |
| Typographie | Cinzel (titres), Cormorant Garamond (citations), Manrope (interface) — `next/font/google` |
| Auth · Base · Stockage · Temps réel | Supabase (Auth, Postgres, Storage, Realtime) |
| Recadrage photo | react-easy-crop + canvas (resize/compression client) |
| Email transactionnel | SMTP custom (ex. Resend) branché sur Supabase Auth |
@@ -55,7 +56,7 @@ npm install
3. Récupérez l'URL du projet et la clé `anon` dans **Project Settings → API**.
4. Dans **Authentication → Providers → Email**, **activez "Confirm email"** (un vrai email par personne, condition d'unicité des comptes).
5. Dans **Authentication → Settings → SMTP Settings**, branchez un fournisseur SMTP custom (ex. Resend) — le service email par défaut de Supabase est bridé à quelques emails/heure. Voir [Email transactionnel](#email-transactionnel) ci-dessous.
6. Une fois votre propre compte créé et confirmé via `/signup`, désignez-vous juge (voir [Rôles & administration](#rôles--administration)).
6. Une fois votre propre compte créé et confirmé via `/signup`, désignez-vous Archonte (voir [Rôles & administration](#rôles--administration)).
### 3. Variables d'environnement
@@ -110,13 +111,14 @@ tribunal-app/
│ │ ├─ leaderboard/
│ │ │ ├─ page.tsx # Fetch initial + rôle de l'utilisateur
│ │ │ └─ leaderboard-view.tsx # Realtime, podium, liste, contrôles juges
│ │ ├─ journal/ # « Le crieur » : fil d'événements en direct
│ │ ├─ admin/ # Gestion des membres + reset du repère (juges)
│ │ ├─ journal/ # « Le Crieur » : fil des décrets en direct
│ │ ├─ admin/ # Le Conseil des Archontes : gestion des membres, reset du repère
│ │ ├─ profile/ # Édition pseudo (verrou) / photo, déconnexion
│ │ ├─ layout.tsx # Layout + navigation
│ │ ├─ layout.tsx # Layout + header global
│ │ ├─ icon.svg # Favicon (couronne de laurier)
│ │ └─ page.tsx # Redirection selon l'état de connexion
│ ├─ components/ # Avatar, AvatarPicker (recadrage), NavBar, Podium,
│ │ │ # JudgePointControls
│ ├─ components/ # Header (logo + chip utilisateur), Avatar, AvatarPicker,
│ │ │ # Podium, JudgePointControls, LaurelWreath, DiamondDivider
│ ├─ lib/
│ │ ├─ ranking.ts # Classement avec égalités + calcul des flèches
│ │ ├─ image.ts # Recadrage/compression canvas côté client
@@ -137,7 +139,7 @@ Le profil (`public.profiles`) est créé automatiquement à l'inscription via un
### Verrou de pseudo
Chaque membre peut changer son pseudo **une seule fois** depuis `/profile`. Dès l'enregistrement, `pseudo_locked` passe à `true` et le champ devient en lecture seule (« pseudo figé — contacte un juge pour le changer »). Un juge peut toujours modifier le pseudo de quiconque et, s'il le souhaite, redéverrouiller un compte depuis **Admin**.
Chaque membre peut changer son pseudo **une seule fois** depuis `/profile`. Dès l'enregistrement, `pseudo_locked` passe à `true` et le champ devient en lecture seule (« pseudo figé — contacte un Archonte pour le changer »). Un Archonte peut toujours modifier le pseudo de quiconque et, s'il le souhaite, redéverrouiller un compte depuis **Le Conseil des Archontes**.
### Rôles & administration
@@ -148,7 +150,7 @@ select id, pseudo from public.profiles;
update public.profiles set role = 'judge' where id = '<uuid-du-membre>';
```
Ensuite, un juge peut promouvoir/rétrograder d'autres membres et éditer leur pseudo depuis la page **Admin** (visible uniquement par les juges, et vérifié côté serveur — pas seulement caché en front).
Ensuite, un Archonte peut promouvoir/rétrograder d'autres membres et éditer leur pseudo depuis **Le Conseil des Archontes** (visible uniquement par les Archontes, et vérifié côté serveur — pas seulement caché en front).
### Email transactionnel
@@ -168,10 +170,10 @@ Le service email intégré de Supabase (sans SMTP custom) limite l'envoi à quel
## Points, journal et classement
- **Attribution de points** : depuis le leaderboard, un juge clique `+`/`` (montant personnalisable, motif optionnel) — le delta reste **en attente** (affiché en couleur) jusqu'à un clic sur **Confirmer** (envoie la RPC `award_points`) ou **Annuler**. Le client n'écrit jamais directement la colonne `points` : la RPC vérifie le rôle juge côté serveur, applique le delta (négatif autorisé, pas de plancher à 0) et journalise l'opération.
- **Attribution de points** : depuis L'Agora, un Archonte clique `+`/`` (montant personnalisable, motif optionnel) — le delta reste **en attente** (affiché en couleur) jusqu'à un clic sur **Confirmer** (envoie la RPC `award_points`) ou **Annuler**. Le client n'écrit jamais directement la colonne `points` : la RPC vérifie le rôle juge côté serveur, applique le delta (négatif autorisé, pas de plancher à 0) et journalise l'opération.
- **Le crieur** (`/journal`) : fil de tous les événements (« Untel a donné +5 à Untel — motif »), visible par tous les authentifiés, alimenté par Supabase Realtime.
- **Podium** : top 3 mis en avant (or/argent/bronze), gère proprement les égalités (rangs partagés) et les groupes de moins de 3 membres.
- **Flèches de progression** : ▲/▼/= comparent le rang actuel au dernier repère. Un juge fige un nouveau repère via **Nouveau round** dans **Admin**.
- **Flèches de progression** : ▲/▼/= comparent le rang actuel au dernier repère. Un Archonte fige un nouveau repère via **Nouveau round** dans **Le Conseil des Archontes**.
---
@@ -179,21 +181,37 @@ Le service email intégré de Supabase (sans SMTP custom) limite l'envoi à quel
- Mots de passe hachés et gérés par Supabase Auth (jamais stockés en clair).
- **Row Level Security** activée sur `profiles` et `points_log`. La RLS étant au niveau ligne, les colonnes sensibles (`role`, `points`, `pseudo_locked`, pseudo figé) sont verrouillées par un **trigger `BEFORE UPDATE`** qui ne fait jamais confiance à ce qu'envoie le client.
- Les points ne sont modifiables que via la RPC `award_points` (`SECURITY DEFINER`), jamais par une écriture directe — même un juge ne peut pas modifier la colonne `points` à la main.
- Les points ne sont modifiables que via la RPC `award_points` (`SECURITY DEFINER`), jamais par une écriture directe — même un Archonte ne peut pas modifier la colonne `points` à la main.
- `points_log` est en lecture seule pour les clients ; seule la RPC peut y écrire.
- La page `/admin` vérifie le rôle côté serveur (Server Component) avant de rendre quoi que ce soit — pas de simple masquage front.
---
## Ré-thématisation
## Direction artistique
Les couleurs sont définies comme **design tokens** (variables CSS), afin de pouvoir changer l'habillage d'une édition à l'autre sans toucher aux composants. Palette par défaut : navy `#0F2748`, or `#C9A227`, ivoire `#F4ECD8`, encre `#2A2116`.
Thème fixe : un tribunal égéen de nuit — marbre, or, mer sombre, sceaux de cire. Tokens couleur (`globals.css`) :
| Token | Valeur | Usage |
|---|---|---|
| `--ink` / `--ink-2` | `#0A1B33` / `#0F2748` | Fond de l'app (mer de nuit), header, boutons primaires |
| `--marble` / `--marble-2` | `#F4ECD8` / `#E9DEC2` | Surfaces claires (cartes, formulaires) |
| `--gold` / `--gold-bright` | `#C9A227` / `#E7C560` | Accents, bordures, 1ʳᵉ place |
| `--oxblood` | `#A5342A` | Blâmes (points négatifs), sceaux, erreurs |
| `--olive` | `#5E6B3B` | Honneurs (points positifs), succès |
| `--sea` | `#2E6E7E` | Accent secondaire |
| `--text-marble` / `--text-mut` | `#2A2116` / `#7A6A4C` | Texte sur surfaces claires (jamais de doré sur marbre pour du texte courant — contraste insuffisant) |
Ornements en SVG/CSS inline (pas d'images bitmap) : couronne de laurier (`components/laurel-wreath.tsx`, calculée par trigonométrie), frise à méandre (`.meander-divider`), séparateur losange (`components/diamond-divider.tsx`), texture marbre (`.marble-surface`).
Vocabulaire (toujours accompagné du terme fonctionnel) : juges → **Archontes**, membres → **Citoyens**, leaderboard → **L'Agora**, journal → **Le Crieur**, points positifs/négatifs → **Honneurs**/**Blâmes**, section admin → **Le Conseil des Archontes**.
Ce thème est **codé en dur** (pas de système de re-thématisation par édition) — changer l'apparence pour une prochaine édition demande d'éditer directement les tokens et le vocabulaire.
---
## Roadmap
- [ ] **Éditions & thèmes** — année, nom du thème, mood board, vocabulaire configurable
- [ ] **Éditions** — table `editions` (année, mood board) pour rattacher les points à une édition donnée
- [ ] **Le jeu du Tribunal** — le Char, batailles de cul sec, ostracisme, roulette, timer du Gardien
- [ ] **Mode grand écran** — vue leaderboard optimisée vidéoprojecteur