Tableau de Scores
Tableau de scores à clapet pour le suivi en temps réel des matchs
Qu'est-ce qu'un Tableau de Scores ?
Un tableau de scores est un outil dédié au suivi des scores lors d'événements sportifs et de jeux compétitifs. Ce tableau de scores en ligne reproduit l'apparence et l'animation de clapet d'un vrai tableau mécanique, offrant une expérience immersive pour le tennis de table, le badminton, le basketball, les jeux de société, les soirées quiz et plus encore.
Il propose plusieurs thèmes de couleurs dont rouge-bleu et rouge-jaune, prend en charge jusqu'à 6 équipes, et dispose d'un mode plein écran pour la projection sur grands écrans. Toutes les données sont automatiquement sauvegardées dans le stockage local du navigateur.
Comment utiliser
Mode d'emploi
- Sélectionnez un jeu de couleurs : rouge-bleu, rouge-jaune et plus
- Cliquez sur le nom de l'équipe pour le modifier
- Utilisez les boutons + / - pour ajuster le score
- Cliquez sur le bouton plein écran pour projeter sur grand écran
Conseils d'affichage
- Passez en mode plein écran avant le début de l'événement pour que les noms, couleurs et scores restent lisibles depuis le public
- Si les scores ont une valeur officielle, conservez un enregistrement écrit ou système distinct au cas où l'onglet du navigateur serait fermé ou le stockage local effacé
Cas d’utilisation
Principe technique
Le tableau de scores fonctionne comme un petit automate d'état côté client : chaque équipe est un objet avec des champs nom, score et couleur, et l'ensemble du roster est persisté dans window.localStorage sous forme de chaîne JSON à chaque mutation. Comme localStorage est synchrone et limité à l'origine plus le profil navigateur, le même onglet survit à un rafraîchissement, mais un autre navigateur ou une fenêtre de navigation privée repart avec un roster vide. L'animation de chiffres à clapet est purement CSS : chaque chiffre est composé de deux moitiés pivotant autour de l'axe X, et un changement de score remplace le chiffre visible tandis qu'une transition transform: rotateX de 300 à 400 ms anime le clapet. Comme l'animation est pilotée par l'état local plutôt que par une trame réseau, l'affichage continue d'animer même lorsque le Wi-Fi du lieu tombe en panne en cours de match. La présentation en plein écran utilise l'API Fullscreen standard (element.requestFullscreen, document.exitFullscreen) pour que le tableau remplisse un projecteur ou une télévision sans chrome de navigateur. La synchronisation multi-onglets s'appuie sur l'événement storage : lorsque la clé localStorage change dans un onglet, tous les autres onglets de même origine reçoivent un StorageEvent et re-rendent à partir du JSON mis à jour. Cela permet à un téléphone d'arbitre et à un ordinateur de bord de terrain de rester synchronisés sans aucun backend, puisqu'aucune donnée ne quitte l'appareil.
- Persistance d'état : window.localStorage.setItem avec un roster sérialisé en JSON à chaque changement de score, limité par origine et profil navigateur
- Animation à clapet : deux pseudo-moitiés CSS animées avec transform: rotateX sur environ 300-400 ms ; aucune boucle d'animation JS nécessaire
- API Fullscreen : element.requestFullscreen() / document.exitFullscreen() avec l'événement fullscreenchange pour détecter la sortie par la touche Échap
- Synchronisation multi-onglets : window.addEventListener('storage', handler) se déclenche sur tous les autres onglets lorsque la clé change
- Plancher des scores : les scores sont plafonnés à zéro pour que le bouton moins ne produise pas de résultats négatifs en jeu informel
- Thème de couleurs : les propriétés CSS personnalisées (--team-a, --team-b) changent la palette sans re-rendre l'arbre DOM
- Les plafonds de score suivent le jeu de règles actif, par exemple le basketball n'a pas de plafond, le tennis de table se termine à 11 avec une règle de 2 points d'écart
Exemples
Tableau de score de mi-temps de basket
Équipe A : Lakers Couleur : rouge
Équipe B : Celtics Couleur : bleu
Q1 : 22 - 18
Q2 : 41 - 38 (mi-temps)
Q3 : 60 - 55
Q4 final : 82 - 76
Thème : rouge-bleu, plein écran sur projecteur de gymnaseMatch de tennis par set
Set 1 : 6 - 4 (Joueur A gagne)
Set 2 : 3 - 6 (Joueur B gagne)
Set 3 : 7 - 5 (Joueur A gagne)
Final : Joueur A gagne 2-1
Astuce : renommer les équipes avec les noms des joueurs, réinitialiser entre les matchsSoirée quiz, format à 4 équipes
Manche 1 : Équipe Quokka 8, Équipe Otter 6, Équipe Bear 7, Équipe Wolf 5
Manche 2 : 14, 13, 12, 10
Manche 3 : 21, 22, 17, 16
Final : 30, 31, 25, 23 -> Otter gagne
Jusqu'à 6 équipes prises en charge, scores enregistrés dans localStorageTennis de table, partie en 11 points
Séquence de score : 1-0, 2-0, 2-1, 3-1, 3-2, 3-3, 4-3, ..., 10-9
Égalité à 10-10 : il faut gagner avec 2 points d'écart
Final : 12 - 10
Thème : rouge-jaune pour un fort contraste sur grand écran
Réinitialiser les scores conserve les noms des joueurs pour la partie suivanteFAQ
Pour quels sports convient-il ?
Conçu à l'origine pour le tennis de table et le badminton avec un score de type tableau à volets (changement brusque, gros chiffres en gras). Fonctionne tout aussi bien pour les jeux de société, les soirées quiz, le basket-ball, le volley-ball, les tournois d'esport, les concours en classe et tout affichage de score à mise à jour rapide.
Puis-je personnaliser les noms d'équipes et les couleurs ?
Oui. Modifiez les noms d'équipes directement en cliquant dessus. Choisissez parmi les thèmes de couleurs prédéfinis (rouge-bleu, rouge-jaune, etc.) selon votre événement. Il n'y a pas de fonctionnalité de téléversement de logo ou d'image.
Comment fonctionne l'animation de retournement ?
C'est une animation CSS de transformation 3D qui imite les cartes mécaniques à volets. La durée du retournement est suffisamment courte pour ne pas ralentir un score rapide (quelques centaines de ms). Désactivez l'animation dans les paramètres si vous préférez des mises à jour instantanées.
Le score est-il enregistré lors de l'actualisation ?
Oui. La configuration actuelle (noms d'équipes, scores, couleurs) est enregistrée dans localStorage à chaque modification, donc une actualisation dans le même navigateur préserve le score. Changer de navigateur ou effacer les données du site réinitialise à 0-0.
Puis-je l'utiliser sur un projecteur ou un grand écran ?
Oui. Le tableau de score prend en charge le mode plein écran pour que vous puissiez l'afficher sur un projecteur, une télévision ou un moniteur externe. Les scores sont enregistrés dans localStorage et survivent à une actualisation de page dans le même navigateur.
Prend-il en charge le score par sets/manches (par exemple le tennis) ?
Certaines versions, oui — elles vous permettent de définir une structure « sets en N manches gagnantes » et de réinitialiser le compteur de points à la fin de chaque set. Les versions plus simples ne suivent que les points bruts. Choisissez le mode adapté à votre sport.
Quelque chose est-il téléversé ?
Non. Le tableau de score s'exécute entièrement dans votre navigateur. Les scores vivent dans votre onglet et (optionnellement) dans localStorage. Rien n'est partagé avec un serveur.