From 462024a7dbf4f4c8476fbfd886c3a07c9474b4c0 Mon Sep 17 00:00:00 2001
From: "benjamin.sitbon" <benjamin.sibon@etu.hesge.ch>
Date: Thu, 6 May 2021 16:24:20 +0200
Subject: [PATCH] Mise en place du sac pour les achats
---
frontend/js/product.js | 66 +++++++++++++++++++++++++++++++++++-------
frontend/select.css | 36 ++++++++++++++++-------
2 files changed, 81 insertions(+), 21 deletions(-)
diff --git a/frontend/js/product.js b/frontend/js/product.js
index 05d7264..c03977c 100644
--- a/frontend/js/product.js
+++ b/frontend/js/product.js
@@ -1,4 +1,10 @@
let talentnb = 0;
+ /** Création de la box du pokemon */
+ let data = localStorage.getItem("oui").split(',');
+ //Nom du pokemon
+ let pokemon = data[0];
+ //Numéro du pokedex
+ let number = data[3];
function typeBox(src1,src2){
@@ -45,6 +51,41 @@
choice.appendChild(ability);
choice.style.display = "block";
}
+ if(choice.childNodes.length == 4){
+
+ let add = document.createElement("button");
+ add.innerHTML = "Add to Cart";
+
+ let after = document.createElement("p");
+ after.className = "after";
+
+ add.onclick = function(){
+
+ let talent = document.getElementsByClassName("talent")[0].children[0].children[0].innerHTML;
+ let attack1 = choice.children[0].children[2].innerHTML;
+ let attack2 = choice.children[1].children[2].innerHTML;
+ let attack3 = choice.children[2].children[2].innerHTML;
+ let attack4 = choice.children[3].children[2].innerHTML;
+
+ newData = [pokemon,number,data[1],data[1],attack1,attack2,attack3,attack4,talent];
+
+ localStorage.setItem(pokemon,newData);
+ document.getElementById("sac");
+
+ for(let i = 0; i<localStorage.length; i++){
+ console.log(localStorage.getItem(localStorage.key(i)));
+ }
+
+ after.innerHTML = localStorage.length-1;
+ sac.after(after);
+ window.location.href = "shop.html";
+
+ }
+
+ document.getElementsByClassName("box")[0].appendChild(add);
+
+
+ }
}
}
@@ -159,7 +200,7 @@
leftArrow.onclick = function() {
if(talentnb > 0){
talentnb -= 1;
- name.innerHTML = data.abilities[talentnb].ability.name;
+ name.innerHTML = "Talent: " + data.abilities[talentnb].ability.name;
get(data.abilities[talentnb].ability.url).then(ability => {
text.innerHTML = ability.effect_entries[1].effect;
@@ -174,7 +215,7 @@
rightArrow.onclick = function() {
if(talentnb < data.abilities.length-1){
talentnb += 1;
- name.innerHTML = data.abilities[talentnb].ability.name;
+ name.innerHTML = "Talent: " + data.abilities[talentnb].ability.name;
get(data.abilities[talentnb].ability.url).then(ability => {
text.innerHTML = ability.effect_entries[1].effect;
@@ -187,7 +228,7 @@
}
}
- name.innerHTML = data.abilities[0].ability.name;
+ name.innerHTML = "Talent: " + data.abilities[0].ability.name;
get(data.abilities[0].ability.url).then(ability => {
text.innerHTML = ability.effect_entries[1].effect;
@@ -204,6 +245,9 @@
}
+
+
+
function addToDescription(description,infos,text){
description.appendChild(infos);
description.appendChild(text);
@@ -263,15 +307,14 @@
main.appendChild(container);
}
+
+
+
function gotSelect(){
- /** Création de la box du pokemon */
- let data = localStorage.getItem("oui").split(',');
- let pokemon = data[0];
- let number = data[3];
console.log(data);
let main = document.getElementById("selected");
@@ -323,23 +366,24 @@
let choice = document.createElement("div");
choice.className = "choice";
-
+
box.appendChild(link);
box.appendChild(typeBox(data[1],data[2]));
box.appendChild(name);
box.appendChild(button);
box.appendChild(choice);
+
main.appendChild(box);
/** Création des box des capacités */
displayOfAbilities(main,selection,choice);
-
- }
-
+
+
+ }
gotSelect();
\ No newline at end of file
diff --git a/frontend/select.css b/frontend/select.css
index 342e428..43620ea 100644
--- a/frontend/select.css
+++ b/frontend/select.css
@@ -17,13 +17,14 @@ main {
display: flex;
flex-direction: column;
width: 25vw;
- height: 30vw;
+ height: 32vw;
border-radius: 20px 20px;
box-shadow:inset 2px 2px 10px 0px rgba(255,255,255,.5), 2px 2px 10px 0px rgba(0,0,0,.1), 2px 2px 10px 0px rgba(0,0,0,.1);
margin-left: 2.5vw;
margin-right: 2.5vw;
margin-top: 2.5vh;
+ margin-bottom: 2.5vh;
}
@@ -56,20 +57,21 @@ main {
}
button {
- width: 50%;
+
+ margin-top: 5%;
position: relative;
left: 50%;
transform: translateX(-50%);
border: none;
- background-image: url(img/poke.svg);
- background-color: rgba(0, 0, 0, 0);
- font-size: small;
- width: 15.2%;
- height: 15.2%;
+ font-size: 0.75vw;
+ width: 20%;
+ height: 10%;
transition: 0.1s linear;
outline: none;
cursor: pointer;
-
+ background-color: deepskyblue;
+ color: white;
+ border-radius: 20px 20px 20px 20px;
}
@@ -127,7 +129,7 @@ button {
}
.talent {
- height: 30%;
+ height: 40%;
margin-top: 1vh;
box-shadow:inset 2px 2px 10px 0px rgba(255,255,255,.5), 2px 2px 10px 0px rgba(0,0,0,.1), 2px 2px 10px 0px rgba(0,0,0,.1);
border-radius: 20px 20px;
@@ -276,4 +278,18 @@ button {
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg) translateY(-100%);
- }
\ No newline at end of file
+ }
+
+ .after{
+
+
+ font-size: small;
+ text-align: center;
+ background-color: rgba(255,27,0,1);
+ width: 2%;
+ position: relative;
+ left:85%;
+ transform: translateX(-50%);
+ color:white;
+ border-radius: 20px 20px;
+}
\ No newline at end of file
--
GitLab