AVANCEMENT TFE N°5
Avancement du tfe au jour du 17 mai 2022
Grosse modification…🤔
Lors d’un suivi avec Mr. Di Stefano, il m’a fait comprendre que mon tutoriel était beaucoup trop long. De plus, je n’explique pas seulement comment jouer au jeu mais également la théorie (types de déchets) et je présente les personnages…
J’ai donc du repenser autrement pour faire quelque chose de plus concis. L’explication du drag-and-drop n’est pas nécessaire car si l’interface est bien pensée, on devrait comprendre directement le fonctionnement !
Conclusion :
- 5 slides avec la théorie (les différents types de déchets) dans le tutoriel (nouvellement appelé « apprendre »);
- 5 slides lors du début du jeu où les personnages se présentent chacun à leur tour + but du jeu;
- On demande à l’utilisateur s’il a déjà joué auparavant : si oui : on passe au formulaire / si non : on montre la petite histoire.
- Explication sous forme de pop-up pour le bouton « accueil » pour prévenir qu’on va perdre tout l’avancement.
On RE-code !🔄
J’ai rencontré un souci alors que j’avais seulement supprimé quelques éléments de ma liste (slider). Normalement, tout devait fonctionner sans problème (à l’exception des animations qui devraient être modifiées car elles dépendent de la slide). Mon slider ne fonctionnait plus…
Après plusieurs heures, il s’agissait en fait de ma musique qui faisait tout péter. Le code ne trouvait pas la musique alors il n’a pas lu la suite du code et mon slider se trouvait après…
Une fois que la nouvelle structure fut mise en place (je passe les détails des ajouts des liens vers le jeu, etc.), j’ai repris mon TFE là où je l’avais laissé avant le Web Basement, c’est-à-dire… l’interface du jeu avec le fichier JSON.
Encore une fois…
Cela va faire la 3 ou 4ème fois que je change, mais j’ai à nouveau changé la musique du jeu car la dernière (dont j’étais quand même fière) me paraissait trop sombre/énigmatique alors que ce n’est pas l’ambiance de mon jeu (=le calme, la nature).
Même si celle-ci est plus adaptée, je ne sais pas si je la garderai car je suis très exigeante envers moi-même et je sens que c’est amateur, cela sera donc à confirmer (par mes testeurs également).
HELP 🆘
En chipotant pendant plusieurs heures, j’ai réussi à faire l’animation des jauges une fois que l’objet est drop/déposé. J’ai également réussi à faire en sorte que l’objet change, le problème est que, il faut prendre le deuxième objet du tableau et le code lui, prend tout le temps le dernier…
J’ai essayé plein plein de solutions différentes et même sur internet. J’ai pu être aidée d’une personne de la classe et avec deux cerveaux, on se débrouille mieux qu’un !
Le problème est que même avec son aide, je n’ai pas trouvé de solution. J’ai dû alors demander un suivi par Mr. Therasse, parce que ce problème m’empêchait d’avancer et le temps presse… Il s’agissait encore une fois d’un problème de logique !
Suite au suivi de code de Mr.Therasse et Mr.Walvarens, j’ai pu y voir un peu plus clair. Il ne reste plus qu’à mettre ça en place !
Mr. Bourgaux a pu aussi m’aider en donnant son avis par rapport à la structure/organisation de mon application.
Après avoir résolu mes problèmes de Javascript, j’ai pu améliorer mon TFE. J’ai amélioré quelques animations, j’ai pu régler le souci de la musique perdue (une fois la mise en ligne faite, aucun moyen de retrouver le fichier), une fois résolue… Je me suis dit : « Ok, ça a l’air pas mal maintenant ! Je vais voir ce que ça donne sur mon téléphone. ».
J’ouvre mon téléphone et là….. crise cardiaque !
ENVIE DE ME JETER PAR LA FENETRE ! 😤😭
Le “drag and drop” ne fonctionne pas !!! Cela fonctionne sur Firefox si je désactive la simulation des événements tactiles sinon ça ne fonctionne que sur le desktop même, avec la souris.
Il ne me reste plus qu’une semaine pour trouver la solution.
J’ai donc rapidement fait des recherches pour régler cela !
J’ai essayé les événements “mouseover”, … Sans succès.
J’ai ensuite trouvé un homme sur un forum qui a dit :
J’ai également testé… sans succès !
Je continue les recherches et tombe sur des événements “touchEvent”. Je pense que si ça ne fonctionne pas, je pleure ! Ce serait vraiment dommage de ne pouvoir tester que sur un ordinateur…
Je suis ensuite tombée sur une librairie qui avait l’air simple et qui s’appelle “interactJS”. Je l’ai téléchargé via la console et j’ai regardé la documentation…
J’ai essayé d’installer mais ça me mettait des erreurs, ça a même fait bugger mon package !
J’ai ensuite trouvé un plugin “inertia” qui est avec GSAP (que j’utilise pour faire mes animations…
Problème : C’est payant (et pas qu’un peu !).
Je ne compte plus le nombre de solutions, de sites que j’ai visité. Je ne sais même plus ce que j’ai fait (ou pas).
Je suis finalement tombé (à nouveau ?) sur ce site :
https://www.html5rocks.com/en/mobile/touch/#toc-playground
et sur un exemple :
https://codesandbox.io/s/bycn8
Résultat : J’arrive ENFIN à faire bouger mon objet sur un smartphone. Problème : Il ne sait pas quand il est sur une de mes 4 cases donc aucune animation se fait et on ne sait pas jouer.
Ensuite…
Après avoir testé de transformer mon “drag and drop” en JQuery, j’ai re-opté pour ma solution de début qui fonctionnait en partie… :
utiliser des événements “Drag” plutôt que “onDrag”. J’ai encore chipoté pendant plusieurs heures non-stop afin de trouver une solution…
Je ne fais que très peu de pauses quand je suis lancée, donc j’étais à deux doigts de craquer et de vouloir abandonner !
Finalement, j’ai envoyé un message à Mr.Terranova « en urgence » car je ne voyais vraiment plus quoi faire et même le plus fort de la classe en code ne savait pas m’aider en fonction de mes capacités (car je suis loin d’être une pro du code ahah).
Pour régler son problème, lui il avait codé lui-même un système de drag and drop… Cela m’aurait un peu trop de temps et j’étais persuadée qu’il y avait une solution moins complexe (finalement, j’avais raison).
Heureusement, j’ai reçu une réponse assez rapidement qui était toute simple : je dois ajouter une ligne de code à mon HTML (un polyfill) qui va traduire mon code pour que cela soit fonctionnel sur un smartphone.
Il m’a suffit de copier-coller la ligne comme demandé (il me semblait avoir déjà testé cette technique mais avec la fatigue, etc. Je m’y suis sans doute mal prise ou je me suis probablement trop pris la tête) et le problème était résolu.
HALLELUJAH !
J’adapte tout ça…#responsive 📱💻
Maintenant que j’ai quelque chose de +/- fonctionnel, je vais adapter tout ce bordel pour que cela soit présentable mercredi. Jusqu’à maintenant, mon projet n’était lisible que sur un format d’iPhone 5/SE en utilisant l’inspecteur du navigateur.
J’en profite également pour corriger les 2–3 remarques par rapport à mes illustrations et je me bats avec mon formulaire pour que le nom entré par l’utilisateur soit retenu par le navigateur…
Pour le reste, il s’agit principalement de petits soucis d’affichage et alors, il faudra aussi intégrer la partie pour Ath, car pour l’instant, on ne sait trier qu’à Namur.
Je devrai aussi trouver le temps d’enregistrer la voix, même si j’en reste peu convaincue à cause de la qualité de mon micro et du fait que j’aurai aimé avoir une voix d’homme… 😪