SmashUp Helper : Design avancé

Est-il possible de développer une Power Apps sans qui ne ressemble pas à une Power Apps ?

Cette question a été posé à la communauté et j’y ai vu un challenge à relever ! Je me rappelle qu’à mes débuts, je me sentais un peu limité en terme de design avec les composants de bases. Avec plus d’expérience, je sens maintenant que c’est possible.

Pour l’occasion, j’ai repris une de mes ancienne application : SmashUp Helper. Une application qui sert d’assistant au jeu de plateau SmashUp de Iello. Elle permet de compter les forces des créatures sur chaque bases au fur et à mesure du jeu. Fini les calculs mentaux à chaque tour pour savoir si une base est conquise !

C’est une Canvas app très simple, sans source de données, qui ressemblait à ça :

Afin de l’améliorer, je me suis inspiré du design du jeu : même couleurs, typographie, et ainsi que le design du dos des cartes. Le tout avec une (grosse) pincée de créativité, et on obtient çà :

En pratique

Avant de me lancer dans l’implémentation, j’ai d’abord fait le design sur le logiciel Figma. Ce qui m’a permis d’extraire les différents composants graphiques sous forme d’images pour les incorporer dans l’application. Les textes et le fond des bases sont en effet des images PNG.

L’effet de relief sur les bases est fait avec du SVG, je me suis inspiré du composant Drop Shadow de Yusuf Sharif.

Le tout dans 2 galeries imbriquées : 1 pour les bases et 1 pour la liste des joueurs. Celle des bases s’ajuste en fonction du nombre de bases pour rester en quinconce grâce à des formules mathématiques . J’écrirai un article dédié sur ce sujet.

Vous trouverez le code de l’application sur GitHub.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *