Pitit Bac – Le jeu du petit bac en ligne

En multijoueurs et en temps réel

a marqué ce sujet comme résolu.
Auteur du sujet

À la base, je voulais juste découvrir le monde du Javascript moderne et de VueJS. Mais ça a dérapé.

Avec des amis, on faisait assez souvent, et d’autant plus en cette période de confinement, des petits bac en ligne. C’est d’ailleurs d’autant plus drôle avec des catégories non-standard… Mais le site le plus connu pour ça n’est, c’est peu dire, pas des plus optimisés. Fatigué de ses lenteurs et autres bugs, et comme je voulais découvrir VueJS et le développement d’applications en temps réel via websockets (pour un autre projet), je me suis dit que ça pouvait être un bon prétexte.

Voici donc Pitit Bac, un jeu de petit bac en ligne, rapide, en temps réel et sans inscription — juste un lien à partager pour faire une partie. :)

Capture de l'écran de configuration de Pitit Bac

Captures d’écran d’une partie simulée
En cours de partie
En cours de partie
Vue des différentes réponses des participant⋅e⋅s et vote de leur validité
Vue des différentes réponses des participant⋅e⋅s et vote de leur validité
Fin du jeu et scores (les scores détaillés de tous les joueurs sont aussi disponibles plus bas)
Fin du jeu et scores (les scores détaillés de tous les joueurs sont aussi disponibles plus bas)

Technologie et évolution du projet

C’est fait en VueJS et websockets (purs, je n’ai pas utilisé de Socket.IO ou autres), avec le serveur de jeu en NodeJS. À la base c’est vraiment un projet d’entraînement — et mon premier projet 100% JavaScript — mais j’en suis plutôt content, même si ça reste assez simple. C’est open source, pour les curieux, ou ceux qui voudraient critiquer mon JavaScript (sous CeCILL-B). Y’a même quelques tests unitaires ! Qui l’eût cru.

À la base c’était juste pour prototyper mais je me suis laissé prendre au jeu en allant un poil plus loin (c’est notamment utilisable sans problème sur mobile, et la déconnexion, reconnexion, et connexion en cours de partie, sont gérés). Il n’y a par contre aucun pisteur ou requête externe, et aucune réponse (ou autre) n’est conservée par le serveur, une fois le jeu terminé.

Vu que j’ai quelque chose d’assez stable (a priori, je reste prudent), je compte bien le laisse en ligne (surtout en cette période ! mais aussi après). Je n’ai pas à l’heure actuelle prévu un nom de domaine dédié (à tort ?), donc c’est sur bac.carrade.eu.

Là où je pêche potentiellement c’est que je n’ai mis qu’assez peu de sécurités pour le serveur (par exemple, limites de taille de réponses, de nombre de joueurs par partie, etc.). On va dire qu’internet est gentil, pour le moment (comment ça, non ?).

Rien à ajouter, merci pour votre lecture :) Et à Situphen qui m’a incité à faire un sujet ici :-°

Édité par Amaury

#JeSuisArius ⋅ Mon blog scientifiqueLe Pitit Bac

+14 -0

Cette réponse a aidé l’auteur du sujet

J’approuve à 100% ! C’est bien beau, intuitif, réactif et en plus c’est open-source et disponible sur Github. Autant dire que c’est la référence Petit Bac lors des soirées jeux avec mes amis ! :D

Corruptible avec des crêpes au sirop d’érable ou une bonne bouteille de Côteaux-du-Layon

+1 -0

Et on peut personnaliser son pseudo sans inscription ? :o

Oui, tu peux même avoir deux fois le même pseudo dans une même partie (ou dix ou cents ou plus encore) !

Capture d'écran
Capture d'écran

Corruptible avec des crêpes au sirop d’érable ou une bonne bouteille de Côteaux-du-Layon

+1 -0
Auteur du sujet

Et on peut personnaliser son pseudo sans inscription ? :o

Phigger

Le pseudo est simplement demandé quand tu créé ou rejoins une partie :) Il n’est pas lié à un compte ou autre (il y a un couple UUID/secret1 derrière pour identifier le client, et permettre la reconnexion en cas de perte de connexion ou d’actualisation de la page, mais la durée de vie de ce couple est celle de l’onglet du navigateur).

La seule chose qui est retenue sur le long terme c’est le pseudo, mais uniquement dans le stockage local du navigateur (pour éviter de le retaper), pas sur le serveur.

Oui, tu peux même avoir deux fois le même pseudo dans une même partie (ou dix ou cents ou plus encore) !

Situphen

Attention, si y’a pas de raison que le système ne gère pas les parties à 100, l’interface (de vote, principalement) n’est pas vraiment optimisée pour ça :-° (quoique sur mobile ça devrait passer correctement)

Incroyable ! Vraiment moderne ! :D

J’adore l’histoire derrière ce projet, quand même

Phigger

Merci ! D’ailleurs j’ai l’impression que c’est pas si rare que ça, les projets qui débutent par un besoin ou d’un ras le bol d’un autre :p


  1. Il est caché dans l’onglet « stockage de session » de la section stockage du panneau de développement de Firefox, pour les curieux⋅ses (ou l’équivalent sous Chrome).

Édité par Amaury

#JeSuisArius ⋅ Mon blog scientifiqueLe Pitit Bac

+0 -0

Cette réponse a aidé l’auteur du sujet

Salut,

J’ai testé au cours de la soirée, c’était sympa et ça marchait bien. J’ai quelques remarques :

  • Lors du clic sur le lien vers la partie, le site semblait perdre la partie fragment de l’URL, il fallait donc recopier l’adresse entière pour rejoindre.
  • Pour certaines lettres où il n’y a pas de réponses dans toutes les catégories, il serait intéressant de pouvoir demander la fin de la manche, sans avoir à remplir les champs avec des mots inexistant.
  • Lors de la validation des réponses il y a des moments où les signes s’actualisaient mal, mais tout semblait bon une fois la validation terminée.
Auteur du sujet

Merci pour ton retour !

Lors du clic sur le lien vers la partie, le site semblait perdre la partie fragment de l’URL, il fallait donc recopier l’adresse entière pour rejoindre.

Étrange, je n’ai jamais rencontré ça et les navigateurs ne sont pas censé retirer l’ancre gratuitement. Tu utilises quel navigateur ? Tu n’as bien sûr pas cliqué sur « …vous pouvez également créer une nouvelle partie » sous le champ demandant le pseudo (qui va effectivement retirer l’ancre) ?

Pour certaines lettres où il n’y a pas de réponses dans toutes les catégories, il serait intéressant de pouvoir demander la fin de la manche, sans avoir à remplir les champs avec des mots inexistant.

Bonne remarque ! Ça devrait être assez simple à faire, je réfléchis juste à comment l’intégrer proprement à l’interface.

Lors de la validation des réponses il y a des moments où les signes s’actualisaient mal, mais tout semblait bon une fois la validation terminée.

Sur téléphone ou sur ordi ? J’avais un tel problème sur téléphone (lié à une optimisation maladroite de vuejs), mais je l’avais normalement corrigé. Je reste attentif si je vois le problème revenir :) .

#JeSuisArius ⋅ Mon blog scientifiqueLe Pitit Bac

+0 -0

Ça m’est arrivé avec un chromium, même problème pour des gens sous firefox ou chrome. Et non je ne cliquais sur rien mais la page se rechargeait avec un nouvel id.

Il me semble que tout le monde était sur ordinateur, et il survenait chez tout le monde en même temps.

Ça m’est arrivé avec un chromium, même problème pour des gens sous firefox ou chrome. Et non je ne cliquais sur rien mais la page se rechargeait avec un nouvel id.

Il me semble que tout le monde était sur ordinateur, et il survenait chez tout le monde en même temps.

@Amaury À voir dans les logs mais peut-être que le site a planté, redémarré automatiquement avec systemd et donc a donné un nouvel id ?

Corruptible avec des crêpes au sirop d’érable ou une bonne bouteille de Côteaux-du-Layon

+0 -0
Auteur du sujet

Ça m’est arrivé avec un chromium, même problème pour des gens sous firefox ou chrome. Et non je ne cliquais sur rien mais la page se rechargeait avec un nouvel id.

Il me semble que tout le monde était sur ordinateur, et il survenait chez tout le monde en même temps.

entwanne

Ça ça arrive, que la page change d’ID sans qu’on ne fasse rien quand on valide son pseudo, mais uniquement lorsqu’aucune partie n’existe avec cet ID (le serveur en créé alors une nouvelle avec un identifiant aléatoire, et indique au client d’utiliser le bon ID, histoire que le lien d’invitation marche). Cela dit c’est étrange, ce n’est pas censé arriver si la partie existe…

Je vais rester attentif à ce problème, merci.

@Amaury À voir dans les logs mais peut-être que le site a planté, redémarré automatiquement avec systemd et donc a donné un nouvel id ?

Situphen

Ça aurait pu oui. J’ai vérifié, mais le serveur n’a pas planté au milieu de la partie d’entwanne (ou à aucun autre moment d’ailleurs), ni n’a été redémarré manuellement. Donc non :p

#JeSuisArius ⋅ Mon blog scientifiqueLe Pitit Bac

+0 -0
Auteur du sujet

J’ai publié quelques mises à jour hier soir, et je suis plutôt satisfait de l’état actuel du jeu (ça reste un petit jeu simple, hein, pas un projet de trois mois :p).

  • On peut configurer l’alphabet utilisé pour tirer les lettres. L’alphabet par défaut est désormais une version “simplifiée” de l’alphabet français, sans les lettres qui ont une trop faible fréquence de première lettre de mot en français. J’ai également généré des alphabets de ce type pour d’autres langues grâce à un jeu de données de mots associés à leurs langues extrait du Wikitionnaire anglais1 (que deux millions et demi de mots toutes langues cumulées donc ça a ses limites, mais pour cet usage, c’est tout de même très suffisant). Ces alphabets sont proposés dans un menu “pré-sélections” pour pouvoir les entrer facilement.
  • On peut également configurer les scores en fonction des divers résultats : réussi, réussi mais en doublon, invalide, refusé par le vote, ou vide. Les scores peuvent être négatifs, faisant ainsi perdre des points en cas d’erreur ou de refus par le vote.
  • Tout le monde peut voir les suggestions de catégories. Je me dis que ça peut permettre de plus aisées discussions avec le maître du jeu sur quoi prendre (dans l’hypothèse où elles ne sont pas écrites à la main).
  • J’ai amélioré l’affichage de l’écran de configuration de la partie pour les gens qui ne sont pas maître du jeu (i.e. la majorité des joueurs), afin de remplacer les contrôles de formulaire grisés par des indications pensées pour la lecture seule (qui ne ressemblent plus à des éléments de formulaire).

Côté corrections, moins de choses, c’est globalement stable (et j’en suis heureux).

  • Le bug d’affichage des votes soulevé par Entwanne a été corrigé. Il n’apparaissait en réalité qu’à partir de la seconde partie réalisée sur un même jeu, à la suite, et était lié à une subtilité de VueJS qui m’avait échappé : l’objet Javascript qui stockait les votes n’était plus réactif, d’où l’absence de mise à jour de l’interface par VueJS. C’était purement visuel.
  • Je n’ai pas réussi à reproduire le problème d’adresse remonté par Entwanne mais j’ai optimisé la façon dont le jeu gère cette URL, ça pourrait peut-être corriger ça par effet boule de neige.
  • Quelques autres améliorations diverses et variées de l’UX, autant sur mobile que sur grand écran.

À part rendre l’application internationalisée, et pourquoi pas proposer des parties fermées ou avec un nombre maximal de joueurs (p.ex. pour jouer en stream), je ne pense pas avoir grand chose à ajouter si ce n’est des détails :p

L’adresse ne change pas (pour le moment ? j’hésite, en réalité, si je trouve un joli nom de domaine) : bac.carrade.eu.


  1. Comment ça je vais trop loin juste pour un jeu de petit bac ? C’est fun les stats, eh !

Édité par Amaury

#JeSuisArius ⋅ Mon blog scientifiqueLe Pitit Bac

+3 -0

Tu sais @Amaury que tu va nuire gravement à ma productivité, à moi et celles de mes camarades ? C’est trop bien ! Faut juste comment on l’installe sur mon serveur.

La tero estas nur unu lando | Géographe de service | Cliquez 👍 pour dire merci

+1 -0
Auteur du sujet

Héhé :p

Libre à toi d’utiliser mon instance si tu ne veux pas t’embêter :) Elle ne contient aucun suivi ou autre sauvegarde des catégories et réponses (il y a des statistiques remontées, mais rien de plus que le nombre de parties et de clients simultanés, pour pouvoir surveiller la charge de la machine qui héberge le jeu).

Sinon, l’installation est documentée sur le README (derrière nginx et avec systemd, mais ça doit s’adapter à d’autres systèmes).

Édité par Amaury

#JeSuisArius ⋅ Mon blog scientifiqueLe Pitit Bac

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte