diff --git a/frontend/img/types/bug.png b/frontend/img/types/bug.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1ff1eb314e0161552608b5f7b107e2cdbc6b59c
Binary files /dev/null and b/frontend/img/types/bug.png differ
diff --git a/frontend/img/types/dark.png b/frontend/img/types/dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..73b6af7c8e3caf19452e930f10b2c028a7c5a709
Binary files /dev/null and b/frontend/img/types/dark.png differ
diff --git a/frontend/img/types/dragon.png b/frontend/img/types/dragon.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b5244a0807bfa70d175213ba03c0f9f5710cf8d
Binary files /dev/null and b/frontend/img/types/dragon.png differ
diff --git a/frontend/img/types/electric.png b/frontend/img/types/electric.png
new file mode 100644
index 0000000000000000000000000000000000000000..09a32470db70ad74798e547f137cb6469e6d9c91
Binary files /dev/null and b/frontend/img/types/electric.png differ
diff --git a/frontend/img/types/fairy.png b/frontend/img/types/fairy.png
new file mode 100644
index 0000000000000000000000000000000000000000..46c94853ca08ef09bbfbbdf5c1633c5369856e7a
Binary files /dev/null and b/frontend/img/types/fairy.png differ
diff --git a/frontend/img/types/fighting.png b/frontend/img/types/fighting.png
new file mode 100644
index 0000000000000000000000000000000000000000..e73cd341a42c16a77399ca62b9ebfe96e67a49a0
Binary files /dev/null and b/frontend/img/types/fighting.png differ
diff --git a/frontend/img/types/fire.png b/frontend/img/types/fire.png
new file mode 100644
index 0000000000000000000000000000000000000000..e391b9cd264430af6749b85b6962527b1ff7aefc
Binary files /dev/null and b/frontend/img/types/fire.png differ
diff --git a/frontend/img/types/flying.png b/frontend/img/types/flying.png
new file mode 100644
index 0000000000000000000000000000000000000000..395eab565eb9007bef51cdb41cbf5f2e14f0dacc
Binary files /dev/null and b/frontend/img/types/flying.png differ
diff --git a/frontend/img/types/ghost.png b/frontend/img/types/ghost.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcdaeec696439b9748cc19383440ffccfab90e83
Binary files /dev/null and b/frontend/img/types/ghost.png differ
diff --git a/frontend/img/types/grass.png b/frontend/img/types/grass.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c48ff534008eed3c2422e1dc37ee7d768d59f75
Binary files /dev/null and b/frontend/img/types/grass.png differ
diff --git a/frontend/img/types/ground.png b/frontend/img/types/ground.png
new file mode 100644
index 0000000000000000000000000000000000000000..fbd1571d9b5545061be0b993cbe4f41d1e66207b
Binary files /dev/null and b/frontend/img/types/ground.png differ
diff --git a/frontend/img/types/ice.png b/frontend/img/types/ice.png
new file mode 100644
index 0000000000000000000000000000000000000000..7af52650e60456b4115f4be44862d4c8e2f9610c
Binary files /dev/null and b/frontend/img/types/ice.png differ
diff --git a/frontend/img/types/normal.png b/frontend/img/types/normal.png
new file mode 100644
index 0000000000000000000000000000000000000000..66862320c6778e6fe91777e91687bd5dc4f86ea6
Binary files /dev/null and b/frontend/img/types/normal.png differ
diff --git a/frontend/img/types/poison.png b/frontend/img/types/poison.png
new file mode 100644
index 0000000000000000000000000000000000000000..defe3dacd644b4b88b88b250517067859b366139
Binary files /dev/null and b/frontend/img/types/poison.png differ
diff --git a/frontend/img/types/psychic.png b/frontend/img/types/psychic.png
new file mode 100644
index 0000000000000000000000000000000000000000..c2e3acf5e143595ff6a1e73ce5a3c71dfdf12d3e
Binary files /dev/null and b/frontend/img/types/psychic.png differ
diff --git a/frontend/img/types/rock.png b/frontend/img/types/rock.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d794d4628df3f7776910469a1d836350800c1f0
Binary files /dev/null and b/frontend/img/types/rock.png differ
diff --git a/frontend/img/types/steel.png b/frontend/img/types/steel.png
new file mode 100644
index 0000000000000000000000000000000000000000..d04c516111955858ab20d66f18c8231f818c8d00
Binary files /dev/null and b/frontend/img/types/steel.png differ
diff --git a/frontend/img/types/water.png b/frontend/img/types/water.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e305f53345aa6bccffa63d5260550e7d284fa1e
Binary files /dev/null and b/frontend/img/types/water.png differ
diff --git a/frontend/js/index.js b/frontend/js/index.js
index f84835b5adb4a327623554f3c68f129de6d52125..73e539498dfe09431c52afb27f5ca7903eaf53b1 100644
--- a/frontend/js/index.js
+++ b/frontend/js/index.js
@@ -124,13 +124,13 @@
stats.then(stat => {
if(stat.types.length > 1){
- types[2*i].src = "img/types/" + stat.types[0].type.name + ".jpg";
- types[(2*i)+1].src = "img/types/" + stat.types[1].type.name + ".jpg";
+ 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";
}
else{
- types[2*i].src = "img/types/" + stat.types[0].type.name + ".jpg";
+ types[2*i].src = "img/types/" + stat.types[0].type.name + ".png";
types[(2*i)+1].style.display = "none";
}
})
diff --git a/frontend/js/product.js b/frontend/js/product.js
index 3cffb9f0a57ec5f1d45d0c7b756b8d5349712f1a..832cf4a919348cb15fcd2a1611aa0dc9f736bbef 100644
--- a/frontend/js/product.js
+++ b/frontend/js/product.js
@@ -57,7 +57,7 @@
}
}
- function getMoves(stat,description,abilities,selection,choice){
+ function getMoves(infos,stat,description,abilities,selection,choice){
@@ -69,25 +69,36 @@
let ability = document.createElement("div");
ability.className = "ability";
+ let txt = document.createElement("p");
+ txt.innerHTML = data.moves[i].move.name;
let type = document.createElement("img");
+ type.className = "type";
+
let dmgclass = document.createElement("img");
dmgclass.className = "dmgclass";
get(data.moves[i].move.url).then(move => {
- type.src = "img/types/" + move.type.name +".jpg";
+ type.src = "img/types/" + move.type.name +".png";
dmgclass.src = "img/types/" + move.damage_class.name + ".png";
ability.onclick = function(){
+ infos.children[0].src = type.src;
+ infos.children[0].className = "type";
+ infos.children[1].src = dmgclass.src;
+ infos.children[1].className = "dmgclass";
+
+
description.innerHTML = move.effect_entries[0].effect;
stat.innerHTML = "PP: " + move.pp + " - Power: " + move.power + " - Accuracy: " + move.accuracy;
+ infos.appendChild(stat);
+
}
})
- let txt = document.createElement("p");
- txt.innerHTML = data.moves[i].move.name;
+
ability.appendChild(type);
ability.appendChild(dmgclass);
@@ -101,14 +112,20 @@
}
- function getFirstMove(stat,description,pokemon){
+ function getFirstMove(infos,stat,description,pokemon){
pokemon.then(data =>{
get(data.moves[0].move.url).then(move => {
+ infos.children[0].src = "img/types/" + move.type.name +".png";
+ infos.children[0].className = "type";
+ infos.children[1].src = "img/types/" + move.damage_class.name + ".png";
+ infos.children[1].className = "dmgclass";
+
description.innerHTML = move.effect_entries[0].effect;
stat.innerHTML = "PP: " + move.pp + " - Power: " + move.power + " - Accuracy: " + move.accuracy;
+ infos.appendChild(stat);
});
});
@@ -127,14 +144,22 @@
let description = document.createElement("div");
description.className = "description";
-
+
+
+ let infos = document.createElement("div");
+ infos.className = "infos";
+
+ infos.appendChild(document.createElement("img"));
+ infos.appendChild(document.createElement("img"));
+
let stats = document.createElement("p");
let desc = document.createElement("p");
- getFirstMove(stats,desc,selection);
- getMoves(stats,desc,abilities,selection,choice);
+ getFirstMove(infos,stats,desc,selection);
+ getMoves(infos,stats,desc,abilities,selection,choice);
+
+ description.appendChild(infos);
- description.appendChild(stats);
description.appendChild(desc);
diff --git a/frontend/select.css b/frontend/select.css
index 817ec1efd3812856d38e6724255f7efeb7cf6a55..021856774e3bddc77181dac056cd9730669b878d 100644
--- a/frontend/select.css
+++ b/frontend/select.css
@@ -57,6 +57,7 @@ main {
text-align: center;
color: rgb(11, 2, 61);
border-radius: 10px 10px;
+
}
button {
@@ -98,29 +99,18 @@ button:hover {
.typebox {
display: flex;
-
justify-content: center;
width:100%;
- height: 35px;
+ height: 25px;
}
-.type {
-
- width: 40px;
- height: 20px;
- padding-top: 0.5vh;
- margin-left: 5px;
- margin-right: 2px;
-
-}
.container {
display: flex;
flex-direction: row;
-
- width: 40vw;
+ width: 50vw;
margin-left: 2.5vw;
margin-right: 2.5vw;
@@ -131,7 +121,7 @@ button:hover {
font-size: 2vh;
font-weight: bold;
width: 70%;
- height: 15vw;
+ height: 20vw;
border: solid 2px rgba(150, 150, 150, 1);
background-color: rgba(240, 240, 240, 0.5);
@@ -141,7 +131,7 @@ button:hover {
margin-top: 1%;
margin-left: 1%;
- border-bottom: 1px solid rgba(150, 150, 150, 1);
+
}
@@ -162,7 +152,7 @@ button:hover {
display: block;
margin-right: 1%;
- width: 40%;
+ width: 35%;
height: 30vw;
border: solid 2px rgba(150, 150, 150, 1);
background-color: white;
@@ -181,7 +171,7 @@ button:hover {
display: flex;
flex-direction: row;
- height: 2.5vh;
+ height: 2.6vh;
margin-left: 0.5%;
margin-top: 0.5%;
margin-bottom: 1%;
@@ -209,19 +199,6 @@ button:hover {
}
-.ability > img {
-
- width: 40px;
- height: 100%;
-}
-
-.dmgclass{
-
- position: relative;
- left: 1%;
-}
-
-
.shiny {
font-size: 1.5vh;
font-weight: bold;
@@ -237,4 +214,40 @@ button:hover {
border-radius: 2px 2px;
overflow-y: hidden;
+}
+
+.type{
+ padding-top: 0;
+ width: 68px;
+ height: 20px;
+ margin-left: 5px;
+ margin-right: 2px;
+}
+
+.dmgclass{
+
+ position: relative;
+ left: 1%;
+ width: 48px;
+ height: 21px;
+}
+
+.infos {
+ display: flex;
+ flex-direction: row;
+ border-bottom: 2px rgba(150, 150, 150, 1) solid;
+
+}
+
+
+.infos > img {
+
+ margin-top: 0.5vh;
+
+}
+
+.infos > p {
+
+ margin-left: 1vh;
+
}
\ No newline at end of file
diff --git a/frontend/style.css b/frontend/style.css
index cdfeb364d54d6a998d35c1c5ad12e25a206f728a..c58ecb538edf85cd787d72957fe6e4cc9783779e 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -127,7 +127,8 @@ button:hover {
.type {
- width: 30px;
+
+ width: 51px;
height: 15px;
padding-top: 0.5vh;
margin-left: 5px;