Guide 🎯 Directeur de course — piloter pendant
⚠️ Document généré automatiquement par les tests E2E (
e2e/browser.test.ts). Toute modification manuelle sera écrasée au prochain run.
Tu es le directeur de course. Pendant la course, tu surveilles le tableau de bord (Contrôle), tu déclenches le départ, et tu finalises la course quand il ne reste qu'un coureur.
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.
5. Page de contrôle, prête au départ
Une fois la course configurée et passée en mode Prête, l'écran de contrôle propose un gros bouton DEPART !. Il déclenche un compte à rebours de 3 secondes avant de lancer officiellement le chronomètre.
6. Compte à rebours 3-2-1
Pendant 3 secondes, un gros chiffre orange apparaît en haut de l'écran de contrôle pour décompter avant le départ. Le bouton DEPART ! reste affiché en dessous — ne pas recliquer. Cela laisse au directeur de course le temps de prévenir les coureurs et synchronise tous les téléphones connectés sur la même heure de départ.
7. GO ! La course est lancée
Une fois le compte à rebours terminé, GO ! s'affiche pendant 2 secondes pour signaler le départ effectif. Le téléphone vibre. À partir de cet instant, l'horloge de la course tourne et le tour 1 démarre automatiquement.
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.
11. Vue Contrôle pendant la course
L'écran Contrôle est le poste du directeur de course. Il affiche le numéro du tour en cours, et juste en dessous Durée de ce tour : X min (utile quand certains tours ont une durée override différente du défaut).
Vient ensuite le temps écoulé depuis le départ, le compte à rebours du tour, et les statistiques en direct : coureurs actifs / arrivés / abandonnés. Tout est synchronisé avec les téléphones de scan via WebSocket.
La transition vers le tour suivant est entièrement automatique : il n'y a aucun bouton « Tour suivant » à appuyer. Quand le compte à rebours atteint zéro, l'app passe seule au tour N+1, joue une alarme sonore, fait vibrer le téléphone et affiche un toast Tour N commencé. Le directeur n'a qu'à surveiller.
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.
Corriger un scan (à chaud ou à froid)
17. Annuler un abandon mis par erreur
Si un coureur a été marqué Abandon par mégarde (mauvais numéro de dossard saisi dans le panneau « Abandonner un coureur » de Contrôle, ou clôture de rattrapage trop précipitée), tu peux le réintégrer sans ressaisir quoi que ce soit.
- Sur Résultats, tape sur la ligne du coureur concerné — la ligne se déplie
- Un encart vert apparaît en haut : « Erreur ? Tu peux réintégrer ce coureur s'il a été marqué par mégarde. »
- Clique le bouton ↩️ Annuler l'abandon
- Confirmation simple (pas de ressaisie du numéro — l'action est trivialement réversible en re-cliquant Abandonner) → le badge ABANDON disparaît, le coureur redevient actif sur tous les téléphones connectés.
Fonctionne pendant la course (à chaud) ET après la fin (à froid). Réservé au directeur de course (action protégée par le mot de passe).
18. Détail d'un coureur (lignes par tour)
En tapant sur une ligne du classement, tu déplies le détail des tours du coureur. Chaque tour est affiché avec 3 colonnes :
- Couru : le temps qu'il a mis pour boucler ce tour (depuis le départ collectif jusqu'à son scan d'arrivée)
- Repos : le temps libre qu'il a eu avant le départ du tour suivant (
durée_du_tour - couru). Vert si ≥ 5 min (bien récupéré), orange si entre 1 et 5 min, rouge si < 1 min (très juste — risque pour le tour suivant) - Heure : l'horodatage du scan
Chaque ligne a aussi une icône ✏️ pour modifier le temps et une icône 🗑 pour supprimer le scan. En bas, + Ajouter un scan manuel permet d'ajouter un tour oublié.
Ces corrections fonctionnent pendant la course (à chaud) ET après la fin (à froid). Réservé au directeur de course — ne pas confier au public.
19. Modal de modification d'un scan
Le modal Modifier le scan te laisse changer le numéro de tour et l'heure exacte du passage. Utile quand le scanneur a appuyé en retard ou attribué un scan au mauvais tour.
20. Modal d'ajout d'un scan manuel
Le modal Ajouter un scan sert à enregistrer rétroactivement un coureur qu'on a oublié de scanner. Tu choisis le tour et l'heure (par défaut, l'heure actuelle).
29. Modal de suppression d'un scan (confirmation forte)
La suppression d'un scan est définitive. Pour éviter les fausses manips, le modal te demande de taper le numéro de dossard concerné : le bouton Supprimer ne s'active que si tu tapes la bonne valeur.
Fin de course
22. Bouton « Terminer la course »
Quand il ne reste plus qu'un seul coureur actif (typique d'une course backyard), le bouton Terminer la course apparaît automatiquement en bas de l'écran de contrôle. Le directeur de course clique pour finaliser et déclarer le vainqueur.
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).
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.