Javascript - Cliqueur de cookies
Source de l'affectation : https://github.com/becodeorg/BXL-Swartz-5.34/blob/main/1.The-Field/12.Javascript/cookieClicker.md
Lien vers la version live : https://teo-cozma.github.io/Javascript/
Membres de l'équipe
- Brigita Sabutyte (Javascript et HTML)
- David Tirel (Javascript)
- Teodora Cozma (HTML et CSS)
Langues
Outils
- Visual Studio Code (éditeur de texte)
- Discord, Google Meet, Github, Replit (Communication)
- Adobe XD (prototypage)
- Service de validation du balisage W3C (inspection HTML)
- Service de validation CSS du W3C (inspection CSS)
- Google Lighthouse (inspection des performances)
Image
Ressources
Qu'est-ce qu'un Cookie Clicker ?
- http://orteil.dashnet.org/cookieclicker/
- https://en.wikipedia.org/wiki/Cookie_Clicker
- https://cookie-clicker2.com/
- https://particle-clicker.web.cern.ch/
- https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s
Tutoriels pour notre projet :
https://www.flaticon.com/free-icons/cookie
https://www.youtube.com/watch?v=uUgOBe_wb6E
https://www.youtube.com/watch?v=j_nI6G3ZDiE
https://codesource.io/how-to-disable-button-in-javascript/
https://stackoverflow.com/questions/57477529/disable-a-button-if-empty-input
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=vU2akkcSV-g
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=KgYkgBno5Gs
https://stackoverflow.com/questions/8583524/how-to-set-time-limit
Prestations de validation :
- https://validator.w3.org/#validate_by_input
- http://jigsaw.w3.org/css-validator/
Journal du projet
Premier jour (25/10)
Révision des instructions
- Quoi : Cookie Clicker.
- Pourquoi : projet de consolidation (essentiellement des compétences Javascript).
- Quand : A partir d'aujourd'hui, 4 jours complets de travail en équipe, jusqu'au 28/10.
- Comment : en groupes de trois, en collaborant et en utilisant les langages de code respectifs.
- Qui : Teodora Cozma, Brigita Sabutyte, David Tirel.
- Quels rôles ? Il y a le frontend, le backend et la gestion de projet. Tous les rôles peuvent être interchangeables et le code est partagé de toute façon, mais globalement, une personne peut se concentrer davantage sur un rôle donné.
- Back-end (Javascript) : David.
- Backend (Javascript) + Frontend (structure HTML) : Brigita.
- Frontend (CSS + peut-être Sass) + Chef de projet : Teodora.
Remue-méninges
3 rubriques :
Section Cookies : En-tête 1 pour le compteur de cookies. H1 pour le nombre de clics.
- Cookie interactif + son titre + compteur de cookies = 1ère section.
- "Dans le HTML, mettez un bouton clic qui incrémentera un compteur et un label initialisé à 0 pour afficher ledit compteur."
Section partition :
- Section partition : décompte des scores.
- 1 cookie : le cookie est son propre bouton.
(Cookie + score = moitié gauche)
- Rubrique magasin :
- Réalisations et améliorations ?
- Section magasin = clicker de mise à niveau du bouton + compteur de points = 2ème section :
Faites un multiplicateur (double ou triple points) --> cette étape pour révision
Prix multiplicateur (acheté)
Mise à jour des scores
Compteur dans le multiplicateur
Augmentation des coûts (le coût d'un multiplicateur plus élevé)
- Affichage dédié également (un bouton en dessous ?)
Etape 12 : élément nécessaire, certains boutons sont désactivés. ex : en dessous de 20 points, le joueur ne peut pas accéder à certaines fonctionnalités.
(Moitié droite)
Exemple (référence) : http://orteil.dashnet.org/cookieclicker/.
Tâches pour aujourd'hui
Ce matin (10h30 - 12h30)
- Recherche sur le projet (instructions de mission).
- A voir ce qui correspond aux étapes obligatoires actuelles (des bonus sont réservés pour le moment).
- Examinez en profondeur le code du cliqueur de cookie d'origine.
(https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s) Description du jeu (et ses qualités existentielles !)
- 1 clic = 1 cookie.
- 15 clics = 15 cookies = 1 curseur (acheté).
- 10 curseurs = 1 cookie/sec (CpS).
- 100 cookies = grand-mère qui produit et commercialise vos cookies.
- Les cookies sont une monnaie qui vous permet d'acheter des fermes, des mines, des usines, etc. = une économie de cookies omniprésente et écrasante. Cela se développe dans un éventuel cookieverse.
- Transcendance de l'existence = Monter et recommencer.
- Le cookie doré apparaît aléatoirement.
- Attention à la grand-mère : rébellion potentielle et apocalypse. Sauvez tout le monde avec un gain économique ou exploitez-les pour créer plus de richesse.
- Petit "code hack" dans la console : Game.Earn(x).
(http://orteil.dashnet.org/cookieclicker/)
Journal d'informations/Historique des versions
- Sauvegarde en toute sécurité
- Style d'affichage du curseur
- Fonctionnalité d'import/export : récupérer une sauvegarde d'une ancienne version (désactivée au bout d'une semaine)
- Bouton Vendre
- Cookie doré aléatoire (comment déterminer sa fréquence)
- Statistiques de clics
- Cliquer augmente
- Mécontentement de grand-mère et apocalypse -> créatures engendrées qui consomment des cookies
- Section du menu Statistiques pour les mises à niveau et les réalisations
- Réalisations saveur lait -_-
- Menu d'options :
- Général : sauvegarde + sauvegarde automatique, export/import, wipe save ;
- Paramètres : volume, graphismes soignés, sons... ce sont autant de bonus.
Derrière le code (enquêté avec l'inspecteur)
- Structure HTML (ce que l'on pourrait retenir pour l'apparence) :
- Head : tous les liens vers les styles et scripts (le Titre clignote...)
- Corps :
- Pas d'emballage de bannière
- Topbar : copyright et lien vers les réseaux sociaux (comme un pied de page mais en haut de la page). Nous devrons certainement inclure les éléments de droits d'auteur avec nos noms, cette année, et des liens vers nos pages de destination (?).
- Div id:"game" : la section réelle du jeu.
- Les sections sont sous la balise "section", et ont leurs propres noms en fonction de leur position (gauche, droite, milieu) + séparateurs.
- Ancres : ont-elles leur propre type de classe ? Recherchez-le.
- Ancrage de cookie = cookie cliquable !!!
- Devons-nous ajouter un nom fictif de boulangerie ?
- Compteur de cookies : x cookies ; par seconde : s.
- Créons-nous un menu avec des options, des statistiques, des informations,... ?
- Aussi, sous-section pour chaque élément de menu ?
- (Problème technique : la page se rafraîchit sans cesse pour mettre à jour les données car il est difficile de rester sur une section pour jeter un oeil au code, avant qu'il ne clignote)
- Balise "b" : à quoi ça sert ?
- Certains divs sont cachés ?
- Rubrique magasin :
- Achat/Vente : ceux-ci doivent être liés aux événements Javascript car leurs valeurs changeront à chaque clic.
- Produits (mines, mamies) : au premier démarrage du jeu, ceux-ci doivent être cachés/obscurcis. (Autre référence intéressante : https://particle-clicker.web.cern.ch/)
Cet après-midi (13h30 - 17h00)
- Rassembler des idées, effectuer des recherches et mutualiser des ressources.
- Quelles difficultés/défis techniques pourraient nous attendre ?
- Comment fonctionne le multiplicateur ?
- Affichez une disposition des sections et de leurs boutons (même si cela n'est pas particulièrement inquiétant).
- Comprendre comment appliquer Javascript.
- Rassemblez des ressources et des informations sur la façon d’écrire le code de chaque bouton.
Quelle est notre méthodologie de travail en groupe ?
Comment chacun de nous travaille-t-il ?
- Seul
- Recherche axée
- Axé sur le codage
- Faisons-nous des "sessions de codage en direct", où nous partageons notre écran et tapons du code, et chacun donne son avis sur place ?
Comment pouvons-nous faire en sorte que ce délai fonctionne pour nous ?
Comment répartissons-nous le travail de codage ? Comment déterminer les tâches suivantes et les déléguer ? Si nous travaillons chacun selon notre temps libre, comment parvenir à nous mettre d'accord et à consolider le code final ?
Décider comment communiquer et partager l’information :
- Sur Discord, salle 4 (chat + appel).
- ... (autres outils de collaboration).
- Certainement Github, les référentiels seront partagés.
Décider des prochaines étapes :
- Terminer la recherche aujourd'hui ?
- Commencer à planifier (+ écrire ?) la structure HTML ? La structure Javascript ?
- Suivons-nous chaque étape à la lettre ?
- C'est décidé, au moins les étapes obligatoires (toutes les entrées et boutons qui ont les fonctions les plus importantes) seront incluses, et les bonus ont été mis de côté pour l'instant (mais pourront être inclus si possible.)
- Ces étapes sont-elles à suivre les unes après les autres, ou certaines en même temps ?
- C'est une question importante à se poser puisque les rôles sont partagés : 2 personnes collaborant sur le backend, 2 personnes pour le frontend.
- Donc, en Javascript, ces étapes seraient-elles distribuées ?
- Lorsqu’il s’agit de construire le projet, dans quelle mesure prenons-nous de l’original et dans quelle mesure nous l’approprions-nous ?
Méthode de travail au quotidien :
- Nous travaillons chacun seul au début et à la fin de la journée, partageons notre code via Discord, puis « validons » tout sur Replit.
Anticiper - la partie évaluation
- Évaluez régulièrement vos progrès et assurez-vous que les fonctionnalités indispensables sont incluses.
- Mettez régulièrement à jour le fichier ReadMe.
- Vers la fin (le dernier jour, ou même pendant le processus de codage), utilisez les outils de validation et de performance (Voir outil de validation Lighthouse et W3C) ; peut-être jeudi.
Les étapes de cet après-midi (14h30 - 16h30)
- Plus de recherches et cartographie des tâches de demain :
- Brigita : recherche et rédaction HTML.
- David : Recherche Javascript.
- Teodora : recherche visuelle et prototypage.
Deuxième jour (26/10)
Réunion du matin à 9h00 :
- Étape 5 terminée.
- Partage de code.
- Problèmes techniques : connecter le HTML avec le Javascript, faire fonctionner correctement les fonctions.
- De plus, les bonus sont destinés aux joueurs, donc les étapes 11 et suivantes sont obligatoires.
- Autoclicker est réalisé par David.
- Multiplicateur réalisé par Brigita ; en attente également.
- Résoudre les problèmes dans les scripts.
Pour ce matin (9h30 - 12h30)
Continuez les étapes assignées. Examinez tous les problèmes. Réunion à 13h30 pour discuter des progrès et résoudre les éventuels problèmes.
Pour cet après-midi (13h30 - 16h30) Téo : rendre le site responsive. Attention : les boutons multiplicateurs doivent également inclure le coût ! + trouver le script pour désactiver certains boutons en fonction de la quantité de cookies. David : partage des fonctions ; fonction de chargement résolue. Brigita : code et fonctions partagés ; problèmes de syntaxe résolus.
Réunion Scrum (16h30 - 17h00)
Qu'a-t-on fait ?
Quels problèmes sont survenus + ont été résolus ?
- Problèmes avec le multiplicateur.
Quelles sont les prochaines étapes ?
Problèmes :
- Comprendre comment centrer les éléments !!!!!!! (J'ai dû me rafraîchir la mémoire, encore une fois).
- Comment désactiver un bouton en utilisant Javascript : difficultés de codage.
- Enregistrer et charger ne fonctionne pas avec le multiplicateur.
- Impossible de continuer à utiliser Sass en raison de problèmes de compilation dans le CSS principal. Revenons donc au style avec Vanilla CSS.
Quels problèmes résoudre demain :
- Boutons Enregistrer et Charger ;
- Obtenez le multiplicateur en incrémentant de 2 (encore) ;
- Activer/désactiver les boutons en fonction des conditions (étape 12) ;
- Bonus : Étape 11.
Troisième jour (27/10)
Réunion du matin (9h00)
Rencontre en soirée (16h45 - 17h00)
Quatrième jour (28/10)
Réunion du matin (9h00 - 9h30)
Ce qu'il faut faire aujourd'hui :
Travail de l'après-midi (13h30 - 16h00)
Résultats =
- Performances = 91 ;
- Accessibilité = 95 ;
- Meilleures pratiques = 100 ;
- Référencement = 92 ;
Reportage post-projet (16h20 - 17h00 et demain 29/10) :
- Problèmes techniques restants : multiplicateur. Sera réexaminé demain.
(29/10)
