diff --git a/CLAUDE.md b/CLAUDE.md index 4f70098..49adbe1 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -11,9 +11,9 @@ V1 à V7 sont livrées : - **V2** : authentification par email réel (plus de pseudo+email interne), rôles `public`/`judge`, verrou de pseudo (modifiable une fois), section Admin. - **V3** : attribution de points par les juges (RPC sécurisée, +/- avec confirmation explicite), journal public « le crieur », podium top 3, flèches de progression, recadrage/compression photo côté client. - **V4** : direction artistique Grèce antique (marbre/or/mer de nuit, polices Cinzel/Cormorant Garamond/Manrope, vocabulaire Archontes/Citoyens/Agora/Crieur), header global avec chip utilisateur. -- **V5** : navigation entièrement repliée dans le menu déroulant du chip (header épuré : logo + chip seulement), page **La Roulette** (tirage au sort animé), page **Le Calendrier des Dieux** (agenda de la semaine, panthéon, date du Tribunal), boutons de validation des points unifiés (`PointsConfirmControls`) entre podium et classement. +- **V5** : navigation entièrement repliée dans le menu déroulant du chip (header épuré : logo + chip seulement), page La Roulette (tirage au sort animé — déplacée dans `/char` depuis, voir V7), page **Le Calendrier des Dieux** (agenda de la semaine, panthéon, date du Tribunal), boutons de validation des points unifiés (`PointsConfirmControls`) entre podium et classement. - **V6** : premier mini-jeu compétitif, **Le Vol d'Icare** (`/icare`) — Flappy Bird grec (Icare vole entre des colonnes de temple), record personnel all-time (pas de piste par jour), touche l'écran pour battre des ailes, échec net au premier contact (score remis à zéro, comme l'original). Les scores sont figés dès que la date du Tribunal est atteinte, puis les gloires du top 3 sont attribuées **automatiquement** (tâche planifiée `pg_cron`, sans intervention d'un Archonte) — seul mécanisme de points de tout le projet qui ne passe pas par une décision de juge. -- **V7** : outils numériques pour le vrai jeu du Tribunal (soirée physique/sociale, pas un mini-jeu digital), page **Le Jeu de l'Agora** (`/char`) — pensée **format paysage 16:9** (projetée sur grand écran) plutôt que mobile-first comme le reste de l'app. **Le Char** : 2 colonnes fixes de 3 emplacements affichées côte à côte avec un « VS » et une illustration de char vu du dessus entre les deux, affectation d'un Citoyen à un emplacement vide en un clic (liste des Citoyens libres directement cliquables, pas de menu déroulant), bouton « Retirer », boutons « Colonne A/B remporte le duel » (vide la colonne gagnante après une brève animation — les vainqueurs sortent, les perdants restent), compteur du nombre de fois que chacun est monté dans le char, avec un petit classement récapitulatif en bas de page (tout le monde, y compris ceux qui n'y sont jamais monté). La banque de questions (ajout/édition/réordonnancement/bascule afficher-masquer) vit sur une page séparée réservée aux Archontes, **`/char/questions`** — pensée pour être pilotée depuis un téléphone pendant que `/char` est projetée depuis un ordinateur ; `/char` n'affiche que la question actuellement révélée, en lecture seule. **Le Gardien du Silence** : rôle tiré au sort parmi les Citoyens (jamais les Archontes), affiché de façon discrète (barre compacte, pas une grande carte), minuteur avec reroll automatique à expiration (RPC auto-protégée, filet `pg_cron`) et bouton de reroll manuel pour les Archontes. L'app n'arbitre jamais le jeu lui-même, elle affiche/synchronise un état piloté à la main. +- **V7** : outils numériques pour le vrai jeu du Tribunal (soirée physique/sociale, pas un mini-jeu digital), page **Le Jeu de l'Agora** (`/char`) — pensée **format paysage 16:9** (projetée sur grand écran) plutôt que mobile-first comme le reste de l'app. **Le Char** : 2 colonnes fixes de 3 emplacements affichées côte à côte avec un « VS » et une illustration de char vu du dessus entre les deux, affectation d'un Citoyen à un emplacement vide en un clic (liste des Citoyens libres directement cliquables, pas de menu déroulant), bouton « Retirer », boutons « Colonne A/B remporte le duel » (vide la colonne gagnante après une brève animation — les vainqueurs sortent, les perdants restent), compteur du nombre de fois que chacun est monté dans le char, avec un petit classement récapitulatif en bas de page (tout le monde, y compris ceux qui n'y sont jamais monté). La banque de questions (ajout/édition/réordonnancement/bascule afficher-masquer) vit sur une page séparée réservée aux Archontes, **`/char/questions`** — pensée pour être pilotée depuis un téléphone pendant que `/char` est projetée depuis un ordinateur ; `/char` n'affiche que la question actuellement révélée, en lecture seule. **Le Gardien du Silence** : rôle tiré au sort parmi les Citoyens (jamais les Archontes), affiché de façon discrète (barre compacte, pas une grande carte), minuteur avec reroll automatique à expiration (RPC auto-protégée, filet `pg_cron`) et bouton de reroll manuel pour les Archontes. L'app n'arbitre jamais le jeu lui-même, elle affiche/synchronise un état piloté à la main. **La Roulette** (tirage au sort animé parmi les membres, ou les Citoyens uniquement), initialement livrée en V5 sur sa propre page `/roulette`, a été fusionnée dans `/char` comme troisième section — la route et le lien de menu dédiés ont été retirés, tout l'outillage de la soirée du Tribunal vit maintenant au même endroit. Hors périmètre pour l'instant (voir roadmap en fin de doc) : éditions/saisons, mode grand écran. @@ -109,16 +109,15 @@ Ce pattern (RLS pour l'accès à la ligne + trigger `BEFORE UPDATE` pour l'accè | `/login` | Email + mot de passe | | `/signup` | Email + mot de passe + pseudo + photo (recadrée) ; gère l'attente de confirmation email | | `/leaderboard` | « L'Agora » — podium top 3 + liste, Realtime, contrôles de points pour les juges | -| `/roulette` | « La Roulette » — tirage au sort animé parmi les membres (ou Citoyens uniquement) | | `/icare` | « Le Vol d'Icare » — Flappy Bird grec, record personnel all-time, scores figés au Tribunal, points attribués automatiquement | -| `/char` | « Le Jeu de l'Agora » — format paysage (projeté) : Le Char (2 colonnes de 3, boutons de duel) et Le Gardien du Silence (tirage aléatoire, minuteur discret) | +| `/char` | « Le Jeu de l'Agora » — format paysage (projeté) : Le Char (2 colonnes de 3, boutons de duel), Le Gardien du Silence (tirage aléatoire, minuteur discret) et La Roulette (tirage au sort animé) | | `/char/questions` | Banque de questions du Char (ajout/édition/réordonnancement/afficher-masquer) — juges uniquement, pilotée depuis un téléphone pendant que `/char` est projetée | | `/calendrier` | « Le Calendrier des Dieux » — agenda de la semaine, panthéon, date du Tribunal, édition réservée aux juges | | `/journal` | « Le Crieur » — fil live des décrets (attributions de points), lecture pour tous | | `/profile` | Pseudo (verrouillable), photo, déconnexion | -| `/admin` | « Le Conseil des Archontes » — juges uniquement, **vérifié côté serveur** (Server Component) — gestion des membres, reset du repère de classement | +| `/admin` | « Admin » — juges uniquement, **vérifié côté serveur** (Server Component), habillée d'une police monospace (rupture volontaire avec le thème grec) — gestion des membres, reset du repère de classement | -`/leaderboard`, `/profile`, `/admin`, `/journal`, `/roulette`, `/calendrier`, `/icare`, `/char` (et donc `/char/questions`, couverte par le même préfixe) sont protégées par `src/proxy.ts` (redirection `/login` si non connecté). L'accès juge-only de `/admin` et `/char/questions` n'est **pas** géré par le proxy (il n'a pas facilement le rôle) — la page elle-même vérifie et redirige ; même principe pour les boutons d'édition du Calendrier (RLS + vérification serveur, jamais un simple masquage front). +`/leaderboard`, `/profile`, `/admin`, `/journal`, `/calendrier`, `/icare`, `/char` (et donc `/char/questions`, couverte par le même préfixe) sont protégées par `src/proxy.ts` (redirection `/login` si non connecté). L'accès juge-only de `/admin` et `/char/questions` n'est **pas** géré par le proxy (il n'a pas facilement le rôle) — la page elle-même vérifie et redirige ; même principe pour les boutons d'édition du Calendrier (RLS + vérification serveur, jamais un simple masquage front). Le header global (`components/header.tsx`) est rendu dans `layout.tsx` pour tout utilisateur connecté : logo (couronne de laurier + « Le Tribunal », jamais masqué même à 320px) à gauche, chip utilisateur (avatar, pseudo, points, jamais masqués) à droite. **Aucun lien de navigation dans le header lui-même** — le chip ouvre un menu déroulant qui contient toutes les pages (avec icônes), fermeture au clic extérieur/Échap, entrée courante surlignée. @@ -150,7 +149,7 @@ Ornements en SVG/CSS inline (jamais d'image bitmap) : Convention de carte : `marble-surface rounded-2xl border border-gold/40 shadow-xl` (formulaires, podium) ou `rounded-lg border-gold/25` pour les lignes de liste. Bouton primaire : `bg-ink-2 text-gold-bright font-heading uppercase hover:bg-ink`. Bouton secondaire : `border border-gold/30 text-text-marble hover:bg-gold/10`. -Vocabulaire diégétique (toujours accompagné du terme fonctionnel dans le code/les commentaires, pour que ça reste maintenable) : juges/admins → **Archontes**, membres → **Citoyens**, leaderboard → **L'Agora**, journal des points → **Le Crieur** (décrets), points positifs/négatifs → **Honneurs**/**Blâmes**, points → **gloires**, section admin → **Le Conseil des Archontes**. +Vocabulaire diégétique (toujours accompagné du terme fonctionnel dans le code/les commentaires, pour que ça reste maintenable) : juges/admins → **Archontes**, membres → **Citoyens**, leaderboard → **L'Agora**, journal des points → **Le Crieur** (décrets), points positifs/négatifs → **Honneurs**/**Blâmes**, points → **gloires**. Exception volontaire : la page `/admin` s'appelle simplement « Admin » (police monospace, rupture délibérée avec le vocabulaire diégétique et le thème grec, pour marquer que c'est un outil technique). --- diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx index 7902119..8498c2d 100644 --- a/src/app/admin/page.tsx +++ b/src/app/admin/page.tsx @@ -1,7 +1,13 @@ import { redirect } from "next/navigation"; +import { JetBrains_Mono } from "next/font/google"; import { createClient } from "@/lib/supabase/server"; import { AdminMembersTable } from "./admin-members-table"; +const jetbrainsMono = JetBrains_Mono({ + subsets: ["latin"], + weight: ["500", "700"], +}); + export default async function AdminPage() { const supabase = await createClient(); const { @@ -32,8 +38,8 @@ export default async function AdminPage() { return (
-

- Le Conseil des Archontes +

+ > Admin

Administration des Citoyens

diff --git a/src/app/char/char-view.tsx b/src/app/char/char-view.tsx index 8c319aa..6e7051e 100644 --- a/src/app/char/char-view.tsx +++ b/src/app/char/char-view.tsx @@ -5,6 +5,7 @@ import { useCallback, useEffect, useState } from "react"; import { createClient } from "@/lib/supabase/client"; import { EntryRanking } from "./entry-ranking"; import { GardienBar } from "./gardien-bar"; +import { RouletteSection } from "./roulette-section"; import type { ProfileRow, QuestionRow, SettingsRow, SlotRow } from "./page"; import { SlotBoard } from "./slot-board"; @@ -118,6 +119,8 @@ export function CharView({ + +
); } diff --git a/src/app/char/roulette-section.tsx b/src/app/char/roulette-section.tsx new file mode 100644 index 0000000..e907fed --- /dev/null +++ b/src/app/char/roulette-section.tsx @@ -0,0 +1,164 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; +import { Avatar } from "@/components/avatar"; +import { LaurelWreath } from "@/components/laurel-wreath"; +import type { ProfileRow } from "./page"; + +const ITEM_WIDTH = 96; +const REPEATS = 6; +const SPIN_MS = 3200; + +function useReducedMotion() { + const [reduced, setReduced] = useState( + () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, + ); + useEffect(() => { + const query = window.matchMedia("(prefers-reduced-motion: reduce)"); + const handler = () => setReduced(query.matches); + query.addEventListener("change", handler); + return () => query.removeEventListener("change", handler); + }, []); + return reduced; +} + +export function RouletteSection({ profiles }: { profiles: ProfileRow[] }) { + const reducedMotion = useReducedMotion(); + const [citizensOnly, setCitizensOnly] = useState(false); + const [spinning, setSpinning] = useState(false); + const [strip, setStrip] = useState([]); + const [offset, setOffset] = useState(0); + const [transitionOn, setTransitionOn] = useState(false); + const [winner, setWinner] = useState(null); + const [lastWinner, setLastWinner] = useState(null); + const containerRef = useRef(null); + + const pool = citizensOnly ? profiles.filter((m) => m.role !== "judge") : profiles; + + function handleSpin() { + if (spinning || pool.length === 0) return; + + const chosen = pool[Math.floor(Math.random() * pool.length)]; + + if (reducedMotion) { + setWinner(chosen); + setLastWinner(chosen); + return; + } + + setWinner(null); + setSpinning(true); + + const built: ProfileRow[] = []; + for (let i = 0; i < REPEATS; i++) built.push(...pool); + built.push(chosen); + setStrip(built); + setTransitionOn(false); + setOffset(0); + + requestAnimationFrame(() => { + const containerWidth = containerRef.current?.offsetWidth ?? 320; + const finalIndex = built.length - 1; + const target = finalIndex * ITEM_WIDTH + ITEM_WIDTH / 2 - containerWidth / 2; + requestAnimationFrame(() => { + setTransitionOn(true); + setOffset(-target); + }); + }); + } + + function handleTransitionEnd() { + if (!spinning) return; + setSpinning(false); + const chosen = strip[strip.length - 1]; + setWinner(chosen); + setLastWinner(chosen); + } + + return ( +
+

La Roulette

+

Que le sort désigne l'élu.

+ + {profiles.length === 0 ? ( +

Personne n'est encore inscrit.

+ ) : ( + <> + + +
+
+ {strip.length > 0 && ( +
+ {strip.map((member, index) => ( +
+ + {member.pseudo} +
+ ))} +
+ )} +
+ +
+ +
+ +
+ {winner && ( +
+ +
+ +
+ + {winner.pseudo} + + a été désigné(e) par le sort +
+ )} +
+ + {lastWinner && !winner && ( +

+ Dernier élu : {lastWinner.pseudo} +

+ )} + + )} +
+ ); +} diff --git a/src/app/roulette/page.tsx b/src/app/roulette/page.tsx deleted file mode 100644 index fb6d9e0..0000000 --- a/src/app/roulette/page.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { redirect } from "next/navigation"; -import { createClient } from "@/lib/supabase/server"; -import { RouletteView } from "./roulette-view"; - -export default async function RoulettePage() { - const supabase = await createClient(); - const { - data: { user }, - } = await supabase.auth.getUser(); - - if (!user) { - redirect("/login"); - } - - const { data: members } = await supabase - .from("profiles") - .select("id, pseudo, avatar_url, role") - .order("pseudo", { ascending: true }); - - return ( -
-
-

- La Roulette -

-

- Que le sort désigne l'élu. -

-
- -
- ); -} diff --git a/src/app/roulette/roulette-view.tsx b/src/app/roulette/roulette-view.tsx deleted file mode 100644 index 01a2aa6..0000000 --- a/src/app/roulette/roulette-view.tsx +++ /dev/null @@ -1,162 +0,0 @@ -"use client"; - -import { useEffect, useRef, useState } from "react"; -import { Avatar } from "@/components/avatar"; -import { LaurelWreath } from "@/components/laurel-wreath"; - -type Member = { id: string; pseudo: string; avatar_url: string | null; role: string }; - -const ITEM_WIDTH = 96; -const REPEATS = 6; -const SPIN_MS = 3200; - -function useReducedMotion() { - const [reduced, setReduced] = useState( - () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, - ); - useEffect(() => { - const query = window.matchMedia("(prefers-reduced-motion: reduce)"); - const handler = () => setReduced(query.matches); - query.addEventListener("change", handler); - return () => query.removeEventListener("change", handler); - }, []); - return reduced; -} - -export function RouletteView({ members }: { members: Member[] }) { - const reducedMotion = useReducedMotion(); - const [citizensOnly, setCitizensOnly] = useState(false); - const [spinning, setSpinning] = useState(false); - const [strip, setStrip] = useState([]); - const [offset, setOffset] = useState(0); - const [transitionOn, setTransitionOn] = useState(false); - const [winner, setWinner] = useState(null); - const [lastWinner, setLastWinner] = useState(null); - const containerRef = useRef(null); - - const pool = citizensOnly ? members.filter((m) => m.role !== "judge") : members; - - function handleSpin() { - if (spinning || pool.length === 0) return; - - const chosen = pool[Math.floor(Math.random() * pool.length)]; - - if (reducedMotion) { - setWinner(chosen); - setLastWinner(chosen); - return; - } - - setWinner(null); - setSpinning(true); - - const built: Member[] = []; - for (let i = 0; i < REPEATS; i++) built.push(...pool); - built.push(chosen); - setStrip(built); - setTransitionOn(false); - setOffset(0); - - requestAnimationFrame(() => { - const containerWidth = containerRef.current?.offsetWidth ?? 320; - const finalIndex = built.length - 1; - const target = finalIndex * ITEM_WIDTH + ITEM_WIDTH / 2 - containerWidth / 2; - requestAnimationFrame(() => { - setTransitionOn(true); - setOffset(-target); - }); - }); - } - - function handleTransitionEnd() { - if (!spinning) return; - setSpinning(false); - const chosen = strip[strip.length - 1]; - setWinner(chosen); - setLastWinner(chosen); - } - - if (members.length === 0) { - return

Personne n'est encore inscrit.

; - } - - return ( -
- - -
-
- {strip.length > 0 && ( -
- {strip.map((member, index) => ( -
- - - {member.pseudo} - -
- ))} -
- )} -
- -
- -
- -
- {winner && ( -
- -
- -
- - {winner.pseudo} - - a été désigné(e) par le sort -
- )} -
- - {lastWinner && !winner && ( -

- Dernier élu : {lastWinner.pseudo} -

- )} -
- ); -} diff --git a/src/components/header.tsx b/src/components/header.tsx index 395f5f9..910ee82 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -8,7 +8,6 @@ import { LaurelWreath } from "@/components/laurel-wreath"; import { Avatar } from "@/components/avatar"; import { AgoraLogo } from "@/components/agora-logo"; import { - IconWheel, IconScroll, IconPerson, IconColumn, @@ -92,7 +91,6 @@ export function Header({ const entries: MenuEntry[] = [ { href: "/leaderboard", label: "Le Classement", icon: }, - { href: "/roulette", label: "La Roulette", icon: }, { href: "/icare", label: "Le Vol d'Icare", icon: }, { href: "/char", label: "Le Jeu de l'Agora", icon: }, { href: "/calendrier", label: "Le Calendrier des Dieux", icon: }, @@ -102,7 +100,7 @@ export function Header({ if (isJudge) { entries.push({ href: "/admin", - label: "Le Conseil des Archontes", + label: "Admin", icon: , }); } diff --git a/src/lib/supabase/middleware.ts b/src/lib/supabase/middleware.ts index 0426ec0..ecaa895 100644 --- a/src/lib/supabase/middleware.ts +++ b/src/lib/supabase/middleware.ts @@ -6,7 +6,6 @@ const PROTECTED_PATHS = [ "/profile", "/admin", "/journal", - "/roulette", "/calendrier", "/icare", "/char",