From 04db606c980a9875e50d0a350e6900a2791ddc56 Mon Sep 17 00:00:00 2001
From: "Benjamin.sitbon" <benjamin.sitbon@etu.hesge.ch>
Date: Sun, 9 May 2021 23:55:23 +0200
Subject: [PATCH] commentaires js
---
frontend/js/bag.js | 15 +++++++++++----
frontend/js/index.js | 24 ++++++++++++++----------
frontend/js/val.js | 3 +++
frontend/shop.html | 2 +-
4 files changed, 29 insertions(+), 15 deletions(-)
diff --git a/frontend/js/bag.js b/frontend/js/bag.js
index 5ad9ff3..5ff8dee 100644
--- a/frontend/js/bag.js
+++ b/frontend/js/bag.js
@@ -1,3 +1,4 @@
+//Créer une type qui contient 2 img de types pokemons
function typeBox(src1,src2){
var typeBox = document.createElement("div");
@@ -12,6 +13,7 @@ function typeBox(src1,src2){
type1.src = src1;
if(src2 == ""){
+ //si le pokemon n'a qu'un seul type on n'affiche rien pour la 2em image
type2.style.display = "none";
}
else{
@@ -27,6 +29,7 @@ function typeBox(src1,src2){
}
+//Créer une croix à l'article qui permet de le supprimer de la liste des articles dans le sac et dans le storage
function toDeleteArticle(poke,name){
let x = document.createElement("img");
x.className = "x";
@@ -45,6 +48,7 @@ function toDeleteArticle(poke,name){
}
+//Créer un article
function createArticle(name,number,type1,type2,attacks,talent,shiny){
let container = document.getElementById("container");
@@ -57,6 +61,7 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){
let price = document.createElement("p");
price.className = "price";
+ //On change le sprite du pokemon si il est shiny
if(shiny == 1){
img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/" + number + ".png";
price.innerHTML = "4.00 CHF";
@@ -77,11 +82,12 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){
let typebox = typeBox(type1,type2);
-
+ //Champ attack pour préciser quels sont les attaques
let title = document.createElement("p");
title.className = "name";
title.innerHTML = "Attacks:";
+ //Pareil pour le talent
let talentName = document.createElement("p");
talentName.className = "text";
talentName.innerHTML = talent;
@@ -92,11 +98,11 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){
typeAndName.appendChild(typebox);
pokemon.appendChild(x);
-
pokemon.appendChild(img);
pokemon.appendChild(typeAndName);
pokemon.appendChild(title);
+ //Box contenant les attaques afin de mieux les visualiser
let box = document.createElement("div");
box.className = "attackbox";
@@ -119,18 +125,19 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){
}
+//Permet de récupérer un élément dans le storage par rapport à son index
function getItem(index){
return localStorage.getItem(localStorage.key(index));
}
-
+//On affiche le nombre d'article actuellement dans le sac
document.getElementById("number").innerHTML = localStorage.length-1;
for(let i = 0; i<localStorage.length; i++){
-
+ //On ignore la clef oui qui une clef supplémentaire destiné à une autre utilisation
if(localStorage.key(i)=="oui"){
continue
}
diff --git a/frontend/js/index.js b/frontend/js/index.js
index 20d3d46..36d6dd6 100644
--- a/frontend/js/index.js
+++ b/frontend/js/index.js
@@ -1,4 +1,4 @@
-
+ //récupère une liste de tous les noms des pokemons
function Pokemons(){
return fetch("https://pokeapi.co/api/v2/pokemon/?limit=900")
@@ -7,6 +7,7 @@
}
+ //effectue une requête
function get(that) {
return fetch(that)
@@ -15,7 +16,7 @@
}
-
+ //Créer une type qui contient 2 img de types pokemons
function typeBox(){
var typeBox = document.createElement("div");
@@ -35,6 +36,7 @@
}
+ //Creer un bouton spécifique (rien de spécial à comprendre)
function createStyleButton(){
let cssButton = document.createElement("div");
@@ -62,10 +64,9 @@
}
+ //Génère toutes les boxs de la page du shop, prend un intervalle de valeur car la page génère au fur et à mesure les pokemons (presque 900) pour ne pas trop charger la page
function boxGenerator(init,number){
-
-
for(let i = init; i<init+number; i++){
var tab = document.getElementsByClassName("tab");
@@ -83,7 +84,7 @@
var button = createStyleButton();
button.id = i;
-
+ //Lorsqu'on clique on enregistre la séléction et les éléments important du pokemon
button.onclick = function(){
let pokemon = document.getElementById(i).children;
@@ -113,7 +114,7 @@
}
-
+ //Prend une intervalle pour les mêmes raison que box generator et récupère les pokemons de l'intervalle pour les ajouter au box de la page
function pokedex(init,number){
let pokemons = Pokemons();
@@ -122,6 +123,7 @@
pokemons.then(Poks => {
+ //classe contenant le noms des pokemons
let names = document.getElementsByClassName("css-button-text");
let types = document.getElementsByClassName("type");
@@ -129,16 +131,19 @@
for(let i = init; i<init+number; i++){
names[i].innerHTML = Poks.results[i].name;
+ //Ajout d'un élément before pour donner le numéro pokedex du pokemon
let before = document.createElement("p");
before.innerHTML = i+1;
before.className ="before";
names[i].before(before);
+ //On va récupérer depuis l'API l'url menant aux informations précise du pokemon afin d'avoir accès à ses types
let stats = get(Poks.results[i].url);
stats.then(stat => {
+ //Parcours 2 par 2 des types
if(stat.types.length > 1){
types[2*i].src = "img/types/" + stat.types[0].type.name + ".png";
types[(2*i)+1].src = "img/types/" + stat.types[1].type.name + ".png";
@@ -155,6 +160,7 @@
}
+ //Fonction qui permet la recherche du pokemon
function search() {
var input, filter, txtValue, names, boxs;
@@ -178,10 +184,8 @@
}
}
-
- function scrollEffect(){
-
-
+ //Génération au fur et à mesure des pokemons pour ne pas rendre le chargement de la page trop long
+ function loadEffect(){
let main = document.getElementsByTagName("main")[0].scrollTop;
for(let i = 1; i<45; i++){
diff --git a/frontend/js/val.js b/frontend/js/val.js
index 018f4de..b569a00 100644
--- a/frontend/js/val.js
+++ b/frontend/js/val.js
@@ -1,6 +1,9 @@
+
+//Affiche le nombre d'article dans le sac qui sont enregistré dans le local storage
if(localStorage.length > 0){
let after = document.createElement("p");
after.className = "after";
+ //On soustrait de -1 car il y'a un élément dans le storage qui n'est pas un article
after.innerHTML = localStorage.length -1;
let bag = document.getElementById("sac");
diff --git a/frontend/shop.html b/frontend/shop.html
index 96b7692..b40ff5f 100644
--- a/frontend/shop.html
+++ b/frontend/shop.html
@@ -10,7 +10,7 @@
<link rel="stylesheet" href="css/button.css">
<title>Pokeshop</title>
</head>
-<body onload="scrollEffect()" >
+<body onload="loadEffect()" >
<nav>
<div class="shop">
--
GitLab