Journal Jouer avec des cartes

Des cartes Unlock! à imprimer et découper

J'aime bien l'escape game de salon Unlock! et j'ai découvert que l'éditeur du jeu proposait plusieurs scénarios de démo gratuits, les cartes nécessaires au jeu étant fournies dans des pdf à imprimer et découper.

Se passer de l'impression ? imagemagick permet de "découper" certaines portions d'un pdf pour en tirer des images. Voici un exemple de commandes utilisables avec le pdf du scénario "Le donjon de Doo-Arann" (toutefois après avoir donné les droits de lecture et d'écriture pour les pdf dans la configuration imagemagick) :

convert -density 300 'Doo-Arann.pdf[0,3,4,7]' -gravity NorthWest -chop 130x505 -gravity SouthEast -chop 131x215 -crop 720x1323 +repage -scene 0 back.png
convert -density 300 'Doo-Arann.pdf[1,2,5,6]' -gravity NorthWest -chop 130x505 -gravity SouthEast -chop 131x215 -crop 720x1323 +repage -scene 0 front.png

Ainsi générées, les images face et dos d'une même carte n'ont pas forcément le même numéro, mais la renumérotation est jouable, surtout lorsqu'on a compris le motif.

Un navigateur pour jouer

Les cartes numériques découpées, restait à pouvoir jouer avec. Solution retenue : une page HTML.

Le résultat, avec des cartes à jouer en lieu et place des cartes Unlock! :

Les cartes peuvent être retournées, masquées et réordonnées. Et on peut faire surgir, depuis la barre de droite, un "bac à sable" dans lequel il est possible d'associer, de redimensionner et de faire tourner des cartes.

Le bout de code correspondant est disponible sur GitLab : https://gitlab.com/theo.dardel/play-cards/

So what?

On a vu code plus beau :
- la compatibilité avec d'autres navigateurs que Firefox va de "ça marche presque comme voulu" à "c'est cassé" ;
- la bibliothèque javascript Konva.js utilisée pour le "bac à sable" fait appel à l'élément Canvas ; il en résulte une certaine opacité dans le DOM.

Et ça ne permet pas de construire des châteaux.

Mais j'ai pu jouer les scénarios de démo de Unlock!, et c'était l'objectif.