Skip to content
Snippets Groups Projects
Commit c5cbeab3 authored by benjamin.sitbon's avatar benjamin.sitbon
Browse files

Talent added

parent b66c0e0b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/font/Arvo-Regular.ttf 0 → 100644
+ 0
− 0
View file @ c5cbeab3
File added
frontend/font/Fonarto XT.ttf 0 → 100644
+ 0
− 0
View file @ c5cbeab3
File added
frontend/font/Fonarto.ttf 0 → 100644
+ 0
− 0
View file @ c5cbeab3
File added
frontend/font/Typo_Round_Regular_Demo.otf 0 → 100644
+ 0
− 0
View file @ c5cbeab3
File added
frontend/js/product.js
+ 65
− 22
View file @ c5cbeab3
......@@ -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";
}
}
......
frontend/menu.css
+ 6
− 2
View file @ c5cbeab3
@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%;
......
frontend/select.css
+ 44
− 37
View file @ c5cbeab3
......@@ -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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment