Ô mïe - Le jeu de carte qui fait parler
Pour le nouvel an 2021, j'ai préparé un petit bout de jeu. Rien de phénoménal, mais c'était une occasion de faire un peu de Vue 3 sur un sujet plus léger et en dehors du contexte travail. Finalement, on s'est aussi bien amusé et j'ai choisi de publier le jeu à cette adresse omie.xyz.
Le jeu
Il s'agit d'un simple jeu de cartes. Des questions sont tirées au hasard parmi une liste de questions ou sujets. Elles sont regroupées dans plusieurs catégories permettant de jouer avec vos enfants, avec vos parents et entre amis (Oui, les sujets ne sont pas nécessairement les mêmes 😉). Au début de la partie, les joueurs sélectionnent les catégories de la partie et dépilent les cartes une à une et s'expriment l'un après l'autre sur le motif de la carte. À vous de voir si vous souhaitez en faire un jeu à boire ou autre chose, ce ne sont que des cartes.
Les choix techniques
Afin de faire ma veille, je fais des minis projets de la sorte. Donc l'idée ici était aussi de prendre un cocktail de technologies que je n'utilise pas ou rarement au quotidien.
J'ai donc construit un site statique en utilisant les éléments suivants :
- Vue 3 (présentation)
- Composition API (business logic)
- Tailwind (style)
- Vite (build)
Une stack relativement simple à mettre en place notamment grâce au bootstrap de Vite et de la documentation complète de Tailwind.
Un peu d'inspiration pour créer une liste de questions que j'ai placée dans un fichier JSON et une petite interface de configuration pour choisir les options de sa partie et la base technique est déjà en place.
Évolutions
L'application de base bien que suffisante pour un usage en soirée, n'était pas suffisante à mon goût. J'y ai donc ajouté quelques options.
La possibilité de jouer sur mobile est aujourd'hui une nécessité. C'est quelque chose que Tailwind gère particulièrement bien et m'a permis d'adapter rapidement l'application.
J'ai aussi ajouté l'option de pouvoir reprendre une partie. En effet, l'état de la partie étant dans la mémoire vive du navigateur, la mise en veille de l'appareil peut réinitialiser la partie. L'état de la partie est sauvegardé dans le localStorage assurant ainsi une persistance de la session de jeu.
Finalement, quoi de mieux de pouvoir jouer au jeu hors ligne ? J'ai passé l'application en PWA en quelque ligne avec Vite.
Le nom
Ô mïe est une déformation de O mnie qui en polonais signifie "À propos de moi". Je lui ai ensuite ajouté une touche de choc en y mixant la sonorité "Oh my god". Pour ceux qui savent lire la phonologie ça donne /u maj/.
Conclusion
Tout le reste c'est un Nginx dans du docker et un peu de configuration pour que ce soit joli et que ça fonctionne merveilleusement bien.
Je vous laisse découvrir le jeu ici omie.xyz et s'il vous plaît et que vous vous amusez, partagez votre expérience sur les réseaux 😉.