Baudouin H3

Votes d'après-match, suivi de la coum, amendes et statistiques de buts/passes pour l'équipe Baudouin H3. Stack : React + Vite + TypeScript + Tailwind, données et hébergement Firebase (plan gratuit).

L'application est en ligne sur https://baudouinheren3.web.app et se redéploie toute seule à chaque envoi de code.

• Architecture, modèle de données et rôles : ARCHITECTURE.md
• Fonctionnement du déploiement, fichier par fichier : DEPLOIEMENT.md

Mise en route (10 minutes)

1. Créer le projet Firebase

1. Sur https://console.firebase.google.com, créez un projet (ex. baudouin-h3). Le plan Spark (gratuit) suffit, aucune carte bancaire n'est demandée.
2. Authentication → Sign-in method : activez E-mail/Mot de passe et Anonyme.
3. Firestore Database : créez la base en mode production (les règles seront déployées à l'étape 4), région europe-west1 (Belgique).
4. Paramètres du projet → Vos applications → Ajouter une application Web : copiez la configuration.

2. Configurer l'application

git clone <ce dépôt> && cd BaudouinH3
npm install
cp .env.example .env      # collez-y les clés de la configuration Firebase

Remplacez aussi baudouin-h3 par l'identifiant de votre projet dans .firebaserc.

3. Lancer en local

npm run dev               # http://localhost:5173

Pour travailler sans toucher aux vraies données, utilisez les émulateurs (Java requis) :

npm run emulators         # Auth + Firestore locaux
# dans .env : VITE_USE_EMULATORS=true
npm run dev

4. Déployer

En temps normal il n'y a rien à faire : chaque envoi de code sur GitHub construit et publie le site automatiquement (voir DEPLOIEMENT.md).

Pour déployer depuis un ordinateur malgré tout :

npm install -g firebase-tools
firebase login
npm run deploy            # construit le site puis déploie Hosting + règles Firestore

Le site est servi sur https://<projet>.web.app. Les membres peuvent l'ajouter à leur écran d'accueil (PWA).

5. Première utilisation

Au premier chargement, l'application affiche Première installation : créez le compte administrateur. L'équipe (21 joueurs), le barème d'amendes (retard 1 €/min après 5 min plafonné à 15 €, équipement, cartons) et deux catégories maison sont préchargés. Cet écran n'apparaît plus ensuite.

Depuis Gestion → Staff, l'admin choisit quels joueurs ont les droits de secrétaire. Aucun code : ces joueurs se connectent par leur nom et leurs droits s'appliquent aussitôt.

Surnoms

Chaque joueur peut recevoir un surnom (Gestion → Joueurs, champ « Surnom » à l'ajout ou via le crayon). Le surnom remplace alors le nom partout à l'écran — listes de vote, classements, amendes, statistiques — le nom complet restant affiché en petit dessous dans les écrans de gestion et les sélecteurs. Les recherches acceptent indifféremment le prénom, le nom ou le surnom. La connexion, elle, se fait toujours par le prénom et le nom : le surnom n'y est pas accepté.

Vote « commentaire d'abord »

Dans le formulaire de vote, chaque catégorie porte une case « Demander à l'orateur de lire le commentaire avant le nom ». Quand elle est cochée, la console de l'orateur place le commentaire au-dessus et remplace le nom par un bouton « Annoncer le nom », avec la consigne, la première fois : « Lisez d'abord le commentaire, puis annoncez le nom voté. » Un appui affiche le nom dans sa console.

C'est un simple guide de lecture : rien n'est caché ailleurs. La lecture en direct, les classements et la rétrospective affichent le vote normalement pour tout le monde.

Utilisation

Qui	Comment se connecter	Que faire
Votant	Prénom et nom	Remplir son vote (trois catégories), suivre la lecture et le compte à rebours, voter ses coups de cœur, voir qui a coumé
Orateur (liste désignée par l'admin)	Prénom et nom, case « Je suis l'orateur ce soir » (ou bouton « Je suis l'orateur » sur la page du match)	Console : son propre vote, minuteur, clôture des votes, file de lecture avec « Valider le vote », votes lus grisés, étoiles, lecture guidée (commentaire avant le nom), révélation d'auteur (s'il a la main), correction d'un nom
Secrétaire	Prénom et nom, comme tout le monde : les droits suivent le nom	Console orateur, vote hors plateforme, correction d'un nom, matchs, coum (qui a payé, absents, recoum), amendes, buts et passes, joueurs, listes maison, paramètres, journal d'activité
Administrateur	E-mail + mot de passe	Tout ce que fait le secrétaire + droits des joueurs, liste des orateurs (Gestion → Staff), rouvrir les votes de n'importe quel match (Gestion → Matchs ou page du match)

Agenda Sportlink (matchs automatiques)

Les matchs de l'équipe arrivent tout seuls depuis l'agenda Sportlink : plus besoin de les créer à la main.

Mise en place (une fois, 1 minute) : l'admin ou un secrétaire colle le lien de l'agenda (https://data.sportlink.com/ical-team?token=…) dans Gestion → Paramètres → Agenda Sportlink et enregistre. C'est tout : la synchronisation utilise le même accès Google que le déploiement automatique.

• Chaque matin (vers 6 h), les matchs à venir sont ajoutés, avec la date, l'heure, le lieu (lien Google Maps) et l'adversaire ; domicile ou extérieur est déduit du titre « Équipe A - Équipe B ».
• Match déplacé ou avancé dans Sportlink : la date, l'heure et le lieu sont mis à jour dans l'application (et notés dans le journal d'activité).
• Agenda republié (nouveaux matchs, identifiants changés) : les matchs déjà présents sont retrouvés et mis à jour, jamais dupliqués ni annulés ; un match saisi à la main est relié à son événement Sportlink.
• Match retiré de l'agenda : il est marqué « Annulé », jamais supprimé (seulement s'il tombe dans la période couverte par l'agenda).
• Jamais touchés : les matchs passés (non importés), les scores, la compétition, les votes, la coum, les buts.
• Votes : en haut, le match du jour (ou le prochain match) ; dessous, les onglets « À venir », « Joués » et « Annulés », et une recherche par adversaire. On peut ouvrir un match à venir pour voir la date, l'heure et le lieu. Les votes s'ouvrent automatiquement le jour du match.
• Les matchs ajoutés à la main (amical, tournoi…) restent possibles ; la synchronisation n'y touche pas.
• Mise à jour immédiate : l'admin appuie sur Mettre à jour le calendrier (Gestion → Matchs). L'application relit l'agenda et applique les mêmes règles tout de suite, avec un bilan (« 1 match ajouté, 1 mis à jour »). Si Sportlink refuse la lecture depuis le navigateur, le bouton propose de lancer la même mise à jour sur GitHub : onglet Actions → « Synchroniser l'agenda » → Run workflow (résultat environ une minute plus tard).
• La dernière synchronisation (qui, quand, bilan ou erreur) s'affiche dans Gestion → Paramètres et Gestion → Matchs.

À savoir : GitHub n'exécute les tâches planifiées que depuis la branche main, et les suspend après 60 jours sans aucune activité sur le dépôt (un clic sur « Enable workflow » dans l'onglet Actions les relance).

La coum

Onglet Coum de chaque match : une feuille du moment, pour les présents du jour. On garde simplement la trace de qui a coumé — pas de montants, pas de caisse, pas d'historique de saison, et rien à voir avec les amendes.

• Le trésorier (secrétaire ou admin) clique A payé quand un joueur lui donne sa coum.
• Un joueur peut être noté absent : il ne doit rien pour ce match.
• Recoumer les présents redemande une coum à tous ceux qui sont là (ou joueur par joueur avec l'icône ↻) : ceux qui avaient déjà payé repassent « pas encore » pour le tour suivant.
• Quand tous les présents ont payé, la feuille affiche « Tout le monde a coumé » : c'est terminé.
• Tout le monde voit qui a coumé ; seuls le secrétaire et l'admin tiennent la liste à jour.

Page du match : le résumé

L'onglet Résumé montre le match d'un coup d'œil : score (victoire, défaite, nul), buts et passes, résultats des votes lus, amendes et coum du match, avec un lien vers chaque détail. Le match du jour (ou le dernier joué) est résumé de la même façon sur l'accueil. Un secrétaire entre ou corrige le score directement ici (« nous / eux »), et ajoute un but ou une amende sans quitter la page ; tant que le score manque, un bouton « Entrer le score » apparaît dans l'en-tête du match.

Surveillance et annulation (admin)

Gestion → Surveillance signale ce qui sort de l'ordinaire (rafales de modifications, suppressions en série, actions en pleine nuit, droits de secrétaire utilisés depuis plusieurs téléphones, score modifié plusieurs fois). L'admin choisit une personne et une période (dernière heure, 24 h ou un jour précis) : ses actions s'affichent et s'annulent d'un geste, les données revenant à leur état d'avant. Une action modifiée ensuite par quelqu'un d'autre, ou qui dépasse les droits de son auteur, n'est pas cochée d'office. L'annulation est inscrite au journal et peut elle-même être annulée.

Minuteur des votes

En haut de la console (et sur l'accueil pendant les votes), l'orateur, un secrétaire ou l'admin lance un compte à rebours (5, 10, 15 minutes), le prolonge (+ 2 min) ou l'arrête. Juste à côté, « Clôturer les votes » ; une fois clôturé, le même endroit propose « Rouvrir les votes » pour un orateur qui a clôturé trop tôt. Tout le monde voit le temps restant sur les pages du match ; ceux qui n'ont pas encore envoyé leur vote lisent « Il vous reste du temps pour voter ». Rien ne se ferme tout seul : la clôture reste un geste de l'orateur.

Alerte en direct

Pendant la lecture, dès qu'un joueur atteint 3 voix dans une catégorie (seuil réglable dans Gestion → Paramètres), un bandeau le signale dans l'onglet « En direct » et le vote lu porte un badge « 3ᵉ voix ».

Listes maison

Gestion → Listes rassemble les listes du genre « Papa de l'année » ou « Homme du match » : création, renommage, masquage et suppression (la suppression efface aussi les entrées de la liste). Elles s'affichent dans l'onglet Stats.

Scripts

Commande	Rôle
npm run dev	Serveur de développement
npm run build	Vérification TypeScript + build de production dans dist/
npm run typecheck	Vérification TypeScript seule
npm run verify	Types, tests unitaires et build (~30 s)
npm run verify:e2e	Scénario complet dans un navigateur, contre les émulateurs (~2 min)
npm run verify:all	Les deux
npm run emulators	Émulateurs Firebase Auth + Firestore
npm run deploy	Build puis firebase deploy
npm test	Tests de la lecture de l'agenda et de la synchronisation
npm run sync:calendar	Synchronisation de l'agenda Sportlink (identifiants Google requis ; SYNC_DRY_RUN=1 pour un essai à blanc)

Sécurité et confidentialité

• Les votants n'ont pas de mot de passe : l'identité est déclarative (saisie du nom), comme souhaité.
• Les secrétaires n'ont ni mot de passe ni code : leurs droits suivent leur nom. Choix assumé : quiconque se connecte sous le nom d'un secrétaire obtient ses droits ; chaque geste reste dans le journal d'activité.
• Les tickets sont anonymes. Seuls l'orateur en cours (celui qui « a la main » sur la lecture) et l'admin peuvent afficher le nom d'un votant, pour eux seuls ; les secrétaires et les autres orateurs non. Si quelqu'un prend la main (« Prendre la main » dans la console), l'ancien orateur perd l'accès aux noms et un bandeau le prévient. Limite : dans la base, l'auteur d'un vote reste lisible par un connecté qui l'interrogerait directement.
• Seuls les comptes staff peuvent écrire amendes, coums, buts, joueurs et matchs : c'est garanti par firestore.rules, pas seulement par l'interface. Le minuteur des votes est lui aussi réservé à l'admin et aux secrétaires.
• Le journal d'activité (Gestion → Activité) est en ajout seul.

Test de bout en bout

e2e/scenario.mjs rejoue une soirée complète (installation, match, surnoms, coum, amendes, buts, minuteur des votes, votants, vote « commentaire d'abord », orateur, lecture guidée, alerte à 3 voix, coups de cœur, listes maison, rétrospective, vue mobile) avec Playwright contre les émulateurs :

npm run emulators                      # terminal 1
VITE_USE_EMULATORS=true npm run dev    # terminal 2
npx playwright install chromium        # une fois
bash e2e/reset-emulators.sh && node e2e/scenario.mjs   # terminal 3, captures dans e2e/shots/

Déploiement automatique (GitHub Actions)

Chaque push sur main (ou sur la branche de développement) construit et déploie le site sur Firebase via .github/workflows/deploy.yml, sans aucune clé stockée : GitHub s'authentifie auprès de Google par fédération d'identité (Workload Identity Federation), ce qui respecte les organisations qui interdisent les clés de compte de service. La mise en place a déjà été faite par le script scripts/setup-github-deploy.sh, exécuté une fois dans Google Cloud Shell.

Le détail complet (chaîne d'authentification, ce qui est déployé, vérification, retour en arrière, diagnostic des erreurs) est dans DEPLOIEMENT.md. L'historique des déploiements est dans l'onglet Actions du dépôt GitHub.