diff --git a/frontend/font/Arvo-Regular.ttf b/frontend/font/Arvo-Regular.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..d8d0ec890158d20a439e5ea12e1e7ac7e5213e89
Binary files /dev/null and b/frontend/font/Arvo-Regular.ttf differ
diff --git a/frontend/font/Fonarto XT.ttf b/frontend/font/Fonarto XT.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..35ea1a85baed93ee2b0137faaf2c082e6542f3e5
Binary files /dev/null and b/frontend/font/Fonarto XT.ttf differ
diff --git a/frontend/font/Fonarto.ttf b/frontend/font/Fonarto.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..5d5da2bf5c06114c4267c30ee1466f84f8549cd8
Binary files /dev/null and b/frontend/font/Fonarto.ttf differ
diff --git a/frontend/font/Typo_Round_Regular_Demo.otf b/frontend/font/Typo_Round_Regular_Demo.otf
new file mode 100644
index 0000000000000000000000000000000000000000..b8d854cdf81ee4a9b1ff860bf3197e0d543cf5aa
Binary files /dev/null and b/frontend/font/Typo_Round_Regular_Demo.otf differ
diff --git a/frontend/js/product.js b/frontend/js/product.js
index 832cf4a919348cb15fcd2a1611aa0dc9f736bbef..b1717b9aac6998896a5943485a5afcb6574f1b69 100644
--- a/frontend/js/product.js
+++ b/frontend/js/product.js
@@ -40,10 +40,11 @@
ability.ondblclick = function(){
if(choice.childNodes.length < 4){
-
selectedAbility(ability,choice,abilities);
choice.appendChild(ability);
+ choice.style.display = "block";
}
+
}
}
@@ -53,19 +54,19 @@
choiceAbility(ability,choice,abilities);
abilities.appendChild(ability);
+ if(choice.childNodes.length < 1){
+ choice.style.display = "none";
+ }
}
}
function getMoves(infos,stat,description,abilities,selection,choice){
-
-
selection.then(data =>{
for(let i = 0; i<data.moves.length; i++){
-
let ability = document.createElement("div");
ability.className = "ability";
@@ -97,8 +98,6 @@
}
})
-
-
ability.appendChild(type);
ability.appendChild(dmgclass);
@@ -133,11 +132,59 @@
+ function getTalent(talent,pokemon){
+
+ let title = document.createElement("p");
+ title.style.paddingLeft = "2%";
+ title.className = "infos";
+
+ let text = document.createElement("p");
+ text.className = "text";
+
+ pokemon.then(data =>{
+ title.innerHTML = data.abilities[0].ability.name;
+
+ get(data.abilities[0].ability.url).then(ability => {
+ text.innerHTML = ability.effect_entries[1].effect;
+ });
+ });
+
+ talent.appendChild(title);
+ talent.appendChild(text);
+
+ }
+
+ function addToDescription(description,infos,text){
+ description.appendChild(infos);
+ description.appendChild(text);
+ }
+
+ function addToDescAndTalent(descAndTalent,description,talent){
+ descAndTalent.appendChild(description);
+ descAndTalent.appendChild(talent);
+ }
+
+
+ function addToContainer(container,abilities,descAndTalent){
+ container.appendChild(abilities);
+ container.appendChild(descAndTalent);
+ }
+
+
+
+
function displayOfAbilities(main,selection,choice){
let container = document.createElement("div");
container.className = "container";
+ let descAndTalent = document.createElement("div");
+ descAndTalent.className = "container2";
+
+ let talent = document.createElement("div");
+ talent.className = "talent";
+
+
let abilities = document.createElement("div");
abilities.className = "abilities";
@@ -145,7 +192,6 @@
description.className = "description";
-
let infos = document.createElement("div");
infos.className = "infos";
@@ -153,21 +199,18 @@
infos.appendChild(document.createElement("img"));
let stats = document.createElement("p");
- let desc = document.createElement("p");
-
- getFirstMove(infos,stats,desc,selection);
- getMoves(infos,stats,desc,abilities,selection,choice);
+ let text = document.createElement("p");
+ text.className = "text";
- description.appendChild(infos);
-
- description.appendChild(desc);
+ getFirstMove(infos,stats,text,selection);
+ getMoves(infos,stats,text,abilities,selection,choice);
+ getTalent(talent,selection);
+ addToDescription(description,infos,text);
+ addToDescAndTalent(descAndTalent,description,talent);
+ addToContainer(container,abilities,descAndTalent);
- container.appendChild(abilities);
- container.appendChild(description);
-
main.appendChild(container);
-
}
@@ -203,14 +246,14 @@
if(img.src == "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png"){
img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/" + number + ".png";
- button.style.backgroundColor = "black"
- button.style.color = "white";
+ button.style.backgroundColor = "rgba(200, 200, 200)"
+ button.style.color = "rgb(255, 83, 64)";
}
else{
img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png"
- button.style.backgroundColor = "white"
- button.style.color = "black";
+ button.style.backgroundColor = "rgb(255, 83, 64)"
+ button.style.color = "white";
}
}
diff --git a/frontend/menu.css b/frontend/menu.css
index 1ca252ff7f1c58135d22a2dfc1a0a8f1b366d7c9..db88eb7a8fc1506f90b9ba4f37db25e2fd26c6fa 100644
--- a/frontend/menu.css
+++ b/frontend/menu.css
@@ -1,6 +1,6 @@
@font-face {
font-family: gb;
- src: url(font/PokemonGb-RAeo.ttf);
+ src: url(font/Arvo-Regular.ttf);
}
@@ -14,7 +14,7 @@
padding: 0;
list-style: none;
overflow-x: hidden;
- font-family: 'Titillium Web', sans-serif;
+ font-family: gb;
}
@@ -26,6 +26,10 @@
background-color: rgb(0, 0, 0);
}
+main {
+ font-family: gb;
+}
+
html {
font-size: 50%;
diff --git a/frontend/select.css b/frontend/select.css
index 021856774e3bddc77181dac056cd9730669b878d..b609513c78da33757625aef237ebade7a148c7b3 100644
--- a/frontend/select.css
+++ b/frontend/select.css
@@ -20,7 +20,7 @@ main {
height: 30vw;
background-color: rgb(255, 255, 255);
border: gray 2px groove;
- border-radius: 5px 5px;
+
margin-left: 2.5vw;
margin-right: 2.5vw;
}
@@ -32,8 +32,8 @@ main {
transform: translateX(-50%);
width: 25vh;
height: 25vh;
- border: gray 2px groove;
- border-radius: 5px;
+
+
overflow-y: hidden;
}
@@ -49,9 +49,6 @@ main {
.names {
-
-
- font-weight: bold;
margin-bottom: 2.5%;
font-size: 3vh;
text-align: center;
@@ -110,31 +107,44 @@ button:hover {
.container {
display: flex;
flex-direction: row;
- width: 50vw;
+ width: 60vw;
margin-left: 2.5vw;
margin-right: 2.5vw;
}
+.container2 {
+ display: flex;
+ flex-direction: column;
+ width: 70%;
+}
+
.description {
font-size: 2vh;
- font-weight: bold;
- width: 70%;
- height: 20vw;
+
+ height: 70%;
border: solid 2px rgba(150, 150, 150, 1);
background-color: rgba(240, 240, 240, 0.5);
}
-.description > p {
+.talent {
+ height: 30%;
+ margin-top: 1vh;
+ border: solid 2px rgba(150, 150, 150, 1);
+ background-color: rgba(240, 240, 240, 0.5);
+}
- margin-top: 1%;
- margin-left: 1%;
-
+.text {
+ font-size: 2vh;
+ padding-top: 1%;
+ padding-left: 2%;
+ padding-right: 2%;
}
+
.choice {
position: relative;
left: 50%;
@@ -142,7 +152,7 @@ button:hover {
display: block;
margin-top: 2%;
width: 15vw;
- height: 11.5vh;
+ display: none;
overflow-y: hidden;
border: gray 2px groove;
@@ -171,12 +181,11 @@ button:hover {
display: flex;
flex-direction: row;
- height: 2.6vh;
+ height: 2.5vh;
margin-left: 0.5%;
- margin-top: 0.5%;
- margin-bottom: 1%;
+ padding-top: 1%;
+ padding-bottom: 1%;
background-color: rgb(255, 255, 255);
- border-radius: 2px 2px;
text-align: center;
overflow-y: hidden;
cursor: pointer;
@@ -192,34 +201,34 @@ button:hover {
position: relative;
- left: 15%;
+ left: 10%;
overflow-y: hidden;
font-size: 1.8vh;
- font-weight: bold;
+
}
.shiny {
font-size: 1.5vh;
- font-weight: bold;
+
position: relative;
left: 50%;
transform: translateX(-50%);
width: 15%;
- background-color: white;
- height: 2.2vh;
- border: gray groove 2px;
+ background-color: rgb(255, 83, 64);
+ height: 2vh;
+ color: white;
text-align: center;
cursor: pointer;
- border-radius: 2px 2px;
+
overflow-y: hidden;
}
.type{
padding-top: 0;
- width: 68px;
- height: 20px;
+ width: 60px;
+ height: 15px;
margin-left: 5px;
margin-right: 2px;
}
@@ -228,26 +237,24 @@ button:hover {
position: relative;
left: 1%;
- width: 48px;
- height: 21px;
+ width: 40px;
+ height: 15px;
}
.infos {
display: flex;
flex-direction: row;
- border-bottom: 2px rgba(150, 150, 150, 1) solid;
+ border-bottom: 2px rgb(177, 177, 177) solid;
+ margin-top: 1%;
+ padding-bottom: 1%;
+ font-size: 2vh;
}
-.infos > img {
-
- margin-top: 0.5vh;
-
-}
.infos > p {
- margin-left: 1vh;
+ margin-left: 4%;
}
\ No newline at end of file