Guide 👀 Spectateur — consulter le classement
⚠️ Document généré automatiquement par les tests E2E (
e2e/browser.test.ts). Toute modification manuelle sera écrasée au prochain run.
Tu suis la course depuis ton téléphone — en lecture seule. Le classement se met à jour en temps réel grâce au WebSocket, et tu peux exporter les résultats en CSV à la fin. Tu ne peux rien modifier : pas de scan, pas d'édition, pas de suppression. Toute action d'écriture est protégée par le mot de passe de la course (réservé au directeur et aux scanneurs).
Sommaire
Démarrer une course
3. Splash : à quel rôle es-tu ?
Quand un téléphone arrive sur une course sans préciser la vue (par exemple via un lien WhatsApp partagé), un écran d'orientation s'affiche : « Quel est ton rôle sur cette course ? ». Quatre cartes : 🎯 Directeur, 📱 Scanneur, 👀 Spectateur, ⚙️ Administrateur.
Le choix est mémorisé sur ce téléphone — la prochaine fois qu'on revient sur la course, on est redirigé directement vers la bonne vue (sans repasser par ce splash). Les QR codes générés depuis la page Configuration mènent quant à eux directement sur la bonne vue, sans passer par ce splash.
4. Page d'accueil — pitch & contact
La page d'accueil de ttt-chrono.juulieen.fr est une page de présentation publique du projet. Elle s'ouvre sur un hero avec le pitch (« Chronométrer ta backyard, par un coureur, pour des organisateurs ») et deux CTA : Je veux ce système pour ma course (qui scrolle vers le formulaire de contact) et Voir comment ça marche.
La page raconte ensuite la genèse du projet (un coup de fil du club Run Event 86, une backyard à organiser, pas de solution abordable sur le marché), puis explique en 3 cartes comment ça marche : bracelets NFC scannés par téléphone Android, multi-téléphone hors-ligne, résultats live sur web et grand écran TV. Quatre chiffres clés rappellent le bilan de la Tic Tac Trail 2026 (177 coureurs, 1 201 tours, 17h de course, 1 finisher). Sous ces chiffres, deux liens : les résultats live de la Tic Tac Trail 2026, toujours en ligne, et l'archive des courses passées (/races).
Une mosaïque photos du jour J (arche départ, vainqueur, ambiance nuit, podium) précède le formulaire de contact présenté comme un service sur mesure : un orga peut écrire pour présenter sa course (format, date prévue, ordre de grandeur du nombre de coureurs, message). Le bouton Envoyer ouvre le client mail prérempli pour caler un appel et discuter du périmètre et des conditions ; un bouton secondaire propose WhatsApp. Email et téléphone sont assemblés en JS pour ne pas être moissonnés par les bots.
En bas, un encart 🙏 Merci Run Event 86 rend hommage explicitement au club, sans qui le projet n'existerait pas. Deux boutons sociaux y sont affichés : Instagram (@run_event_86) et Facebook (Run Event 86), qui s'ouvrent dans un nouvel onglet.
Une zone repliable 📂 Mes courses (en bas, ouverte par défaut) regroupe les outils admin : bouton + Nouvelle course, lien 📖 Guide vers cette documentation, panneau persona (4 cartes Administrateur / Directeur / Scanneur / Spectateur), et la liste de toutes les courses créées avec leurs boutons d'accès rapide selon leur statut (Tags NFC, Contrôle, Arrivée, Résultats, 📊 Stats). Sur chaque fiche course, en plus des boutons d'action, des compteurs indiquent le nombre de dossards et de scans enregistrés. Pour une course en cours, le tour actuel est affiché en accent (ex : Tour 3 en cours).
Pastille de synchronisation (en haut à droite, visible sur toutes les vues) : indique l'état du téléphone d'un coup d'œil. 🟢 Sync = toutes les données sont synchronisées avec le serveur. 🟡 N en attente = N scans en file d'attente, qui partiront automatiquement à la reconnexion (mode hors-ligne) — y compris si la course s'est terminée entre-temps : un scan fait pendant la course est toujours compté. Un scan ne quitte la file qu'une fois confirmé par le serveur ; s'il est refusé (par exemple horodaté après la fin de course), un message rouge l'indique avec le numéro de dossard. 🔴 Hors ligne = pas de connexion. Plus besoin de mémoriser un code couleur — le libellé est lisible directement.
Pendant la course
10. Vue Résultats
L'écran Résultats affiche en temps réel le classement, le nombre de tours complétés par coureur et leur statut. Il se met à jour à chaque scan grâce à la synchronisation WebSocket.
14. Classement en cours de course
Le classement se met à jour automatiquement. Le nombre de tours complétés, le temps du dernier tour et le temps total depuis le départ permettent de visualiser qui mène la course. Les téléphones connectés voient les mêmes données simultanément.
Fin de course
23. Course terminée — vainqueur affiché
Une fois la course terminée, l'écran de contrôle affiche un encadré clair avec le titre Course terminée ! en orange et le nom du vainqueur (le coureur avec le plus de tours complétés). Tous les téléphones connectés voient simultanément la fin de course.
25. Classement final
Une fois la course terminée, l'écran Résultats liste tous les coureurs classés avec leur temps total et le temps du dernier tour. Le vainqueur est marqué d'un badge Vainqueur orange ; les coureurs qui ont abandonné portent un badge Abandon rouge. Bouton Export CSV en haut pour exporter le classement complet.
Sur le classement public (lecture seule, /race/<id>/results/public), un lien 📊 Statistiques de la course sous le nom de la course ouvre la page de statistiques (survie, records, la course de chacun).
26. Statistiques — la story « Ma course »
Le champ 🏃 Ma course lance la story du coureur, en plein écran, comme sur Instagram : une suite d'écrans animés (de 4 à 7 selon sa course) qui racontent sa course — ses tours et jusqu'où ils l'auraient mené (« plus loin que Niort »), son rythme face à la cloche, son moment fort (record, cap des 100 km, compagnon de route), sa place formulée positivement, la nuit s'il l'a vécue — et se termine sur une carte récapitulative avec son archétype (Le Métronome, Le Funambule, L'Oiseau de nuit…).
Touchez à droite pour avancer, à gauche pour revenir, appuyez longuement pour mettre en pause. 🖼 Partager l'écran (ou la carte sur le dernier écran) envoie l'image 1080×1920 ; 🎬 Partager en vidéo enregistre la story entière en vidéo (MP4 sur Android) — Instagram, WhatsApp… via le partage du téléphone, sinon le fichier est téléchargé. On peut aussi la relancer depuis la fiche du coureur avec ▶ Voir sa story. Le bouton ▶ La course en stories de l'affiche raconte la course entière en 4 écrans.
27. Statistiques — la fiche d'un coureur
Le champ 🏃 Ma course (sous l'affiche) accepte un numéro de dossard ou un nom : il ouvre la fiche du coureur. On y arrive aussi en touchant un nom dans La course de chacun ou un record.
La fiche résume sa course : place, tour et heure de son arrêt, tours, distance, D+, repos moyen, les paliers franchis (50 km, 100 km, 100 miles), ses tours face à la cloche (même couleurs que la grille, avec la médiane du peloton en pointillés), son meilleur tour, son compagnon de route, la nuit, et les records qu'il détient. Sa ligne est surlignée dans la grille et dans le nuage des temps.
Le bouton ▶ Voir sa story relance sa story plein écran. Le bouton 🔗 Partager le lien envoie l'adresse de la page, qui porte son dossard (?bib=N) et rouvre directement sa fiche — avec un aperçu à son nom dans WhatsApp ou Messenger.
28. Page Statistiques — le récap de la course
L'URL /race/<id>/stats ouvre les Statistiques de la course, accessibles à tous sans mot de passe, depuis le lien 📊 Statistiques du classement public ou de l'archive. Pensée pour les coureurs et les spectateurs après la course (elle se met aussi à jour en direct pendant). Page rendue côté serveur : une course publique est indexée par Google.
L'affiche — le vainqueur, son nombre de tours, ses kilomètres et la durée de course ; puis les partants (et les non-partants à part), les kilomètres parcourus ensemble et le D+ cumulé, avec une comparaison parlante (Paris → Marseille, l'Everest…). Un résumé en quelques phrases suit.
🗺 La boucle — le tracé et le profil de la boucle (7,37 km, +160 m, mesurés sur le GPX).
📉 Qui tient encore ? — combien de coureurs restent en course, tour après tour (courbe en escalier), avec la nuit (calculée au coucher et au lever du soleil), les repères 50 km / 100 km, et les arrêts de chaque tour en barres dessous (le tour le plus meurtrier marqué 💀). Touchez un tour pour voir, sous la courbe, qui s'y est arrêté (par défaut : le tour le plus meurtrier). Pastilles : combien ont entamé la nuit, paliers franchis, l'assist (le dernier à accompagner le vainqueur).
🔥 La course de chacun — une ligne par coureur, une case par tour, colorée selon le repos qu'il restait avant la cloche (vert = large, rouge = au ras) ; ✕ marque l'arrêt. Touchez une case pour le temps du tour.
🎖 Les records — Fusée (tour le plus rapide), Sueurs froides (la plus petite marge avant la cloche), Métronome (le plus régulier), Roi de la sieste (le plus de repos par tour), Oiseau de nuit, Lièvre (le plus souvent premier rentré), Inséparables. Les saisies manuelles, à l'heure approximative, ne comptent pas.
🤝 Compagnons de route — les duos et groupes qui ont franchi la ligne ensemble ; un curseur règle l'écart toléré (17 s par défaut).
⏱ Le peloton se fatigue — chaque point est un coureur sur un tour, avec la cloche et le temps médian du tour.
34. Archive des courses passées
La page Courses passées (/races, liée depuis la page d'accueil) liste toutes les courses publiques terminées, de la plus récente à la plus ancienne, avec leur date et leur lieu. Chaque carte mène au classement public de la course (lecture seule, sans bouton d'édition), avec un lien ← Toutes les courses pour revenir à l'archive. Sous chaque carte, deux liens directs : 🏁 Classement et 📊 Statistiques (survie, records, fiche de chaque coureur).
Ces pages sont rendues côté serveur : Google les lit directement, ce qui permet aux coureurs de retrouver leurs résultats en cherchant le nom de la course.
35. Vue grand écran (TV) pour les spectateurs
L'URL /race/<id>/results/tv ouvre une vue dédiée aux écrans HDMI pour le public, en lecture seule, sans aucune interaction nécessaire. Light theme aux couleurs du club (fond beige clair #f8f7f6, texte sombre, accents orange et bordeau), cohérent avec le reste de l'app.
Palette club : titre + pill « TOUR N » + start marker viz en bordeau #6B2D5B ; numéros de dossard, count-active et countdown normal en orange #f59e0b ; or/argent/bronze pour le podium ; rouge pour les états critiques. Confetti vainqueur en palette club.
Composants (du haut vers le bas, optimisés pour donner le max de place au classement) :
- Countdown compact du prochain départ : label + valeur sur 1 ligne (orange au début, ambre < 1 min, rouge clignotant < 30 s)
- Top 3 podium sur 1 seule ligne (3 cellules côte à côte) : rang or/argent/bronze, dossard, nom, nombre de tours, temps total au dernier tour en bordeau. Animation FLIP quand l'ordre change.
- Bloc « Derniers scans » sur 1 ligne (4 cellules côte à côte) : les 4 derniers coureurs scannés en streaming. Le plus récent est mis en avant (fond orange-pastel, dossard plus gros). Pour chaque scan : numéro, nom, badge
Tx(tour) en bordeau, temps couru ⏱. - Classement complet en 2 colonnes côte à côte (~30 coureurs visibles d'un coup au lieu de 12). Pour chaque coureur : rang, dossard (orange), nom, tours, temps total cumulé (bordeau). Les coureurs abandonnés restent visibles dans le classement avec leur temps total au dernier tour, mais sont affichés en opacity réduite, nom barré, et avec un badge rouge ABD. Animation FLIP indépendante par colonne quand un coureur change de position. Auto-scroll yoyo de 90 s/cycle si > 30 coureurs restants.
- Visualisation circulaire (320 px) : chaque coureur actif est un point dont la position angulaire correspond à sa progression estimée sur le tour courant. Le cercle et le numéro du dossard sont groupés dans un
<g transform>pour bouger en parfaite synchro. Couleur basée sur l'algorithme V5 — régression linéaire sur les 3 derniers tours pour extrapoler son temps de tour suivant. Un coureur dont la tendance prédit qu'il dépassera la limite (rouge clignotant) est en risque d'abandon. - Confetti quand le vainqueur est déclaré
À brancher sur la TV via HDMI ; ouvrir Chrome en plein écran (F11) sur cette URL.