AVANCEMENT TFE N°4
Avancement du tfe au jour du 26 mars 2022
Quelques tests de mise en page…
Avant de me plonger dans le bain du code à proprement parlé, je me concentre sur le design une dernière fois.
En effet, je dois repenser la structure de l’interface du jeu.
Après ces tests et avoir demandé plusieurs avis, je me penche à présent sur la dernière proposition. L’objet situé en haut est plus accessible et il y a quand même plus de chance qu’on comprenne que ce soit un drag-and-drop qu’avec l’ancienne mise en page (l’objet étant situé en bas, on ne pense pas à aller le prendre tout court).
Dans tous les cas, si le système de drag-and-drop n’est pas compris ou est trop compliqué à coder, je pourrai toujours me rabattre sur un simple système de clic.
Visualiser la structure ! 👀
Avant de me lancer dans le code, j’ai bien sûr mis en place le package npm et j’ai revu et revu mon prototype Figma pour analyser et voir comment je pourrai mettre en place cette application !
Ce fut un véritable casse-tête…
On commence en douceur… ou pas ! 😓
J’ai commencé par mettre en place rapidement la page d’accueil avec les éléments de base (couleurs, typographies, arrière-plan, …).
Je me suis ensuite lancée dans la structure du tutoriel…
J’ai du testé plusieurs choses pour arriver à un accord avec W3C ! Ensuite, j’ai pu commencer à placer mes éléments visuels (personnages, phylactères, boutons, …).
Arrivent les problèmes lorsque je suis au ciblage des éléments dans le tutoriel (lorsque je présente chaque élément et son explication).
Après avoir codé l’interface en html puis intégré en png, j’ai finalement dû passer par un code interminable en svg afin de ne pas avoir de répétition de la structure, de pouvoir cibler les éléments souhaités et de pouvoir mettre mon filtre par au-dessus avec mon personnage. C’est finalement la seule solution que j’ai trouvé. Il a fallu cacher certains éléments du code svg pour pouvoir les recréer un HTML et ainsi les faire passer au dessus du filtre pour ensuite pouvoir les cibler !
Des problèmes sortis de je ne sais où… 🤷♀️
Évidemment, je n’ai pas réussi à arriver jusque là sans avoir de problèmes. Cela a commencé lors de l’installation du package où j’avais un problème avec le SSL. Ensuite, j’ai eu des gros soucis avec le slider (je n’ai jamais compris ce qui s’est passé, pourquoi et comment cela s’est résolu)…
Par après, mes images (dans le svg ci-dessus) ne s’affichaient pas à cause d’une certaine balise <g> qui permettrait de grouper des éléments.
Un petit peu de créativité ne fait pas de mal !
J’ai pu ensuite, créer le reste de mes illustrations, car jusqu’ici, je n’avais qu’une bouteille d’eau et une peau de banane. Il en fallait encore 13 autres et bien sûr, j’avais déjà préparé une liste avec ce qu’il fallait !
Go se challenger… #code #js 🤔
La partie la plus compliquée arrive… En effet, après avoir fait une bonne partie du visuel, il faut maintenant animer un peu tout ça.
J’ai donc installé GSAP.
Mon but était donc d’animer certains éléments lorsque par exemple, le tutoriel est à l’étape 6/18.
Là aussi, j’ai pris plusieurs jours pour trouver mon erreur car la console n’affichait rien. Il s’agissait tout simplement d’une erreur de logique, qui fut rapidement réglé… Mon morceau de code était placé au mauvais endroit et donc cela fonctionnait que partiellement.
Ensuite, j’ai créé le fichier JSON. J’ai du revoir la documentation et des exemples car je n’en avait jamais fait (ou très peu), j’ai ainsi encodé tous mes objets, leur nom et la réponse qui sera acceptée. J’ai lié ce fichier à mon fichier JS.
Une fois toutes les animations du tutoriel finies, j’ai pu créer l’interface du jeu et la retravailler avec les conseils qu’on m’a donné à la présentation du MVP.
Petits soucis, bonjour ! 👋
Lors de la création du tutoriel, j’ai eu beaucoup de problèmes car je n’arrivais à mettre le filtre (à partir de 6/18 jusqu’à 14/18), il ne s’appliquait qu’au 6/18. Après avoir réglé le problème de slider (cela s’arrêtait à 18/18 mais on ne savait pas revenir en arrière et cela allait en dessous de 1/18…). J’ai cru que le problème allait partir sauf que c’était toujours là…
Finalement, j’avais créé deux classes, une qui contenait le filtre et une qui annulait le filtre. Au début, le filtre se trouvait sur une classe “section — svg” mais cela ne s’appliquait pas comme je le voulais. J’ai passé plusieurs jours à chercher comment mettre/retirer le filtre sur certaines slides et je n’ai jamais trouvé.
Grâce au suivi de Mr.Thronte, en fait il m’a demandé pourquoi je n’avais pas tout simplement appliquer la classe qui contenait le filtre, quand j’avais besoin du filtre… Réflexion très intéressante car, cette méthode fonctionne sans problème ! C’est juste que j’ai directement voulu faire compliqué (avec du JS) alors que pouvait fonctionner sans… oups !
J’ai eu également un autre souci de SVG. En effet, j’avais une image (qui lorsque je l’ouvre, s’affiche très bien) SVG qui buguait complètement, comme si la couleur de la gourde sortait des traits… Mr.Thonte m’a alors dit qu’il y avait du coup un problème avec le fichier SVG.
En plus, j’ai eu des problèmes lorsqu’on est à l’étape 14 sur 18 car à ce moment-là, le filtre doit partir après x secondes. Je ne peux pas alors retirer la classe de la section sinon il n’y aura plus de filtre du tout… Il faut que ce soit progressif. J’ai également essayer plusieurs méthode en Javascript mais avec aucun résultat… puis je me suis dit qu’avec mes animations GSAP, il y avait peut-être moyen, c’était juste la syntaxe qui me manquait…
Avec mes recherches, j’ai finalement réussi (ENFIN !) à retirer ce filtre de manière fluide !!
Lorsque j’arrive à l’étape 14, je me rends compte qu’il y a trop d’animations qui se suivent, j’ai donc décidé de couper la poire en deux et de jouer l’animation sur 2 étapes. Je me retrouve donc avec 20 étapes au lieu de 18…
J’ai fait ça de manière temporaire afin de demander l’avis de plusieurs professeurs et de voir comment je peux éventuellement faire pour y remédier et voir si ça pose problème ou pas.