Trivabble, l’aventure continue

Une nouvelle version de Trivabble, un jeu de Scrabble en réseau présenté ici‑même, vient de sortir.

Sommaire

• Petit historique
• Cible de Trivabble
• Alors, quoi de neuf ?
  • Bogues corrigés
  • Nouveautés visibles
    • Montrer son jeu aux autres joueurs
    • À qui le tour ?
    • Incrémenter le score
    • Interface en roumain
    • Disponibilité du jeu dans plus de trente langues
    • Vérification orthographique des mots qui viennent d’êtres posés
    • Pointeur laser
    • Boîte de messages d’aide
    • Boîte de dialogue pour les paramètres
    • Petit raffinage du style et ergonomie
    • Identité graphique
  • Nouveautés côté développement et mise en production
    • Organisation des fichiers
    • Gestion des paramètres
    • Conversion des let et const en var
    • Sécurité
    • Documentation
• Et la suite ?
• Autour de Trivabble
• Conclusion

Petit historique

J’ai démarré ce projet en 2016 pour que ma famille éparpillée aux quatre coins de la France puisse jouer ensemble. La philosophie du projet est simple :

• il faut que ça soit facile et agréable à utiliser pour des gens qui n’y connaissent rien à l’informatique (ce qui ne l’empêche d’ailleurs pas d’être agréable pour des gens qui s’y connaissent !) ;
• le jeu n’impose pas de règles et ne vérifie rien — pour caricaturer, il fournit un sac de pièces, un plateau, des chevalets et les gens font ce qu’ils veulent avec —, comme dans le monde physique : pas de limite artificielle, ça reste simple à comprendre, et si vous jouez au Scrabble ou comptez les points à votre manière, personne n’ira vous juger.

J’ai fait mon petit journal ici pour présenter le projet, j’ai mis ça en ligne, j’ai reçu une première contribution (traduction en breton), puis ça s’est débrouillé tout seul, à tel point que j’avais plus ou moins oublié que j’avais ça qui tournait sur mon serveur…

… jusqu’à mars 2020, où j’ai commencé à recevoir des courriels de remerciements, et quelques rapports de bogues aussi. Oui, à cette période, les gens ont dû chercher des solutions pour jouer à distance avec leurs connaissances… Et j’ai vu qu’effectivement, il y avait pas mal de connexions au jeu. Devant cet état de fait, je me suis motivé pour stabiliser Trivabble. Ça a bien occupé mon temps libre pendant les mois de mars et avril. Et j’ai soumis cette dépêche, que je vous laisse (re)lire si vous voulez vous (r)afraîchir la mémoire.

Il y a eu pas mal de suggestions dans les commentaires de la dépêche, et j’ai aussi vu des tickets apparaître sur la forge du projet. Puis une requête de fusion. Puis une autre. Et d’autres. Puis, j’ai ouvert un ticket formulant le souhait d’avoir une vraie prise en charge de l’international, que je comptais traiter plus tard. Mais le lendemain, j’ai reçu une requête de fusion pour ce ticket. Et d’autres contributions se sont enchaînées, si bien que je n’ai pas écrit la majorité du code qui forme cette version… Vous l’aurez compris, il y a plein de nouvelles fonctionnalités sympathiques, mais le plus gros changement pour moi, c’est l’arrivée d’autres personnes contribuant au projet, au point que je ne prends plus les décisions seul. Et aussi, des retours de gens qui l’ont installé sur leurs serveurs.

Cible de Trivabble

En fait, la cible de Trivabble est assez large, et s’est élargie ces derniers mois. Trivabble cible les gens qui souhaitent jouer au Scrabble en famille et avec leurs ami·e·s. Cela représente une variété d’âges importante, de gens un peu plus jeunes que moi, nés avec un smartphone dans la main, jusqu’à assez vieux pour avoir découvert l’informatique il y a cinq ans, après avoir vécu l’apparition du vinyle, l’avènement du téléphone à cadran dans les foyers et la naissance de Michel Drucker. Et maintenant, il attire aussi les gens qui aiment bidouiller, et c’est cool de leur faire plaisir aussi (à condition de ne pas dévier le projet de sa cible initiale).

Alors, quoi de neuf ?

Si la précédente version ne contenait que des améliorations sous‑marines, cette version vient avec plein de choses visibles ! Des bogues corrigés, fonctionnalités à destination des utilisateurs finaux, des gens installant Trivabble sur leurs serveurs et des gens bidouillant le code.

Bogues corrigés

Trivabble avait des problèmes de pièces qui disparaissent. Ça a donné des échanges sympathiques par courriels et on sent que ça a causé des fous rires. Malgré tout, pas super‐fan de cette « fonctionnalité », on a finalement réussi, grâce à certaines observations d’utilisateurs, à reproduire, et du coup, corriger, les multiples causes de ces bogues qui sont, je l’espère, maintenant corrigés.

Autre point, il y avait un dysfonctionnement lors de la première utilisation de Trivabble lorsque les WebSockets sont utilisés. Impossible de remplir son chevalet en cliquant sur le sac parce que le numéro de partie n’était pas bien enregistré côté serveur. Recharger la page permettait de contourner le problème. Les WebSockets sont activés par défaut sur Trivabble, y compris en environnement de développement, mais je ne les avais pas activés sur l’instance principale, frileux que j’étais de changer un truc qui fonctionnait (avoir des utilisateurs qui ne se débrouillent pas bien en informatique, ça met un peu la pression ! Il faut que ça marche !). Du coup, ce bogue n’a probablement pas été vu par beaucoup de monde.

Dernier point, en cas de message d’erreur avant toute utilisation de la messagerie instantanée, le panneau de gauche devenait énorme: il s’élargissait pour prendre le plus de place possible. Surtout vu en environnement de développement, quand on redémarre tout le temps le serveur et qu’on ne commence pas une partie sans s’envoyer des messages instantanés, c’est quand même mieux sans.

C’est tout pour les bogues corrigés. De toute façon, Trivabble ça fonctionne plutôt bien, hein ! Hé hé.

Nouveautés visibles

Montrer son jeu aux autres joueurs

Ça m’a été demandé par courriel, et peut‑être aussi suggéré dans les commentaires de la dépêche précédente. On peut maintenant montrer son jeu aux autres joueurs en cliquant sur un bouton. Ça permet aux autres d’aider un joueur en difficulté. Si ce n’est pas nécessairement du Scrabble dans les règles de l’art, c’est bien du Scrabble tel que pratiqué concrètement par les gens. Une fonctionnalité « accessoirement indispensable » comme on dit chez moi (pas du tout).

À qui le tour ?

On m’a remonté la difficulté à savoir à qui le tour. Dans le monde physique, il est facile de demander à qui c’est de jouer, de s’entendre répondre « c’est toujours à celui qui demande », et on sait vite à qui c’est le tour. En réseau, pas si simple ! Il y a donc maintenant un bouton pour indiquer le tour. Le nom de la personne concernée sera en gras. N’importe qui peut « donner » le tour à n’importe qui. Ce qui permet, d’une part, de coller à la philosophie « on ne fournit que les outils, pas les règles » et, d’autre part, à une personne à l’aise avec la fonctionnalité de gérer les tours pour tout le monde. Ou, à chacun de passer le tour. Aux joueurs et aux joueuses de décider.

Incrémenter le score

Il est maintenant possible d’ajouter une valeur à un score, au lieu de devoir faire l’addition soi‑même. Ça ne mange pas de pain, mais c’est plus pratique, et ça augmente grandement la qualité de vie d’une personne utilisant Trivabble. Merci à Nico Nucor, qui a à la fois ouvert le ticket et fait une requête de fusion, s’annonçant lui‑même débutant en JavaScript. Et, ça, je suis content de le lire, ça veut dire que des gens apprennent des choses grâce à ce projet.

Ces trois fonctionnalités sont en fait en production avec une version étiquetée dans le dépôt, depuis avril, mais je me voyais mal envoyer une dépêche ou même un journal ici pour ces trois fonctionnalités si peu de temps après la précédente dépêche. Maintenant, pour les nouveautés en production ce week‑end :

Interface en roumain

Cosmin Humeniuc a envoyé une traduction en roumain de Trivabble, et en a profité pour ajouter une clef manquante dans le modèle de traduction. Malheureusement, comme pour le breton, l’interface a un peu évolué depuis rendant certaines traductions obsolètes, et ajoutant des parties non traduites au projet. Il sera peut‑être bientôt temps de mettre en place un système pour contribuer facilement à la traduction de l’interface de Trivabble.

Disponibilité du jeu dans plus de trente langues

Laurent Mazet y va fort pour sa deuxième contribution à Trivabble. Vous n’êtes pas sans savoir que les langues entre elles n’ont pas les mêmes fréquences de lettres, et le Scrabble adapte par conséquent le nombre de fois qu’une lettre apparaît dans le sac, et le nombre de points associés. Il a écrit un extracteur pour la page Wikipédia Lettres du Scrabble, ce qui permet d’ajouter la prise en charge des langues de cette page dans Trivabble. Il en a aussi ajouté un certain nombre à la main, et a écrit le mécanisme dans Trivabble permettant de changer la langue du plateau. Donc, si vous voulez jouer en Klingon, eh bien, faites‑vous plaisir. J’ai également tenu à ce que le breton soit pris en charge, vu que c’est une langue dans laquelle Trivabble est (maintenant partiellement) traduit.

Vérification orthographique des mots qui viennent d’êtres posés

Laurent continue dans sa lancée, avec un énorme boulot pour ajouter la vérification orthographique des mots posés sur Trivabble. La fonctionnalité est optionnelle et nécessite une action de la personne installant Trivabble. Un Makefile avec des scripts bash et awk téléchargent des dictionnaires Aspell et produisent des listes de mots (dictionnaires) avec toutes les formes fléchies (conjuguées et accordées, quoi !). Ces dictionnaires seront téléchargés lors de la première utilisation au cours d’une partie.

Pour que ça ne soit pas trop horrible, on compte vraiment sur la compression côté serveur pour envoyer les dictionnaires. Cela dit, non compressé, le dictionnaire pour le français fait autour de 3 Mio, donc c’est gérable. En revanche, pour certaines langues, cette approche ne fonctionne pas : des dictionnaires de plusieurs dizaines de gigaoctets sont générés pour ces langues qui permettent un très grand nombre de formes fléchies, donc on a désactivé ces langues. On pourra améliorer ça plus tard, on pourrait imaginer faire tourner Aspell directement dans le navigateur en le compilant en WebAssembly ou en asm.js par exemple. Si ça semble fun à faire, n’hésitez pas à ouvrir un ticket et discuter avec nous. :-)

Pointeur laser

Une suggestion qui a été faite dans les commentaires de la dépêche précédente a fait son petit chemin dans un ticket, et a terminé dans une requête de fusion de Laurent. Il est maintenant possible de pointer un endroit précis du plateau en double cliquant ou double tapotant dessus. La case s’éclaire sur le plateau de tous les joueurs et un message apparaît dans la messagerie instantanée. Et comme Laurent aime bien pouvoir paramétrer les choses aux petits ognons, il a même ajouté la possibilité de configurer la couleur !

Je lui ai dit : c’est bien gentil, mais comment on va faire pour que les gens découvrent cette superbe fonctionnalité ? On ne peut pas ajouter des messages d’aide à l’infini dans l’interface, ça va noyer les gens et de toute façon on manque de place pour cela. Et puis, c’est pareil, tes paramètres, c’est cool, mais si on remplit l’interface de paramètres, ça va noyer les gens. Ce à quoi il m’a répondu par deux requêtes de fusions :

Boîte de messages d’aide

Les messages d’aides sont consultables dans une petite boîte à droite de l’écran, avec une flèche pour passer au suivant. Le premier étant celui indiquant comment tirer des pièces, le deuxième comment affecter des points aux gens, jusqu’au dernier permettant de découvrir la fonctionnalité laser. Et ensuite, on table sur le bouche‐à‐oreille ! Il suffit peut‑être de quelques personnes découvrant la fonctionnalité pour qu’elle se répande si les gens l’apprécient.

Boîte de dialogue pour les paramètres

Cette boîte permet d’alléger l’interface de Trivabble en la libérant de tous les paramètres pas totalement essentiels pour jouer : ceux qui permettent de désactiver les sons, celui pour paramétrer la couleur du « laser », celui pour désactiver la vérification orthographique (pour éviter de mis‑cliquer sur le bouton et déclencher un téléchargement de dictionnaire sur une connexion mobile limitée).

Petit raffinage du style et ergonomie

La touche échappe ferme maintenant toutes les boîtes de dialogue, en répondant non à la question si la boîte de dialogue pose une question en oui/non, ou en annulant l’action si la boîte de dialogue demandait confirmation. De plus, le vert criard des boutons de Trivabble me donnait des boutons, alors je l’ai adouci un peu. J’ai arrondi les angles des boutons juste ce qu’il faut pour rendre les angles plus doux, mais sans que ça ne se remarque vraiment (je ne suis pas super fan des arrondis trop visibles. Les arrondis, c’est so 2010, n’est‑ce pas ? La mode c’est à nouveau celle de Windows 3.1 avec ses boutons on ne peut plus carrés).

Identité graphique

Ysabeau a proposé un nouveau sac, suite à une remarque sur l’apparence du sac dans les commentaires de la dépêche précédente. J’ai beaucoup apprécié l’initiative mais le style du sac qu’elle a proposé ne m’a pas complètement emballé (vous l’avez celle‑là ? 😜). Cependant, elle a aussi fait un logo qui est devenu le logo et la favicon de Trivabble. J’aime également beaucoup l’idée des pièces Trivabble au fond du sac, et j’espère pouvoir en faire un élément de l’identité visuelle de Trivabble et l’intégrer sur le site.

 

Nouveautés côté développement et mise en production

Organisation des fichiers

La séparation du client et du serveur est maintenant propre, avec un dossier public pouvant être servi avec un serveur HTTP statique sans crainte, et un serveur pouvant être placé bien au chaud ailleurs dans l’arborescence du système. Avant, il fallait mettre des règles pour bloquer le téléchargement du fichier de sauvegarde du serveur, par exemple. Ce changement semble aussi simplifier l’installation de Trivabble avec YunoHost d’après les retours, mais je n’ai pas essayé. Merci à Vincent Danjean pour le ticket et les réflexions initiales et à Laurent pour l’implémentation.

Gestion des paramètres

Laurent nous a ajouté un système de gestion de paramètres utilisateur dans le code du client, bien agréable à utiliser. Les paramètres sont sauvegardés, comme depuis toujours, dans le localStorage (et on a pris soin de garder la compatibilité avec les anciennes versions pour ne pas perdre les paramètres des gens lors de la mise à jour). Mais maintenant, le fait que localStorage enregistre des chaînes est abstrait. On a une belle fonction getSetting(clef) qui récupère une valeur placée par setSetting(clef, valeur) avec le même type d’origine. Si le paramètre n’a jamais été posé, on tente de récupérer la valeur dans un objet Conf rempli avec la configuration fournie par l’administrateur, et sinon une valeur par défaut.

Conversion des let et const en var

Le code de Trivabble est écrit en JavaScript pur, et aucun transpileur ou système d’empaquetage tel que Babel ou webpack n’est utilisé. C’est un choix d’ignorant devenu délibéré : cela permet d’avoir un processus de développement et de mise en production aussi simple que possible, et de ne pas dépendre de l’écosystème NPM que je trouve… complexe et chaotique, et surtout overkill pour Trivabble. Mais vu que Trivabble doit fonctionner sur l’iPad 2, coincé en 2015, impossible d’utiliser les fonctionnalités récentes de JavaScript du coup. Cependant, c’était quand même un peu pénible de ne pas pouvoir utiliser let et const pour déclarer les variables, un petit bout de code [fr]agile et pragmatique :

code.replace(
    /(?<before>^|\s|\()(?:const|let)(?<after>\s)/gu,
    "$1var$2"
)

Cela permet de faire la conversion lors de la mise en production et quand on utilise le serveur de développement. Alors, oui, on analyse du JavaScript à la manière Cthulhu avec une expression rationnelle illisible, et ce code ne marche pas dans le cas général. Mais il marche sur le code client de Trivabble, et serait simple à remplacer par une solution propre si le besoin s’en faisait sentir. Ça fait le job ® avec une vitesse d’exécution imbattable et ça a pris dix minutes à écrire, tests de non‑régression inexistants inclus.

Sécurité

Les bonnes pratiques actuelles consistent à utiliser des en‑têtes HTTP de plus en plus sévères pour contrôler la sécurité et mitiger les failles de type Cross Site Scripting — de l’injection de code exploitant les failles des applications Web. Imaginons par exemple qu’il y ait une faille dans Trivabble et qu’envoyer un message bien spécifique dans la messagerie instantanée permette d’exécuter du code sur les navigateurs des destinataires. Ces en‑têtes permettent de limiter la casse en interdisant certains mécanismes. Il s’agit notamment de l’en‑tête Content-Security-Policy. Il est maintenant possible d’appliquer une politique de sécurité super stricte, bloquant même les styles « inline » (balises <style> et attributs style="") sans casser Trivabble. Les versions précédentes de Trivabble utilisaient des styles inline, ce qui n’est plus le cas maintenant, et le serveur de développement envoie plus ou moins cet en‑tête pour vérifier pendant le développement qu’on ne casse pas les installations l’utilisant :

Content-Security-Policy:
    default-src 'none';
    script-src 'self';
    style-src 'self';
    img-src 'self';
    connect-src 'self';
    media-src 'self'

Ce qui veut dire que les navigateurs n’essaieront pas de charger des scripts ou styles inline, ni de se connecter ou charger des scripts, styles ou média ailleurs que sur le serveur d’origine. Et ils n’essaieront pas d’accéder à tout autre type de données.

On pourrait faire mieux, en restreignant la liste des scripts, styles et médias autorisés aux cinq fichiers JavaScript, deux fichiers CSS et deux médias utilisés par Trivabble. Et ça ne semble pas insurmontable, surtout qu’ils sont statiques. À creuser…

Documentation

La mise en production est maintenant bien documentée, aussi bien en utilisant un frontal Apache 2 qu’en utilisant un frontal Nginx (l’instance principale est d’ailleurs passée à Nginx dans le plus grand silence). Trivabble est actuellement testé sur les deux configurations, mais j’ai tendance à recommander Nginx maintenant. Trivabble utilisant des connexions longues et n’ayant besoin que d’un serveur mandataire (proxy) léger, Nginx est plus adapté pour ce cas.

Et la suite ?

On a deux requêtes de fusions implémentant respectivement un minuteur et un comptage automatique des points (cette dernière s’appuyant sur ce qui a été fait pour le vérificateur orthographique). Ces deux fonctionnalités pourraient suffire à justifier une nouvelle version.

Le mode duplicate a été demandé plusieurs fois, alors si quelqu’un a la motivation, ça sera implémenté aussi.

On n’a pas du tout travaillé à généraliser le code de Trivabble pour servir de base à d’autres jeux, mais ça pourrait venir. N’hésitez pas à venir ! Plus on est de fous, plus on rit, et surtout, ça permet au projet de ne plus dépendre de moi.

Des réflexions sont en cours pour ajouter des tests automatiques (unitaires et fonctionnels). Si le sujet vous intéresse, n’hésitez pas à venir donner votre avis ou partager votre expérience.

Des réflexions sont également en cours pour améliorer la gestion des dictionnaires, avec peut‑être une intégration d’Aspell lui‑même pour vérifier les mots.

Et sinon… À vous de jouer !

Autour de Trivabble

Amic a fait un dérivé de Trivabble pour faire un jeu de Coinche, et ça c’est trop cool !

Conclusion

Merci aux gens qui ont trouvé un intérêt pour Trivabble, à celles et ceux qui ont contribué à cette version (notamment Laurent, Ysabeau, Nico, Cosmin et Philippe) et aux gens qui ont donné des retours par courriel ou dans les commentaires de la dépêche précédente. Sans ces personnes, je n’aurais pas continué à travailler autant sur Trivabble, et la plupart de ces évolutions n’auraient probablement pas vu le jour, en tout cas aussi rapidement.

J’espère que cette nouvelle version va vous plaire et vous permettre de passer de bons moments.

Aller plus loin

• Site Web de Trivabble (500 clics)
• Dépôt du projet (120 clics)
• Dépêche précédente (25 clics)