Rapport TFE #4

Le calme avant la tempête

Les vacances de Pâques pointant le bout de leur nez, j’ai pu souffler un peu et laisser de côté mon projet en cours pendant 2 semaines. Néanmoins je n’ai pas totalement tout délaissé puisque même en vacances je réfléchissais à de nouvelles énigmes que je pourrais ajouter à mon site !

2 semaines plus tard me revoilà à l’attaque, le projet ouvert dans VS Code. La première chose a été de corriger deux trois petits problèmes.

Parmi ceux-ci, de petites erreurs trouvées lors de l’analyse de mes fichiers sur HTML Validator, et des corrections mineures dans mon fichier Javascript relevant plus d’un problème de nomenclature de variables qu’autre chose.

Une fois cela terminé, je peux m’attaquer aux différentes tâches dont j’avais fait part dans mon rapport de la semaine 26, qui, pour rappel, étaient:

• Création du lien de partage pour challenger ses amis.
• Création d’une nouvelle énigme.
• Correction des problèmes soulevés par Marie-Joséphine.
• Terminer la rédaction de ma landing page.

Cependant avant de commencer à coder le lien de partage, je vais coder la fonction d’enregistrement du prénom de l’utilisateur permettant d’indiquer à l’utilisateur lorsque celui-ci a fini le jeu: “Félicitations X, tu as fini les énigmes ! Tu as su résoudre le site” Et également enregistrer dans le Local Storage le nom et le prénom de la personne afin de ne pas le lui redemander si celui-ci venait à revenir sur mon site.

Pour que vous compreniez:

• Formulaire de connexion lors de la première visite sur le site:

• Réapparition du même formulaire lors de la reconnexion sur le site:

Comme indiqué ci-dessus, afin d’enregistrer les données de l’utilisateur, je décide de passer par l’utilisation du Local Storage:

Ainsi après un petit moment de documentation sur l’utilisation du Local Storage, parce que cela fait quand même un certain temps que je ne l’ai plus utilisé dans mes différents travaux, et après un petit moment de codage plus tard:

Dorénavant le site se souvient comme voulu du prénom de l’utilisateur lors de sa reconnexion ! De plus j’ai décidé d’y rajouter une petite fonctionnalité non essentielle “découverte” sur un site de photographie et dont je trouvais relativement intéressante et fun: Une phrase de bienvenue aléatoire lors de chaque nouvelle visite sur le site:

Ainsi à tout moment vous pourrez tomber sur “Bonjour X” comme sur “olá X” ou encore “ဟယ်လို X!”

Cela étant fait, la seconde étape est d’enregistrer dans le Local Storage d’autres informations comme le temps que l’utilisateur a fait lors de sa partie précédente, le nombre de fois qu’il a résolu le jeu. Ainsi que de pouvoir retrouver toutes ces informations dans un menu “Données de l’utilisateur”. Je prends donc le parti pris d’ajouter une bulle sur le coin supérieur gauche de l’écran avec un logo un peu comme la bulle ‘inventaire” que l’on retrouve sur le coin supérieur droit:

Ces données étant enregistrées dans le Local Storage, à toute reconnexion de la part de l’utilisateur, ces informations seront toujours présentes et, dans le cas où l’utilisateur venait à finir le jeu, ces données s’incrémenteraient !

Share Your Time

Il est enfin temps de passer à la création du lien de partage ! Comme j’ai pu l’indiquer dans mon ancien rapport de TFE, monsieur Hoebregts m’avait partagé de la documentation ainsi que des conseils sur la manière de procéder pour réaliser ce que je veux faire.

Mon envie est de pouvoir créer un lien de partage qui pourrait être envoyé à l’un de ses amis qui le dirigerait sur mon site et qui lui indiquerait le temps qu’a pu faire son ami lors de sa partie.

Monsieur Hoebregts et moi sommes arrivés sur la même idée de le faire en Javascript et non en PHP puisque tout mon site est codé en Javascript. Ensuite monsieur Hoebregts m’a également donné comme conseil de le faire via des paramètres dans l’URL comme on peut le retrouver sur Youtube lorsque l’on désire partager une vidéo à l’un de ses amis mais que celle-ci commence à une durée bien précise:

En passant à l’URL le paramètre “t=542”, la vidéo démarrera à 9min02 lorsque la personne cliquera sur le lien.

L’idée est donc de faire la même chose pour mon site, néanmoins il va me falloir encoder le paramètre sous une autre forme pour pas que l’utilisateur puisse la modifier facilement !

Je m’explique, si lors du partage du lien, ce dernier est composé de cette façon: http://nathannoel.be/projets/tfe/game.html?t=13:25:36

Il est évident que l’utilisateur puisse facilement modifier le paramètre pour faire croire à ses amis qu’il a fini le jeu en 06:25:36 au lieu de 13:25:36.

Pour ce faire, je décide de passer par les fonctions btoa() et atob() en Javascript. Ainsi “t=13:25:36” devient: “t=MTM6MjU6MzY=”

Il ne me reste plus qu’à intégrer le lien dans la section de fin du jeu !

TP et retour des différents professeurs

Au moment d’écrire ces lignes nous sommes le lundi 26 avril. Au cours de ces derniers jours j’ai pu échanger avec monsieur Thérasse ainsi qu’avec monsieur Tournay.

J’avais besoin d’avoir l’avis de monsieur Thérasse concernant un sujet sur lequel j’avais discuté dans le passé avec monsieur Hoebregts: cacher le code source.

En effet, j’ai eu comme conseil de cacher mon code source dans le but que le joueur ne puisse pas tricher en allant chercher directement les réponses dans la partie “Sources” dans le Developer Tool. La manière de procéder est de passer par le site https://obfuscator.io/. Cependant en faisant cela je viendrais à cacher mon code lors de la remise finale …

C’est là que monsieur Thérasse m’a apporté son aide en me proposant de réaliser une version de “production” et une version de “remise”. La première version sera celle mise en ligne sur mon espace personnel tandis que la seconde sera celle que je présenterai en juin lors de la remise ainsi que lors de la défense devant le jury !

Aujourd’hui j’ai eu un entretien avec monsieur Tournay. Durant l’appel avec lui, j’ai fait un rapide pitch de mon travail et ensuite je lui ai présenté ce qui a déjà été fait pour le moment. Son retour m’a fait extrêmement plaisir puisqu’il trouvait que j’avais bien avancé et que j’étais loin d’être en retard. Il a également souligné le fait que mon jeu lui donne envie ! Ce qui, à mon sens, est l’un des meilleurs compliments que l’on puisse me faire pour le moment ! Cependant, il a souligné quelques fautes d’orthographe dont une à la fin du jeu “Félicitation” où il manque un S.

Ces quelques fautes seront rapidement corrigées dans les jours à venir !

Voilà qui conclut mon rapport de la semaine 28. Les deux prochaines semaines seront bien remplies également ! J’ai dans l’optique de:

• corriger les quelques fautes d’orthographe.
• finaliser la landing page.
• rajouter de nouvelles énigmes.
• intégrer un système de cadenas qui se déverrouillent lorsque le joueur aura récupéré une clé.