Pitit Bac – Le jeu du petit bac en ligne

À 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.

Captures d’écran d’une partie simulée

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.morel.games.

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

Et on peut personnaliser son pseudo sans inscription ?

Et on peut personnaliser son pseudo sans inscription ?

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

Incroyable ! Vraiment moderne !

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

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/secret¹ 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.

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)

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

J’adore, merci ! Bientôt pour les Game of zestes ?

Pourquoi pas, écoute c:

Excellent projet! Merci à l’auteur!

J’ai commencé une partie, pour ceux que ça intéresse : https://bac.carrade.eu/#097fe3d6

Une partie avec des catégories simples et accessibles, c’est ça qui est bien

Très bien : https://bac.carrade.eu/#2a0d9e9f

Chouette projet !
Quelqu’un est-il disponible pour tester le jeu avec moi ?

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 .

Ç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 ?

Ç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.

Ç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

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 anglais¹ (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

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.

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.

Héhé

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).