Aucune intelligence artificielle n'a été utilisé dans la rédaction de cet article.

Contexte et Objectifs

Il y a environ 6 mois, j'ai créé iotactile Games et le jeu Dice. À l'époque, mes compétences en programmation étaient moins avancées qu'aujourd'hui, et l'interface du site ainsi que le code de Dice ne me satisfaisaient pas.

Mon premier objectif est de rendre l'interface du site plus épurée et plus conviviale. Dice, avec ses 4816 lignes de code, nécessite également une optimisation, car il contient beaucoup de répétitions dans divers fichiers.

Ma priorité consiste à repenser la structure du code, suivie de la création d'une nouvelle interface fluide, simple et élégante, agrémentée de nouvelles fonctionnalités.

Vous retrouverez le code ici.

Choix des Technologies

Pour ceux qui ont déjà lu mon précédent article, voici un récapitulatif de la stack technologique que j'ai choisie.

J'utilise le framework JavaScript Nuxt.js avec la composition API et TypeScript. Node.js me sert pour mes fonctions cloud, et Firebase est utilisé pour le backend. J'intègre également Vuetify avec quelques composants et fonctionnalités, notamment pour les thèmes et les points de rupture, ainsi que du SCSS.

Interface Graphique

Pour améliorer l'expérience utilisateur, j'ai commencé par chercher des sources d'inspiration, puis j'ai sélectionné les couleurs et l'ambiance qui correspondent au mieux au projet. Après ces étapes préliminaires, j'ai créé avec précision neuf maquettes sur Figma.

Structure du Code

Ensuite, j'ai revu la structure du code pour Dice. J'ai créé un dossier dice dans mes composants, avec un sous-dossier menu pour la page d'accueil de Dice, et un sous-dossier game pour la page d'une session de jeu.

J'ai conçu un composant modèle qui offre une cohérence entre la page de menu et la page d'une session de jeu. Pour le menu, chaque composant correspond à une fenêtre du menu, tandis que pour une session de jeu, chaque composant représente un élément du jeu.

J'ai encapsulé les différentes actions liées à une session de jeu dans une classe diceSession pour réutiliser ces fonctions dans diverses actions. Cette classe comprend les méthodes "create", "start", "leave", "delete", "join" et "quickJoin".

De plus, j'ai créé une classe soundService utilisant la bibliothèque Howl pour gérer tous les sons dans ma session de jeu. Cette classe me servira pour tous les jeux futurs.

L'un des avantages majeurs a été la simplification des deux boucles relatives aux scores supérieurs et inférieurs. Auparavant, j'utilisais des fonctions et des calculs pour chaque cellule du tableau, mais grâce à mes boucles, j'ai pu réduire considérablement le nombre de lignes de code.

Pour plus de détails, vous pouvez consulter le composant "scoreboard" sur GitHub.

Les Nouveautés

- En termes de nouvelles fonctionnalités, j'ai introduit la gestion des sons, permettant aux utilisateurs de choisir ce qu'ils souhaitent entendre.

- L'échange entre le tableau des scores et la fiche du joueur est automatisé en fonction de qui joue.

- Les dés sont désormais disposés de manière plus réaliste sur le plateau.

- De plus, un indicateur sur le bouton du gobelet vous signale quand c'est votre tour de jouer, tout comme les notifications dans le chat de la session de jeu.

- Un bouton d'aide est disponible pour consulter les différentes combinaisons de dés du tableau.

- Enfin, la fenêtre de Dice s'adapte à la taille de votre écran pour une accessibilité optimale sur toutes les tailles d'écrans.

Fonctionnalités à Venir

Pour les prochaines étapes, je prévois de travailler sur une interface verticale pour les appareils mobiles. De plus, j'ajouterai d'autres playlists pour varier l'ambiance, ainsi que d'autres palettes de couleurs.

Conclusion

Je suis extrêmement satisfait du travail accompli. J'ai continué d'apprendre de nouvelles choses, et le résultat me semble désormais plus cohérent et propre. Un prochain article portant sur la création d'un clone du jeu Codenames sera publié très prochainement.

Je tiens à remercier tous ceux qui ont lu cet article jusqu'au bout, et j'ai hâte de vous retrouver sur Dice. À bientôt !