🍓 Tournoi des Fraises 2026
Application web de gestion de tournoi de handball jeunes — classements en temps réel, planning des terrains, gestion des finales et buvette.
Cette application permet de gérer l'intégralité d'un tournoi de handball jeunes : inscription des équipes, génération des poules, saisie des scores, gestion du planning par terrain, phase finale, classement général et buvette.
Toutes les données sont synchronisées en temps réel via Firebase : chaque modification effectuée par l'admin est immédiatement visible sur tous les écrans connectés (téléphones des spectateurs, écran d'affichage, etc.).
Accès & interfaces
L'application s'ouvre directement dans un navigateur. Elle détecte automatiquement l'écran et affiche l'interface adaptée.
Interface mobile
Écrans < 768 px. Navigation en bas de l'écran. Optimisée pour les spectateurs et arbitres sur téléphone.
Interface desktop
Écrans > 768 px. Navigation horizontale en haut. Inclut l'onglet Admin pour les organisateurs.
Catégories
L'application gère plusieurs catégories d'âge et de genre simultanément. Chaque combinaison a ses propres équipes, matchs et classements.
| Catégorie | Genre | Sélection |
|---|---|---|
| U9 | Garçons Filles | Sélecteur en haut de l'écran |
| U11 | ||
| U13 | (défaut) | |
| U15 | ||
| U17 |
Le sélecteur de catégorie filtre automatiquement tous les onglets (poules, matchs, classement…). Sur desktop, un menu déroulant choisit l'âge et des boutons bascule choisissent le genre.
📊 Poules
Les poules affichent le classement en temps réel de chaque groupe d'équipes.
Affichage
- Poule A (rouge) et Poule B (violet) côte à côte.
- Chaque ligne affiche : rang, nom de l'équipe, points.
- Si la catégorie compte moins de 8 équipes, une seule Poule A est affichée (sur toute la largeur).
- Le classement est recalculé automatiquement à chaque score saisi.
Règle de classement
| Résultat | Points |
|---|---|
| Victoire | 3 pts |
| Match nul | 1 pt |
| Défaite | 0 pt |
En cas d'égalité de points, le départage s'effectue par différence de buts, puis par buts marqués.
⚽ Matchs
L'onglet Matchs liste tous les rencontres de la catégorie sélectionnée.
Informations affichées
- Nom du groupe (ex. : U13 Garçons — Poule A)
- Équipe A vs Équipe B
- Score actuel (ou
—si non joué) - Heure du match (si renseignée)
- Numéro de terrain (si assigné)
Saisie des scores
En mode normal (sans admin) : les scores sont affichés en lecture seule. En mode admin, chaque carte de match dispose de deux champs de saisie et d'un bouton OK. La validation met à jour le classement instantanément.
📋 Planning
Le planning regroupe tous les matchs de toutes les catégories par terrain, puis par heure.
Structure d'affichage
- Un bloc par terrain utilisé (ex. : Terrain 2 — 5 matchs).
- Dans chaque bloc : les matchs triés par heure, avec équipes, badge de catégorie et score.
- Les matchs sans heure apparaissent dans une section Sans horaire.
🥇 Finales
La phase finale s'active automatiquement une fois que tous les scores de poule sont saisis.
Arbre des matchs
| Match | Équipes |
|---|---|
| ½ Finale 1 | 1er Poule A vs 2e Poule B |
| ½ Finale 2 | 1er Poule B vs 2e Poule A |
| 🥉 Petite finale | Perdants des ½ finales |
| 🥇 Grande Finale | Vainqueurs des ½ finales |
Le nom du vainqueur apparaît en doré une fois le score saisi. Le tableau des finales est géré depuis le panneau Admin.
🏆 Classement
Le classement général affiche toutes les équipes de la catégorie triées par points, toutes poules confondues.
- Rang 🥇 / 🥈 / 🥉 mis en valeur pour les 3 premières places.
- Points en rouge.
- Mis à jour en temps réel à chaque score.
🍔 Buvette
L'onglet Buvette affiche la carte des produits disponibles au stand de restauration.
Filtres disponibles
Chaque article affiche : emoji, nom, description et prix. Le menu est entièrement personnalisable depuis l'admin.
⚙️ Manuel Admin — Accès
L'onglet Admin est exclusif à l'interface desktop (écran large). Il est protégé par un mot de passe.
- Cliquer sur ⚙️ Admin dans la barre de navigation (à droite, en violet).
- Saisir le mot de passe dans la fenêtre modale qui s'ouvre.
- Valider : le panneau admin s'affiche avec tous ses sous-onglets.
Sous-onglets du panneau admin
| Onglet | Rôle |
|---|---|
| Matchs | Saisie des scores et configuration des matchs (terrain, heure, durée) |
| Équipes | Ajout / suppression d'équipes, génération des poules |
| Buvette | Édition du menu de la buvette |
| Sponsors | Gestion des logos partenaires (5 emplacements) |
| Config | Nom du tournoi, logo, nombre de terrains, durées |
| Impression | Impression du planning par terrain |
| Message | Diffusion d'un message en temps réel sur tous les écrans |
| QR Code | Affichage et téléchargement du QR Code de partage |
👥 Équipes & Poules
Ajouter une équipe
- Saisir le nom de l'équipe dans le champ texte.
- Cliquer sur Ajouter ou appuyer sur Entrée.
- L'équipe apparaît dans la liste avec un bouton de suppression.
Supprimer une équipe
Cliquer sur le bouton ✕ à côté du nom de l'équipe.
Générer les poules
- Ajouter au moins 2 équipes dans la catégorie.
- Cliquer sur 🎲 Générer les Poules.
- Les équipes sont réparties aléatoirement : une seule Poule A si moins de 8 équipes, Poule A + Poule B si 8 équipes ou plus.
- Les terrains sont assignés automatiquement selon la catégorie (voir section Terrains).
Recalculer les terrains
Le bouton 📍 Recalculer les terrains (toutes catégories) réassigne les terrains sur tous les matchs existants de toutes les catégories, selon la règle genre/âge, sans effacer les scores.
🗓 Gestion des matchs
Saisir un score
- Dans le sous-onglet Matchs, localiser le match concerné.
- Saisir le score de l'équipe A dans le premier champ, celui de l'équipe B dans le second.
- Cliquer sur OK pour valider. Le classement se met à jour immédiatement.
Configurer un match (terrain, heure, durée)
- Cliquer sur le bouton ✏️ du match à configurer.
- La fenêtre modale s'ouvre avec les options suivantes :
| Champ | Description |
|---|---|
| Terrain | Cliquer sur une tuile numérotée (T1 à Tn). La tuile sélectionnée s'affiche en rouge. |
| Heure | Boutons − / + par pas de 5 minutes. Plage : 08h00 – 20h00. |
| Durée | Durée du match en minutes (10 à 120 min, pas de 5 min). |
- Cliquer sur 💾 Enregistrer pour sauvegarder.
- Ou 🗑 Effacer horaire & terrain pour réinitialiser la configuration du match.
⚙️ Configuration générale
Nom du tournoi
Modifier le nom affiché dans l'en-tête (par défaut : Tournoi des Fraises 2026). Valider avec Enregistrer.
Logo du club
Cliquer sur la zone logo pour téléverser une image. Ce logo apparaît dans l'en-tête et sur les impressions.
Durées des matchs
Chaque type de match a une durée configurable indépendamment :
| Phase | Durée par défaut |
|---|---|
| Matchs de poule | 20 min |
| Demi-finales | 25 min |
| Petite finale | 25 min |
| Grande finale | 30 min |
| Temps entre matchs | 5 min |
Le bouton ⚡ Appliquer à tous les matchs met à jour la durée de tous les matchs existants selon la phase correspondante.
🏟 Terrains
Nombre de terrains
Les boutons − / + ajustent le nombre de terrains disponibles (1 à 20). Modifier ce nombre réassigne automatiquement tous les matchs dont le terrain dépasse le nouveau maximum.
Répartition automatique par catégorie
Lors de la génération des poules, chaque catégorie reçoit un terrain fixe selon cette règle :
■ Garçons (T1–T3) ■ Filles (T4–T6) — exemple avec 6 terrains
| Catégorie | Garçons | Filles |
|---|---|---|
| U9 | T1 | T4 |
| U11 | T2 | T5 |
| U13 | T3 | T6 |
| U15 | T1 partagé | T4 partagé |
| U17 | T2 partagé | T5 partagé |
🥇 Finales (admin)
La phase finale se génère automatiquement une fois tous les scores de poule saisis. Les équipes qualifiées sont déduites du classement final de chaque poule.
Saisir les scores des finales
- Aller dans le sous-onglet Matchs de l'admin.
- Les matchs de phase finale (½ finales, petite finale, grande finale) apparaissent automatiquement après les matchs de poule.
- Saisir les scores de la même façon que pour les matchs de poule.
📢 Messagerie temps réel
La messagerie permet d'envoyer un message visible sur tous les écrans connectés (spectateurs compris) sous forme de bandeau en haut de l'application.
Envoyer un message
- Aller dans le sous-onglet Message.
- Choisir le type : ℹ️ Info ⚠️ Avertissement 🚨 Alerte ✅ Succès
- Saisir le texte dans la zone de message.
- Cliquer sur 📡 Diffuser.
Effacer le message
Cliquer sur 🗑 Effacer ou sur le ✕ du bandeau sur n'importe quel écran.
🍔 Buvette (admin)
Le menu de la buvette est entièrement personnalisable. Les modifications sont visibles instantanément dans l'onglet Buvette.
Modifier un article existant
Dans le sous-onglet Buvette de l'admin, chaque ligne du tableau peut être éditée directement : emoji, nom, catégorie, description et prix.
Ajouter un article
Cliquer sur ➕ Ajouter un article en bas du tableau. Une nouvelle ligne vierge apparaît à remplir.
Supprimer un article
Cliquer sur le bouton ✕ à droite de la ligne concernée.
Catégories disponibles
🤝 Sponsors
5 emplacements de logos partenaires sont disponibles. Les logos s'affichent dans une barre défilante en haut de l'application (mobile et desktop).
Ajouter un logo
- Aller dans le sous-onglet Sponsors.
- Cliquer sur un emplacement vide (zone pointillée).
- Sélectionner un fichier image (PNG, JPG, SVG recommandé).
Supprimer un logo
Cliquer sur le bouton ✕ au-dessus du logo.
📱 QR Code
Le QR Code permet de partager facilement l'URL de l'application avec les spectateurs et les arbitres.
| Action | Description |
|---|---|
| Afficher | Le QR Code est généré automatiquement à l'ouverture de l'onglet. |
| 📋 Copier l'URL | Copie le lien dans le presse-papier. |
| ⬇️ Télécharger PNG | Enregistre le QR Code en image PNG haute résolution. |
🖨️ Impression
Le module d'impression génère une feuille de planning triée par terrain, utilisable comme document de référence pour les arbitres ou le staff.
Procédure
- Aller dans le sous-onglet Impression.
- Sélectionner les terrains à inclure (cases à cocher).
- Cocher ou décocher l'option Afficher le logo.
- Cliquer sur 🖨️ Lancer l'impression.
Règles de calcul
Points
| Résultat | Points attribués |
|---|---|
| Victoire | 3 pts |
| Match nul | 1 pt |
| Défaite | 0 pt |
Critères de départage (ordre de priorité)
- Points totaux
- Différence de buts (buts marqués − buts encaissés)
- Nombre de buts marqués
Qualification pour les finales
- 1er de Poule A affronte le 2e de Poule B en ½ Finale 1.
- 1er de Poule B affronte le 2e de Poule A en ½ Finale 2.
- Les perdants jouent la petite finale (3e place), les vainqueurs la grande finale.
Synchronisation Firebase
Toutes les données sont stockées dans Firebase Realtime Database et synchronisées en temps réel entre tous les appareils connectés.
Ce qui est synchronisé
| Donnée | Chemin Firebase |
|---|---|
| Équipes, matchs, poules, finales | tournoi/state |
| Message diffusé | tournoi/message |
| Logos sponsors | tournoi/sponsors |
Indicateur de connexion
Un indicateur en haut à droite de l'interface desktop signale l'état de la connexion :
- 🟢 Synchronisé — données à jour.
- 🟡 Connexion… — en cours de connexion.
- 🔴 Hors ligne — pas de connexion, données locales uniquement.