diff --git a/frontend/js/bag.js b/frontend/js/bag.js index 5ad9ff3e4fa43fa92a0d0bebceb40183d9665244..5ff8deebccadbd4cdf3ebe2ac784855ba02aa853 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 20d3d461a08b2eb8164b4ae642b8090a0a824142..36d6dd6f04ae1df3a2f4510b6a09f5d0be013069 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 018f4de1bfed2f727135b09043eb9c13fa32bf8d..b569a00ce82cffa26577179a1963ecbe71fa8090 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 96b7692820f5da5c184882931804950a69840d32..b40ff5f8ab9a88101ab8c975169f5e9bdb5e1761 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">