Le GUI, ou Graphics User Interface, est un élément primordial dans le développement. Comment avons-nous travaillé sur cet aspect là ? Quels ont été les choix que nous avons fait ? C'est ce que nous allons voir dans cet article 😊
🧪 Sandbox Page
Si vous n'avez pas lu mon 1er article sur la SandboxPage, je vous invite à le faire. Cela vous permettra de comprendre comment celle-ci fonctionne et pourquoi nous l'avons créée.
Pour faire simple pour ceux qui n'ont pas lu l'article : la sandbox page est une page qui permet de tester les composants graphiques que nous crééons. Cela nous permet de voir si tout fonctionne correctement et si le rendu est celui que nous attendons.
Voici un exemple de code de la SandboxPage :
<SandboxContainer name="Classic Button">
<ClassicButton text="Text here" />
</SandboxContainer>
et son rendu :
🎨 Création de nouveaux composants
À ce jour, nous avons créé + de 35 composants. L'intérêt d'un framework comme VueJS est de pouvoir réutiliser ces composants à l'infini. Cela nous permet de gagner un temps considérable lors de l'intégration de nouvelles fonctionnalités.
Mais du coup, comment se passe la création de ces composants ? Et bien, nous avons mis en place une méthodologie qui nous permet de travailler efficacement. Voici les étapes que nous suivons :
- Recherche d'inspiration : nous regardons ce qui se fait sur le marché, ce qui est tendance, ce qui pourrait plaire à nos utilisateurs
- Maquettage : nous utilisons Figma pour créer des maquettes de nos composants
- Intégration : nous intégrons ces maquettes en HTML/CSS
- Tests : nous testons nos composants sur la Sandbox Page
- Optimisation : si besoin, nous optimisons nos composants pour qu'ils soient plus performants
🚀 Prochaines étapes
Nous avons encore beaucoup de travail sur le GUI. En effet, même si les composants nous permettent de réutiliser facilement des éléments, il reste encore beaucoup de fonctionnalités à intégrer. Les nouveaux jeux (👀) ont besoin de fonctionnalités et d'interfaces uniques afin de les rendre fun à jouer !