BetterPopsauce
Quiz de culture générale multijoueur en temps réel, façon Popsauce — 100% gratuit, sans compte, sans serveur à payer.
Tout le monde répond en même temps aux mêmes questions, à l'écrit (pas de QCM), avec une correction exacte (accents/casse/ponctuation ignorés) qui accepte aussi les titres partiels et les acronymes — pas de tolérance aux fautes de frappe, pour éviter les faux positifs entre réponses proches mais différentes. Comme dans Popsauce, une question peut être accompagnée d'un élément visuel à deviner : image, GIF, courte vidéo (fichier ou lien YouTube, intégré automatiquement) ou citation. Chaque bonne réponse rapporte entre 1 et 20 points : le premier à trouver a toujours le maximum, puis les points des suivants diminuent avec le temps écoulé depuis cette première bonne réponse, sans jamais descendre sous 1 point. Un tableau des scores en direct (à droite pendant la question) montre qui a trouvé et la dernière tentative fausse de chacun, avec un badge 🔥 pour les séries de bonnes réponses. La partie n'est pas limitée à un nombre fixe de questions : l'hôte fixe, dans le lobby, un score à atteindre, un temps de réponse (commun à toutes les questions) et les catégories à inclure (une sélection précise, ou "Toutes"), et la partie s'arrête dès qu'un joueur atteint le score (ou s'il n'y a plus de questions avant que quelqu'un y arrive).
Le tout avec une bonne dose de "juice" : sons synthétisés (zéro fichier audio, bouton 🔊/🔇 pour couper), chiffres qui défilent au lieu de sauter, secousse sur une mauvaise réponse, et confettis au podium final.
Comment ça marche techniquement
- Site 100% statique : HTML/CSS/JS, aucune compilation, aucune dépendance npm. Hébergeable gratuitement sur GitHub Pages.
- Pas de serveur de jeu : la synchronisation entre joueurs se fait en pair-à-pair (WebRTC) via la librairie PeerJS, qui utilise un service public gratuit uniquement pour la mise en relation initiale (aucune donnée de jeu ne passe par un serveur tiers après ça).
- La personne qui crée la partie devient l'« hôte » : son navigateur fait tourner la logique du jeu (déroulé des questions, chronomètre, calcul des scores) et transmet l'état à tous les autres joueurs connectés.
Limites à connaître
- L'hôte doit garder son onglet ouvert pendant toute la partie : si cet onglet se ferme, la partie s'arrête pour tout le monde (il n'y a pas de serveur central qui tourne en permanence).
- Sur un réseau très restrictif (wifi d'entreprise, CGNAT strict), la connexion directe entre deux joueurs peut occasionnellement échouer. Ça fonctionne normalement très bien sur du wifi/4G/5G classique.
Déployer gratuitement sur GitHub Pages
- Crée un nouveau repo GitHub (public) et pousse-y le contenu de ce dossier.
- Dans le repo GitHub : Settings → Pages → Build and deployment → Deploy from a branch, choisis la branche
main et le dossier / (root).
- Après 1-2 minutes, ton site est en ligne à
https://<ton-pseudo-github>.github.io/<nom-du-repo>/. Partage cette URL à tes amis.
Aucune autre étape : pas de build, pas de variables d'environnement, pas de carte bancaire.
Tester en local avant de déployer
Comme le jeu charge questions/questions.json via fetch, il faut le servir via un petit serveur local (pas juste double-cliquer sur index.html, qui serait bloqué par le navigateur). Par exemple :
npx serve .
ou, si tu as Python :
python -m http.server 8080
Puis ouvre l'URL affichée dans deux onglets différents pour tester le multijoueur (un onglet crée la partie, l'autre la rejoint avec le code affiché).
Ajouter tes propres questions
Deux façons de faire :
editor.html : un éditeur visuel à ouvrir dans le navigateur (en local ou via l'URL déployée) pour créer/modifier/supprimer des questions sans toucher au JSON — formulaire avec aperçu en direct (rendu exactement comme dans le jeu) et un testeur de réponse pour vérifier qu'une forme raccourcie ou un acronyme serait bien accepté. Réservé aux comptes admin : il faut donc avoir configuré le mode "en ligne" ci-dessous. Il charge automatiquement les questions actuellement en ligne à l'ouverture, et chaque sauvegarde/suppression est publiée automatiquement et instantanément dans le jeu — rien à exporter, rien à committer. La liste se tient aussi à jour toute seule en cours de session dès qu'un admin (toi ou quelqu'un d'autre) ajoute/modifie/supprime une question ailleurs, sans jamais avoir à recharger la page. Les questions y sont regroupées par catégorie (sections repliables, pour éviter de faire défiler une longue liste), et la catégorie du formulaire se choisit dans un menu déroulant des catégories déjà utilisées — avec une option pour en créer une nouvelle. La page se recharge aussi toute seule si une nouvelle version du site a été déployée entre-temps (sans jamais couper un formulaire en cours de remplissage) — pour ne jamais rester bloqué sur une vieille version en cache.- À la main : tout le schéma est documenté dans
questions/README.md — il suffit d'éditer questions/questions.json, puis de pousser le fichier modifié sur GitHub. Ne nécessite aucune configuration.
Mode "en ligne" : comptes et modération (optionnel)
editor.html a aussi un mode en ligne, pour laisser d'autres personnes proposer des questions sans qu'elles touchent directement au fichier, avec validation par un·e admin avant qu'elles soient ajoutées. C'est 100% optionnel — sans configuration, l'éditeur fonctionne exactement comme avant (local, questions.json).
Important sur la sécurité des comptes : la connexion se fait uniquement via Google (bouton "Se connecter avec Google") — aucun mot de passe ne transite ni n'est stocké par ce projet, à aucun moment. C'est Google qui gère entièrement l'authentification ; nous n'avons techniquement aucun moyen de voir ou récupérer le mot de passe de qui que ce soit. Le rôle « admin » est juste une liste d'identifiants Google autorisés dans la base, et cette liste n'est modifiable que depuis la console Firebase (jamais depuis le site) — personne ne peut se nommer admin lui-même.
Ce mode a besoin d'un projet Firebase gratuit (aucune carte bancaire requise) :
- Va sur console.firebase.google.com, crée un projet (gratuit, plan "Spark").
- Authentication → Sign-in method : active le fournisseur Google.
- Firestore Database : crée une base (mode production).
- Dans l'onglet Règles de Firestore, colle le contenu de
firestore.rules à la racine du projet, puis publie.
- Paramètres du projet → Général → Tes applications : ajoute une app web, copie la config fournie dans
js/firebase-config.js (remplace les "REMPLACE-MOI"). Ce n'est pas un secret, tu peux le commiter.
- Super-admin : ouvre
js/auth.js et remplace la valeur de SUPER_ADMIN_EMAIL par ta propre adresse Gmail, puis fais pareil dans firestore.rules (la fonction isSuperAdmin()) — republie les règles mises à jour comme à l'étape 3.6. Cette adresse est codée en dur dans les règles : elle seule obtient automatiquement tous les droits à sa première connexion, sans manipulation dans Firestore.
Une fois configuré : n'importe qui de connecté peut proposer une question (bouton "Proposer en ligne" dans le formulaire) ; les comptes admin voient la file d'attente avec des boutons Approuver/Rejeter. Approuver une proposition, ou enregistrer/supprimer une question directement dans l'éditeur en tant qu'admin, la publie immédiatement dans le jeu — aucune étape manuelle, aucun token, aucun commit. Le compte super-admin a en plus un panneau "Ajouter/retirer un admin" (juste une adresse email à saisir) pour donner les droits admin à d'autres comptes, sans jamais toucher à la console Firebase.
Comment ça marche techniquement : les questions publiées de cette façon vivent dans une collection Firestore (/questions), lue par le jeu sans connexion requise (sinon les joueurs non connectés ne pourraient pas charger les questions) et fusionnée à chaque partie avec le fichier statique questions/questions.json, qui reste le socle de départ. Une question éditée remplace sa version statique du même id ; une suppression pose un repère "supprimée" plutôt que d'effacer le fichier (impossible à faire depuis le navigateur sans backend) — invisible pour les joueurs, filtré à la fusion.
À la première connexion (sur le jeu comme dans l'éditeur), chacun choisit un pseudo public — c'est lui qui est affiché partout (propositions, liste des comptes), jamais le nom ou l'email du compte Google. Il reste modifiable à tout moment (icône ✏️ à côté du nom affiché).
Pistes d'amélioration futures (non faites pour l'instant)
- Statistiques persistantes entre les parties, comptes joueurs.
- Chat, musique d'ambiance.
- Serveur TURN dédié pour fiabiliser les connexions sur réseaux très restrictifs.
