Vingtième semaine d'exploration: journal de bord numéro A419

…

14 août 2022

Nous sommes lundi , je lis un peu Eloquent Javascript, je reprends sur la programmation asynchrone. J'y revois sur les promesses, une action qui s'accomplira, mais, pas tout de suite. On l'initialise avec Promise.resolve() avec en paramètre son temps d'attente, je crois. Puis on l'appelle avec nom_promesse.then(faire_truc).

Je continue, je pense continuer Fakebook en l'upgradant avec une page derrière la page de login. Je vais faire une tomate sur le squelette HTML et la maquette. Pour cela j'ai besoin de récupérer un modèle de la page d'accueil de Facebook après la connexion. Je crée mon squelette, une nouvelle arborescence également et les liens entre les fichiers, puis j'attaque avec mes différentes sections, je pense faire une nav et trois différentes sections qui seront en fait des colonnes avec celle du milieu scrollable. Mon squelette avance bien, j'ai fini les trois sections, je les remplis, pas entièrement, mais assez pour que le site ait de la gueule. Je bloque un peu sur les images/liens qui représentent des pages et qui peuvent défiler, j'ignore pour l'instant comment faire ça, je me concentre sur autre chose pour l'instant, le défilement viendra ensuite. Je pense que faire des div arrondies pour ensuite contenir les images fera amplement l'affaire. Ma tomate est finie.

Pour cette tomate je compte finir le squelette html de la page, en distinguant bien les éléments pour gagner du temps ensuite. C'est l'objectif de ma nouvelle tomate. J'apprends un raccourci pour dupliquer une ligne de code sur le chemin sur VsCode ce qui est très pratique. J'ai quasi fini la plus grande partie du squelette HTML, il ne me reste que les contacts et le footer. Le squelette est fini et me plaît assez, je vais tenter d'organiser ça pour me rapprocher un peu de la page stylée que j'ai en modèle. Je suis assez surpris par sa complexité, soit dit en passant. Je vais essayer avec Flexbox, je me mets la documentation en onglet, je pense que cela me sera très utile. Je bloque avec la propriété css display, je regarde encore une fois comment tout organiser en une belle ligne pour ma nav. C'est l'inline-block qu'il me fallait, et c'était absolument indispensable de le déclarer dans chaque section de ma navbar pour qu'il s'affiche convenablement. Ma tomate se finit, j'ai réussi à placer convenablement, de façon basique, les sections du body. Il faudrait idéalement que je retourne à la ligne pour chaque lien de façon à s'approcher du modèle. Je suis également en train de penser au responsive qui sera un cancer je pense... Je m'arrête là pour l'instant.

Je poursuis sur Eloquent Javascript. Je ne comprends pas bien le concept de promesses, il faudra que je l'applique sur w3Schools pour que ça devienne plus clair. Je sais à quoi elles servent, à peu près, mais j'ai du mal à lire et à capter le code en exemple.

Nous sommes mardi, je commence ma journée avec une tomate sur Udacity, je m'étais arrêté aux exercices qui m'avaient fait un peu ramer, à cause de mes erreurs de syntaxe. J'y revois la notion d'efficacité puis la notation big O. La formatrice explique assez bien comment marche cette notation et les problèmes que cela implique si elle est mauvaise. Je consulte rapidement l'article Wikipédia sur les time complexities et les algorithmes associés. Je commence le test, consistant à dire la complexité et l'efficacité d'une fonction. J'ai un peu de mal au delà des deux premières fonctions. Je continue avec la section suivante, sur les collections. Je commence, logiquement, avec les arrays. Puis je continue avec les listes chaînées. La différence est qu'une liste chaînée ne contient pas d'index mais le prochain élément, un lien donc. Pour les doubles listes chaînées, on garde la référence de l'élément précédent également. Je poursuis avec l'exercice correspondant aux listes chaînées que je colle dans Pycharm, comme d'hab. Il faut créer trois nouvelles fonctions pour retourner la position d'un élément, le supprimer ou en insérer un. Un élément dispose d'une valeur et d'un next. Je finis ma tomate pendant l'examen du code. Petite pause, puis je retournerai m'y plonger.

Une nouvelle tomate sur le code d'Udacity, je vais poser le problème sur papier pour bien comprendre ce qu'il implique. La première étape est de récupérer l'élément à une certaine position car j'en aurai besoin pour supprimer et insérer ensuite. Je m'aide un peu du site realpython qui me fournit quelques angles d'attaque. Il est techniquement possible d'itérer dans la liste chaînée tant que le next n'est pas None, je m'aide donc de cette information pour ma fonction de getter. Je réussis déjà à itérer dans la liste chaînée, ce qui me satisfait pour l'instant. Je réussis à faire mon getter après la création d'une variable qui stockerait la ligne en cours. Les tests passent, je continue avec l'insertion qui je pense me posera quelques petits soucis. Je finis ma tomate, j'ai réussi à implémenter une partie de la fonction, il est dorénavant possible d'insérer un élément au premier index, l'élément remplace donc le head. J'ai compris une subtilité, pour ajouter un élément, il faut, choper l'élément après et l'élément avant pour le raccorder convenablement. Mon insertion est donc correcte. Il me restera la suppression, mais j'arrête pour l'instant.

J'ai compris quelque chose sur les listes chaînées pendant ma promenade, grosso modo ça se rapproche d'une file d'enfants portant des numéros sur leurs habits. Il faut gérer trois cas de figures, le cas où l'on veut changer le premier enfant, le cas où l'on veut changer le dernier enfant, et le cas normal où l'enfant ailleurs changerait. Pour le premier, l'enfant est le self.head. Pour le dernier, enfant.next est égal à None, sinon c'est le dernier cas. Je pense que cette visualisation d'esprit m'aidera pour finir de coder mon insertion qui est finalement assez buguée.

Je me fais une tomate sur w3Schools où je reprends avec les propriétés d'un objet JS. Je ne me souvenais plus trop de JSON.stringify(abject) pour afficher correctement l'objet abject. Object.defineProperty est également une très bonne chose à connaître, il permet de créer des propriétés à un certain objet. En paramètre on passe, le nom de l'objet à modifier puis le nom de la propriété que l'on veut créer. Je continue avec les itérateurs, que j'avais déjà croisé en Python. Je passe à la section sur les fonctions, je n'y apprends pas grand chose, excepté qu'il est nécessaire et parfois conseillé de déclarer des paramètres par défaut soi même car ce n'est pas une fonctionnalité offerte par JS. J'y revois les méthodes call() et apply(), ces deux méthodes diffèrent par un point, call() prend les arguments séparément contrairement à apply() qui les prend dans un array. Rien que pour cette raison, la méthode call() est beaucoup plus simple, j'ignore laquelle est la plus rapide. J'apprends quelque chose de très intéressant: la durée des variables JS, une variable globale dure le temps de la session du navigateur et une variable locale dure le temps de l'appel puis de la suppression de la fonction.
L'exemple pour les closures est très bien expliqué. On a un compteur, à chaque fois que l'on appuie sur un bouton il augmente, jusqu'ici tout va bien. Sauf que la fonction est appelée la première fois mais puisque le compteur est initialisé localement à 0, le compteur reste à 1. Ce qui est logique. C'est ici qu'on utilise une closure, on ferme la fonction en augmentant la valeur locale du counter. Une closure est une fonction qui accède au scope parent, même après sa fermeture. Je continue avec les classes JS. Je finis ma tomate là-dessus, petite pause écran.

Je reprends sur w3Schools. J'y apprends sur une convention JS, il est apparemment conseillé de nommer la propriété _property pour la différencier du getter qui s'intitulerait property sans le underscore. Je comprends mieux les méthodes statiques, une méthode statique est une méthode qui peut s'appeler sur une classe uniquement et non sur un objet de cette classe. Je continue avec la section sur le JS Asynchrone que je n'ai pas compris avec Eloquent Javascript, je vais donc, je l'espère, compléter ici. J'utilisais les callbacks sans savoir le nom que cela portait, je pense au keybinding du jeu sur navigateur où je précisais qu'il fallait lancer telle ou telle fonction si l'on appuyait sur telle ou telle touche. Leur explication à propos des promesses me plaît beaucoup, la syntaxe est simplifiée. Si je traduis ce que je lis, une promesse attends avant d'accomplir une action et renvoie un résultat si cela réussit, ou une erreur si cela foire. Les mots clés async() et await() permettent de simplifier le code dans la programmation asynchrone. Je continue sur la section sur le DOM, qui sera la dernière, pour l'instant. J'y retrouve .innerHTML qui est la façon la plus simple de modifier le HTML par JS. Je revois les events, ce qui était la suite logique et qui me sera très utile ensuite. Je ne me souvenais plus de la création d'élément avec createElement() et createTextNode() par exemple, c'était quelque chose que j'avais zappé. Ma tomate finit mais je tiens à faire quelques exercices avant. Petite pause avant d'attaquer le code, je pense que je vais passer sur Fakebook ou alors initialiser un nouveau projet Python, à savoir la génération d'un article aléatoire sur Wikipédia.

Je me fais une tomate sur Fakebook, que je compte bien avancer. J'aimerais beaucoup finir la section du milieu en une tomate mais je pense que, sans problèmes, il m'en faudra deux ou trois. Je réussis à disposer ça comme sur le modèle avec une modification de la hauteur, un justify-content et un peu de flexbox. Je vais plancher sur les images correspondantes aux pages, qui sont une simple succession de div pour l'instant. La section du centre me plaît assez, je vais récupérer des images pour styler toute la partie de gauche qui fait pâle figure sans les images de liens. Ma tomate se finit.

J'enchaîne avec une autre. Je rencontre mon premier souci, idéalement j'aimerais mettre des images à la place des puces, mais je ne peux pas en mettre une de différente pour chaque puce, je vais tenter de passer par ::before qui me paraît être une bonne solution. Je ne réussis pas à avoir un résultat comme je le souhaite, je passe donc par un tableau. Cette technique marche beaucoup mieux, le résultat me plaît assez, je finis de linker toutes les images et ma tomate finit.

J'initialise un nouveau projet Python, je commence par créer mon environnement virtuel, mon setup et je lance ensuite ma tomate. J'attaque avec un tour sur le site de Wikipédia. Je teste un module qui consiste à simuler un appui sur une touche, pynput car j'ai vu que le raccourci Alt + Maj + X pouvait être utilisé pour naviguer dans Wikipédia de façon aléatoire. C'est finalement beaucoup plus simple et efficace de générer l'article en passant par l'URL dédiée et c'est ce que je fais. Je crée une première fonction qui génère un nombre n de liens aléatoires, sans aucune autre fonctionnalité, juste parce que j'apprécie l'output. Ceci dit, je remplace mon code par quelque chose de plus direct, une simple boucle while qui demanderait si l'on veut, ou non, afficher l'article récupéré par la classe du h1 de la page. Le projet ne m'a pas pris longtemps, c'était même assez décevant... Je finis ma journée là-dessus.

Nous sommes mercredi, je retourne sur le code de la liste chaînée que j'avais commencé hier. J'ai déjà une idée de plan d'attaque, voyons voir ce que ça donnera. Je réussis à cibler le dernier élément de la liste, mais mon code semble remplacer et non insérer l'élément souhaité, ce qui est contraire aux consignes. Si je garde mon cas du premier élément, tout fonctionne comme je le veux, ce qui est étrange. Je réussis à récupérer la valeur et à la mettre après celle insérée, il ne me reste qu'à gérer le cas normal c'est à dire celui où l'élément n'est ni le premier ni le dernier. J'essaie avec mon code précédent, tout marche, je continue avec la suppression. Il faut supprimer un nœud avec une valeur donnée en argument et non pas une position, cela implique qu'il me faudra boucler pour trouver la première valeur correspondante. Je réussis à itérer convenablement et à récupérer le node ciblé. Il me reste les trois différents cas à gérer, comme précédemment. Ma tomate finit là-dessus.

Je continue, il me semble que je m'approche de la solution. Je réussis l'exercice, je pense avoir compris comme une liste chaînée marche. Je continue avec les stacks. Si je comprends bien, on a seulement accès au dernier élément mis dans le stack, un peu comme une pile de CD. Il serait impossible, ou très chiant d'accéder au CD en-dessous, il est plus simple de prendre celui au-dessus, c'est le même principe. J'ai un nouvel exercice pour bidouiller avec un stack maison, c'est parti. J'ai quatre fonctions à coder, une pour ajouter un élément sur la pile, une pour supprimer l'élément au-dessus de la pile, une pour push et une pour pop, ce qui est grosso modo la même chose. Ce code reprend le principe de la liste chaînée que je comprends désormais. Je coince sur la suppression, je dois me gourer quelque part dans mes attributs... Ma tomate se finit là-dessus, sans regrets.

Je me renseigne un peu sur les sliders CSS, ce qui représente une sorte de diaporama animé lors de l'appui sur un bouton. Je m'y intéresse parce que c'est ce qui compose le scrolling horizontal de la section avec les stories et les différentes autres pages aimées par l'utilisateur. Je vais reprendre sur Fakebook, pas forcément sur cette partie en particulier mais j'étais curieux de savoir comment c'était fichu. Pour cette nouvelle tomate j'aimerais bien m'occuper du menu tout en haut, je voudrais qu'il détecte l'onglet actif et qu'il soit plus joli qu'il n'est actuellement. J'ajoute les images et je vais passer par :hover pour créer un nav plus dynamique. Mission réussie, le border-bottom fait tout et rend ça assez joli et assez proche du modèle. J'aimerais beaucoup aligner mes images et mes textes dans mon menu de gauche, je ne sais pas quelle propriété utiliser mais je bidouille comme je peux. J'ai réussi avec float et line-height. Ma tomate se finit.

Je continue, j'aimerais beaucoup pouvoir scroller sur la partie du milieu uniquement et garder mes deux sections entourant telles quelles, je vais me renseigner sur le sujet et faire mes tests. Finalement je passe sur autre chose, à savoir le centrage vertical à d'autres endroits, maintenant que je suis lancé. Je réussis avec une position relative ce coup-ci et je m'occupe des champs de recherche, je voudrais mettre la petite loupe chère à Facebook juste avant l'input text, un ::before devrait suffire je pense. Ce n'est pas du tout la bonne technique, il faudrait que ma loupe et mon input soient collés, je tente donc par une div, ce qui sera moins élégant mais plus efficace. Je passe finalement par la propriété background-image qui est moins contraignante et plus lisible. Je réussis l'exercice. Ma tomate se finit, je pense que je m'essaierai au slider sous peu car c'est quelque chose que je trouve assez beau et qui pourrait upgrader mon boulot.

Je fais une grosse pause puis j'attaque un projet guidé Javascript. La vidéo est hébergée sur la chaîne de CodingNepal et consiste à réaliser un jeu de memory, ce qui paraît simple. Je regarde le résultat puis je m'attaque à la mise en forme. Je vais d'abord tenter de faire un joli carré au milieu en gardant la structure de page de CodingNepal. J'affiche correctement mes cartes puis je reprends avec la vidéo que j'avais mis de côté pour un moment. Je suis particulièrement fan de son calcul pour dispatcher les cartes convenablement avec calc(). L'espace de jeu est chouette, je pense que ça me fera une sandbox pour flexbox en même temps. Ma tomate se finit. Je fais une petite pause avant de continuer. Quand j'aurais fini ce projet, le but de l'exercice est de pouvoir le refaire ensuite, peut-être pas avec la même structure html.

Je reprends avec une nouvelle tomate, toujours sur le projet guidé. Je découvre la propriété perspective() et j'apprends comment gérer le retournement d'une carte. Finalement, je ne fais pas du tout comme lui car cela ne fonctionne pas chez moi. Je passe par la propriété visibility et tout fonctionne. On attaque ensuite avec le JS et je trouve ça étrange que la balise script soit mise après le body, je fais comme j'ai l'habitude de faire et tout plante, ce qui me fait comprendre la chose. Il faut que le document se charge pour pouvoir accéder aux cartes une par une. J'apprends ensuite sur pointer-events() qui permet d'enlever la possibilité de cliquer sur un élément, ce qui est en pratique en l'occurence pour cibler la valeur de la puce au lieu de l'image. Je coince sur un problème, je voudrais retourner mes cartes en JS et non plus avec le :hover. Le formateur passe par classList.add() mais cela ne passe pas chez moi, je tente de jouer avec la visibilité de l'élément mais je manque de précision quant au côté de la carte. Ma tomate se finit là-dessus. Je pense que je vais garder ce layout et me démerder seul à partir de maintenant avec le JS, d'autant plus que ce projet étant assez commun, je ne devrais pas avoir de mal pour trouver de l'aide.

Je passe sur le jeu sur navigateur JS comme je suis dans le bain et que ça fait un bail. Je relis un peu le code pour voir ce qui est nouveau et je commencerai ma tomate une fois que j'aurai vu ce qu'il faut faire. Je vais tenter de comprendre comment marche la collision avec les blocs, une tomate devrait me suffire à avancer ou du moins à appréhender le problème. Je pratique un peu le canvas car visiblement son fonctionnement m'échappe. Je m'amuse à changer les textures des briques ce qui est assez amusant et je tente de réfléchir au problème suivant: comment détecter une collision avec une boîte remplie qui scrolle? Tomate finie.

Je vais plancher sur ce problème sur une nouvelle tomate. Je refactorise pour avoir un tableau à deux dimensions pour comprendre plus facilement le code. Je réussis l'exercice, je me concentre maintenant sur la collision à proprement parler. Je me renseigne sur les dictionnaires car j'aimerais beaucoup stocker tous mes blocks avec leurs positions. Finalement je lui préfère un simple tableau, mais j'ai du mal à y accéder. Je réussis grâce à includes() mais entre temps je tombe sur un nouveau problème à savoir que les positions x et y de mon player ne bougent pas, selon ma console, ce qui expliquerait pourquoi ma collision merde. Ma tomate finit, et ma journée avec. Je suis frustré de ne pas avoir avancé plus mais j'ai pas mal appris sur les arrays JS avec ce projet, qui est loin, très loin d'être fini.

Nous sommes jeudi, j'attaque sur Udacity, je reprends sur mon stack. Je suis tombé dans leur piège, il y avait trois valeurs qu'on retirait une à une, il fallait, dans ce cas précis, renvoyer None. Je réussis, ce qui fait exploser ma méthode push(). Je re-debug cette méthode. Je me renseigne un peu sur Internet, je suis bloqué et j'ai une erreur étrange, tous les .next de mes éléments sont None, j'ignore où j'ai merdé. Je tente de virer leur classe Element que je trouve naze et inutile et le tout fonctionne! Je finis ma tomate et continue.

Je poursuis avec les deques ou queues en français. On a une structure pas beaucoup plus complexe, on a une tête de file et une fin de file. La tête de file sort en premier. J'attaque direct avec la pratique juste après. Trois méthodes à faire, une nommée peek() je suppose qu'il faut print la queue, une pour enlever et une pour supprimer, sur le papier ça a l'air assez simple, mais je suis persuadé que je vais ramer. La méthode peek() consiste à regarder les derniers éléments si je me base sur les tests, je corrige donc mon code. Je me fais un check rapide sur les méthodes d'arrays. En passant par insert() je devrais pouvoir réussir à me dépatouiller, si je l'insère au bon endroit ceci dit. Tout se passe bien pour insérer, il me reste à supprimer. Je reprends vite fait la vidéo d'explication pour bien piger ce qui m'est demandé. Il faut virer le premier élément de la queue, ok. Je passe tous les tests, j'ai bien compris l'exercice. J'attaque ma première section sur les algorithmes, je pense que je vais en chier mais j'aime beaucoup cette façon d'apprendre pour l'instant. Je continue sur la binary search. La section sur l'efficacité de la binary search selon le nombre d'éléments dans la structure de données est super intéressante. Ma tomate se finit là-dessus.

Je me fais une tomate sur mon problème du memory JS, je veux retourner les cartes d'une façon qui soit plaisante à regarder, je vais voir ce que je peux faire. Je me renseigne sur les event listeners. Je n'avance pas beaucoup, impossible de récupérer quelle carte est cliquée... Je réussis l'exercice en ciblant le second enfant pour chaque carte dans mon tableau de cartes, ce qui me retourne effectivement ce que je veux. J'essaie maintenant de réinitialiser la carte à sa position initiale puis je m'occuperai de la boucle de jeu. Je tente maintenant d'accéder au nom de la carte ce qui n'est pas évident, ce sera en revanche indispensable pour checker si la carte retournée est identique à une autre. Je réussis avec une ligne de code assez choupi ma foi, je chope d'abord toutes les faces des cartes, puis les premiers éléments, puis le src, avec lequel je vais pouvoir comparer les valeurs des cartes. Je me pose un instant pour voir ce qu'il faudrait faire ensuite. Je réussis à retourner les cartes s'il y en a plus de deux, il me resterait idéalement à checker leurs valeurs, j'ai déjà l'arme qu'il me faut avec ma ligne de code détaillée ci-dessus, ça devrait être tranquille. Je viens de trouver un bug juste avant la fin de ma tomate, je ne peux pas cliquer une autre fois sur une carte qui vient d'être cachée, il faudra que je planche là-dessus à ma prochaine tomate.

Pour la prochaine tomate, j'aimerais beaucoup faire un slider pour mon Fakebook, à voir si j'y arriverai en deux tomates. J'en attaque une avec une vidéo sur le sujet de DevenirDev. Finalement je vais me baser sur la section dédiée sur w3Schools. Je change mon squelette html pour m'adapter à eux puis j'analyse le code JS. Je rencontre un problème d'overflow en changeant le nombre de div scrollables. Je passe une tomate sur le stylage du bouton du slider, ce qui est navrant puis je continue avec le JS à proprement parler sur une tomate suivante.

Je réussis à faire fonctionner le code, mais j'ai un comportement bizarre, tous les slides sauf un disparaissent, je vais corriger ça, j'espère. Je réussis mais mon code est dégueulasse, je repètre une ligne pas moins de sept fois, une fois mon slider fini, je corrigerai ça. Il faut ensuite que je mettre le premier élément après le dernier et ainsi de suite pour que cela soit sans fin si l'on peut dire. Je me remets sur mon code mais impossible de comprendre comment ça fonctionne, je reprends les lignes une par une. Je bloque, je bloque, je vais faire une pause puis changer de projet ou alors arrêter ma journée, je verrai. Je trouve un blog qui traite du sujet et c'est plutôt bien expliqué je verrai ça plus tard.

Nous sommes vendredi, je commence ma journée par un test sur le jeu sur navigateur JS, j'ai pensé à une façon de détecter si le joueur est sur la brique cette nuit et je veux voir si cette technique marche. Je rame un peu avec les coordonnées mais il me semble que je me rapproche d'une solution possible. Cette dernière m'échappait de par sa simplicité, il ne me reste qu'à arrêter le saut sur la bordure haute de la brique. Je rétablis le scrolling pour les briques et ce coup-ci tout explose. Je m'arrête pour l'instant et j'entame ma journée.

Je commence sur Udacity, il me semble que j'étais sur la binary search. J'essaie de coder cet algo mais c'est plus galère qu'il n'y paraît. Je réussis le test, j'avais merdé lors de l'affectation de mes paramètres. Je continue avec la récursion. Je connaissais ce principe, c'est une fonction dans une boucle while, grosso modo, elle s'appelle sans fin sauf si la condition de sortie est atteinte. Une fonction récursive doit absolument modifier un paramètre sinon elle ne sert à rien et ne s'arrête jamais. L'exercice correspondant à ce chapitre porte sur la suite de Fibonacci, j'ai besoin d'un petit récap, j'ai oublié ce que c'est. on a deux nombres, il faut les additionner entre eux, ok. L'exercice est intéressant, car on veut avoir directement le nombre à une certaine position dans la suite, et non pas outputter la suite directement. Je finis la tomate en plein milieu du code.

je poursuis avec une autre tomate, toujours sur cet exercice. Je rame, j'ai trouvé la réponse en fouinant un peu mais je ne la comprends pas, même avoir l'avoir posé sur papier. J'ai tenté de debug, la multitude de chiffres sans aucun rapport les uns avec les autres n'aide pas. Je vais compléter sur Youtube sur une vidéo dédiée de Socratica. J'avais mal découpé sur papier, chaque fonction retournée retourne deux autres fonctions. J'ai compris et j'apprends en même temps la mémoïsation pour être plus efficace que l'algo ci-dessous. Au lieu de retourner les valeurs crées par la fonction, on la stocke dans un dictionnaire et à chaque itération de la fonction on regarde si elle existe déjà. J'apprends également sur lru_cache dans functools qui permet de stocker les valeurs d'une fonction avec une seule ligne.

ex:
6 = 54 (n-1, n-2 pour chaque chiffre)
puis 4332 (n-1, n-2 pour chaque chiffre)
puis 32212110 (n-1, n-2 pour chaque chiffre)
puis 21101010 (on vire les 1 et les 0)
puis 10.
Ainsi, le sixième élément de Fibonacci est 8 car on a 8 1 dans nos résultats.

Petite pause là-dessus. Je reprends sur Fakebook, je vais tenter de passer par une liste chaînée infinie pour que mon slider se comporte comme je veux, j'ai dans l'idée que ça pourrait fonctionner. Je me fais une tomate là dessus. Je crée ma liste chaînée, puis les méthodes les plus utiles. Cela ne mène à rien, je change complètement d'angle d'attaque. Il faudrait que le dernier élément soit relié au premier, c'est un fait. Je vais me renseigner sur la méthode cloneNode(). J'ai réussi à bidouiller un truc mais le résultat est très sale, on change direct tous les six éléments au lieu de les changer un par un. Ceci-dit cela fonctionne, je continue, j'aimerais bien styler le bouton précédent de même, puis enchaîner avec la nav de gauche. Je réussis à finir le squelette de mon slider avec les deux flèches et un comportement bizarre mais pas trop foireux. Je continue en ajoutant des tooltips, visiblement Facebook l'a fait, donc Fakebook le fera aussi. Ceci dit, une fois accompli, je trouve ça très laid, aussi je ne fais pas de tooltips. Ma tomate est finie.

Je continue avec le menu des amis qui est toujours aussi laid, et pour cause, je n'y ai pas touché. Je place l'input au bon endroit puis je rame un peu à aligner joliment les "amis". Je bidouille avec Flexbox et float, mais j'ai un résultat bizarre à la fin, je fouine dans mon code CSS pour ajuster ça avant la fin de ma tomate. J'avais merdé dans mon html à ne pas fermer des <div>, erreur débile. Ma tomate finit, pas de grandes avancées aujourd'hui, j'ai trop ramé sur mon slider pour être efficace.

Je pense que je vais continuer le memory, il y avait un comportement bizarre, visible pour l'utilisateur ce qui est quelque peu gênant. Finalement je n'en ai aucune envie, j'arrête ma journée de travail.

Nous sommes samedi, c'est le dernier jour de ma semaine de travail, je vais le consacrer uniquement à l'avancement de mes projets, pas de passage sur Udacity pour aujourd'hui, je commence une tomate sur mon jeu de memory, idéalement il faudrait régler le souci étrange qui empêche une carte de se retourner si elle l'a déjà été. Je commence ma tomate. Le souci vient peut-être du tableau contenant mes cartes retournées qui n'est pas vidé à chaque fois que le nombre de cartes retournées dépasse 2. Négatif, le souci ne vient pas d'ici, les cartes déjà retournées semblent désactivées, je vais tenter de créer une fonction pour remettre les cartes à leur état initial. Problème résolu, j'avais fait une erreur de logique mes cartes se retournent bien quand il le faut, prochaines étapes: gérer le score, comparer les cartes entre elles, si elles sont identiques les virer du jeu, gérer un temps de jeu. Autant dire qu'il me reste de quoi faire. Pour la comparaison, il faudrait mapper mon tableau de cartes pour ne garder que leur src et les comparer. Ma tomate se finit.

Je pose ma logique sur papier et j'attaque ce nouveau souci. C'est plus compliqué qu'il n'y paraît. Finalement je prends une autre option, stocker les src des images cliquées dans une liste puis les comparer ensuite, j'attaque la phase de comparaison. Je fouine dans les méthodes de chaînes de caractère, ça a raté avec localeCompare, je crée donc une fonction pour garder uniquement l'information qui m'intéresse et j'attaque ça sur une nouvelle tomate.

Je passe par les slices, que je connaissais déjà grâce à Python et je récupère juste le nom de mon image qui me permettra de comparer plus efficacement. Je plonge maintenant dans la suite, idéalement, il faudrait dégager les cartes déjà trouvées et décrémenter les cartes restantes. Hélas, j'ai un comportement étrange, ce ne sont pas les bonnes cartes qui s'effacent, ce qui est assez rigolo à voir ceci dit. Je comprends ce qui se passe, on supprime définitivement et les autres cartes se décalent, ce que l'on veut éviter. Il fallait passer par visibility = "hidden" et ne pas oublier de masquer également l'image, sinon elle restait sans son parent. Je teste le jeu, tout marche bien avec les deux premières cartes mais ensuite, j'ai quelque chose de bizarre, les cartes semblent disparaître un peu sans raison et sans se retourner, je crois que j'ai possédé le jeu. Après un tour dans l'inspecteur, j'ai un élément qui est en même temps visible et caché, ce qui est quelque peu bizarre à appréhender. Je retente, ce coup-ci en cachant tout, mais j'ai comme un souci, il ne me reste que une seule carte ce qui est assez gênant... Ma tomate finit là-dessus, à la prochaine j'aimerai bien créer un petit scoring en haut de mon espace de jeu, quelque chose comme une textbox, il me reste les conditions de victoire à gérer et éventuellement une randomisation des cartes.

Finalement je vais passer sur le jeu navigateur où j'aimerais bien, enfin, gérer convenablement la collision avec les briques défilant. C'est plus compliqué qu'il n'y paraît car il faut détecter d'où vient le joueur, ce dont je suis incapable pour l'instant. Après réflexion, je peux cibler cet évènement tout simplement avec x, dans ma bêtise je n'avais pas pensé à cette éventualité. Tout se passe bien pour le bord gauche de la brique, le bord qui sera le plus utilisé avec le scrolling mais j'ai un souci de positionnement pour le bord droit, qui, normalement, sera moins utilisé. Je règle avant tout le souci du bord gauche qui lorsqu'une brique "pousse" mon personnage, se met à buguer, je retéléporte le joueur en haut, avec succès. Puis je m'attaque au bord droit. Tout fonctionne, il me reste le bord d'en haut qui sera le plus complexe puisqu'il faudra ajouter une fonctionnalité pour "se poser" au-dessus et donc désactiver le booléen qui détecte si ou ou non le joueur est dans les airs. Je fais une pause avant d'attaquer ce gros morceau mais grosso modo je suis content de ma tomate.

Je continue toujours là-dessus. Je me demande comment faire pour checker si le joueur atterrit sur une brique. Je pose mon canvas sur papier, pour que ça soit plus clair. Je relance une tomate toujours sur ce problème, je comprends mieux les coordonnées canvas mais je bloque toujours. Je me rends compte que tout mon boulot est à refaire sur la collision car ayant déplacé un peu mes briques, la collision ne se fait pas. Je change ma hit box de forme pour moins galérer. Je remets encore une tomate dessus, c'est le cœur du jeu donc je tiens à faire ça bien. La collision marche bien j'ai détecté toutes les conditions, il ne me manque que le côté droite et le haut, comme d'hab.

Je remets encore une tomate sur ce sujet, j'approche du but, je le sens. Il ne me reste que le haut à gérer, et le bas viendra par la même occasion, je bidouille avec les paramètres de classe pour trouver une réponse élégante et fonctionnelle. J'avais fait une faute de syntaxe ce qui a tout fait merder, je ne pouvais plus passer en dessous de la brique à cause d'une logique bizarre, le côté gauche est dorénavant fonctionnel et pas trop artificiel. Je fais une pause après la fin de ma tomate sur du refacto.

Affaires à suivre:

Finir le jeu de memory et passer à autre chose
Finir la collision une fois pour toutes dans le jeu sur navigateur
Poursuivre sur Udacity

Retour à l'accueil